Kalkulačka vo WordPress od Zeni

Kalkulačka vo WordPress od Zeni

Počas redesignu webu pre A-technology sme boli požiadaní o prepracovanie ich technologickej kalkulačky. Pre kalkulačku sme nevytvorili len redesign, ale pridali aj novú funkcionalitu.

Ako sme realizovali kompletne nový návrh webovej stránky si môžete prečítať v článku Rýchlosť a spoľahlivosť webovej stránky pre A-technology.

Kde je možné kalkulačku využiť?

Kalkulačku môžu využiť ľudia, ktorí sa rozhodujú stavať dom a radi by vedeli, aké majú možnosti v oblasti vykurovania a ďalších moderných technológií. Kalkulačka je aktuálne nastavená len pre ukážkový dom o veľkosti 160 m2, ale je v pláne pridať aj ďalšie. To ale nebráni tomu, aby si používatelia urobili prehľad o technológiách a ich približných cenách.

Akú kalkulačku sme vytvorili

Nová kalkulačka v základe funguje podobne ako tá stará, takže sa pre používateľov nič nezmenilo a nie je potrebné, aby sa naučili niečo nové pre jej používanie. Klientovi ale pribudli nové možnosti. Jednou z nich je možnosť zadania rozšírenia. Pokiaľ zákazník zaškrtne nejakú z hlavných technológií, ponúknu sa mu na výber rozšírenia. Kalkulačka tak získala na prehľadnosti a zákazník presne vie, aké technológie sú k čomu naviazané. Môže si vďaka tomu aj lepšie špecifikovať svoju požiadavku.

Možnosti rozšírení - Kalkulačka vo WordPress od Zeni
Možnosti rozšírení – Kalkulačka vo WordPress od Zeni

Ďalšou novinkou sú povinné rozšírenia. Niektoré technológie obsahujú rozšírenia, ktoré je potrebné pridať, aby všetko vôbec fungovalo. Preto sa môže stať, že niektoré rozšírenia budú už zaškrtnuté a nepôjde ich odobrať.

Povinné rozšírenia - Kalkulačka vo WordPress od Zeni
Povinné rozšírenia – Kalkulačka vo WordPress od Zeni

Posledné a asi najväčšie rozšírenie pôvodnej kalkulačky sú Dotácie. Zákazník si môže v kalkulačke vybrať jednu z ponúkaných dotácií a automaticky sa mu k nej navolia všetky potrebné technológie na jej splnenie. Vďaka tomu je pekne vidieť, s čím všetkým musí počítať, pokiaľ má o danú štátnu dotáciu záujem.

Možnosti dotácií - Kalkulačka vo WordPress od Zeni
Možnosti dotácií – Kalkulačka vo WordPress od Zeni

Ak chcete poslať svoju kalkuláciu na e-mail, je potrebné vyplniť niekoľko základných údajov. Na žiadosť klienta sme formulár rozšírili o možnosť nahrania dokumentov spojených s vašim projektom. Vďaka týmto podkladom vám môžu v A-technology pripraviť návrh na mieru, presne podľa vašich požiadaviek.

A-technology chce svojim klientom dať náhľad možností, ktoré majú, a umožňuje im vybrať si riešenie podľa svojich predstáv. Presné riešenie je potom možné konzultovať s ľuďmi z A-technology, ktorí vám dodajú presnejšie informácie.

Pokiaľ sa vám naše riešenie kalkulačky zapáčilo alebo potrebujete pomôcť s webom, neváhajte sa nám ozvať.

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.

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov je veľmi dôležitá, nakoľko vám môže ušetriť čas pri načítavaní vašich stránok. Tým vám môže pomôcť zvýšiť návštevnosť stránky a váš web sa tak stáva úspešnejším. 

Veľkosť obrázkov

Používajte obrázky vždy v takej veľkosti, v akej ich zobrazujete. Je zbytočné načítavať obrázok v rozlíšení 1024×1024 px, pokiaľ ho na webe zobrazujete vo veľkosti 16×16 px. 

Nepreháňajte to s množstvom obrázkov. Čím viac obrázkov, tým viac dát sa načítava a tým je načítanie stránky pomalšie. Zamyslite sa, či má obrázok pre stránku pridanú hodnotu, napríklad pri písaní článkov. 

Vo WordPress sa každý obrázok pri jeho nahrávaní zmenší do 4 rôznych veľkostí a následne si môžeme načítať verziu obrázka, ktorá nám najviac pre danú stránku vyhovuje. Napríklad veľkosť miniatúry v blogu je iná ako veľkosť obrázka priamo v blogu. 

  • Miniatúra – 150 x 150 pixelov
  • Stredná veľkosť – maximálne 300 x 300 pixelov
  • Veľká veľkosť – maximálne 1024 x 1024 pixelov
  • Plná veľkosť – pôvodná veľkosť nahraného obrázka

Pre dodatočnú optimalizáciu webu je tiež možné si do WordPressu doplniť vlastné veľkosti obrázkov. 

