Kalkulačka ve WordPress od Zeni

Kalkulačka ve WordPress od Zeni

Během redesignu webu pro A-technology jsme byli požádání o přepracování jejich technologické kalkulačky. Pro kalkulačku jsme neudělali jen redesign, ale přidali i novou funkcionalitu.

Jak jsme realizovali kompletně nový návrh webové stránky si můžete přečíst v článku Rychlost a spolehlivost webové stránky pro A-technology.

Kde lze kalkulačku využít?

Kalkulačku mohou využít lidé, kteří se rozhodují stavět dům a rádi by věděli, jaké mají možnosti v oblasti vytápění a dalších moderních technologií. Kalkulačka je aktuálně nastavena jen pro ukázkový dům o velikosti 160 m2, ale je v plánu přidat i další. To ale nebrání tomu, aby si uživatelé udělali přehled o technologiích a jejich přibližných cenách.

Jakou kalkulačku jsme vytvořili

Nová kalkulačka v základu funguje podobně jako ta stará, takže se pro uživatele nic nezměnilo a není potřeba, aby se naučil něco nového pro její používání. Klientovi ale přibily nové možnosti. Jednou z nich je možnost zadání rozšíření. Pokud zákazník zaškrtne nějakou z hlavních technologií, nabídnou se mu na výběr rozšíření. Kalkulačka tak získala na přehlednosti a zákazník přesně ví, jaké technologie jsou k čemu navázány. Může si díky tomu i lépe specifikovat svůj požadavek.

Možnosti rozšíření - Kalkulačka ve WordPress od Zeni
Možnosti rozšíření – Kalkulačka ve WordPress od Zeni

Další novinkou jsou povinná rozšíření. Některé technologie obsahují rozšíření, která je nutné přidat, aby vše vůbec fungovalo. Proto se může stát, že něktérá rozšíření budou už zaškrtlá a nepůjde je odebrat.

Povinná rozšíření - Kalkulačka ve WordPress od Zeni
Povinná rozšíření – Kalkulačka ve WordPress od Zeni

Poslední a asi největší rozšíření původní kalkulačky jsou Dotace. Zákazník si může v kalkulačce vybrat jednu z nabízených dotací a automaticky se mu k ní navolí všechny potřebné technologie pro její splnění. Díky tomu je hezky vidět, s čím vším musí počítat, pokud má o danou státní dotaci zájem.

Možnosti dotací - Kalkulačka ve WordPress od Zeni
Možnosti dotací – Kalkulačka ve WordPress od Zeni

Chcete-li poslat svou kalkulaci na e-mail, je třeba vyplnit několik základních údajů. Na žádost klienta jsme formulář rozšířili o možnost nahrání dokumentů spojených s vaším projektem. Díky těmto podkladům vám mohou v A-technology připravit návrh na mírů, přesně podle vašich požadavků.

A-technology chce svým klientům dát náhlednout do možností, které mají, a umoňuje jim vybrat si řešení podle svých představ. Přesné řešení je pak možné konzultovat s lidmi z A-technology, kteří vám dodají přesnější informace.

Pokud se vám naše řešení kalkulačky zalíbilo nebo potřebujete pomoci s webem, neváhejte se nám ozvat

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Optimalizace a komprese obrázků ve WordPress

Optimalizace a komprese obrázků ve WordPress

Optimalizace a komprese obrázků je velmi důležitá. Zkrátí čas při načítání vašich stránek, a tím vám může pomoci zvýšit návštěvnost stránky. Váš web se tak stává úspěšnějším.

Velikost obrázků

Používejte obrázky vždy v takové velikosti, v jaké je zobrazujete. Je zbytečné načítat obrázek v rozlišení 1024×1024 px, pokud jej na webu zobrazujete ve velikosti 16×16 px.

Nepřehánějte to s množstvím obrázků. Čím více obrázků, tím více dat se načítá a tím je načítání stránky pomalejší. Zamyslete se, zda má obrázek pro stránku přidanou hodnotu, například při psaní článků.

Ve WordPress se každý obrázek při nahrávání zmenší do 4 různých velikostí a následně si můžeme načíst verzi obrázku, která nám nejvíce pro danou stránku vyhovuje. Například velikost miniatury v blogu je jiná než velikost obrázku přímo v blogu.

  • Miniatura – 150 x 150 pixelů
  • Střední velikost – maximálně 300 x 300 pixelů
  • Velká velikost – maximálně 1024 x 1024 pixelů
  • Plná velikost – původní velikost nahraného obrázku

Pro dodatečnou optimalizaci webu lze také do WordPressu doplnit vlastní velikosti obrázků.

Formát obrázků

Bitmapové obrázky

  • Vhodné použít pro velmi detailní obrázky jako například fotografie
  • Bitmapové obrázky obsahují mapu jednotlivých pixelů.
Bitmapový obrázok
Bitmapový obrázok
  • Formát JPEG podporuje velké množství barev, proto působí živěji jako například PNG, JPG je nejvhodnější pro zobrazení fotografií.
  • Formát PNG podporuje menší množství barev než JPEG, ale na rozdíl od JPEG podporuje průhlednost, také lépe zvládá text a ilustrace.

Na tomto memu můžete vidět rozdíl v zobrazení ilustrací a textů mezi JPEG a PNG:

Rozdíl v zobrazení textů mezi JPEG a PNG
Rozdíl v zobrazení textů mezi JPEG a PNG
  • Formát WebP lze využít jako moderní náhradu za formáty JPG a PNG. Soubory v tomto formátu jsou při stejné kvalitě značně menší než u konkurenčních formátů.
  • Zajímavé je, že tento formát byl vyvinut v Google.
  • WebP zatím není pro WordPress nativně podporován, ale jsou pluginy, které přidávají podporu. My používáme WordPress plugin WebP Converter for Media.

Vektorová grafika

  • Může ušetřit obrovské množství dat, obsahuje instrukce v textové podobě k vytvoření obrázku a nikoli mapu pixelů, jako je tomu v případě bitmapové grafiky. Proto pro zobrazení většího obrázku není nutný větší soubor.
  • Tam, kde je to aplikovatelné, je dobré ji preferovat před bitmapovou (pixelovou).
  • Nejčastěji se používá pro loga a různé ikony.
  • Velikost souboru narůstá s množstvím detailů na obrázku.

