Kontrolní seznam frontend kodéra

Naposledy upraveno: 21. 1. 2016 – Autor: Martin Michálek

K dispozici také jako PDF nebo webová aplikace.

Obsah a HTML

  • Ikony a favikony
    Identifikují web v bookmarcích nebo v seznamu aplikací na mobilech i desktopu. Více informací. RealFaviconGenerator.net.
  • Facebook Open Graph
    Změní náhled stránky na Facebooku. Má potenciál zvýšit návštěvnost webu. Důležitý je hlavně obrázek. Více informací. Facebook Debugger.
  • Twitter Cards
    Vytvoří náhled stránky na Twitteru. Opět možnost zvýšit návštěvnost webu, tentokrát z Twitteru. Více informací. Twitter Validator.
  • Strukturovaná data pro Google
    „Rich Snippets“ vylepší náhled webu ve výsledcích vyhledávání. Podstatné hlavně u e-shopů a webů, které obsahují recenze nebo události. Více informací. Google Structured Data Testing Tool.
  • Validní HTML
    Hlavně 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 informací. Český validátor.
  • Správný <title> a <meta description>
    Vliv na umístění ve vyhledavačích. Také kvůli náhledu stránky ve výsledcích vyhledávání nebo na sociálních sítích. Více o title. Více o meta description. Nástroj pro ověření.
  • Správný <meta viewport>
    Zařídí správné zobrazování responzivního webu v mobilních prohlížečích. Více informací
  • Osnova nadpisů je v pořádku
    Stromová struktura (outline) usnadní indexaci vyhledávači a prohlížení stránky zrakově postiženými. HTML5 outliner. Lze mít více <h1>?.
  • 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.
  • Obsah bez typografických chyb
    Všem zajistí lepší čtivost obsahu. Profíci jsou na to citliví a zbytečně se před nimi typo-chybami shodíte. Dohlídněte alespoň na ty nejpodstanější. Nejčastější typografické chyby.
  • Odkazy z webu ven jsou platné
    Pro kontrolu použijte třeba W3C Link Checker nebo Xenu.

Kvalita CSS a JS kódu

  • Kód dodržuje konvenci
    Konvence usnadňuje sdílení nebo předávání kódu. Jde o způsob psaní kódu, jeho komentování a případně i dokumentaci. Bude v každém týmu jinak, ale dobré si nastavit. Přidám jen odkaz na články o javascript code standards a css code standards.
  • Kvalita kódu v požadované úrovni
    Automatická kontrola častých chyb nebo problematických konstrukcí kódu. Hodí se hlavně při práci v týmu, ale opět bude mít každý jinak. Lze využít například ESLint nebo CSS Lint.
  • Kód je pokrytý testy
    Javascript není CSS a tak se nějaké ty testy hodí. Články na Google vyhledávání
  • Kód je v produkční kvalitě
    Je minifikovaný a neobsahuje zbytečná data. Hlavně při použití CSS frameworků a pluginů je tohle problém. Existují i automatické nástroje jako třeba UnusedCSS.com.
  • README.md
    V repozitáři je popsána instalace, buildování atd.

Přístupnost

  • 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 – AA úroveň.
  • Přidat WAI-ARIA oblasti
    Zrakově postiženým umožní strukturované procházení, což jim šetří čas. Přitom stačí přidat hlavně role pro navigaci, obsah a třeba vyhledávání. Pomůže článek o WAI-ARIA.
  • Ovládání tabulátorem funguje Emulujete sekvenční procházení stránky bez myši. Kromě zrakově postižených ocení i pokročilí uživatelé. Článek na Poslepu.
  • 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.
  • Hlavní obsah a navigace jsou dostupné bez Javascriptu
    Obsah vám jinak nezaindexují vyhledávače. Testujte vypnutím Javascriptu v Developer Tools.

Prohlížeče a kompatibilita

  • Plné zobrazení napříč prohlížeči a zařízeními
    Mezi moderními prohlížeči už tolik rozdílů není. Prohlížečů je ale hodně, pacholků. Proto pomohou nástroje jako Browserstack. Viz také můj článek Jak testovat responzivní weby.
  • 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 na zubní pastu, důležitá je ale čitelnost hlavního obsahu a dostupnost navigace.
  • Tisková verze stránky
    Je potřeba hlavně zajistit vypnutí pro tisk nepotřebných částí. Článek na Je čas.

Ostatní

  • Grafika podporuje HD displeje typu Retina
    Obyčejná grafika nebude na vysokopacitních displejích vypadat dobře. Trochu teorie o problému v článku. V praxi potřebujete SVG a atribut srcset.
  • Rychlost načítání: požadované skóre v PageSpeedInsights
    S optimalizací pomůže Pagespeed Insights tester. Čím vyšší skóre, tím líp. 100/100 tam ale dosáhnout obvykle nejde.
  • Rychlost načítání: požadovaný SpeedIndex z WebpageTest.org
    SpeedIndex číslo, které se pokouší vyjádřit rychlost webu. Čím vyšší, tím horší. Ideální stav je někdo kolem 1000. Testujte na WebpageTest.org.
  • Šablony pro chybové stránky 404 a 50x
    Výchozí šablony chyb serverů návštěvníkovi nepomohou. Pár tipů v článku.

Spouštění webu

  • Přidání a konfigurace Google Analytics
    Výkonnost webu všechny zajímá, nezapomněli jste nastavit měření?
  • Registrace v Google Search Console
    Pravidelně upozorní na časté chyby z pohledu Google. Přidejte tam web hned po spuštění. Více o Search Console.
  • Funkční testování
    Fungují kritické části webu i když ho necháte běžet? Pomůže třeba Selenium nebo Testomato.
  • Vývojářské soubory nejsou na produkci
    Hlavně adresáře typu .git/, node_modules/ nebo třeba obsah databáze.
  • 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 co sami neprovozujete.
  • 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 a humans.txt
    Roboty, jen pokud potřebujete něco výslovně změnit. Lidi hlavně pro radost.
  • Máme sitemap.xml
    Usnadňuje indexování vyhledávači. Hlavně pro větší weby nebo weby s komplikovanou strukturou.

Poznámka: Napsáno hlavně pro webové kodéry a prezentační weby. U webových aplikací bude řada věcí jinak.

Úpravy vítány. Klikněte na datum nahoře pod nadpisem a pošlete pull request na Github.

Věnujte pozornost i dalším českým webařských checklistům: SEO od Lukáše Pítry a UX pro e-shopy od Ondřeje Ilinčeva.

Komentáře