Rýchlosť a spoľahlivosť webovej stránky pre A-technology

Rýchlosť a spoľahlivosť webovej stránky pre A-technology

Jedným z našich spokojných zákazníkov je aj A-technology. Realizovali sme pre nich kompletne nový návrh webovej stránky – od grafického návrhu, cez tému a plugin na mieru, až po plne funkčný web. Prečítajte si, ako sme postupovali pri tvorbe webovej stránky, aké funkcionality sme vytvorili a ako sme dosiahli rýchlosť a spoľahlivosť ich webovej stránky. 

A-technology 

Spoločnosť A-technology už od roku 2006 realizuje riešenie systémov vykurovania a chladenia pri výstavbe a prevádzke komerčných a obytných budov. Ponúkajú taktiež systémy technologického ohrevu a chladenia ako napríklad solárne systémy, klimatizácie, či podlahové vykurovanie. 

Pre A-technology sme vytvorili nový návrh webovej stránky a spolu s ním sme do webu zakomponovali rôzne zaujímavé funkcionality podľa želania klienta.

Ako sme postupovali pri tvorbe webovej stránky?

  1. Najdôležitejšia je komunikácia s klientom. V prvom rade sme si spoločne ujasnili predstavu a vydefinovali si, čo klient požaduje.
  2. Náš grafik Jarda vytvoril wireframy v ktorých definoval konkrétne prvky, ktoré bude webová stránka obsahovať. Následne dodal grafický návrh klientovi, ktorý sme spoločne prediskutovali.
  3. Nasledovala samotná tvorba témy a pluginu na mieru podľa požiadaviek klienta, o ktorú sa postarali developeri ja (Daniel) a Zbyněk.
  4. Po vytvorení stránky bola stará webová stránka nahradená novou – rýchlejšou a spoľahlivejšou
  5. Postupne sme pridávali ďalšie funkcionality a predávali nové zmeny klientovi. 

Aké funkcionality sme robili pre A-technology?

  • Komunikácia s externým servisom pre objednávku servisu

Zabezpečili sme okamžité riešenie požiadaviek klientov vďaka napojeniu formulára priamo na dodávateľa. Dodávateľ dostane vyplnený formulár priamo do jeho interného systému HELIOS cez API, vďaka čomu môže automaticky poskytnúť žiadaný servis klientovi, bez zbytočných prestrojov a zároveň si môže pracovník servisu naplánovať efektívne pracovný deň bez zbytočne najazdených kilomentrov.

  • Automatické vypĺňanie adresy 

Súčasťou formulára je aj automatické vyplnenie adresy na základe zvoleného miesta na mape vo formulároch, čo ušetrí čas.

  • Výpočet času čítania článku

Každá aktualita obsahuje informáciu o tom, koľko času zaberie čítanie článku. Vďaka tejto funkcionalite čitateľ môže očakávať, ako dlho bude na stránke a v konečnom dôsledku to môže prispieť k zníženiu miery opúšťania stránky čitateľom.

  • Prezentačné stránky

Ide o tradičnejšie, no veľmi dôležité funkcionality ako referencie, používané technológie, informačné stránky, či blog.

  • Kalkulačka

Vypočíta predbežnú cenu objednávky v € a CZK, na základe zadaných technológií, ktoré si zákazník želá aby služba obsahovala. Táto funkcionalita sa pre klienta momentálne pripravuje.

Rýchla a spoľahlivá webová stránka

Rýchlosť

  • Používame len nutné minimum javascriptu.
  • Štýlovanie (css) je v téme rozdelené tak, aby sa načítalo len to, čo je potrebné pre danú stránku.
  • Lazy load médií– načítavanie obrázkov atď. neblokuje prehliadač a postupne sa donačítavajú, aby bola webová stránka čo najskôr interaktívna.
  • Tvoríme kód s dôrazom na výkon stránky.
  • Využívame čo najmenej pluginov tretích strán, ktoré bežia pri načítavaní stránky.
  • Používame caching, ktorý výrazne urýchľuje načítavanie stránok.
Rýchla webová stránka

Spoľahlivosť

  • Pri tvorbe webových stránok používame len overené a otestované pluginy. O väčšinu funkcionalít sa starajú developeri, čím sa limituje závislosť na tretích stranách. Prípadné problémy preto môžeme riešiť priamo.
  • Všetky pluginy sú pravidelne updatované kvôli opravám chýb a bezpečnostným dieram.
  • Pred tým, ako čokoľvek pridáme na produkčný server, to otestujeme na stagingu.
  • Pravidelne monitorujeme stav serverov.

Možnosť pridania funkcií na základe požiadavky klienta

Na modifikovateľnosť a rozšíriteľnosť myslíme pri všetkých nových funkcionalitách. Vytvorili sme custom plugin a tému na Sage, ktoré majú prehľadnú štruktúru umožňujúcu pokračovať ďalej vo vývoji. Jednoducho môžeme pridávať nové funckie, pretože počítame s tým, že klient môže kedykoľvek požadovať akúkoľvek zmenu. 

Prístupnosť stránky

Aj pre A- Technology sme vytvorili webovú stránku tak, aby spĺňala všetky kritériá. Web sme spravili čo najviac prístupný, optimalizovaný pre mobily, ktorý je rýchly, bezpečný a spoľahlivý. Ak máte aj vy záujem o takúto webovú stránku, neváhajte sa na nás obrátiť.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Prečo mať v tíme webdesignera

Prečo mať v tíme webdesignera

Vlastné podnikanie poznáte najlepšie. Podeľte sa oň s webovým dizajnérom, ktorý vám navrhne dizajn a za svojou prácou si stojí. Vždy vie čo robí.

Kvalitný designer sa vám oplatí

Sme si vedomí, že svoj business poznáte najlepšie vy sami. Ale to, ako ho najlepšie prezentovať vo webovom prostredí, vie lepšie predsa len designer. Web je špecifický priestor a dobrý designer tento priestor pozná, vie ako sa v ňom ľudia pohybujú, ako čítajú informácie, ako sa rozhodujú, na čo sú zvyknutí. A na tomto základe navrhne váš dizajn.