Výhodný formát pro vektorovou grafiku na webu je SVG.

SVG obrázky nelze nahrát do knihoven médií ve WordPress. Tyto obrázky můžeme zobrazit pomocí kódu v pluginu nebo v šabloně při tvorbě HTML struktury, buď dodatečným načtením nebo vnořením do HTML struktury.

Ve WordPress je právě možnost použití přímo v HTML užitečná také v Gutenbergu nebo Classic editoru. SVG obrázky můžeme do editoru vložit jako vlastní HTML.Výhodou SVG obrázků také je, že je možné upravit jejich zobrazení pomocí CSS stylování, jelikož jsou běžnou součástí HTML.

Škálovatelnost
Škálovatelnost

Komprese obrázků

Obrázkové formáty podporují většinou více úrovní komprese, kde je možné ušetřit více dat při silnější kompresi, ale je to na úkor kvality.

Pro každý obrázek, který nahráváte na váš web, by měla být aplikována komprese. Více zkomprimované obrázky jsou menší a rychleji se načtou uživateli vašeho webu. Nesmíme však zapomínat, že kompresí se ztrácí kvalita, a proto je třeba zvolit kompresi, při které budou detaily obrázků dostatečně zachovány.

Příliš komprimovaný obrázek
Příliš komprimovaný obrázek

Zde můžete vidět velmi výhodný formát WebP, který poskytuje nejlepší poměr velikosti souboru k jeho kvalitě, v porovnání s JPEG formátem.

Porovnání zobrazení formátu WebP a JPEG
Porovnání zobrazení formátu WebP a JPEG

WordPress pluginy pro kompresi obrázků

S kompresí obrázků vám může pomoci dobrý WordPress plugin. Pluginy existují různé, ale zde zmíníme jen některé pluginy pro kompresi obrázků.

  • EWWW Image Optimizer – tento WordPress plugin je bezplatný a při nahrávání obrázků je automaticky komprimuje,
  • Smush – kromě komprese obrázků obsahuje i jiné užitečné optimalizační techniky,
  • WebP Converter for Media – nahrazuje soubory JPG a PNG formátem WebP, čímž můžete bez ztráty kvality ušetřit více než polovinu zatížení. Po instalaci pluginu se obrázky automaticky převedou do nového formátu.

Optimalizace a komprese obrázků je jen jedním z mnoha aspektů, které vám mohou dopomoci se zrychlením vaší stránky a se zvýšením její návštěvnosti. Chcete-li se dozvědět více, přečtěte si článek 6 způsobů, jakými zlepšíte rychlost a výkon vaší webové stránky ve WordPress nebo Zrychlení webových stránek ve WordPress díky optimalizaci JavaScriptu a CSS.

Máte-li zájem o více informací a potřebujete poradit či pomoci se zrychlením vaší webové stránky, napište nám a my vám rádi pomůžeme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Menu na míru pro Engeto bez JavaScriptu

Menu na míru pro Engeto bez JavaScriptu

Před nedávnem jsme pro našeho klienta Engeto dělali zajímavé řešení. Vytvořili jsme menu na míru bez použití JavaScriptu, díky čemuž jsme nezpomalili výkon jejich webové stránky. Jak jsme pracovali na tvorbě menu a jaké výhody přináší menu bez JavaScriptu, si můžete přečíst v dnešním článku.

Seznamte se s Engetem

Engeto, pořádá IT kurzy pro začátečníky a pokročilé, kterým pomáhá najít uplatnění v IT oboru. Spolupracují s partnerskými firmami a na jejich webu najdete příběhy absolventů, kteří vypráví, jak se – někdy i z ne IT oborů – dostali přes Engeto k práci v IT

Engetu jsme již pomohli s vytvořením stránek Absolventi a Termíny, které jsme vytvořili podle jejich grafiky, a přidali filtrování, které předtím nebylo možné. Umožnili jsme tak jejich zákazníkům jednodušší filtrování kurzů a absolventů.

Engeto nás požádalo o lepší rozdělení stránky pro jednotlivce a firemní návštěvníky. Původní web ani šablona to neumožňovaly v takto velkém rozsahu. Začali jsme se tedy podílet na vytvoření řešení na míru pro ně.

Výhody menu bez JavaScriptu

Menu funguje, jak jsem se již zmínil, bez použití JavaScriptu. Rozhodli jsme se JavaScript nepoužívat, protože podle nás není vždy potřeba a jen zbytečně zdržuje načítání stránky. Byla to pro nás i taková výzva, jestli něco takového zvládneme udělat. Nejvíce jsem asi hrdý na mobilní verzi menu, která má i tlačítko zpět, které se z podmenu vrací do hlavní nabídky.

Mobilní verze menu
Mobilní verze menu
  • Díky tomu, že nebyl použit JavaScript, se stránka nijak nezpomalila při načítání.
  • Zákazníkovi tato úprava umožňuje vyvořit menu přesně podle jeho představ a lépe tak svým studentům představit nabídků kurzů a obsah webu.
  • Každá stránka má ve své administraci možnost nastavit, jaké menu chce v hlavičce zobrazit. V nastavení se pak spravují dvě menu. Jedno pro stránky jednotlivců a druhé pro firemní. To umožňuje velice jednoduchou správu a případné výměny menu za jiné.
  • Hlavní menu je jednoduše upravitelné. Všechny prvky jsou v něm nastavitelné přes WordPress administraci, takže není potřeba zásahu programátora do kódu při nějakém požadavku na změnu. 
WordPress administrace menu na míru
WordPress administrace menu na míru

Abych vás neklamal, tak jeden JavaScriptový kód jsem musel napsat. Divi šablona, která je na tomto webu využita, totiž blokovala používání našeho přístupu na mobilech. Museli jsme tedy napsat JavaScript, který jejich JavaScript obejde. Menu vlastně funguje nejlépe, pokud na celé stránce vypnete JavaScript. Pak vám ale nepojede zbytek stránky.

Jak vzniklo menu na míru

Pro vytvoření menu jsem využil kombinace elementu <label> a checkbox inputů. Díky jejich pojmenování lze tyto dva elementy provázat, i když jsou na úplně jiných místech ve stránce. A co je ještě lepší, že to stejné funguje i pro více <label> elementů navázaných na jeden input. Tak jsem dosáhl možnosti dostat se na mobilech na podmenu a zpátky.

