Tvorba webovej stránky pre i4comfort

Tvorba webovej stránky pre i4comfort

Aplikácia i4comfort od spoločnosti A-technology prináša komplexné a jednoduché riešenia ovládania technológií vo vašom dome na diaľku. Myšlienka úspory v oblasti vykurovania, a tým aj zmenšenia CO2 stopy pomocou inteligentného ovládania technológií, nás zaujala a bolo nám potešením podieľať sa na tvorbe webovej stránky pre túto aplikáciu.

Prečo a ako vznikla stránka

Stránky pre i4comfort sme vytvárali v CMS WordPress pre existujúceho klienta, ktorému sme už tento rok spustili kompletne nový produkčný web. Spoločnosť A-TECHNOLOGY s.r.o. má svoje prezentačné stránky a-technology.cz, preto bolo dôležité nadesignovať webovú stránku i4comfort v podobnom duchu ako tú materskú a zároveň webovej stránke vytvoriť vlastnú identitu. 

Porovnanie starej a novej stránky

Stará webová stránka i4comfort mala viaceré nedostatky:

  • Nespĺňala kritériá zabezpečenia.
  • Chýbalo vývojové prostredie v podobe stagingu
  • Logo a vzhľad boli zastaralé.
  • Web nebol responzívny.
Stará webová stránka

Nová stránka:

  • Webová stránka je plne responzívna.
  • Má na viacerých miestach CTA tlačidlo, ktoré vyzýva k akcii, vďaka čomu je väčšia pravdepodobnosť získania si zákazníka. 
  • Vytvorili sme nové logo a nadizajnovali nový vzhľad stránky.
Hlavná stránka i4comfort

Grafika webovej stránky

  • Tvorba webovej stránky vo WordPress pre i4comfort graficky nadväzovala na spomínanú materskú stránku.
  • Stránka má unikátny a zapamätateľný design.
  • Vytvorením osobitej identity stránky je samozrejmé, že ide o samostatný web.
  • Zákazník a-technology zároveň získava familiárny pocit.
  • Informácie nie sú komunikované len textovo, ale sú znázornené na mnohých miestach graficky, vďaka čomu sú viac zapamätateľné a prehľadné.

Technické funkcie

Moderný zážitok

Webová stránka disponuje mnohými vizuálnymi efektami, ktoré sú zakomponované tak, že stránku nespomaľujú. Web je tiež responzívny na akomkoľvek zariadení. 

  • Mnohé animácie a interaktívne časti využívajú čisto moderné možnosti štýlovania (css).
  • Nie je nutné donačítavať JavaScript ani kvôli niektorým rozklikateľným interaktívnym sekciám ako to býva na mnohých iných stránkach.
  • Stránka je tak rýchlejšia, zároveň poskytuje rovnako kvalitný zážitok, ako napríklad tu:
Vizuálne efekty webovej stránky

Stránka na používateľa reaguje

Symboly jednotlivých technológií sa menia podľa toho o čom používateľ momentálne číta. Podľa pozícii na stránke sa mení aj CTA tlačidlo, ikony, či navigačné prvky (horné menu, bodky vpravo). Spomenuté si môžete prezrieť na stránke ,,Jak funguje i4comfort”.

Webová stránka reaguje na užívateľa

Na stránke ,,Možnosti využití” sa tiež interaktívne menia obrázky podľa toho o čom používateľ číta. Čitateľ si tak jednoduchšie predstaví jednotlivé prvky o ktorých číta a tiež si ich lepšie zapamätá. Toto všetko vytvára unikátnu, rýchlu a interaktívnu skúsenosť, ktorá zaujme používateľa.

Výhody novej webovej stránky

Téma na sage

Ľahká konfigurovateľnosť

  • Nami naprogramovaná téma pre WordPress umožňuje ľahkú konfigurovateľnosť.
  • Pre každú stránku je osobitne nastaviteľné správanie a štýl hlavičky stránky.
  • Všetek obsah je jednoducho editovateľný bez nutného zásahu vývojára.

Použiteľnosť z hľadiska mobil/desktop

Desktopové prostredie nie je ani zďaleka len zväčšeným mobilným prostredím. Myslíme na dobrú skúsenosť pre každého užívateľa.

  • Na desktope je využívaný všetok priestor, vďaka čomu je na obrazovke poskytnutých čo najviac informácií a ani na veľkej obrazovke web nepôsobí prázdny
  • Používateľská skúsenosť na mobile je zároveň prispôsobená používaniu pomocou prsta a menšej obrazovke. 
  • Na mobile je všetko jednoducho klikateľné, ľahko a rýchlo dostupné. 
  • Mnohé sekcie vyzerajú v porovnaní mobilu a desktopu výrazne odlišne
  • Pre lepší zážitok boli pre mobil mnohé časti zjednodušené, niektoré vizuálne aspekty používané pre desktop vynechané, nakoľko nemali pre mobilného používateľa pridanú hodnotu
