Martin Michálek Martin Michálek  – 30. 8. 2021

Proč dělat weby blbě, když je můžeme dělat dobře? Třeba podle checklistu ze Vzhůru dolů.

Náš kontrolní seznam je zaměřený primárně na frontendové kodéry a kodérky, ale zohledňuje i nejvýznamnější úkoly pro webové vývojáře, marketéry a designéry.

Zaměřujeme se zde hlavně na obsahové weby a také e-shopy.

Jednotlivé úkoly jsou označené prioritami tří stupňů – ★★★ značí nejvyšší a ★☆☆ nejnižší prioritu.

Obsah a HTML

Obsah je král a HTML je jeho trůn. Tímhle musíme začít.

  • Správný <meta viewport> ★★★
    „Meta viewport“ zařídí správné zobrazování responzivního webu v mobilních prohlížečích. Více: Meta viewport na Vzhůru dolů. Důležité je nezakazovat zoomování.
  • Správný <title> a <meta description> ★★★
    Mají vliv na umístění ve vyhledávačích, hlavně <title>. Jsou také potřeba pro náhled stránky ve výsledcích vyhledávání nebo na sociálních sítích. Více: Pavel Ungr o title, Moz.com o meta description.
  • Osnova nadpisů je v pořádku ★★☆
    Stromová struktura (outline) nadpisů <h1>, <h2> atd. má odrážet strukturu dokumentu. Usnadní indexaci vyhledávači a prohlížení stránky zrakově postiženými. Prohlédněte si DOM, využijte HTML5 outliner. Více: Vzhůru dolů: Lze mít více <h1>?.
  • Náhledy pro sociální sítě a chaty ★★☆
    Doplňte meta značky pro Facebook Open Graph, Twitter Cards a další. Mají potenciál zvýšit návštěvnost webu, protože vytvářejí hezký náhled webu na sociálních sítích. Důležitý je hlavně obrázek. Více: Open Graph na Vzhůru dolů. Nástroje pro kontrolu: Facebook Debugger, Twitter Validator, MetaTags.io
  • K obrázkům máme autorská práva ★★☆
    Pokud vám webík patří, tohle si dvakrát zkontrolujte než to pro vás začne být drahé. Více: PicRights.
  • Strukturovaná data pro Google ★★☆
    „Rich Snippets“ usnadňují nahrání informací, například o struktuře produktů e-shopu a vylepší náhled webu ve výsledcích vyhledávání. Je to podstatné hlavně u e-shopů a webů, které obsahují recenze nebo události. Více: Strukturovaná data (aneb Rich Snippets) na Vzhůru dolů. Tester Google Structured Data Testing Tool.
  • Odkazy z webu ven jsou platné ★★☆
    Vyhněte se chybám 404 při procházení vašeho webu. Pro kontrolu jednotlivých stránek použijte třeba Dead Link Checker nebo Xenu.
  • Ikony webu a favikony ★★☆
    Favikony identifikují web v bookmarcích nebo v seznamu aplikací na mobilech i desktopu. Více: Favikony na Vzhůru dolů. Generátor: RealFaviconGenerator.net.
  • Validní HTML ★☆☆
    Hlídejte si validitu kvůli potenciálním chybám v indexaci vyhledávači. Lpí na tom i někteří klienti, tak proč si kazit renomé. Více:Validita na JeČas. Nástroje: Český validátor, W3 validátor.
  • Obsah bez typografických chyb ★☆☆
    Text bez chyb zajistí lepší čitelnost obsahu. Profíci jsou na to citliví. Dohlédněte alespoň na ty nejpodstatnější. Více: Typografické rady na Wikipedii. Nástroj pro odstraňování chyb: Typopo.org.

Přístupnost