Kvalitný design
Designer sa oplatí

Na internete je dnes nekonečné množstvo informácií a používatelia ich veľmi rýchlo triedia. Informácie, ktoré neprejdú triediacim procesom upadajú do zabudnutia. Poďme sa pozrieť na to, s čím vám môže designer pomôcť.

Hierarchia a štruktúra

Obsah je pre úspech webu úplne zásadný a je základným kameňom úspechu vašej webovej stránky. Ak ho máte, urobte si fajku, ale ideme ďalej. Dobrý obsah je potrebné tiež správne prezentovať. Niečo iné funguje v tlačenom letáku, či na osobnej schôdzke a niečo iné funguje na webe.

Medzi najväčšie problémy patrí predovšetkým:

  • Snaha prezentovať všetky informácie naraz a hneď.
  • Chýbajúca hierarchia obsahu.
  • Chýbajúce prepojenie informácií v rámci webu.

Keď mi klient na schôdzke tvrdí, že všetko je rovnako dôležité a všetko najviac, spýtam sa ho, aká služba tvorí väčšinu jeho obratu (viď. Paretovo pravidlo). Po chvíli ticha sme konečne na rovnakej lodi (a nie každý vo svojom malom člne). Nie vždy je to takto jednoduché, ale teraz toto prirovnanie spĺňa svoj ilustratívny účel.

Logická štruktúra webu
Logická štruktúra webu

Ako už bolo povedané, designer vie, ako sa užívatelia na webe správajú. Na tomto základe vám pomôže vymyslieť logickú štruktúru webu, a jeho jednotlivých stránok tak, aby sa užívateľom web dobre používal.

Proces tvorby je nasledujúci:

  • Brief, čiže zadanie – Designer sa zoznámi s vašou firmou, jej službami, produktami a hodnotami.
  • Informačná architektúra – V tejto fáze vzniká štruktúra stránok a informácií, ktoré chcete prezentovať na webe.
  • Wireframe, čiže drôtený model – Už vieme, aké stránky bude web obsahovať. Drôtený model potom definuje všetky konkrétne prvky, ktoré sa na webe budú vyskytovať.

Na prvý pohľad sa to tak nemusí zdať, ale tento proces vám ušetrí peniaze. Pri tvorbe webu nie je nič časovo a finančne náročnejšieho, než zmena a korekcia štruktúry, ktoré sa riešia až počas tvorby grafického dizajnu alebo kódovania.

Grafický design

Dizajn na mieru, prináša dve hlavné výhody.

Pokiaľ je váš web vizuálne jedinečný a nezameniteľný, užívatelia si ho lepšie zapamätajú

Jedinečný web
Jedinečný web

Návštevníci si web spoja s vašou firmou a službou, potom si v správnu chvíľu na neho spomenú. Ak postavíte web, napríklad na šablóne, je potrebné počítať s tým, že je ,,tam vonku” pravdepodobne plno ďalších webov, ktoré sú tomu vášmu veľmi podobné!

Webová stránka, ktorej dizajn a vizuálny obsah nie je generický, vzbudzuje u užívateľov väčšiu dôveru

Pre úspech vášho webu je dôveryhodnosť úplne zásadná. Tá je jedným z hlavných rozhodovacích parametrov. Všeobecne sú dáta na internete často anonymné. Užívatelia si chcú overiť, že vám môžu veriť a tiež že nič neskrývate. Aj taká jednoduchá vec, ako fotka kontaktnej osoby, okamžite zvyšuje dôveru.

Je dobré sa vyhnúť fotografiám, ktoré na prvý pohľad nie sú autentické, napríklad kúpené vo fotobanke. A keď už to inak nejde, designer vám pomôže vybrať tie vhodné. Poradí vám aké prvky zlepšia dôveryhodnosť vášho webu.

Prístupnosť webu

Existuje rad princípov a noriem, ktoré pomáhajú zlepšiť používateľom ich cestu k informáciám na webe.

Normy prístupnosti webu, zaisťujú jeho použiteľnosť pre užívateľov s najrôznejšími obmedzeniami. Medzi takéto obmedzenia môžu patriť napríklad vady zraku ale ďalej tiež konkrétne situácie, ako napríklad čítanie informácií na mobilnom zariadení, za silného slnečného svitu.

Medzi základné parametre prístupnosti patria:

  • Dostatočná veľkosť fontov;
  • dostatočný kontrast medzi obsahom a pozadím;
  • obrázky na webe disponujú alternatívnymi textami;
  • a tak ďalej a tak ďalej … .

Oči mám v poriadku, ale keď svieti slnko, valnú väčšinu textu na mobile neprečítam. Designer zabezpečí, aby váš web bol prístupný. Viac o prístupnom webe si môžete prečítať v článku Prístupný web je výhodný pre všetkých.

Prístupný web je výhodný
Prístupný web je výhodný

Záverom

Toto je stručný výpis toho, s čím vám pomôže designer. Kto to myslí v online priestore vážne, mal by využiť služby webového dizajnéra. Vďaka osvedčeným princípom a dobrému grafickému dizajnu sa váš web stane silným obchodným nástrojom. Napíšte nám a radi vám pomôžeme.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Prístupný web je výhodný pre všetkých

Prístupný web je výhodný pre všetkých

Prečo máte web?

Cieľom nie je mať web ale mať web, ktorý funguje. Web má za vás pracovať. Poskytovať informácie, baviť, predávať, učiť… Ľudia chodia na web kvôli informáciám a obsahu. Preto je potrebné užívateľom vyjsť v ústrety.

Príklad pre školy: Rodičia detí vám nebudú telefonovať, koľko sa platí za obedy a kedy ich majú platiť, ak tieto informácie jednoducho nájdu na webe školy. (Ako sme pomohli napríklad škole v Trutnove?)