Webová stránka je responzívna

Pre i4comfort sme vytvorili nový web s množstvom vychytávok, ktorý je zároveň rýchly a prehľadný. Pokiaľ potrebujete pomôcť s tvorbou webovej stránky a chcete poskytnúť svojim zákazníkom kvalitný zážitok, neváhajte sa na nás obrátiť, 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.

5 vecí, na ktoré nesmieme zabúdať pri tvorbe webových stránok

5 vecí, na ktoré nesmieme zabúdať pri tvorbe webových stránok

Pri tvorbe webových stránok ide o komplexný proces, ktorý tvoria viaceré činnosti. Od prieskumu trhu, cez grafický dizajn,  programovanie webu, tvorbu textov až po samotné spustenie webovej stránky. Prečítajte si nasledovných 5 vecí, ktoré sú pri tvorbe webovej stránky pre nás veľmi dôležité, a preto na ne vždy prihliadame.

Analýza kľúčových slov a stanovenie cieľov

Ľudia hľadajú cez vyhľadávače rôzne výrazy, ktoré im pomáhajú nájsť to, čo hľadajú. Pomocou analýzy kľúčových slov nájdeme frázy, ktoré sú opakovane vyhľadávané a súvisia s vašim zameraním, vďaka čomu zistíme, cez ktoré kľúčové slová sa návštevníci dostanú na vašu webovú stránku

Pred samotnou tvorbou webu je najdôležitejšie ujasniť si princípy a hodnoty spoločnosti, ktoré pomôžu k analýze kľúčových slov. Je nutné zameriať sa na to, aké má firma vízie do budúcnosti a tiež aký je jej príbeh. Následne je potrebné určiť ciele, na základe ktorých budeme tvoriť váš web pre kvalitnú sortu klientov. 

Analýza kľúčových slov je dôležitou prioritou pre úspech webu od ktorej sa následne odvíja optimalizácia pre vyhľadávače.

Optimalizácia pre vyhľadávače (SEO)

Vďaka SEO optimalizácií dostaneme vašu webovú stránku jednoduchšie medzi vrchné výsledky vyhľadávania. Pri súčasnej miere konkurencie vo vyhľadávaní je čo najlepšia optimalizácia pre vyhľadávače nutnosťou. 

Pre SEO optimalizáciu „vylaďujeme“ nie len texty na stránkach. Ide o komplexnejší proces. Čo je pre optimalizáciu dôležité a na čo sa zameriavame?

  • Rýchlosť načítania;
  • bezpečnosť stránok;
  • popisy fotiek a produktov;
  • obrázky;
  • optimalizácia textov;
  • správne nadpisy, titulky;
  • technické nastavenie SEO;
  • a mnoho ďalšieho…

—> O tvorbe optimalizovaného obsahu sa dozviete viac v článku Správna tvorba optimalizovaného obsahu webovej stránky

—> Ako písať články pre SEO, a robíme to tak aj my, si môžete prečítať tu: SEO – Ako písať články, aby boli čitateľné, a optimalizované pre vyhľadávače

Copywriting

Správna tvorba textov na webovej stránke je základom spomínanej optimalizácie pre vyhľadávače a tiež samotnej tvorby webovej stránky. Preto je dôležité písať texty nie len zaujímavé, ale aj gramaticky správne spolu s využitím vhodných kľúčových slov. Súčasťou copywritingu je príprava textov v súlade s analýzou vašej cieľovky a ich optimalizácia pre vyhľadávače pomocou kľúčových slov, či správnej hierarchie nadpisov atď. 

Viac o tom, čo všetko by mal obsahovať každý článok si prečítajte v článku Náležitosti, ktoré by mal obsahovať každý článok.

Prístupnosť webovej stránky

Nezabúdajte, že na vašej webovej stránke sa čitateľ musí čo najjednoduchšie orientovať. Navyše, dnes už vyše 67 % užívateľov prehliada internet z mobilu alebo tabletu. Pokiaľ užívateľ nenájde to, čo hľadá, stránka je pre neho príliš komplikovaná, vyskakujú na neho rôzne okná, či je prehltená reklamou, okamžite odchádza a vám tak zvyšuje mieru opustenia stránky, čím sa tiež zhoršuje SEO. 

Preto tvoríme stránky tak, aby spĺňali potrebné kritériá. Je pre nás dôležité, aby vaša webová stránka bola rezponzívna a čo najviac prístupná pre všetkých užívateľov. 

Čo sú to prístupné stránky a najčastejšie problémy webov spísala naša kolegyňa Mishka v článku Prístupný web je výhodný pre všetkých

Ako sme v prístupnosti pomohli? Prečítajte si naše prípadové štúdie:

—> Aj veľká škola s množstvom aktivít môže mať prehľadný web

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

—> Web pre MŠ Hrušovany pri Brne na prístupnej šablóne

Marketing

Pokiaľ chcete naozaj výkonnú webovú stránku, ktorá prináša výsledky, samotná optimalizácia SEO nestačí. Pri tvorbe webovej stránky si premyslite, akým spôsobom budete vašu stránku prezentovať ostatným. Budete písať blog? Ponúkať rôzne akcie, či výhody? Akým spôsobom zakomponujete na stránke recenzie? Tomu následne prispôsobíme aj tvorbu a design stránky. Po jej spustení je tiež dôležité investovať do samotného marketingu, ako napríklad PPC kampane, či prezentácia na sociálnych sieťach, s čím vám tiež radi pomôžeme.

Ako sa pripraviť na marketing si môžete prečítať v článku Pripravte sa poriadne na marketing.

Ak chcete aby vaša webová stránka bola výkonná a prinášala vám zákazníkov, neváhajte nás kontaktovať, 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.

Serial Killer – Prečo je dobré mať webovú stránku vytvorenú na Sage?

Serial Killer Prečo je dobré mať webovú stránku vytvorenú na Sage? 

Aj Zeni team mal možnosť podieľať sa na medzinárodnom festivale TV a web seriálov – Serial Killer. Vytvorili sme preň webovú stránku, ktorej téma je postavená na Sage. Ako sme pri tvorbe webovej stránky postupovali a tiež výhody stránky vytvorenej na téme v Sage sa dozviete v článku. 

Čo je Serial Killer?

Určite už tušíte, že festival Serial Killer poteší všetkých nadšencov seriálovej kultúry. Tvorcovia najlepších seriálových noviniek zo strednej a východnej Európy sa každoročne stretávajú na medzinárodnom súťažnom festivale televíznych a webových seriálov. Na veľkom plátne si môžu pozrieť premiéry, ktoré inde nemajú možnosť vidieť. Navyše, v sekcii Fokus sa festival každým rokom zameria na inú krajinu a predstaví jej seriálovú tvorbu. 

Tvorba webovej stránky 

Festival nás zaujal a aj preto sme sa rozhodli zapojiť do tvorby ich webovej stránky

HTML štruktúru najprv vytvoril grafik Martin Pecina, následne bolo nutné rozdeliť ju na menšie časti a vytvoriť za ňou celý web.

Z celkového zadania a grafiky sme si rozdelili stránku na sekcie:

  • seriály;
  • panely;
  • videá;
  • prednášajúci;
  • členovia tímu.

Pri každej zo spomenutých sekcií sme identifikovali, ktoré dáta bude potrebné vypĺňať a pridali sme možnosť ich editácie do administrácie. Dáta bolo tiež potrebné napasovať do pripravenej grafiky a pomocou nich tak oživiť obsah

Aké funkcionality sme robili pre Serial Killer?

Hromadné stiahnutie fotiek z jednotlivých dní z presskit 

Klient nám zadal, aby bolo možné stiahnuť všetky fotky z jednotlivých dní z presskit a to v zip súbore. Pripravili sme funkcionalitu, ktorá všetky dané fotky zazipuje a užívateľ si ich môže stiahnúť.

Predplatiteľská sekcia

Klient potreboval pridať na web možnosť kúpiť si predplatné do internej sekcie webu. Pripravili sme prepojenie s Woocommerce a Gravity Forms, ktoré zaisťujú nákup prístupov a tiež prihlásenie a obmedzenie prístupov na určité stránky.

Archivácia starého ročníka

Toto je jedna z nových features, ktoré stránka obsahuje. Klient požadoval, aby bolo možné nastaviť jednotlivé seriály, seriálové sekcie, panely a prednášajúcich ako archivované. Tie sa potom nebudú zobrazovať na štandartných miestach a klient si ich bude môcť pridať na vlastné stránky.

Prečo je dobré mať tému stránky vytvorenú na Sage?

  • Najlepší nástroj na tvorbu WordPress šablón

Dáva programátorovi skvelé možnosti, ako udržať svoj kód prehľadný a čitateľný. Či už sa jedná o písanie CSS s SASS, Blade templaty, Javascript routing alebo Controlery, v ktorých je možné špecifikovať funkcionalitu pre presne danú šablónu. S takýmto nástrojom je práca omnoho zábavnejšia.

  • Obsahuje Laravel blade templating

Veľmi uľahčuje prácu s vytváraním jednoduchých a prehľadných šablón. My sme si k nemu navyše doinštalovali ACF Sage directives, čo nám značne uľahčiloa sprehľadnilo prácu s ACF fieldmi. 

  • Pretože JavaScript routing 

Sage už v základe obsahuje funkcionalitu, ktorá umožňuje rozdeliť JavaScript do súborov a potom ho načítať na stránkach podľa vášho určenia. JavaScript je vďaka tomu prehľadnejší a nemusíte sa obávať, že sa na niektorej stránke spustí niečo nechceného.

Výkonnosť webovej stránky

Či na vašej stránke čitateľ ostane záleží hlavne od toho, či ho dokážete čo najskôr zaujať. Ako ho ale zaujmete, ak sa vaša stránka bude načítavať nekonečné hodiny? Preto je pre vašu webovú stránku veľmi dôležitá jej výkonnosť, spoľahlivosť a rýchlosť

Splnenie týchto požiadaviek vám samotný Sage nezaručí. Avšak dobrý programátor v spojení s tak dobrým nástrojom ako je Sage môže spraviť zázraky. Výkonnosť a rýchlosť totiž vždy záleží na samotnom programátorovi.

Tak, ako aj pri ďalších našich projektoch sme sa snažili načítať vždy len všetko potrebné a pripravili sme stránku na čo najrýchlejšie načítanie. Napríklad sme odstránili nepotrebné CSS a JS súbory, nastavili lazyload obrázkov a mnoho iného.

Ak by ste aj vy chceli vytvoriť vašu webovú stránku na tak kvalitnom nástroji ako je Sage a priniesť vašej stránke výkonnosť a rýchlosť, neváhajte sa na nás obrátiť. Napíšte nám a my sa vám ozveme v čo najkratšom čase.

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.

Nový plugin pre WordPress – Zeni mapa

Nový plugin pre WordPress – Zeni mapa

Jednou z dopytovaných možností pre našich spokojných klientov je vytvorenie mapy, do ktorej si spoločnosť, či jej partneri želajú zaznamenávať ich predajne, vzorkovne, výdajne či parkovacie miesta a zóny. My vám túto možnosť dáme formou nového pluginu!

Aký bol námet k vytvoreniu pluginu

Jedného dňa prišiel Dávid s tým, že ho klient požiadal o pripísanie jeho partnerov do mapy. V tu chvíľu začal zapájať celý tím a organizovať samotnú tvorbu. Je presvedčený, rovnako ako my všetci zo Zeni, že táto nová perspektíva umožní podnikateľom vyššiu spokojnosť, či už od zákazníkov alebo partnerov.

Najprv sme sa zhodli, že nechceme žiadne hardkódovanie do témy aby túto možnosť mohol využiť aj ďalší klient. Rozhodli sme sa teda pre vytvorenie nového pluginu pre WordPress, pretože dobre kódovaný plugin je omnoho lepší ako po každej zmene témy prepisovať kódy v šablóne.

Najzásadnejšia je pre nás vlastnosť, že samotný plugin môžeme rozvíjať do nekonečných podôb a objaviť nekonečno vychytávok a možností.

Súčasný klient, pre ktorého je plugin už hotový

Vytvorili sme plugin podľa klientovho zadania a ešte sme k nemu pridali niektoré nami navrhnuté vychytávky. Mapa sa klientovi páči a využíva ju na viacerých stránkach v jedinom webe a to v rôznych prevedeniach. A presne tohoto je daný plugin schopný viď. nižšie.

Ďalšie možnosti

V dobe Covidovej sme obdržali ďalší podnet, ktorým je možnosť dodať do mapy zóny. Možnosť zadať zónu podľa adries a najlepšie k nej vypísať podrobný popis, napríklad: 

Rozvozová zóna 1 = cena 0.50 €

Túto funkciu máme dnes už v plugine zakomponovanú a už premýšľame nad ďalšími.

O tieto možnosti majú záujem predovšetkým reštaurácie, ktoré majú viac rozvozových zón a k nim iné ceny. Ale tento plugin má mnoho možností využitia.

Rozvozové zóny - plugin zeni mapa

Túto možnosť môžu využiť napríklad:

  • Reštaurácie;
  • výrobné závody;
  • veľkoobchodní dodávatelia;
  • kuriérne, či taxi služby.

Čo o plugine povedal klient?

reming.cz:

Pre ukážku, s ktorými e-shopmi a partnermi spolupracujeme pri predaji našich výrobkov, sme chceli vytvoriť mapu, do ktorej by sme mohli zaznamenať názov e-shopu/partnera, jeho adresu, logo a prelink na URL nášho produktu, a to pre každý výrobok zvlášť. Toto sme zadali nášmu správcovi stránok spoločnosti Zeni team, a ten nám vytvoril plugin, ktorý toto dokáže viď. produktové stránky na našom webe.

Ondřej Lhotský – majiteľ

Ak vás plugin Zeni mapa zaujal a máte oň záujem, ozvite se cez kontaktný formulár a my sa s vami spojíme.

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.

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.