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.