Príklad pre e-shop: Nemusíte mať informačnú telefónnu linku, ak zákazníci na webe jednoducho nájdu informácie o vrátení tovaru.

Prístupný web je výhodný pre všetkých

Ľudia sú rôzni. Vedeli ste, že:

  • 9 % % mužov je farboslepých (žien iba 0,4 %) [1],
  • viac ako polovica svetovej populácie bude do roku 2050 krátkozraká [2],
  • 10 % populácie trpí DYS [3],
  • 26 % populácie je v rozmedzí 50-70 rokov?

Ale napríklad aj, že:

  • 67% užívateľov si prehliada internet z mobilu alebo tabletu a tento podiel stále rastie [4],
  • hlasové ovládanie je nastupujúci trend.

Ako sa spozná prístupný web?

Na prvý pohľad? Nijako. Prístupnosť tvorcu nijako zásadne neobmedzuje. Vytvorenie úžasného a prístupného webu si nijako neodporuje.

Prístupnosť má veľký dopad na užívateľskú skúsenosť (UX) [5]. Prístupný web nahráva prehľadnosti, umožňuje zákazníkovi rýchlo nájsť informácie a rýchlo sa na webe zorientovať. Prístupný web je tiež bezpečný o čom si môžete prečítať v mojom rozhovore pre NÚKIB – Prečo mať prístupný a bezpečný web?

“Prečo mať prístupný web?” “Pretože na to, že je váš web bez bariér, sa nikdy nikto sťažovať nebude.” Radek Pavlíček [6]

Príklad 1: Kontrastné farby a vhodná veľkosť písma uľahčuje používanie webu z malých obrazoviek alebo v presvetlenej miestnosti.

Príklad 2: Alternatívne texty k obrázkom sú výhodné pre užívateľov s pomalým pripojením k internetu.

Príklad 3: Prepis audia do textu alebo titulky pri videu sú skvelí pomocníci pre užívateľov, ktorí sú v hlučnom prostredí a nemajú k dispozícií slúchadlá.

Najčastejšie problémy webov

Je veľa spôsobov, ako užívateľom hádzať polená pod nohy. Niekedy z tých polien však vzniká neprekonateľná bariéra.

Hádzanie brvien pod nohy, Mladý hlásateľ, IV. ročník, január 1939
Mladý hlásateľ, IV. ročník, január 1939

Pre všetkých užívateľov:

  • orientácia na webe je nepriehľadná a web má zložitú štruktúru, texty sú komplikované a nezáživné,
  • popisy formulárov nie sú dosť informatívne, nefunguje automatické vyplňovanie, na webe chýba vyhľadávanie,
  • na webe nečakane vyskakujú okná,
  • texty odkazov nie sú zmysluplné alebo dostatočne popisné.

Pre užívateľov mobilov:

  • web nie je plne responzívny,
  • klikateľné prvky sú príliš malé alebo moc pri sebe,
  • písmo je málo kontrastné (nie je vidieť na slnku).

Pre seniorov, slabozrakých, krátkozrakých:

  • písmo nie je kontrastné,
  • nevhodné parametre fontu (veľkosť, čitateľnosť písma), odkazy nie sú dostatočne odlíšené a viditeľné.

Pre dyslektikov:

  • pri zväčšení písma sa stráca časť obsahu alebo vzniknú dlhé riadky, ktoré sú ťažko čitateľné
  • celé odstavce sú písané kapitálkami (mimo nadpisov).

Pre ľudí s poruchou pozornosti:

  • web obsahuje hýbajúce sa alebo blikajúce prvky, ktoré strhávajú pozornosť od vlastného obsahu,
  • na pozadí webu hrá zvuk, ktorý sa nedá vypnúť.

Pre čítačky a hlasové ovládanie:

  • chýbajú preskakovacie odkazy a definované oblasti stránky (hlavička, päta, hlavný a vedľajší obsah atď.),
  • navigácia nie je konzistentná (je v rámci webu na rôznych miestach, mení sa obsah apod.),
  • nadpisy a ďalšie sémantické bloky (zoznamy atď.) sú použité zle, obrázky nemajú alternatívne popisy,
  • priložené dokumenty nemajú textovú vrstvu, videá nemajú titulky alebo textový prepis,
  • na webe sú bezprostredne za sebou duplicitné odkazy.

Pre užívateľov z klávesnice:

  • web nie je plne ovládateľný z klávesnice,
  • zameranie (focus) klikateľných prvkov nie je viditeľné alebo je málo kontrastné.

Výzva na záver

Neberte požiadavky na prístupnosť webu ako obmedzenie. A už vôbec nie ako prekážku, ktorú je potrebné len nejako obísť. Berte prístupný web ako výzvu. Výsledok stojí za to. Na prvý pohľad možno nepostrehnete rozdiely, ale pre mnoho ľudí to bude zásadná zmena.

Zdroje

[1] https://cs.wikipedia.org/wiki/Barvoslepost

[2] https://zpravy.aktualne.cz/zahranici/lidstvu-hrozi-slepota-do-roku-2050- rapidne-pribude-zrakove-p/r~2d96ad18784711e7986b0025900fea04/

[3] https://www.learningsuccessblog.com/what-dyslexia-infographic

[4] https://www.netmonitor.cz/sites/default/files/prilohy/Cesi_Online_2020_Infogra fika_SPIR.pdf

[5] https://uxdesign.cc/website-accessibility-and-ux-how-are-they-related- c3693f81cbc0

[6] https://poslepu.cz/proc-mit-pristupny-web/

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Prípadová štúdia: aj veľká škola s množstvom aktivít môže mať prehľadný web

Prípadová štúdia: aj veľká škola s množstvom aktivít môže mať prehľadný web

logo - Základná škola Mládežnická 536, Trutnov
logo – Základná škola Mládežnická 536, Trutnov

Kde bolo tam bolo… 