Obsah už máme královsky vyladěný. Pojďme teď odstranit překážky, které jsme mohli nechtěně vytvořit uživatelům, a to ne jen těm handicapovaným. Přístupnost se týká všech. V obecné rovině je ošetřena normou WCAG. Projděte proto web a hledejte možné chyby podle standardu „Web Content Accessibility Guidelines“ ve verzi 2.1. Nastavte si střední přísnost, úroveň AA. Kontrolujte nástrojem WAVE - Web Accessibility Evaluation Tool.

  • Struktura dokumentu: WAI-ARIA oblasti a HTML5 elementy ★★★
    Správná struktura umožní zrakově postiženým strukturované procházení, což jim šetří čas. Stačí přidat „role“ pro navigaci, obsah a třeba vyhledávání. Více: WAI-ARIA a HTML5 elementy na Vzhůru dolů.
  • Procházení stránky tabulátorem ★★☆
    Zkuste sekvenční procházení stránky tabulátorem a jinými klávesami. Kromě zrakově postižených to ocení i pokročilí uživatelé, využívající klávesnici. Více: Přístupnost z klávesnice na Zdrojáku, Zvýrazňujte odkazy na Poslepu, CSS layout a přístupnost na Vzhůru dolů.
  • Hlavní obsah a navigace jsou dostupné i bez JavaScriptu ★★☆
    Většina robotů nezvládne indexovat obsah vytvořený JavaScriptem. Googlebot jej do jisté míry zvládá, ale je lepší na to nespoléhat. Testujte to vypnutím JavaScriptu v Developer Tools. Více: SEO a JavaScipt na JeČas
  • Správné typy inputů ve formulářích ★★☆
    <input type="email"> a nové typy formulářů usnadňují zadávání obsahu na mobilních zařízeních. Je to užitečné naprosto pro všechny uživatele. Více: Formuláře v HTML5 na Zdrojáku.
  • Barevný kontrast je dostatečný ★★☆
    Ocení nejen zrakově postižení, ale také majitelé horších displejů. Prakticky každý při horších světelných podmínkách na mobilech. Článek o kontrastu.
  • Multimédia mají textovou alternativu ★★☆
    Obrázkům doplňte smysluplný popisek do atributu alt, používejte značku <figure>. Více Textové alternativy obrázků na Zdrojáku.

Detailnější instrukce k otestování přístupnosti své stránky najdete také v článku Radka Pavlíčka Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu.

Design webu

Tuhle oblast mají obvykle na starosti naši kolegové designéři. Pojďme ale zkontrolovat to nejdůležitější z technických aspektů designu.

Věnujte pozornost také UX checklistu pro e-shopy od Ondřeje Ilinčeva nebo UX checklistu Lukáše Dubiny.

Prohlížeče a kompatibilita

Zobrazuje se váš obsah ve všech prohlížečích, které podporujete? Dá se vytisknout? A mohla bych jej vidět se zapnutým AdBlockem?

  • Plné zobrazení napříč prohlížeči a zařízeními ★★★
    Internet Explorer už snad podporovat nemusíte a mezi moderními prohlížeči tolik rozdílů není. I tak pomohou nástroje jako Browserstack. Viz také článek Jak testovat responzivní weby. Nezapomeňte ošetřit i chytré hodinky.
  • Tisková verze stránky ★★☆
    Je potřeba hlavně zajistit nezobrazování částí nezajímavých pro tisk jako jsou ovládací prvky webu. Článek na Je čas.
  • Zobrazení s blokovači reklamy ★★☆
    Testujte se zapnutými blokovači. Neblokuje Adblock i nevinné třídy z vašeho CSS? Otestujte web se zapnutým AdBlockem. Tweet.
  • Dostupnost hlavního obsahu ve starších prohlížečích ★☆☆
    Záleží to na projektu a cílové skupině. Ve starších prohlížečích web nemusí vypadat jako z reklamy, důležitá je ale čitelnost hlavního obsahu a dostupnost navigace.
  • Stránka je v pořádku bez CSS ★☆☆
    Verze pro čtečky a další kontexty, které nepoužívají vaše CSS. Článek Weby bez CSS.

Co všechno je potřeba testovat ukazuje také text A Comprehensive Checklist For Front-End Testing od LambdaTesting.

Kvalita kódu: dokumentace a testy

Konvence, linting, testování a odchyt chyb. Tohle uživatelé nevidí, ale nedostatky v téhle oblasti mohou web pořádně rozbít.

  • Kód dodržuje konvenci ★★☆
    Konvence usnadňuje sdílení nebo předávání kódu. Více: JavaScript coding standards na Googlu. V CSS můžete vyjít ze zásad psaní respektujícího CSS.
  • Kvalita kódu v požadované úrovni ★★☆
    Automatická kontrola častých chyb nebo problematických konstrukcí kódu. Lze využít například ESLint v CSS pak Stylelint. Ve všech jazycích autoformátovač Prettier.
  • Javascriptový kód je pokrytý testy ★★☆
    Javascript není CSS a tak se nějaké ty testy hodí. Více se dozvíte na videích Píšeme testy a Nástroje pro testování.
  • Měření runtime chyb v JS kódu ★★☆
    Ujistěte se, že víte o chybách, které uživatelům vrací váš frontendový kód. Zamezte tomu, aby prohlížeč do konzole vypisoval chyby. Z možností sledování vybíráme např. Technical Dashboard v Google Analytics nebo Sentry.
  • Funkční testování ★★☆
    Fungují kritické části webu i když ho necháte běžet? Pomůže třeba Selenium nebo nástroje vycházející ze standardu Webdriver. Více o testech v podcastu.
  • Kód je v produkční kvalitě ★★☆
    Je minifikovaný a neobsahuje zbytečná data.
  • README.md ★☆☆
    V tomto souboru je v repozitáři popsána instalace, buildování atd.