Abych všechny tyto informace dostal do standardního WordPress menu, bylo potřeba napsat vlastní MenuWalker. To je třída, kterou předáte vašemu menu a podle ní se vypisují jednotlivé části menu. Ve třídě si pak můžeme upravit jeho funkce a přidat tak do menu nějaké vlastní položky.

Využití WordPress pluginu

Poslední technologii, kterou jsem použil pro tuto práci, byl WordPress plugin Advance Custom Fields (ACF). 

Jeho možnost přidávání vlastních položek na různá místa WordPress administrace mě stále baví. Narazil jsem ale na jeden drobný problém.

ACF nemá možnost definovat, do jaké úrovně menu chcete nové editovatelné položky přidat.  

Vytvořil jsem tedy kód, který zjišťuje, v jaké úrovni se daná menu nachází, a pak povoluje, případně vypíná ACF položky. To mi umožnilo zpříjemnit administrátorovi práci s editací, protože se mu tam nepletou položky, které by neměl nastavovat a nic by ve výsledku nedělaly.

Pokud máte také zájem o řešení na míru či zrychlení svých webových stránek nebo potřebujete poradit, napište nám, jsme tu pro vás. 

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Tvorba webové stránky pro i4comfort

Tvorba webové stránky pro i4comfort

Aplikace i4comfort od společnosti A-technology přináší komplexní a jednoduchá řešení ovládání technologií ve vašem domě na dálku. Myšlenka úspory v oblasti vytápění, a tím i zmenšení CO2 stopy pomocí inteligentního ovládání technologií, nás zaujala a bylo nám potěšením podílet se na tvorbě webové stránky pro tuto aplikaci. 

Proč a jak vznikla stránka

Stránky pro i4comfort jsme vytvářeli v CMS WordPress pro již stávajícího klienta, kterému jsme již letos spustili kompletně nový produkční web. Společnost A-TECHNOLOGY s.r.o. má své prezentační stránky a-technology.cz, proto bylo důležité nadesignovat webovou stránku i4comfort v podobném duchu jako tu mateřskou a zároveň vytvořit webové stránce vlastní identitu.

Porovnání staré a nové stránky

Stará webová stránka i4comfort měla několik nedostatků:

  • Nesplňovala kritéria zabezpečení.
  • Chybělo vývojové prostředí v podobě stagingu.
  • Logo a vzhled byly zastaralé.
  • Web nebyl responzivní.
Stará webová stránka

Nová stránka:

  • Webová stránka je plně responzivní.
  • Má na více místech CTA tlačítko, které vyzývá k akci, díky čemuž je větší pravděpodobnost získání si zákazníka.
  • Vytvořili jsme nové logo a nadesignovali nový vzhled stránky.
Hlavní stránka i4comfort

Grafika webové stránky

  • Tvorba webové stránky ve WordPress pro i4comfort graficky navazovala na zmiňovanou mateřskou stránku.
  • Stránka má unikátní a zapamatovatelný design.
  • Vytvořením osobité identity stránky je samozřejmé, že jde o samostatný web.
  • Zákazník a-technology zároveň získává familiární pocit.
  • Informace nejsou komunikovány pouze textově, ale jsou znázorněny na mnoha místech graficky, díky čemuž jsou více zapamatovatelné a přehledné.

Technické funkce

Moderní zážitek

Webová stránka disponuje mnoha vizuálními efekty, které jsou zakomponovány tak, že stránku nezpomalují. Web je také responzivní na jakémkoli zařízení.

  • Mnohé animace a interaktivní části využívají čistě možnosti stylování (css).
  • Není nutné donačítat JavaScript ani kvůli některým rozklikatelným interaktivním sekcím, u kterých se jinde běžně používá.
  • Stránka je tak rychlejší, zároveň poskytuje stejně kvalitní zážitek, jako např. zde:
Vizuální efekty webové stránky

Stránka na uživatele reaguje

Symboly jednotlivých technologií se mění podle toho, o čem uživatel momentálně čte. Podle pozic na stránce se mění i CTA tlačítko, ikony, či navigační prvky (horní menu, tečky vpravo). Vše si můžete prohlédnout na stránce „Jak funguje i4comfort“.

Webová stránka na uživatele reaguje

Na stránce ,,Možnosti využití” se také interaktivně mění obrázky podle toho, o čem uživatel čte. Čtenář si tak jednoduše představí jednotlivé prvky, o kterých čte a také si je lépe zapamatuje.Toto vše vytváří unikátní, rychlou a interaktivní zkušenost, která zaujme uživatele.

Výhody nové webové stránky

Šablona na sage

Lehká konfigurovatelnost

  • Námi naprogramované téma pro WordPress umožňuje snadnou konfigurovatelnost.
  • Pro každou stránku je zvláště nastavitelné chování a styl hlavičky stránky.
  • Veškerý obsah je jednoduše editovatelný bez nutného zásahu vývojáře.

Použitelnost z hlediska mobil/desktop

Desktopové prostředí není ani zdaleka jen zvětšeným mobilním prostředím. Myslíme na dobrou zkušenost pro každého uživatele.

  • Na desktopu je využíván veškerý prostor, díky čemuž je na obrazovce poskytnuto co nejvíce informací a ani na velké obrazovce web nepůsobí prázdný.
  • Uživatelská zkušenost na mobilu je zároveň přizpůsobena používání pomocí prstu a také menší obrazovce.
  • Na mobilu je vše jednoduše klikatelné, snadno a rychle dostupné.
  • Mnohé sekce vypadají v porovnání mobilu a desktopu výrazně odlišně.
  • Pro lepší zážitek byly pro mobil mnohé části zjednodušeny, některé vizuální aspekty používané pro desktop vynechány, jelikož neměly pro mobilního uživatele přidanou hodnotu.
Webová stránka je responzivní

Pro i4comfort jsme vytvořili nový web se spoustou vychytávek, který je zároveň rychlý a přehledný. Pokud potřebujete pomoci s tvorbou webové stránky a chcete poskytnout svým zákazníkům kvalitní zážitek, neváhejte se na nás obrátit, rádi vám pomůžeme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

