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.

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.

Favikony webu s RealFaviconGenerator

16. 1. 2017 v příručce

Ikona webu. Kromě tradiční favicon.ico, ikony na záložce rozhraní prohlížeče, se dnes „favikony“ zobrazují v celé řadě dalších kontextů.

Ebook „Vzhůru do CSS3“ verze 1.4: nové texty o Media Queries, prohlížečích a další

9. 1. 2017 na blogu

Kapitola o Media Queries je zgruntu nová atd. 12 stránek navíc.

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

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. Kurz vede Martin Michálek. 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č