Checklist před spuštěním webu

K dispozici také jako PDF nebo webová aplikace.

Obsah a HTML

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ž děsně š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. Pomůže nástroj Check My Colours.
  • 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.

Reklama: Vzhůru do lepší práce

Ú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 eshopy od Ondřeje Ilinčeva.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích Nástroje, CSS, HTML.

Podcast: S Robinem Pokorným o CSS v Javascriptu

8. 12. 2016 na blogu

V dalším podcastu ze Vzhůru dolů jsme se s Robinem zaměřili na téma tepající mezi frontend kodéry i javascriptovými vývojáři – CSS uvnitř Javascriptu.

Atomický design a Pattern Lab: návrat do budoucnosti návrhu uživatelských rozhraní

6. 11. 2016 v příručce

Systémy webového designu, Atomic Design a Pattern Lab – co je to a jak vám to pomůže?

Kurz „Dnešní webová kodéřina“

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 23. února.

Termíny dalších veřejných školení

9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč