Checklist pro frontendisty před spuštěním webu (update 2019)

Naposledy upraveno: 2. 12. 2019 – Autor: Martin Michálek

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

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

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

Obsah a HTML

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

Přístupnost

Obsah už máme královsky vyladěný. Pojďme teď odstranit překážky, které jsme mohli nechtěně vytvořit mnohým uživatelům.

  • Hlavní obsah a navigace jsou dostupné bez JavaScriptu
    Většina robotů nezvládne indexovat obsah vytvořený JavaScriptem. Testujte vypnutím JavaScriptu v Developer Tools.
  • Kontrola podle WCAG
    Web Accessibility Checker projde web a upozorní na možné chyby podle standardu „Web Content Accessibility Guidelines“ ve verzi 2.0. Nastavenu má střední přísnost, úroveň AA.
  • Sémantika: WAI-ARIA oblasti a HTML5 elementy
    Zrakově postiženým umožní strukturované procházení, což jim šetří čas. Stačí přidat hlavně role pro navigaci, obsah a třeba vyhledávání. Pomůže článek o WAI-ARIA a HTML5 elementech jako je <section> nebo <nav>.
  • Ovládání tabulátorem funguje
    Zkuste sekvenční procházení stránky z klávesnice. Kromě zrakově postižených to ocení i pokročilí uživatelé. Článek na Poslepu.
  • Máme správné typy inputů ve formulářích
    <input type="email"> a další usnadňují zadávání obsahu na mobilních zařízeních. Užitečné naprosto pro všechny. Článek 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.

S testováním přístupnosti vám pomohou také nástroje Lighthouse a Tenon. Detailně se tímto tématem zabývají také checklisty na A11Y Project nebo kontrolní seznam Heydona Pickeringa.

Design webu

Design mají obvykle na starosti kolegyně a kolegové. Pojďme ale zkontrolovat alespoň to nejdůležitější.

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
    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.
  • 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.
  • 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.
  • Kontexty blokovačů reklamy
    Neblokuje Adblock i nevinné třídy z vašeho CSS? Otestujte web se zapnutým AdBlockem. Tweet.
  • 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.

Kvalita kódu: dokumentace a testy

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

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.

  • 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ř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.
  • 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.
  • 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.
  • 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.
  • 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.

Checklist pro frontendisty, verze 2.0. Autor: Martin Michálek. Za připomínky autor děkuje Danielu Střelcovi, Martinovi Staňkovi, Vojtěchu Bulantovi a dalším.

Úpravy vítány. Stačí vytvořit pull request na Githubu nebo napsat komentář.

Komentáře