Formát obrázkov

Bitmapové obrázky

  • Vhodné použiť pre veľmi detailné obrázky ako napríklad fotografie.
  • Bitmapové obrázky obsahujú mapu jednotlivých pixelov.
Bitmapový obrázok
Bitmapový obrázok
  • Formát JPEG podporuje veľké množstvo farieb, preto pôsobí živšie ako napríklad PNG, JPG je najvhodnejší pre zobrazenie fotografií.
  • Formát PNG podporuje menšie množstvo farieb ako JPEG, no rozdiel od JPEG podporuje priehľadnosť, taktiež lepšie zvláda text a ilustrácie.

Na tomto meme môžete vidieť rozdiel v zobrazení ilustrácií a textov medzi JPEG a PNG:

Rozdiel v zobrazení textov medzi JPEG a PNG
Rozdiel v zobrazení textov medzi JPEG a PNG
  • Formát WebP je možné využiť ako modernú náhradu za formáty JPG a PNG. Súbory v tomto formáte sú pri rovnakej kvalite značne menšie ako u konkurenčných formátov.
  • Zaujímavé je, že tento formát bol vyvinutý v Google.
  • WebP zatiaľ nie je pre WordPress natívne podporovaný, ale sú pluginy, ktoré pridávajú podporu. My používame WordPress plugin WebP Converter for Media

Vektorová grafika

  • Môže ušetriť obrovské množstvo dát, obsahuje inštrukcie v textovej podobe na vytvorenie obrázku a nie mapu pixelov, ako je to v prípade bitmapovej grafiky. Preto pre zobrazenie väčšieho obrázku nie je nutný väčší súbor.
  • Tam, kde je to aplikovateľné, je dobré ju preferovať pred bitmapovou (pixelovou).
  • Najčastejšie sa používa pre logá a rôzne ikony.
  • Veľkosť súborov narastá s množstvom detailov na obrázku.

Výhodný formát pre vektorovú grafiku na webe je SVG.

SVG obrázky nie je možné nahrať do knižníc médií vo WordPress. Tieto obrázky môžeme zobraziť pomocou kódu v plugine alebo v téme pri tvorbe HTML štruktúry, buď dodatočným načítaním alebo vnorením do HTML štruktúry.

Vo WordPress je práve možnosť použitia priamo v HTML užitočná aj v Gutenberg alebo Classic editore. SVG obrázky môžeme do editora vložiť ako vlastné HTML. Výhodou SVG obrázkov je tiež, že je možné upraviť ich zobrazenie pomocou CSS štýlovania, nakoľko sú bežná súčasť HTML.

Škálovateľnosť
Škálovateľnosť

Kompresia obrázkov

Obrázkové formáty podporujú zväčša viac úrovní kompresie, kde je pri silnejšej kompresii možné ušetriť viac dát, no na úkor kvality.

Pre každý obrázok, ktorý nahrávate na váš web, by mala byť aplikovaná kompresia. Viac skomprimované obrázky sú menšie a rýchlejšie sa načítajú používateľovi vášho webu. Netreba však zabúdať, že kompresiou sa stráca kvalita a preto treba zvoliť kompresiu, pri ktorej budú detaily obrázkov dostatočne zachované.

Príliš zkomprimovaný obrázok
Príliš zkomprimovaný obrázok

Tu môžete vidieť veľmi výhodný formát WebP, ktorý poskytuje najlepší pomer veľkosti súboru k jeho kvalite, v porovnaní s JPEG formátom.

Porovnanie zobrazenia formátu WebP a JPEG
Porovnanie zobrazenia formátu WebP a JPEG

WordPress pluginy pre kompresiu obrázkov

S kompresiou obrázkov vám môže pomôcť dobrý WordPress plugin. Pluginy existujú rôzne, no tu vám spomenieme len niektoré pluginy pre kompresiu obrázkov. 

  • EWWW Image Optimizer – Tento WordPress plugin je bezplatný a pri nahrávaní obrázkov ich automaticky komprimuje
  • Smush – okrem kompresie obrázkov obsahuje aj iné užitočné optimalizačné techniky.
  • WebP Converter for Media – Nahrádza súbory JPG a PNG formátom WebP, čím môžete bez straty kvality ušetriť viac ako polovicu zaťaženia. Po inštalácií pluginu sa obrázky automaticky prevedú do nového formátu. 

Optimalizácia a kompresia obrázkov je len jedným z mnohých aspektov, ktoré vám môžu dopomôcť so zrýchlením vašej stránky a so zvýšením jej návštevnosti. Ak sa chcete dozvedieť viac, prečítajte si článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress alebo Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Ak máte záujem o viac informácií a potrebujete poradiť či pomôcť so zrýchlením vašej webovej stránky, napíšte nám a my vám radi 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.

Menu na mieru pre Engeto bez JavaScriptu

Menu na mieru pre Engeto bez JavaScriptu

Nedávno sme pre nášho klienta Engeto vytvorili zaujímavé riešenie. Vytvorili sme menu na mieru bez použitia JavaScriptu, vďaka čomu sme nespomalili výkon ich webovej stránky. V dnešnom článku si môžete prečítať, ako sme pracovali na vytvorení menu a aké sú výhody menu bez JavaScriptu.

Zoznámte sa s Engetom

Engeto organizuje IT kurzy pre začiatočníkov a pokročilých, ktorým pomáha nájsť si prácu v oblasti IT. Spolupracujú s parterskými firmami a na ich webe nájdete príbehy absolventov, ktorí rozprávajú o tom, ako sa – niekedy aj z nie ITodborov – dostali cez Engeto k práci v IT

Engetu sme už pomohli s vytvorením stránok Absolventi a Termíny, ktoré sme vytvorili podľa ich grafiky, a pridali filtrovanie, ktoré predtým nebolo možné. Umožnili sme tak ich zákazníkom jednoduchšie filtrovanie kurzov a absolventov. 

Engeto nás požiadalo o lepšie rozdelenie stránky pre jednotlivcov a firemných návštevníkov. Pôvodný web ani šablóna to neumožňovali v takom veľkom rozsahu. Začali sme sa teda podieľať na vytvorení riešenia, pre nich na mieru.

Výhody menu bez JavaScriptu

Menu funguje, ako som sa už zmienil, bez použitia JavaScriptu. Rozhodli sme sa JavaScript nepoužívať, pretože podľa nás nie je vždy potrebný a len zbytočne zdržiava načítanie stránky. Bola to pre nás aj taká výzva, či niečo takéto zvládneme urobiť. Najviac som asi hrdý na mobilnú verziu menu, ktorá má aj tlačidlo späť, ktoré sa z podmenu vracia do hlavnej ponuky.

Mobilná verzia menu
Mobilná verzia menu
  • Vďaka tomu, že nebol použitý JavaScript, sa stránka nijako nespomalila pri načítaní.
  • Zákazníkovi táto úprava umožňuje vytvoriť menu presne podľa jeho predstáv a lepšie tak svojim študentom predstaviť ponuky kurzov a obsah webu.
  • Každá stránka má vo svojej administrácii možnosť nastaviť, aké menu chce v hlavičke zobraziť. V nastaveniach sa potom spravujú dve menu. Jedno pre stránky jednotlivcov a druhé pre firemné. To umožňuje veľmi jednoduchú správu a prípadné výmeny menu za iné.
  • Hlavné menu je jednoducho upraviteľné. Všetky prvky sú v ňom nastaviteľné cez WordPress administráciu, takže nie je potrebný zásah programátora do kódu pri nejakej požiadavke na zmenu.
WordPress administrácia menu na mieru
WordPress administrácia menu na mieru

Aby som vás neklamal, tak jeden JavaScriptový kód som napísať musel. Divi šablóna, ktorá je na tomto webe využitá, totiž blokovala používanie nášho prístupu na mobiloch. Museli sme teda napísať JavaScript, ktorý ich JavaScript obíde. Menu vlastne funguje najlepšie, pokiaľ na celej stránke vypnete JavaScript. Potom vám ale nepôjde zvyšok stránky.

Ako vzniklo menu na mieru

Na vytvorenie menu som využil kombináciu elementu <label> a checkbox inputov. Vďaka ich pomenovaniu je možné tieto dva elementy previazať, aj keď sú na úplne iných miestach v stránke. A čo je ešte lepšie, že to isté funguje aj pre viaceré <label> elementy naviazané na jeden input. Tak som dosiahol možnosť dostať sa na mobiloch na podmenu a späť.

Aby som všetky tieto informácie dostal do štandardného WordPress menu, bolo treba napísať vlastné MenuWalker. To je trieda, ktorú odovzdáte vášmu menu a podľa nej sa vypisujú jednotlivé časti menu. V triede si potom môžeme upraviť jeho funkcie a pridať tak do menu nejaké vlastné položky.

Využitie WordPress pluginu

Poslednú technológiu, ktorú som použil na túto prácu, bol WordPress plugin Advance Custom Fields (ACF).

Jeho možnosť pridávania vlastných položiek na rôzne miesta WordPress administrácie ma stále baví. Narazil som ale na jeden drobný problém. 

ACF nemá možnosť definovať, do akej úrovne menu chcete nové editovateľné položky pridať. 

Vytvoril som teda kód, ktorý zisťuje, v akej úrovni sa dané menu nachádza, a potom povoľuje, prípadne vypína ACF položky. To mi umožnilo spríjemniť administrátorovi prácu s editáciou, pretože sa mu tam nepletú položky, ktoré by nemal nastavovať a nič by vo výsledku nerobili.

Pokiaľ máte tiež záujem o riešenie na mieru či zrýchlenie svojich webových stránok alebo potrebujete poradiťnapíšte nám, sme tu pre vás.

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.

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.