Další možnosti uvidíte ve Frontend Code Review checklist.

Spuštění webu

Už máme web hotový. Jdeme zmáčknout tlačítko pro zveřejnění? Raději ještě počkejme, právě tady můžeme nasekat fatální chyby.

  • Web běží na HTTPS ★★★
    Bez bezpečného protokolu se s vámi už nikdo (myšleno vyhledávače) nebude chtít kamarádit. Více o HTTPS.
  • Web běží na HTTP/2 ★★★
    HTTP/2 pozitivně ovlivňuje rychlost, zvažte také nejnovější HTTP/3. Více: HTTP/2 a HTTP/3.
  • Není zakázaná indexace vyhledávači ★★★
    Mrkněte se do robots.txt nebo na <meta name="robots">. Obvykle indexaci při spuštění webu zakazovat nechcete, ale často se na to zapomíná. Více je v dokumentaci od Googlu.
  • Vývojářské soubory nejsou na produkci ★★★
    Hlavně adresáře typu .git/, node_modules/, zapomenutý ZIP s obsahem databáze nebo třeba veřejně přístupný Adminer či phpMyAdmin.
  • Přesměrování ze starých adres ★★★
    Pokud se mění URL, musíte přesměrovat ze starých na nová. Jakmile by stará URL vracela chybu 404, vyhledávače na ta nová nepředají tzv. „link juice“ hodnocení adresy získané z dřívějška. Na staré adrese vracejte kód 301 a přesměrujte na novou. Možnosti na JakPsátWeb.cz, dokumentace od Seznam.cz.
  • Přidání a konfigurace Google Analytics ★★★
    Obchodní výkonnost webu všechny zajímá, nezapomněli jste nastavit měření? Alternativně přidejte kód Google Tag Managera, marketéři si přes potřebné kódy přidají.
  • Registrace v nástrojích pro webmastery ★★☆
    Pravidelně upozorní na časté chyby z pohledu vyhledávačů. Nejdůležitější je Google Search Console: Přidejte tam web hned po spuštění. A pak samozřejmě Seznam Webmaster. Pro zahraniční weby také například Bing Webmaster Tools.
  • Správně nastavené hlavičky ze serveru ★★☆
    REDbot.org vysvětluje nastavení vašeho serveru: gzipování, kešovací hlavičky… Hodí se hlavně zkontrolovat na hostingu, který neprovozujete sami.
  • Správně nastavené bezpečnostní hlavičky ★★☆
    SecurityHeaders.io udělá alespoň základní audit té části serverové hlavičky, kterou můžete usnadňovat různé typy útoků. Např. X-Frame-Options nebo Content-Security-Policy.
  • Přidali jsme robots.txt, humans.txt a security.txt ★★☆
    Roboty, jen pokud potřebujete výslovně změnit něco kolem indexování. Lidi hlavně pro radost. Security jako kontakt pro hlášení průšvihů, než jsou z nich megaprůšvihy.
  • Máme sitemap.xml ★★☆
    Usnadňuje indexování vyhledávači. Hlavně pro větší weby nebo weby s komplikovanou strukturou.
  • Máme zapnuté SEO ★★★
    To byl vtip, omlouvám se. Problematika SEO je komplexní, takže vás odkážu na checklist Lukáše Pitry nebo checklist technického SEO od pánů Ungra a Hlavinky.

🖨 Checklist je ve zjednodušené podobě k dispozici také jako PDF.

Používejte také nástroje pro obecnou automatickou kontrolu webu:

Checklist pro frontendisty, verze 3.0. Autor: Martin Michálek. Za připomínky ke třetí verzi autor děkuje Radkovi Pavlíčkovi.

Připomínky vítány. Stačí vytvořit pull request na Githubu nebo napsat komentář.

Komentáře

Máte doplnění, komentář nebo jste našli chybu?
Pro přidání názoru se prosím
přihlaste nebo si zřiďte účet.