…v Trutnove 6 základných škôl. Potrebujú sa voči sebe vymedziť, odlíšiť sa a priatiahnuť pozornosť. Základná škola Trutnov 2 Mládežnícka na to pred časom išla cestou farebného, ​​graficky výrazného a veľmi obsiahleho webu. Škola Mládežnícka je progresívna a úspešná, s množstvom aktivít. Okrem bežných vecí, ako je družina a školský klub, ponúka záujmové krúžky a kurzy v klube Eldorádo. Vo veľkej miere sa zameriava na športové aktivity a moderné digitálne technológie. Škola je tiež zapojená do medzinárodných projektov (Erasmus +, E-Twinning) a žiaci sa zúčastňujú zručnostných, vedomostných a výtvarných súťaží.

To všetko prispelo k tomu, že sa zo školského webu časom stal len málo prehľadný labyrint, kde sa návštevník ľahko stratil. Na úvodnej stránke užívateľ nevedel na čo má skôr kliknúť. Ak web dobre nepoznal, tak sa strácal v tom, kde hľadané informácie asi tak môžu byť. Súvisiace informácie boli tiež často krát na viacerých miestach. Naopak niektoré boli na rôznych miestach v rôznych navigáciách viackrát. Vedenie školy sa preto rozhodlo pre zmenu. Impulzom bol aj zákon č. 99/2019 Zb. o prístupnosti internetových stránok a mobilných aplikácií. Neriešili sme ale len prístupnosť, vzali sme to od základu.

Ako sme pomohli

Naša práca prebiehala v 3 etapách:

  1. vykonali sme analýzu pôvodného webu
  2. navrhli sme zmenu štruktúry a novú grafickú podobu
  3. preniesli sme a výrazne upravili kľúčový obsah z pôvodného webu do nového

Zhodnotenie pôvodných stránok

Základom našej práce bolo prejsť web a zistiť, čo sa kde skrýva. Identifikovali sme celý rad nedostatkov.

Komplikovaná navigácia

  • Web obsahoval niekoľko na sebe nezávislých menu
  • Top bar – prihlásenie do žiackej knižky, emailu, do webu
  • Odkazy na zdieľanie – RSS, Youtube, Facebook
  • Navigácia v záhlaví stránky
  • Hlavná navigácia v postrannom panely, ktorá mala až 3 úrovne  – na úvodnej stránke sa mení na štvorce na začiatku stránky
  • Menu Projekty – viditeľné len na úvodnej strane

Nekonzistencia

  • Poloha hlavného menu bola na inom mieste na úvodnej stránke ako na ostatných stranách
  • Pri niekoľkých stránkach sa najskôr vypísali Novinky a až pod nimi bol obsah stránky, pri väčšine to bolo naopak
  • Niektoré odkazy z menu smerovali rovno mimo web školy

Nepriehľadnosť či neúplnosť stránok

  • Nebolo jasné čo kde hľadať, navigácie sa obsahom prekrývali, podobné informácie boli vo viacerých menu
  • Iný obsah (napr. projekty) bol naopak rozdelený do viacerých menu
  • Podobné informácie boli rozdelené do niekoľkých stránok – užívateľ musel zbytočne preklikávať web, kým sa dostal k požadovanej informácii
  • Niektoré stránky pripomínali “omaľovánky” – viacfarebné texty boli použité tak, že nebolo jasné, aká informácia je na stránke najdôležitejšia
  • Dôležité informácie (napr. Konkrétne opatrenia pre školu vzhľadom ku COVID-19) boli uvedené len v PDF súboroch, nie v textovej podobe priamo na webe
  • Úplne chýbali “Povinne zverejňované informácie” podľa zákona č. 106/1999 Zb.

Neprístupný obsah (prohřešky proti WCAG 2.1)

  • Chýbali odkazy pre rýchly prechod na hlavný obsah (kritérium 2.4.1 úrovne A)
  • Niektoré položky menu neboli prístupné z klávesnice (kritérium 2.1.1 úrovne A)
  • Použité farby textu a pozadia neboli dostatočne kontrastné (kritérium 1.4.3 úrovne AA). Prvá úroveň postranného menu (ak mala rozbalené podmenu) mala bielu farbu textu na bielom pozadí – text nebolo vôbec vidieť
  • Časť informácií bola zbytočne vložená do tabuliek, ktoré spôsobovali problémy pri responzívnom zobrazení na mobile (kritérium 1.4.10 úrovne AA)
  • Text odkazu bol iba webová adresa bez vysvetlenia, kam odkaz vedie (kritérium 2.4.4 úrovne A)
  • Rotujúci obsah (tzv. Carousel) na úvodnej strane strhával pozornosť od ostatného obsahu webu a nebolo možné ho zastaviť (kritérium 2.2.2 úrovne A)
  • Niektoré nadpisy neboli v skutočnosti nadpisy, ale len rovnako naformátovaný text, zoznamy neboli skutočnými zoznamami (kritériá 1.3.1 úrovne A a 2.4.6 úrovne AA)
  • V článkoch boli použité medzery pre formátovanie a odsadenie textu (kritérium 1.3.2 úrovne A)
  • Zlé zalomenie textu vzniknuté väčšinou zlým prekopírovaním z textového editora (napr. Príspevok TRUTNOVSKÉHO DRAKA ovládli domáce tímy) (kritérium 1.3.2 úrovne A)
  • Uvádzanie skrátených slov a skratiek, ktoré sú pre nezasvätených nezrozumiteľné, napr. GaP, ŽP a pod. (Kritérium 3.1.4 úrovne AAA)

No a výsledok?

“Najväčší prínos nového webu? Prehľadnosť, jednoduchosť, ľahká orientácia.” Mgr. Zdeněk Géc, riaditeľ školy

  • Web je plne prístupný v súlade s kritériami WCAG 2.1 na úrovni AA (a tým pádom aj zákona 99/2019, Zb.). Prístupnosť bola tak ako vždy overená organizáciou SONS.
Osvedčenie o prístupnosti webu https://zsmltu.cz v úrovni AA od organizácie SONS
Osvedčenie o prístupnosti webu https://zsmltu.cz v úrovni AA od organizácie SONS
  • Na stránkach ostala len jedna navigácia, ktorá má len 2 úrovne. Pôvodných 79 ponúk menu sa zúžilo na 22.
  • Vizuálny štýl sa zjednotil naprieč celým webom.
  • Informácie sú vždy len na jednom mieste. Je tak jednoduchšia ich aktualizácia a ľahšie sa hľadajú.
  • Stránky s podobným obsahom sme zjednotili do jednej (Družina, Projekty, Školský klub Chobotnica …).
  • Maximum informácií je vložených ako text priamo na stránkach, namiesto pôvodných externých dokumentov, obrázkov s textom a pod.
  • Novinky z danej rubriky sú vypísané aj na príslušnej stránke (COVID-19, Družina, Chobotnica, Eldorádo, Šport).
  • V neposlednom rade sa zásadne zrýchlilo načítanie webu, a to ako na počítači, tak na mobile.

Pre nový web bol použitý redakčný systém WordPress a naša šablóna Accessible School Theme. Túto šablónu sme vytvárali s tým, aby bez problémov plnila požiadavky prístupnosti webu podľa špecifikácie WCAG 2.1. Pôvodne panovali obavy, či takúto rozsiahlu stránku dokáže šablóna obslúžiť – šablóna ale obstála na jednotku. Na žiadne technické problémy sme nenarazili a mohli sme sa preto sústrediť na optimalizáciu obsahu a štruktúry.

Čo povedať na záver?

Ste tiež veľká škola? Potrebujete Váš web nielen upraviť, aby spĺňal kritériá prístupnosti, ale prebudovať a vykrášliť ho? Ozvite sa nám. Nebojíme sa výziev. Každý projekt riešime individuálne a s citom.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Prečo mať prístupný a bezpečný web?

Prečo mať prístupný a bezpečný web?

Naša kolegyňa Mishka bola oslovená pracovníčkou z NÚKIB Petrou Sobkovou pre rozhovor k práve prebiehajúcemu Festivalu bezpečného internetu. Mishka u nás pracuje na tvorbe plne prístupných stránok pre MŠ, ZŠ a SŠ a Petra sa jej pýtala prečo mať takéto stránky a prečo mať dobre zabezpečený web. Tu si ho môžete prečítať:

V roku 2019 vstúpil do právneho poriadku Českej republiky nový zákon č. 99/2019 Zb. o prístupnosti internetových stránok a mobilných aplikácií, upravujúci prístupnosť webu a aplikácií vo verejnom sektore. Povinnosť mať prístupný web sa dotkla mnohých organizácií verejnej spávy a školských zariadení. Tie sú podľa zákona tiež povinným subjektom, avšak iba „(…) ak ide o obsah internetových stránok, ktorý sú vysoká škola, škola alebo školské zariadenia povinné zverejňovať na svojich internetových stránkách podľa iného právneho predpisu v rámci výkonu pôsobnosti v oblasti verejnej správy v úseku školstva, vedy, výskumu, vývoja, inovácií, inej tvorivej činnosti a starostlivosti o deti a mládež alebo podľa zákona o slobodnom prístupe k informáciám.“[1] V praxi to znamená rekonštrukciu tých časti webu, ktoré ukladá zákonná povinnosť. Pre mnoho riadeteľov sa stala táto právna úprava impulzom pre kompletnú rekonštrukciu stránok školy. Pokiaľ patríte medzi tých, ktorí zvažujú, či sa do prestavby webových stránok z akéhokoľvek dôvodu pustiť, prečítajte si rozhovor s pani Mgr. Michaelou Vrankovou, programátorkou a špecialistkou na problematiku prístupnosti webových stránok. Dozviete sa, čo to vlastne prístupnosť znamená, aké sú jej výhody a nevýhody, a ako súvisí prístupnosť s bezpečnosťou.

Prístupné webové stránky: Základná škola a Materská škola Deblín
Prístupné webové stránky: Základná škola a Materská škola Deblín

Čo je to prístupnosť webu?

Riešenie prístupnosti webov a internetových aplikácií je postavené na štyroch princípoch. Zaprvé, užívatelia musia byť schopní obsah webu vnímať kompletne bez ohľadu na to, či majú napríklad vadu zraku. Ďalej musia byť užívatelia schopní web ovládať. Informácie a ovládanie musia byť zrozumiteľné. A v neposlednej rade, obsah musí byť “zobraziteľný” na rôznych typoch zariadení. Prístupný web je proste taký, ktorý Přístupný web je prostě takový, který nekladie žiadnemu užívateľovi prekážky.

Prečo vlastne prístupnosť riešiť, keď ju zákon ukladá zatiaľ v obmedzenej miere, a niektorým subjektom vôbec?

Pre niekoho môže byť dôvodom požiadavka zo zákona, pre iného komerčná výhoda. Ja prístupnosť riešim preto, že mi dáva zmysel. A hlavne preto, že nemám argumenty, prečo ju neriešiť. Zaujímavé je, že táto problematika je tlačená zospodu. Metodika WCAG (pozn. Web Content Accessibility Guidelines 2.0) vznikla pred rokmi na základe spolupráce vývojárov a užívateľov. Až následne ju uchopili vlády a zakotvili požiadavky do zákonov.

S prístupnosťou ale prichádzajú náklady navyše, či nie?

Ako sa to vezme. Každý web predstavuje náklady navyše (napríklad proti klasickej úradnej doske). Na druhú stranu, weby vytvárame preto, aby pracovali za nás. Pokiaľ web pracuje správne, nemáme napríklad preťažený sekretariát školy otázkami cez telefón, na ktoré si odpovede nájdu rodičia jednoducho na webe.

Prístupné webové stránky: MŠ Hrušovany pri Brne
Prístupné webové stránky: MŠ Hrušovany pri Brne

