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.

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.

Proč mít přístupný a bezpečný web?

Proč mít přístupný a bezpečný web?

Naše kolegyně Mishka byla oslovena pracovnicí z NÚKIB Petrou Sobkovou o rozhovor pro právě probíhající Festival bezpečného internetu. Mishka u nás pracuje na tvorbě plně přístupných stránek pro MŠ, ZŠ a SŠ a Petra se jí zeptala proč takové stránky mít a proč mít dobře zabezpečen web. Zde si jej můžete přečíst:

V roce 2019 vstoupil do našeho právního řádu nový zákon č. 99/2019 Sb. o přístupnosti internetových stránek a mobilních aplikací, upravující přístupnost webu a aplikací ve veřejném sektoru. Povinnost mít přístupný web se dotkla řady organizací veřejné správy a mimo jiné také škol a školských zařízení. Ty jsou podle zákona rovněž povinným subjektem, ovšem pouze „(…) jde-li o obsah internetových stránek, který je vysoká škola, škola nebo školské zařízení povinna zveřejňovat na svých internetových stránkách podle jiného právního předpisu v rámci výkonu působnosti v oblasti veřejné správy na úseku školství, vědy, výzkumu, vývoje, inovací, jiné tvůrčí činnosti a péče o děti a mládež nebo podle zákona o svobodném přístupu k informacím.“[1] V praxi to znamená rekonstrukci těch částí webu, které ukládá zákonná povinnost. Pro řadu ředitelů se stala tato právní úprava impulsem pro kompletní rekonstrukci stránek školy. Pokud patříte mezi ty, kteří zvažují, zda se přestavby webových stránek z jakéhokoliv důvodu pustit, přečtěte si rozhovor s paní Mgr. Michaelou Vrankovou, programátorkou a specialistkou na problematiku přístupnosti webových stránek. Dozvíte se, co to vlastně přístupnost znamená, jaké jsou její výhody a nevýhody, a jak souvisí přístupnost s bezpečností.

Přístupné webové stránky: Základní škola a Mateřská škola Deblín
Přístupné webové stránky: Základní škola a Mateřská škola Deblín

Co je to přístupnost webu?

Řešení přístupnosti webů a internetových aplikací je postaveno na čtyřech principech. Zaprvé, uživatelé musí být schopni obsah webu vnímat kompletně bez ohledu na to, jestli mají třeba vadu zraku. Dále musí být uživatelé schopni web ovládat. Informace a ovládání musí být srozumitelné. A konečně, obsah musí být “zobrazitelný” na různých typech zařízení. Přístupný web je prostě takový, který neklade žádnému uživateli překážky.

Proč vlastně přístupnost řešit, když ji zákon ukládá zatím pouze v omezené míře, a některým subjektům vůbec?

Pro někoho může být důvodem požadavek zákona, pro jiného komerční výhoda. Já přístupnost řeším proto, že mi to dává smysl. A hlavně proto, že nemám argumenty, proč ji neřešit. Zajímavé je, že tato problematika je tlačena zezdola. Metodika WCAG (pozn. Web Content Accessibility Guidelines 2.0) vznikla před lety na základě spolupráce vývojářů a uživatelů. Až následně ji uchopily vlády a zakotvily požadavky do zákonů.

S přístupností ale přichází náklady navíc, nebo ne?

Jak se to vezme. Každý web představuje náklady navíc (například proti klasické úřední desce). Na druhou stranu, weby vytváříme proto, aby pracovaly za nás. Pokud web pracuje správně, nemáme například přetížený sekretariát školy telefonickými dotazy, které si rodiče jednoduše najdou na webu.

Přístupné webové stránky: MŠ Hrušovany u Brna
Přístupné webové stránky: MŠ Hrušovany u Brna

Přístupné weby má většina z nás spojené s uživateli, kteří mají nějakou vadu zraku. Tito lidé představují jen určité procento populace. Má smysl řešit přístupnost i kvůli jiným uživatelům?

Je pravda, že o přístupnosti se začalo mluvit nejdříve v souvislosti s uživateli, kteří mají nějaké zdravotní postižení – a to nejen zrakové. Lidé se zdravotním postižením jsou často v sociální izolaci a internet jim může výrazně usnadnit život. To je třeba důvod, proč státní a veřejné organizace musí přístupnost svých webů povinně řešit ze zákona. Okruh lidí, kterým přístupné weby usnadňují život je ale mnohem širší. Přibližně 26 % obyvatel je starších 50 let a ovládání počítače jim dělá problémy. Nebo si představte, že má někdo pravou ruku v sádře a počítač ovládá jen levou. Víte jistě, že tito uživatelé nejsou vaší cílovou skupinou? A co nastupující technologie? Už více než polovina uživatelů chodí na web přes mobil, rozmáhají se hlasoví asistenti jako je Siri nebo Alexa… Chcete pro ně dělat specializovaný web? Přístupný web je z mého úhlu pohledu výhodnější pro všechny – je přehlednější, rychlejší, lépe čitelný a především bezpečnější.

Říkáte bezpečnější – jaký je tedy vztah mezi přístupností a bezpečností webů a aplikací?