5 věcí, na které nesmíme zapomenout při tvorbě webových stránek

5 věcí, na které nesmíme zapomenout při tvorbě webových stránek

Při tvorbě webových stránek jde o komplexní proces, který tvoří několik činností. Od průzkumu trhu, přes grafický design, programování webu, tvorbu textů až po samotné spuštění webové stránky. Přečtěte si následujících 5 věcí, které jsou při tvorbě webové stránky pro nás velmi důležité, a proto na ně vždy přihlížíme.

Analýza klíčových slov a stanovení cílů

Lidé hledají přes vyhledávače různé výrazy, které jim pomáhají najít to, co hledají. Pomocí analýzy klíčových slov najdeme fráze, které jsou opakovaně vyhledávané a souvisí s vaším zaměřením, díky čemuž zjistíme, přes která klíčová slova se návštěvníci dostanou na vaši webovou stránku.

Před samotnou tvorbou webu je nejdůležitější ujasnit si principy a hodnoty společnosti, které pomáhají k analýze klíčových slov. Je nutné zaměřit se na to, jaké má firma vize do budoucnosti a také jaký je její příběh. Následně je třeba určit cíle, na základě kterých budeme tvořit váš web pro kvalitní sortu klientů.

Analýza klíčových slov je důležitou prioritou pro úspěch webu od které se následně odvíjí optimalizace pro vyhledávače.

Optimalizace pro vyhledávače (SEO)

Díky SEO optimalizaci dostaneme vaši webovou stránku snadněji mezi vrchní výsledky vyhledávání. Při současné míře konkurence ve vyhledávání je co nejlepší optimalizace pro vyhledávače nutností.

Pro SEO optimalizaci „vylaďujeme” nejen texty na stránkách. Jde o komplexnější proces. Co je pro optimalizaci důležité a na co se zaměřujeme?

  • Rychlost načítání; 
  • bezpečnost stránek; 
  • popisky fotek a produktů; 
  • obrázky; 
  • optimalizace textů
  • správné nadpisy, titulky; 
  • technické nastavení SEO; 
  • a mnoho dalšího…

—> O tvorbě optimalizovaného obsahu se dozvíte více v článku Správná tvorba optimalizovaného obsahu webové stránky

—> Jak psát články pro SEO, a děláme to tak i my, si můžete přečíst zde: SEO – Jak psát články, aby byly čitelné, a optimalizované pro vyhledávače

Copywriting

Správná tvorba textů na webové stránce je základem zmiňované optimalizace pro vyhledávače a také samotné tvorby webové stránky. Proto je důležité psát texty nejen zajímavé, ale i gramaticky správné spolu s využitím vhodných klíčových slov. Součástí copywritingu je příprava textů v souladu s analýzou vaší cílovky a jejich optimalizace pro vyhledávače pomocí klíčových slov, správné hierarchie nadpisů atd.

Více o tom, co všechno by měl obsahovat každý článek si přečtěte v článku Náležitosti, které by měl obsahovat každý článek.

Přístupnost webové stránky

Nezapomínejte, že na vaší webové stránce se čtenář musí co nejjednodušeji orientovat. Navíc si dnes již přes 67 % uživatelů prohlíží internet z mobilu nebo tabletu. Pokud uživatel nenajde to, co hledá, stránka je pro něj příliš komplikovaná, vyskakují na něj různá okna, nebo je přehlcena reklamou, okamžitě odchází a vám tak zvyšuje míru opuštění stránky, čímž se také zhoršuje SEO.

Proto tvoříme stránky tak, aby splňovaly potřebná kritéria. Je pro nás důležité, aby vaše webová stránka byla rezponzívní a co nejvíce přístupná pro všechny uživatele.

Co jsou to přístupné stránky a nejčastější problémy webů sepsala naše kolegyně Mishka v článku Přístupný web je výhodný pro všechny.

Jak jsme v přístupnosti pomohli? Přečtěte si naše případové studie:

—> I velká škola se spoustou aktivit může mít přehledný web

—> Přístupný web pro ZŠ a MŠ Otnice

—> Web pro MŠ Hrušovany u Brna na přístupné šabloně

Marketing

Pokud chcete opravdu výkonnou webovou stránku, která přináší výsledky, samotná optimalizace SEO nestačí. Při tvorbě webové stránky si promyslete, jakým způsobem budete vaši stránku prezentovat ostatním. Budete psát blog? Nabízet různé akce, či výhody? Jakým způsobem zakomponujete na webu recenze? Tomu následně přizpůsobíme i tvorbu a design stránky. Po jejím spuštění je také důležité investovat do samotného marketingu, jako například PPC kampaně, či prezentace na sociálních sítích, s čím vám také rádi pomůžeme.

Jak se připravit na marketing si můžete přečíst v článku Připravte se pořádně na marketing.

Pokud chcete, aby vaše webová stránka byla výkonná a přinášela vám zákazníky, neváhejte nás kontaktovat, rádi vám pomůžeme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Rychlost a spolehlivost webové stránky pro A-technology

Rychlost a spolehlivost webové stránky pro A-technology

Jedním z našich spokojených zákazníků je i A-technology. Realizovali jsme pro ně kompletně nový návrh webové stránky – od grafického návrhu, přes šablonu a plugin na míru, až po plně funkční web. Přečtěte si, jak jsme postupovali při tvorbě webové stránky, jaké funkcionality jsme vytvořili a jak jsme dosáhli rychlost a spolehlivost jejich webové stránky.

A-technology 

Společnost A-technology již od roku 2006 realizuje řešení systémů vytápění a chlazení při výstavbě a provozu komerčních a obytných budov. Nabízejí také systémy technologického ohřevu a chlazení jako například solární systémy, klimatizace, či podlahové vytápění.

Pro A-technology jsme vytvořili nový návrh webové stránky a spolu s ním jsme do webu zakomponovali různé zajímavé funkcionality dle požadavků klienta.