Prístupné weby má väčšina z nás spojené s užívateľmi, ktorí majú nejakú vadu zraku. Títo ľudia predstavujú len určité percento populácie. Má zmysel riešiť prístupnosť aj kvôli iným užívateľom?

Je pravda, že o prístupnosti sa začalo hovoriť najskôr v súvislosti s užívateľmi, ktorí majú nejaké zdravotné postihnutie – a to nielen zrakové. Ľudia so zdravotným postihnutím sú často v sociálnej izolácií a internet im môže výrazne uľahčiť život. To je napríklad dôvod, prečo štátne a verejné organizácie musia prístupnosť svojich webov povinne riešiť zo zákona. Okruh ľudí, ktorým prístupné weby uľahčujú život je ale omnoho širší. Približne 26 % obyvateľov je starších ako 50 rokov a ovládanie počítača im robí problémy. Alebo si predstavte, že má niekto pravú ruku zlomenú a počítač ovláda len ľavou. Viete isto, že títo užívatelia nie sú vašou cieľovou skupinou? A čo nastupujúce technológie? Už viac ako polovica užívateľov chodí na web cez mobil, rozširujú sa hlasoví asistenti ako je Siri alebo Alexa… Chcete pre nich robiť špecializovaný web? Prístupný web je z môjho uhlu pohľadu výhodnejší pre všetkých – je prehľadnejší, rýchlejší, lepšie čitateľný a predovšetkým bezpečnejší.

Hovoríte bezpečnejší – aký je teda vzťah medzi prístupnosťou a bezpečnosťou webov a aplikácií?

Rozhodne nesúhlasím s názorom, že prístupnosť a bezpečnosť idú proti sebe. Naopak, môžu a mali by ísť ruku v ruke. Pekným príkladom je napríklad postupné vykorenenie Flashu (pozn. zastaralá technológia, ktorá sa používala pre animácie a internetové aplikácie), s jeho ústupom mizne celá rada bezpečnostných problémov a zároveň je to väčšinou aj posun správnym smerom v prístupnosti. A čo tým chcem povedať? Že bezpečnosť aj prístupnosť je možné riešiť spoločne, len je potrebné nad tým od začiatku premýšľať ako o celku, a neriešiť obe oblasti oddelene.

Môžete uviesť príklad?

Často uvádzaný príklad je napríklad zabezpečenie formuláru proti spamu. Obľúbenou metódou je CAPTCHA, tá má ale často k prístupnosti ďaleko. Predstavte si sami seba, že ste silno krátkozrakí a máte pritom rozoznať, na ktorých z 9 malinkých obrázkov je loď alebo vták. Pritom existuje rada iných metód, ako zabezpečiť formulár proti zneužitiu, ktoré na uživateľov nekladú žiadne požiadavky a ani si ich nemusí všimnúť.

Prístupné webové stránky: ZŠ a MŠ Otnice
Prístupné webové stránky: ZŠ a MŠ Otnice

Súvisí prístupnosť tiež s bezpečnosťou samotného užívateľa? Alebo sa rieši hlavne skĺbenie prístupnosti a bezpečnosti (ochrany) systému?

Čo sa týka bezpečnosti užívateľov, ide o viac aspektov. Napríklad o to, aby bol užívateľ schopný web alebo aplikáciu používať bez pomoci druhej osoby. Aby napríklad nemusel oznamovať svoje prihlasovacie údaje niekomu inému preto, aby sa za neho do aplikácie prihlásil a vykonal potrebné úkony. Poskytnutie prihlasovacích údajov tretej osobe – či už vedome alebo nevedome – je potom nebezpečné nielen pre samotného užívateľa, ale zvyšuje aj riziko nabúrania celého systému. Je to navyše len krôčik k zneužitiu identity, odcudzeniu dát a niekedy aj finančným stratám. Užívateľ sa pri práci s aplikáciou alebo internetovou stránkou musí cítiť pohodlne a bezpečne. A to je doména prístupnosti. Ako som už povedala – prístupnosť a bezpečnost idú ruka v ruke.

Ako pri tvorbe webu postupujete konkrétne vy?

Keď navrhujem weby, tak si predstavujem, ako by s nimi pracovala moja rodina. Osemročná dcéra s internetom ešte len začína a klikne na hocičo, bez toho aby vedela, čo sa stane. Prostredný syn je silný dyslektik – potrebuje si zväčšiť písmo a dlhé texty sú pre neho peklo. Starší syn prehliada weby len na mobile, svokor si s počítačom moc nerozumie … ktorého z nich mám vylúčiť? Pritom to je typická cieľová skupina pre taký školský web – od detí cez rodiča až k starým rodičom. Musím preto vyhovieť všetkým a pritom nechcem robiť rôzne varianty webu (normálny web, prístupný web, mobilný web atď.) Tento prístup potom premietam nielen do návrhu grafiky a používateľského rozhrania, ale aj do štruktúry a obsahu.

Funguje následne tento prístup v praxi?

Skvele. Problém býva väčšinou len s obsahom, pretože na ten nemám 100% vplyv. Musím presvedčiť zákazníka, že má informácie sprehľadniť a zjednodušiť. A tiež, že musí dodržiavať určité pravidlá pri tvorbe obsahu. Navyše to nie je jednorazová záležitosť – obsah sa tvorí priebežne a na pravidlá prístupnosti je tak potrebné myslieť neustále.

Je niečo čo by ste chceli odkázať čitateľom?

Nebojte sa toho. Neberte požiadavky na prístupnosť webu ako obmedzenie. A už vôbec nie ako prekážku, ktorú je potrebné nejako obísť. Berte to ako výzvu. Výsledok stojí za to. Na prvý pohľad možno nepostrehnete rozdiely, ale pre mnohých ľudí to bude zásadná zmena.

Rozhovor vznikol pre účely Festivalu bezpečného internetu.

Pýta sa: Mgr. Petra Sobková, NÚKIB

Odpovedá: Mgr. Michaela Vranková, ZENI