Rozhodně nesouhlasím s názorem, že přístupnost a bezpečnost jdou proti sobě. Naopak, mohou a měly by jít ruku v ruce. Pěkným příkladem je třeba postupné vymýcení Flashe (pozn. zastaralá technologie, která se používala pro animace a internetové aplikace), s jeho ústupem mizí celá řada bezpečnostních problémů a zároveň je to většinou i posun správným směrem v přístupnosti. A co tím chci říct? Že bezpečnost i přístupnost je možné řešit beze zbytku, jen je potřeba nad tím od začátku přemýšlet jako o celku, a neřešit obě oblasti odděleně.

Můžete uvést příklad?

Často uváděný příklad je třeba zabezpečení formulářů proti spamu. Oblíbenou metodou je CAPTCHA, ta má ale často k přístupnosti daleko. Představte si sami sebe, že jste silně krátkozrací a máte přitom rozeznat, na kterých z 9 malinkatých obrázků je loď nebo pták. Přitom existuje řada jiných metod, jak zabezpečit formulář proti zneužití, které na uživatele nekladou žádné požadavky a ani si jich nemusí všimnout.

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

Souvisí přístupnost také s bezpečností samotného uživatele? Nebo se řeší především skloubení přístupnosti a bezpečnosti (ochrany) systému?

Co se týče bezpečnosti uživatelů, jde o více aspektů. Například o to, aby byl uživatel schopen web nebo aplikaci používat bez pomoci druhé osoby. Aby třeba nemusel sdělovat své přihlašovací údaje někomu jinému proto, aby se za něj do aplikace přihlásil a provedl potřebné úkony. Poskytnutí přihlašovacích údajů třetí osobě – ať už vědomě nebo nevědomě – je pak nebezpečné nejen pro samotného uživatele, ale zvyšuje i riziko nabourání celého systému. Je to navíc jen krůček ke zneužití identity, odcizení dat a někdy i finančním ztrátám. Uživatel se při práci s aplikací nebo internetovou stránkou musí cítit pohodlně a bezpečně. A to je doména přístupnosti. Jak už jsem řekla – přístupnost a bezpečnost jde ruku v ruce.

Jak při tvorbě webu postupujete konkrétně vy?

Když navrhuji weby, tak si představuji, jak by s nimi pracovala moje rodina. Osmiletá dcera s internetem teprve začíná a klikne na kde co, aniž by věděla, co se stane. Prostřední syn je silný dyslektik – potřebuje si zvětšit písmo a dlouhé texty jsou pro něho peklo. Starší syn sjíždí weby jen na mobilu, tchán si s počítačem moc nerozumí… kterého z nich mám vyloučit? Přitom to je třeba typická cílová skupina pro takový školní web – od dětí přes rodiče až k prarodičům. Musím proto vyhovět všem a přitom nechci dělat různé varianty webu (normální web, přístupný web, mobilní web atd.) Tento přístup pak promítám nejen do návrhu grafiky a uživatelského rozhraní, ale i do struktury a obsahu.

Funguje následně tento přístup v praxi?

Skvěle. Problém bývá většinou jen s obsahem, protože na ten nemám 100% vliv. Musím přesvědčit zákazníka, že má informace zpřehlednit a zjednodušit. A také, že musí dodržovat určitá pravidla při tvorbě obsahu. Navíc to není jednorázová záležitost – obsah se tvoří průběžně a na pravidla přístupnosti je tak potřeba myslet neustále.

Je něco co byste chtěla vzkázat čtenáři?

Nebojte se toho. Neberte požadavky na přístupnost webu jako omezení. A už vůbec ne jako překážku, kterou je potřeba jen nějak obejít. Berte to jako výzvu. Výsledek stojí za to. Na první pohled možná nepostřehnete rozdíly, ale pro mnoho lidí to bude změna zásadní.

Rozhovor vznikl pro účely Festivalu bezpečného internetu.

Tazatel: Mgr. Petra Sobková, NÚKIB

Odpovídá: Mgr. Michaela Vranková, ZENI

Mishka - WordPress Developer
Mishka – WordPress Developer

Medailonek expertky:

Mgr. Michaela Vranková pracuje jako vývojářka. Své weby staví na platformě WordPress, kde ale programuje vlastní šablony tak, aby zajistila jejich maximální přístupnost. Přístupnost, tedy přívětivost webu bez ohledu na věk nebo zdravotní znevýhodnění, totiž považuje za jedno ze základních kritérií moderního webu. Soustředí se především na webové stránky škol. K těm má blízko mimo jiné proto, že je sama maminkou tří dětí. Za web Základní školy Deblín dokonce získala první místo v soutěži sCOOL web 2017. Provozuje také web pristupne-stranky.cz, kde se věnuje legislativě a zároveň radí dalším programátorům, jak s přístupností pracovat. Od roku 2019 je členkou týmu Zeni, který na testování přístupnosti stránek spolupracuje s organizací SONS ČR.

Pokud vás článek zaujal, je volně stažitelný na stránkách Národního úřadu pro kybernetickou a informační bezpečnost anebo si jej můžete stáhnout z webu ZENI.


[1] Citace zákona č. 99/2019 Sb., o přístupnosti webových webových stránek a mobilních aplikací

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.