Jak jsme postupovali při tvorbě webové stránky?

  1. Nejdůležitější je komunikace s klientem. V první řadě jsme si společně ujasnili představu a vydefinovali si, co klient požaduje.
  2. Náš grafik Jarda vytvořil wireframy kde definoval konkrétní prvky, které bude webová stránka obsahovat. Následně dodal grafický návrh klientovi, který jsme společně prodiskutovali.
  3. Následovala samotná tvorba šablony a pluginu na míru dle požadavků klienta, o kterou se postarali developeři ja (Daniel) a Zbyněk.
  4. Po vytvoření stránky byla stará webová stránka nahrazena novou – rychlejší a spolehlivější.
  5. Postupně jsme přidávali další funkcionality a dodávali nové změny klientovi.

Jaké funkcionality jsme dělali pro A-technology?

  • Komunikace s externím servisem pro objednávku servisu

Zajistili jsme okamžité řešení požadavků klientů díky napojení formuláře přímo na dodavatele. Dodavatel dostane vyplněný formulář, přímo do jeho interního systému HELIOS přes API, díky čemuž může automaticky poskytnout žádaný servis klientovi, bez zbytečných prostojů a zároveň si může pracovník servisu naplánovat efektivně pracovní den bez zbytečně najetých kilometrů.

  • Automatické vyplňování adresy

Součástí formuláře je i automatické vyplnění adresy na základě zvoleného místa na mapě ve formulářích, což ušetří čas.

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

Každá aktualita obsahuje informaci o tom, kolik času zabere čtení článku. Díky této funkcionalitě čtenář může očekávat, jak dlouho bude na stránce a v konečném důsledku to může přispět ke snížení míry opouštění stránky čtenářem.

  • Prezentační stránky

Jde o tradičnější, ale velmi důležité funkcionality jako reference, používané technologie, informační stránky či blog.

  • Kalkulačka

Vypočítá předběžnou cenu objednávky v € a CZK na základě technologií, které by dle zákazníka služba měla obsahovat. Tato funkcionalita se pro klienta momentálně připravuje.

Rychlá a spolehlivá webová stránka

Rychlost

  • Používáme pouze nutné minimum javascriptu.
  • Stylování (css) je v šabloně rozděleno tak, aby načetlo jen to, co je potřebné pro danou stránku.
  • Lazy load médií – načítání obrázků atd. neblokuje prohlížeč a postupně se donačítavají, aby byla webová stránka co nejdříve interaktivní.
  • Tvoříme kód s důrazem na výkon stránky.
  • Využíváme co nejméně pluginů třetích stran, které běží při načítání stránky.
  • Používáme caching, který výrazně urychluje načítání stránek.
Rychlost webu A-technology 94 % na počítači

Spolehlivost

  • Při tvorbě webových stránek používáme pouze ověřené a otestované pluginy. O většinu funkcionalit se starají developeři, čímž se limituje závislost na třetích stranách. Případné problémy proto můžeme řešit přímo.
  • Všechny pluginy jsou pravidelně updatované kvůli opravám chyb a bezpečnostním dírám.
  • Před tím, než cokoli přidáme na produkční server, to otestujeme na stagingu.
  • Pravidelně monitorujeme stav serverů.

Možnost přidání funkcí na základě požadavku klienta

Na modifikovatelnost a rozšiřitelnost myslíme u všech nových funkcionalit. Vytvořili jsme custom plugin a šablonu na Sage, které mají přehlednou strukturu umožňující pokračovat dále ve vývoji. Jednoduše můžeme přidávat nové funkce, protože počítáme s tím, že klient může kdykoli požadovat jakoukoliv změnu.

Přístupnost stránky

Také pro A – Technology jsme vytvořili webovou stránku tak, aby splňovala všechna kritéria.Web jsme udělali co nejvíc přístupný, optimalizovaný pro mobily, který je rychlý, bezpečný a spolehlivý. Pokud máte i vy zájem o takovou webovou stránku, neváhejte se na nás obrátit.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Serial Killer – Proč je dobré mít webovou stránku vytvořenou na Sage?

Serial Killer – Proč je dobré mít webovou stránku vytvořenou na Sage? 

I Zeni team měl možnost podílet se na mezinárodním festivalu TV a web seriálů – Serial Killer. Vytvořili jsme pro něj webovou stránku, jejíž téma je postavena na Sage. Jak jsme při tvorbě webové stránky postupovali a také výhody stránky vytvořené na Sage šabloně se dozvíte v článku.

Co je Serial Killer?

Určitě už tušíte, že festival Serial Killer potěší všechny nadšence seriálové kultury. Tvůrci nejlepších seriálových novinek ze střední a východní Evropy se každoročně setkávají na mezinárodním soutěžním festivalu televizních a webových seriálů. Na velkém plátně si návštěvníci mohou zhlédnout premiéry, které jinde nemají možnost vidět. Navíc, v sekci Fokus se festival každým rokem zaměří na jinou zemi a představí její seriálovou tvorbu.

Tvorba webové stránky

Festival nás zaujal, a také proto jsme se rozhodli zapojit do tvorby jejich webové stránky.

HTML strukturu nejprve vytvořil grafik Martin Pecina, následně bylo nutné ji rozdělit na menší části a vytvořit za ní celý web.

Z celkového zadání a grafiky jsme si stránku rozdělili na sekce:

  • seriály;
  • panely;
  • videa;
  • přednášející;
  • členové týmu.

U každé ze zmíněných sekcí jsme identifikovali, která data bude nutné vyplňovat a přidali jsme možnost jejich editace do administrace. Data bylo také nutné napasovat do připravené grafiky a pomocí nich tak oživit obsah.

Jaké funkcionality jsme dělali pro Serial Killer?

Hromadné stažení fotek z jednotlivých dní z presskit

Klient nám zadal, aby bylo možné stáhnout všechny fotky z jednotlivých dní z presskit a to v zip souboru. Připravili jsme funkcionalitu, která všechny dané fotky zazipuje a uživatel si je může stáhnout.

Předplatitelská sekce

Klient potřeboval přidat na web možnost koupit si předplatné do interní sekce webu. Připravili jsme propojení s Woocommerce a Gravity Forms, které zajišťují nákup přístupů a také přihlášení a omezení přístupů na určité stránky.

Archivace starého ročníku

Toto je jedna z nových features, které stránka obsahuje. Klient požadoval, aby bylo možné nastavit jednotlivé seriály, seriálové sekce, panely a přednášející jako archivované. Ty se pak nebudou zobrazovat na standartních místech a on si je bude moct přidat na vlastní stránky.