Mishka - WordPress Developer
Mishka – WordPress Developer

Medailónik expertky:

Mgr. Michaela Vranková pracuje ako vývojárka. Svoje weby stavia na platforme WordPress, kde ale programuje vlastné šablóny tak, aby zabezpečila ich maximálnu prístupnosť. Prístupnosť, teda prívetivosť webu bez ohľadu na vek alebo zdravotné znevýhodnenia, totiž považuje za jedno zo základných kritérií moderného webu. Sústredí sa predovšetkým na webové stránky škôl. K tým má blízko okrem iného preto, že je sama maminkou troch detí. Za web Základnej školy Deblín dokonca získala prvé miesto v súťaži Scool web 2017. Prevádzkuje tiež web pristupne-stranky.cz, kde sa venuje legislatíve a zároveň radí ďalším programátorom, ako s prístupnosťou pracovať. Od roku 2019 je členkou tímu Zeni, ktorý na testovanie prístupnosti stránok spolupracuje s organizáciou SONS ČR.

Ak vás článok zaujal, je v českom jazyku voľne stiahnuteľný na stránkách Národního úřadu pro kybernetickou a informační bezpečnost alebo si ho môžete stiahnúť z webu ZENI.


[1] Citácia zákona Českej republiky č. 99/2019 Sb., o prístupnosti webových stránok a mobilných aplikácií

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Prípadová štúdia: web pre MŠ Hrušovany pri Brne na prístupnej šablóne

Prípadová štúdia: web pre MŠ Hrušovany pri Brne na prístupnej šablóne

Je zaujímavé, koľko ľudí si neuvedomuje, že web materskej škôlky nie je určený pre deti (ktoré väčšinou nevedia čítať, že?), ale pre rodičov, ktorí na ňom hľadajú informácie. Takže keď sa dá dohromady jedna škôlka, 3 pracoviská, spoločný web a šialený grafik, výsledok je jasný – a pritom dosť typický.

Materská škola Hrušovany sa rozhodla s tým niečo spraviť. Impulzom bola požiadavka zo zákona na prístupnosť webu, ale našťastie neostalo len pri tom. Zvíťazila myšlienka, že dobrý školský web nemusí byť nutne infantilný, ale hlavne že návštevníci musia jednoducho nájsť všetky informácie, ktoré potrebujú.

Zhodnotenie pôvodného webu

Zložité menu

  • Keď návštevník hľadal informácie v menu, musel sa preklikať až cez 4 úrovne. Stránky boli delené obsahovo a potom na jednotlivé škôlky, prípadne ďalej na triedy, napr. Základné informácie → Naše triedy → MŠ Havlíčkova → Trida Lienky alebo Kuchyňa → Pladby → MŠ Havlíčkova
  • Niektoré odkazy smerovali na stránky iba s jedným odkazom, či súborom, napr. Dokumenty → Základné informácie o ŠVP alebo Dokumenty → Školský poriadok.
Dokumenty-prevadzkovy-poriadok-povodny-web
Dokumenty – Prevádzkový poriadok, pôvodný web
  • Niektoré stránky boli uvedené niekoľko krát na viacerých miestach menu, napr. Prevádzkový poriadok jedálne bol v Kuchyňa → Prevádzkový poriadok a tiež v Základné informácie → Školné a stravné → Prevádzkový poriadok
  • Web obsahoval stránky, ktoré nemali žiadny obsah – neboli vôbec naplnené, napr. Fotogaléria → Spoločné akcie

Nevyhovujúca grafika

  • Výrazné pozadie rušilo pozornosť pri prechádzaní webu. Obrázok na pozadí bol tiež príliš veľký a výrazne spomaľoval načítavanie webu.

Nelogický obsah

  • Sekcie s podobným obsahom boli na viacerých miestach 
    • Kde nás nájdete (iba mapy s adresou)
    • Kontakty (adresa, emaily, telefóny)
  • V texte bol napríklad vypísaný kompletný text “Prihlášky k stravovaniu” s informáciou, že “Túto prihlášku nevytláčajte, bude Vám odovzdaná na stretnutí rodičov v septembri aj s prideleným variabilným symbolom.”

Nepriehľadnosť webu

  • V Aktualitách (prehľadu príspevkov) boli vypísané celé obsahy príspevkov
  • Orientácia v texte sťažovala nejednotnosť nadpisov a foriem Aktualít, napr.
    • rôzna veľkosť nadpisov,
    • niektoré nadpisy boli písané kapitálkami, iné nie,
    • celý text niektorých aktualit bol tučný apod.
  • Dôležité informácie boli na webe často len v PDF súboroch alebo ako obrázky, neboli v textovej podobe priamo na webe, napr. Jedálničky

Rozpory s požiadavkami na prístupnosť podľa WCAG 2.1

  • Web nebol responzivný
  • Chýbali odkazy pre preskočenie na hlavný obsah a ďalšie sekcie
  • Menu webu nebolo ovládateľné z klávesnice
  • Web nespĺňal požiadavky na kontrast (menu webu)
  • Informácie boli vkladané ako obrázky bez ďalších textových doplnení, napr. Deň otvorených dverí, Zápis do MŠ, Projekty, Prevádzka počas letných prázdnin, Alergény…
  • Rotujúce hviezdičky v sekciách, ktoré sa nedali zastaviť
  • Štruktúra a ovládanie nebolo konzistentné

Prínosy nového webu

Web je plne prístupný aj pre handicapovaných

Získali sme Osvedčenie o prístupnosti webu od SONS. Web spĺňa kritéria WCAG 2.1 v úrovni AA

