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.

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

Komentáře

comments powered by Disqus

Podobné články

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

Google Analytics: průvodce pro přidání webu

15. 8. 2016 v příručce

Přidání nového webu do Analytics může vypadat jako jednoduchá záležitost, ale není tomu tak.

Search Console: co si Google myslí o vašem webu?

8. 8. 2016 v příručce

Google Search Console je monitorovací nástroj ověřující provedení webu z pohledu vyhledavače. Možná Search Console znáte jako „Webmaster Tools“, dříve se tak jmenoval.


Martin Michálek

Autor: Martin Michálek

Nezávislý frontend designér s šestnáctiletou praxí a nadšením pro moderní webové postupy a technologie. Píše Vzhůru dolů, školí a je k dispozici pro konzultace.

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: 6. října.

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

29. září SVG
13. října Responzivní design
27. října Optimalizace rychlosti načítání
10. listopadu Bootstrap
24. listopadu 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č