Proč je dobré mít šablonu stránky vytvořenou na Sage?

  • Nejlepší nástroj na tvorbu WordPress šablon

Dává programátorovi skvělé možnosti, jak udržet svůj kód přehledný a čitelný. Ať už se jedná o psaní CSS s SASS, Blade templaty, JavaScript routing nebo Controlery, ve kterých je možné specifikovat funkcionalitu pro přesně danou šablonu. S takovým nástrojem je práce mnohem zábavnější.

  • Obsahuje Laravel blade templating

Velice ulehčuje práci s vytvářením jednoduchých a přehledných šablon. My jsme si k němu ještě doinstalovali ACF Sage directives, což nám značně ulehčilo a zpřehlednilo práci s ACF fieldy. 

  • Protože JavaScript routing 

Sage už v základu obsahuje funkcionalitu, která umožňuje rozdělit JavaScript do souborů a pak ho načítat na stránkách podle vašeho určení. JavaScript je díky tomu přehlednější a nemusíte se obávat, že se na některé stránce spustí něco nechtěného.

Výkonnost webové stránky

Jestli na vaší stránce čtenář zůstane záleží hlavně na tom, zda ho dokážete co nejdříve zaujmout. Jak ho ale zaujmete, pokud se vaše stránka bude načítat nekonečné hodiny? Proto je pro vaši webovou stránku velmi důležitá její výkonnost, spolehlivost a rychlost.

Splnění těchto požadavků vám samotný Sage nezaručí. Avšak dobrý programátor ve spojení s tak dobrým nástrojem jako je Sage může udělat zázraky. Výkonnost a rychlost totiž vždy záleží na samotném programátorovi.

Stejně jako u dalších našich projektů jsme se snažili načítat vždy jen vše potřebné a připravili jsme stránku na co nejrychlejší načítání. Například jsme odstranili nepotřebné CSS a JS soubory, nastavili lazyload obrázků a mnoho jiného.

Pokud byste i vy chtěli vytvořit vaši webovou stránku na tolik kvalitním nástroji jako je Sage a přinést vaší stránce výkonnost a rychlost, neváhejte se na nás obrátit. Napište nám a my se vám ozveme v co nejkratším čase.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Nový plugin pro WordPress – Zeni mapa

Nový plugin pro WordPress – Zeni mapa

Jednou z poptávaných možností pro naše spokojené klienty je vytvoření mapy, kde si společnost či její partneři přejí zaznamenávat jejich prodejny, vzorkovny, výdejny či parkovací místa a zóny. My vám tuto možnost dáme formou nového pluginu!

Jaký byl námět k vytvoření pluginu

Jednoho dne přišel David s tím, že ho klient požádal o připsání jeho partnerů do mapy. V tu chvíli začal zapojovat celý tým a organizovat samotnou tvorbu. Je přesvědčen, stejně jako my všichni ze Zeni, že tato nová perspektiva umožní podnikatelům vyšší spokojenost ať už od zákazníků nebo partnerů.

Nejprve jsme se shodli, že nechceme žádné hardcodování do témy aby tuto možnost mohl využít i další klient. Rozhodli jsme se tedy pro vytvoření nového pluginu pro WordPress, protože dobře kódovaný plugin je daleko lepší než po každé změně témata přepisovat kódy v šabloně.

Nejzásadnější je pro nás vlastnost, že samotný plugin můžeme rozvíjet do nekonečných podob a objevit nekonečno vychytávek a možností.

Současný klient, pro kterého je plugin již hotov

Vytvořili jsme plugin dle klientova zadání a ještě jsme k němu přidali některé námi navržené vychytávky. Mapa se klientovi líbí a využívá jí na více stranách v jediném webu a to v různých provedeních. A přesně toho je daný plugin schopný viz. níže.

Další možnosti

V době Covidové jsme obdrželi další podnět, kterým je možnost dodat do mapy zóny. Možnost zónu zadat dle adres a nejlépe k ní vypsat podrobný popis, například: 

Rozvozová zóna 1 = cena 10,-

Tuto funkci máme dnes již v pluginu zakomponovanou a již přemýšlíme nad dalšími.

O tyto možnosti mají zájem především restaurace, které mají více rozvozových zón a k nim jiné ceny. Ale tento plugin má mnoho možností využití.

Rozvozové zóny - plugin zeni mapa

Tuto možnost mohou využít například:

  • Restaurace;
  • výrobní závody;
  • velkoobchodní dodavatelé;
  • kurýrní, či taxi služby.

Co o pluginu řekl klient?

reming.cz:

„Pro ukázku, s kterými e-shopy a partnery spolupracujeme při prodeji našich výrobků, jsme chtěli vytvořit mapu, do které bychom mohli zaznamenat název e-shopu/partnera, jeho adresu, logo a prolink na URL našeho produktu, a to pro každý produkt zvlášť. Toto jsme zadali našemu správci stránek společnosti Zeni team, a ten nám vytvořil plugin, který toto dokáže viz. produktové stránky na našem webu.

Ondřej Lhotský – majitel

Pokud vás plugin zeni mapa zaujal a máte o něj zájem, ozvěte se přes kontaktní formulář a my se s vámi spojíme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Případová studie: I velká škola se spoustou aktivit může mít přehledný web

Případová studie: i velká škola se spoustou aktivit může mít přehledný web

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

Bylo nebylo… 

…v Trutnově 6 základních škol. Potřebují se vůči sobě vymezit, odlišit se a přitáhnout pozornost. Základní škola Trutnov 2 Mládežnická na to před časem šla cestou barevného, graficky výrazného a velmi obsáhlého webu. 
Škola Mládežnická je progresivní a úspěšná, se spoustou aktivit. Kromě běžných věcí, jako je družina a školní klub, nabízí zájmové kroužky a kurzy v klubu Eldorádo. Velmi se zaměřuje na sportovní aktivity a moderní digitální technologie. Škola je také zapojena do mezinárodních projektů (Erasmus+, E-Twinning) a žáci se účastní dovednostních, vědomostních a výtvarných soutěží.