Osvedcenie-o-pristupnosti-webu-mshrusovany.cz-SONS-CR
Osvedčenie o prístupnosti webu mshrusovany.cz, SONS-ČR
  • Technické riešenie prístupnosti zahŕňalo hlavne:
    • plne responzivný web,
    • vyladené farebné kontrasty,
    • odkazy pre preskočenie na navigáciu a hlavný obsah,
    • riešenie duplicitných odkazov,
    • prístupnosť všetkých ovládacích prvkov webu z klávesnice (vrátane menu),
    • ovládanie a orientácia na webe tak, aby bola konzistentná na všetkých stránkách, atď.
  • Bol zásadne revidovaný aj obsah:
    • maximum informácií vložených na web ako text,
    • všetky PDF dokumenty doplnené o textovú vrstvu,
    • všetky obrázky, nesúce informáciu obsahujú alternatívne popisy,
    • Informácie na stránkach sú štrukturované pomocou nadpisov viacerých úrovní.

Zjednodušená štruktúra a navigácia na stránkach

  • Menu má len 2 úrovne.
  • Štruktúra bola zmenená tak, že každé pracovisko má samostatnú položku v menu, spoločné informácie sú vložené do jednej položky.
  • Všetky dokumenty škôlky sú na jednej stránke.

Web na mobile

  • Stránky sú plne responzívne.
  • Zásadné zrýchlenie načítania.

Jednoduchosť a prehľadnosť

  • Kontakty na škôlku so pokope v zápätí každej stránky (všetky pracoviská + jedáleň).
  • Všetky informácie k jednému pracovisku sú na jednej stránke.
  • Informácie sú na webe vždy na jednom mieste – sú lepšie dohľadateľné a lepšie sa udržujú.
  • Web neobsahuje žiadne prázdne stránky.
  • Rozsiahlejšie stránky majú na začiatku “obsah” s odkazmi na jednotlivé oddiely.
  • Odkaz “Späť na začiatok” umožňuje užívateľovi prechod na začiatok stránky.
  • V prehľade Novinek je uvedený len stručný výpis príspevku s odkazom na celý text.

Jednotná grafika 

  • Grafické prvky využívajú 4 základné farby.
  • Veľkosť nadpisov je zjednotená naprieč webom.
  • Ikony noviniek (podľa danej kategórie) uľahčujú vizuálnu orientáciu.

Zhrnutie

Čo napísať záverom? Aj škôlka v obci s tritisíc obyvateľmi môže mať web, ktorý je moderný, rýchli, funkčný, prehľadný a prístupný.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Prípadová štúdia: prístupný web pre ZŠ a MŠ Otnice

Prístupný web pre ZŠ a MŠ Otnice

Od septembra tohto roku musia všetky weby základných škôl v Českej republike spĺňať tzv. pravidlá o prístupnosti. Ide o to, aby bol web použiteľný a prístupný aj pre osoby so zdravotným znevýhodnením, napr. nevidiacich a slabozrakých alebo nepočujúcich.

Naše riešenie pre školy založené na platforme WordPress sme v nedávnej dobe implementovali na web základnej a materskej školy v Otniciach www.zsotnice.cz.

Pri doterajších stránkach sme identifikovali z hľadiska prístupnosti ale aj bežnej užívateľskej prívetivosti tieto problémy:

  • Komplikovaná navigácia webu:
    • web obsahoval 2 navigácie (menu), ktoré sa obsahom prekrývali,
    • jedno z menu malo 3 úrovne.
  • Úvodný karusel(automaticky rotujúci obsah stránok), ktorý strhával pozornosť od ostatných informácií (tento prvok sa berie ako neprístupný obsah).
  • Zložitosť webu:
    • v prehľade príspevkov bol vypísaný celý obsah príspevku, kvôli niektorým príspevkom musel užívateľ odrolovať aj niekoľko stránok.
    • web obsahoval stránky, ktoré nemali žiadny obsah (neboli naplnené),
    • na stránkach boli informácie, ktoré na web nepatria – osobné informácie, napr. zoznam žiakov, ktorí zaplatili za lyžiarsky kurz, atď.,
    • podobné informácie boli rozdelené do niekoľkých stránok – užívateľ musel zbytočne preklikávať web, kým sa dostal k požadovanej informácií.
  • Nepriehľadnosť webu:
    • dôležité informácie boli na webe len v PDF súboroch, nie v textovej podobe priamo na webe, napr. Krúžky, Organizácia školského roku, Pladby stravného, Školkovné,
    • niektoré odkazy na stránkach boli uvedené len URL adresou odkazu, nebolo presne jasné, na aký obsah sa užívateľ dostane, napr. Dôležité zdroje pri voľbe povolania,
    • položky menu mali niekoľko farieb bez evidentného účelu.
  • Neprístupný obsah:
    • chýbali preskakovacie odkazy,
    • menu webu nebolo ovládateľné z klávesnice,
    • web nespĺňal požiadavku kontrastných farieb,
    • malé písmo webu,
    • web nebol responzivný – na mobile bol prakticky nepoužiteľný,
    • pri prechádzaní webu z klávesnice nebolo jasné na ktorom odkaze sa užívateľ nachádza,
    • súbory na stiahnutie boli uvedené názvom súboru a nie popisom obsahu.

Čo teda nový web z našej produkcie škole v Otniciach priniesol?

  1. Zjednodušenie navigácie webu – len 1 menu s 2 úrovňami a jednotnou farbou.
  2. Zjednodušenie webu:
    • stránky s podobným obsahom zlúčené do jednej,
    • maximum informácií bolo vložených na web priamo v textoch,
    • informácie na webe sú vždy na jednom mieste – lepšie dohľadateľné a lepšie sa udržujú,
    • odstránené prázdne stránky.
  3. Zrýchlenie webu.
  4. Responzívny web.
  5. Kontakty na školu priamo v záhlaví a zápätí každej stránky.
  6. Jednoduché vkladanie obsahu na web.
  7. Web je v súlade s pravidlami prístupnosti.

Radi sme pomohli s riešením požiadaviek prístupnosti webových stránok Základnej a materskej školy v Otniciach. Ďakujeme vedeniu školy za spoluprácu a želáme, aby nové stránky www.zsotnice.cz slúžili k spokojnosti školy, rodičov a žiakov.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.