Ucelený frontend postup
HEAD
- Doctype: Doctype je HTML5 a je na začátku všech HTML stránek.
- Charset: Deklarovaná znaková sada (UTF-8) je deklarována správně.
- Viewport: Viewport je deklarován správně.
- Title: Na všech stránkách je použit titulek.
- Description: Metapopisek je jedinečný a nemá více než 150 znaků.
- Favicons: Každá favicona byla vytvořena a zobrazena správně.
- Aplikace Apple Web App Meta: Jsou k dispozici značky metadat společnosti Apple.
- Windows Dlaždice: Obrázky jsou přítomny a propojeny.
- Jazykový atribut: Zadává se atribut lang na webových stránek a vztahuje se k jazyku aktuální stránky.
- Pořadí CSS: Všechny soubory CSS jsou načteny v hlavičce před soubory jazyka JavaScript.
HTML
- Sémantické prvky HTML5: Sémantické prvky HTML5 se používají správně (header, section, footer, main ...).
- Chybové stránky: Chyba 404 stránky a 5xx existují
- W3C kompatibilní: Všechny stránky je třeba testovat pomocí validátoru W3C, aby se identifikovaly možné problémy v kódu HTML.
- HTML Lint: Použití nástroje, který pomáhá analyzovat všechny problémy již při psaní zdrojového kódu. Např. PhpStorm toto podporuje.
- Kontrola odkazů: Na stránce nejsou žádné nefunkční odkazy. Ověření zda se nevyskytuje na webu nějaká 404 chyba.
WEBOVÉ FONTY
- Formát webového fontu: WOFF, WOFF2 a TTF jsou podporovány všemi moderními prohlížeči.
- Velikost webového fontu: Velikost webového fontu nepřesahuje 2 MB (počítány jsou všechny varianty – bold, extrabold, …).
CSS
- Responzivní webový design: Webová stránka používá responzivní webový design.
- Tisková varianta CSS: Na každé stránce je k dispozici správná tisková šablona.
- Jedinečné ID: Jsou-li použity ID, jsou pro stránku jedinečné.
- Reset CSS: Reset CSS (reset, normalize nebo reboot) je použit aktuální.
- Hlavičkové nebo řádkové CSS: Používat řádkový a hlavičkový styl jen výjimečně. Nejlépe se těmto technikám vyvarovat. Používat externí styl.
- Vendor prefixy: Používají se a jsou generovány odpovídajícím způsobem - podle kompatibility podpory prohlížeče.
- Spojení souborů: Soubory CSS jsou spojeny do jediného souboru (neplatí pro HTTP/2).
- Minifikace: Všechny soubory CSS jsou minimalizovány.
- Stylelint: Všechny soubory CSS nebo SCSS jsou bez chyb.
- Responzivní webdesign : Všechny stránky byly testovány se správnými breakpointy.
- CSS validátor: CSS bylo testováno a příslušné chyby byly opraveny.
- Desktopové prohlížeče: Všechny stránky byly testovány na všech aktuálních prohlížečích stolních počítačů (Safari, Firefox, Chrome, Internet Explorer, EDGE ...)
- Mobilní prohlížeče: Všechny stránky byly testovány na všech aktuálních mobilních prohlížečích (nativní prohlížeč, Chrome, Safari ...)
- OS: Všechny stránky byly testovány na všech stávajících OS (Windows, Android, iOS, Mac ...)
Javascript
- Řádkový JavaScript: Vyvarování se psaní řádkového javascriptu (v kombinaci s kódem HTML) až na výjimky.
- Spojení souborů: JavaScript soubory jsou spojeny.
- Minifikace: JavaScript soubory jsou minimalizovány (lze přidat příponu .min).
- ESLint: Neobsahuje žádné chyby (na základě konfiguračních nebo standardních pravidel).
Obrázky
- Optimalizace: Všechny obrázky jsou optimalizovány pro zobrazení v prohlížeči. Formát WebP by mohl být použit pro kritické stránky (jako je domovská stránka).
- Picture / Srcset: Užívat pro vytvoření nejvhodnějšího formátu obrázku pro aktuální viewport uživatele.
- Retina: Pro retina displeje byli použity 2x nebo 3x velké obrázky.
- Sprite: Malé obrázky jsou v souboru sprite (v případě ikon mohou být ve SVG sprite obrázku).
- Šířka a výška: Nastavení atributů šířky a výšky v případě, že je známa konečná velikost vykreslené fotografie (lze je vynechat při udání velikosti pomocí CSS).
- Alternativní text: Všechny mají alternativní text, který vizuálně popisuje obraz.
- Lazy loading: Obrázky jsou načítány postupně lazy loadingem (noscript fallback je vždy k dispozici).
Přístupnost
- Postupné vylepšení: Podstatné části, jako je hlavní navigace a vyhledávání, by měly fungovat bez povolení jazyka JavaScript.
- Barevný kontrast: Barevný kontrast by měl přinejmenším splňovat WCAG AA (AAA pro mobilní telefon).
- H1: Všechny stránky mají H1, přičemž nejde o název webové stránky.
- Nadpisy: Nadpisy by měly být používány ve správném pořadí (H1 až H6).
- Používají se specifické typy inputů HTML5: Zvláště důležité pro mobilní zařízení, která zobrazují přizpůsobené klávesnice a widgety pro různé typy.
- Label: U každého prvku formuláře je label. V případě, že label nelze zobrazit, nutno použít namísto toho aria-label.
- Testování standardů přístupnosti: Pomocí nástroje WAVE se otestovalo, zda stránka respektuje standardy přístupnosti.
- Odečítače obrazovky (screen readers): Všechny stránky byly testovány v odečítači obrazovky (VoiceOver, ChromeVox, NVDA nebo Lynx).
- Vzhled fokusu prvku (focus style): Pokud je fokus zakázán, je v CSS nahrazen viditelným stavem.
Výkon
- Datový objem stránky: Objem každé stránky je mezi 0 a 500 KB.
- Zmenšený kód HTML: HTML je minimalizován.
- Lazy loading: Obrázky, skripty a CSS musí být načítány lazy loadingem, aby se zlepšila doba odezvy aktuální stránky.
- Komponenty třetích stran: Použity s rozvahou a jen pokud byli opravdu třeba.
- Google PageSpeed: Všechny stránky byly testovány (nejenom na domovské stránce) a mají skóre nejméně přes 80/100.
SEO
- Google Analytics: Google Analytics je nainstalován a správně nakonfigurován.
- Logika záhlaví: Nadpis textu pomáhá porozumět obsahu na aktuální stránce.
- sitemap.xml: Sitemap.xml existuje a byl odeslán do služby Google Search Console.
- robots.txt: soubor robots.txt neblkokuje webové stránky vyhledávačům při indexaci.
- Sitemap HTML: Je k dispozici soubor Sitemap HTML, který je přístupný prostřednictvím odkazu v zápatí webu.