To všechno přispělo k tomu, že se ze školního webu časem stal jen málo přehledný labyrint, kde se návštěvník lehce ztratil. Na úvodní stránce uživatel nevěděl na co dříve kliknout. Pokud web dobře neznal, musel tápat, kde hledané informace asi tak můžou být. Související informace byly také často na více místech. Naopak některé byly na různých místech v různých navigacích vícekrát.
Vedení školy se proto rozhodlo pro změnu. Impulzem byl i zákon č. 99/2019 Sb. o přístupnosti internetových stránek a mobilních aplikací. Neřešili jsme ale jen přístupnost, vzali jsme to z gruntu.

Jak jsme pomohli

Naše práce probíhala ve 3 etapách:

  1. provedli jsme analýzu původního webu
  2. navrhli jsme změnu struktury a novou grafickou podobu
  3. přenesli jsme a výrazně upravili klíčový obsah z původního webu do nového

Zhodnocení původních stránek

Základem naší práce bylo projít web a zjistit, kde se co ukrývá. Identifikovali jsme celou řadu nedostatků.

Komplikovaná navigace

  • Web obsahoval několik na sobě nezávislých menu
  • Top bar – přihlášení do žákovské knížky, emailu, do webu
  • Odkazy na sdílení – RSS, Youtube, Facebook
  • Navigace v záhlaví stránky
  • Hlavní navigace v postranním panelu, která měla až 3 úrovně  – na úvodní stránce se mění na čtverce na začátku stránky
  • Menu Projekty – viditelné pouze na úvodní straně

Nekonzistence

  • Poloha hlavního menu byla na jiném místě na úvodní stránce než na ostatních stranách 
  • U několika stránek se nejprve vypsaly Novinky a až pod nimi byl obsah stránky, u většiny to bylo naopak
  • Některé odkazy z menu směřovaly rovnou mimo web školy

Nepřehlednost či neúplnost stránek

  • Nebylo jasné co kde hledat, navigace se obsahem překrývaly, podobné informace byly ve více menu
  • Jiný obsah (např. projekty) byl naopak rozdělen do více menu
  • Podobné informace byly rozdělené do několika stránek – uživatel musel zbytečně proklikávat web, než se dostal k požadované informaci
  • Některé stránky připomínaly “omalovánky” – vícebarevné texty byly použity tak, že nebylo jasné, jaká informace je na stránce nejdůležitější
  • Podtržení textu bylo použito jak pro odlišení odkazů, tak pro pouhé zvýraznění textu
  • Důležité informace (např. Konkrétní opatření pro školu vzhledem ke COVID-19) byly uvedeny pouze v PDF souborech, nikoli v textové podobě přímo na webu
  • Zcela chyběly „Povinně zveřejňované informace” dle zákona č. 106/1999, Sb.

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

  • Chyběly odkazy pro rychlý přechod na hlavní obsah (kritérium 2.4.1 úrovně A)
  • Některé položky menu nebyly přístupné z klávesnice (kritérium 2.1.1 úrovně A)
  • Použité barvy textu a pozadí nebyly dostatečně kontrastní (kritérium 1.4.3 úrovně AA). První úroveň postranního menu (pokud měla rozbalené podmenu) měla bílou barvu textu na bílém pozadí – text nebyl vůbec vidět 
  • Část informací byla zbytečně vložená do tabulek, které způsobovaly problémy při responzivním zobrazením na mobilu (kritérium 1.4.10 úrovně AA)
  • Text odkazu byl pouze webová adresa bez vysvětlení, kam odkaz vede (kritérium 2.4.4 úrovně A)
  • Rotující obsah (tzv. Carousel) na úvodní straně strhával pozornost od ostatního obsahu webu a nebylo možné ho zastavit (kritérium 2.2.2 úrovně A)
  • Některé nadpisy nebyly ve skutečnosti nadpisy, ale jen stejně naformátovaný text, seznamy nebyly skutečnými seznamy (kritéria 1.3.1 úrovně A a 2.4.6 úrovně AA)
  • V článcích byly použité mezery pro formátování a odsazení textu (kritérium 1.3.2 úrovně A) 
  • Špatné zalomení textu vzniklé většinou špatným překopírováním z textového editoru (např. příspěvek TRUTNOVSKÉHO DRAKA ovládly domácí týmy) (kritérium 1.3.2 úrovně A)
  • Uvádění zkrácených slov a zkratek, které jsou pro nezasvěcené nesrozumitelné, např. GaP, ŽP apod. (kritérium 3.1.4 úrovně AAA)

No a výsledek?

“Největší přínos nového webu? Přehlednost, jednoduchost, snadná orientace.” Mgr. Zdeněk Géc, ředitel školy

  • Web je plně přístupný v souladu s kritérii WCAG 2.1 na úrovni AA (a tím pádem i zákona 99/2019, Sb.). Přístupnost byla tak jako vždy ověřena organizací SONS.
Osvědčení o přístupnosti webu  https://zsmltu.cz v úrovni AA od organizace SONS
Osvědčení o přístupnosti webu https://zsmltu.cz v úrovni AA od organizace SONS
  • Na stránkách zůstala jen jedna navigace, která má pouze 2 úrovně. Původních 79 nabídek menu se zúžilo na 22.
  • Vizuální styl se sjednotil napříč celým webem.
  • Informace jsou vždy jen na jednom místě. Je tak jednodušší jejich aktualizace a snáze se hledají.
  • Stránky s podobným obsahem jsme sjednotili do jedné (Družina, Projekty, Školní klub Chobotnice…) .
  • Maximum informací je vloženo jako text přímo na stránkách, místo původních externích dokumentů, obrázků s textem apod.
  • Novinky z dané rubriky vypsány i na příslušné stránce (COVID-19, Družina, Chobotnice, Eldorádo, Sport).
  • V neposlední řadě se zásadně zrychlilo načítání webu, a to jak na počítači, tak na mobilu.

Pro nový web byl použit redakční systém WordPress a naše šablona Accessible School Theme. Tuto šablonu jsme vytvářeli s tím, aby bez problémů plnila požadavky přístupnosti webu dle specifikace WCAG 2.1. Původně panovaly obavy, zda takovýto “moloch” dokáže šablona obsloužit – šablona ale obstála bez ztráty kytičky. Na žádné technické problémy jsme nenarazili a mohli jsme se proto soustředit na optimalizaci obsahu a struktury.

Co říci závěrem?

Jste také velká škola? Potřebujete Váš web nejen upravit, aby splňoval kritéria přístupnosti, ale konečně z roští vyšlechtit růži? Ozvěte se nám. Nebojíme se výzev. Každý projekt řešíme individuálně a s citem.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Případová studie: Web pro MŠ Hrušovany u Brna na přístupné šabloně

Případová studie: web pro MŠ Hrušovany u Brna na přístupné šabloně

Je zajímavé, kolik lidí si neuvědomuje, že web mateřské školky není určený pro děti (které většinou neumí číst, že?), ale pro rodiče, kteří na něm hledají informace. Takže když se dá dohromady jedna školka, 3 pracoviště, společný web a šílený grafik, výsledek je jasný – a přitom dost typický.

Mateřská škola Hrušovany se rozhodla s tím něco udělat. Impulzem byl zákonný požadavek na přístupnost webu, ale naštěstí nezůstalo jen u toho. Zvítězila myšlenka, že dobrý školní web nemusí být nutně infantilní, ale hlavně že návštěvníci musí snadno najít všechny informace, které potřebují.

Zhodnocení původního webu

Složité menu

  • Když návštěvník hledal informace v menu, musel se proklikat až přes 4 úrovně. Stránky byly děleny obsahově a dále pak na jednotlivé školky, případně dále na třídy, např. Základní informace → Naše třídy → MŠ Havlíčkova → Třída Berušky nebo Kuchyň → Platby → MŠ Havlíčkova
  • Některé odkazy směřovaly na stránky s pouze jedním odkazem či souborem, např. Dokumenty → Základní informace o ŠVP nebo Dokumenty → Školní řád.
Dokumenty - Školní řád, původní web
Dokumenty – Školní řád, původní web
  • Některé stránky byly uvedeny několikrát na více místech menu, např. Provozní řád jídelny byl v Kuchyň → Provozní řád a také v Základní informace → Školné a stravné → Provozní řád
  • Web obsahoval stránky, které neměly žádný obsah – nebyly vůbec naplněné, např. Fotogalerie → Společné akce

Nevyhovující grafika

  • Výrazné pozadí rušilo pozornost při procházení webu. Obrázek na pozadí byl také příliš velký a výrazně zpomaloval načítání webu.

Nelogičnost obsahu

  • Sekce s podobným obsahem byly na více místech 
    • Kde nás najdete (pouze mapy s adresou)
    • Kontakty (adresa, emaily, telefony)
  • V textu byl například vypsaný kompletní text “Přihlášky ke stravování” s informací, že “Tuto přihlášku netiskněte, bude Vám předána na schůzce rodičů v srpnu i s  přiděleným variabilním symbolem.“

Nepřehlednost webu

  • V Aktualitách (přehledu příspěvků) byly vypsány celé obsahy příspěvků
  • Orientaci v textu znesnadňovala nejednotnost nadpisů a forem Aktualit, např. 
    • různá velikost nadpisů,
    • některé nadpisy byly psány kapitálkami, jiné ne,
    • celý text některých aktuality byl tučný apod.
  • Důležité informace byly na webu často pouze v PDF souborech nebo jako obrázky, nikoli v textové podobě přímo na webu, např. Jídelníčky

Rozpory s požadavky na přístupnost podle WCAG 2.1

  • Web nebyl responzivní
  • Chyběly odkazy pro přeskočení na hlavní obsah a další sekce
  • Menu webu nebylo ovladatelné z klávesnice
  • Web nesplňoval požadavky na kontrast (menu webu)
  • Informace byly vkládány jako obrázky bez dalších textových doplnění, např. Den otevřených dveří, Zápis do MŠ, Projekty, Provoz o letních prázdninách, Alergeny…
  • Rotující hvězdičky u sekcí, které nešlo zastavit
  • Struktura a ovládání nebylo konzistentní

Přínosy nového webu

Web je plně přístupný i pro handicapované

Získali jsme Osvědčení o přístupnosti webu od SONS. Web splňuje kritéria WCAG 2.1 v úrovni AA

Osvědčení o přístupnosti webu mshrusovany.cz, SONS ČR
Osvědčení o přístupnosti webu mshrusovany.cz, SONS ČR
  • Technické řešení přístupnosti zahrnovalo především:
    • plně responzivní web,
    • vyladěné barevné kontrasty,
    • odkazy pro přeskočení na navigaci a hlavní obsah,
    • řešení duplicitních odkazů,
    • přístupnost všech ovládacích prvků webu z klávesnice (vč. menu),
    • ovládání a orientace na webu tak, aby byla konzistentní na všech stránkách, atd.
  • Byl zásadně revidován i obsah:
    • maximum informací vloženo na web jako text,
    • všechny PDF dokumenty doplněny o textovou vrstvu,
    • všechny obrázky nesoucí informaci obsahují alternativní popisy,
    • Informace na stránkách jsou strukturované pomocí nadpisů více úrovní.

Zjednodušená struktura a navigace na stránkách

  • Menu má pouze 2 úrovně.
  • Struktura byla změněna tak, že každé pracoviště má samostatnou položku v menu, společné informace jsou vloženy do jedné položky.
  • Všechny dokumenty školky jsou na jedné stránce.

Web na mobilu

  • Stránky jsou plně responzivní.
  • Zásadní zrychlení načítání.

Jednoduchost a přehlednost

  • Kontakty na školku jsou pohromadě v zápatí každé stránky (všechny pracoviště + jídelna).
  • Všechny informace k jednomu pracovišti jsou na jedné stránce.
  • Informace jsou na webu vždy na jednom místě – jsou lépe dohledatelné a lépe se udržují.
  • Web neobsahuje žádné prázdné stránky.
  • Rozsáhlejší stránky mají na začátku “obsah” s odkazy na jednotlivé oddíly.
  • Odkaz “Zpět na začátek” umožňuje uživateli přechod na začátek stránky.
  • V přehledu Novinek je uveden pouze stručný výpis příspěvku s odkazem na celý text.

Jednotná grafika 

  • Grafické prvky využívají 4 základní barvy.
  • Velikost nadpisů je sjednocena napříč webem.
  • Ikony novinek (podle dané kategorie) usnadňují vizuální orientaci.

Shrnutí

Co napsat závěrem? I školka v obci s třemi tisíci obyvatel může mít web, který je moderní, rychlý, funkční, přehledný a přístupný.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.