Přesnost zobrazování vs. responzivní web

Jaroslav Novák 01. 10. 2016

Jeden stejný web už nikdy nevypadá stejně. Díky mobilním i nemobilním zařízením stránky přizpůsobují svou podobu a termín „přesnost zobrazování“ tak dostává nový význam.

Víte čemu se říkalo pixel perfect design?

Na začátku článku je dobré si ujasnit, jak fungují tzv. pixely a jaký je jejich význam při tvorbě webů. Tedy, pixely jsou malé body z nichž se skládají digitální obrazy, přičemž je lze rozdělit do 3 skupin:

Datový pixel – odpovídá zdroji dat digitálního obrázku (např. digitální fotografie)
Hardwarový pixel – odpovídá jednomu obrazovkovému bodu displeje (např. monitoru)
Referenční pixel – odpovídá poměru mezi výše uvedenými

V případě webdesignu nás nyní bude zajímat především hardwarový pixel, protože právě ten zásadně ovlivňuje, jak se stránky zobrazují na různých zařízeních. Počet a uskupení těchto miniaturních bodů totiž může být na každém displeji rozdílný a často se dokonce liší i jejich samotná velikost. Jinými slovy, velký stolní monitor má nejen jinou velikost uhlopříčky, ale zpravidla i jinou koncentraci a velikost pixelů než displej chytrého telefonu. Kombinace těchto aspektů pak vede k efektu, že stránky nikdy nevypadají přesně stejně. V minulosti však tomu bylo trochu jinak.

Před rokem 2000

Před přelomem milénia byly internetové stránky jednoduché a skládaly se především ze základních prvků jako jsou nadpisy, odstavce či odkazy. V té době ještě neexistovaly, nebo nebyly rozšířené, technologie, které máme k dispozici dnes. S každým rokem se nicméně možnosti lepšily a tak se v průběhu času stávaly webové prezentace vizuálně pestřejšími. Pro tvorbu stránek se v té době používal tabulkový design. Neumožňoval sice vysokou přesnost v umístění jednotlivých elementů, ale dokázal zajistit, aby stránky držely spolehlivě pohromadě. (Takzvaně se nerozsypávaly.)

Nestrašte zákazníky zastaralou on-line prezentací. Modrý duch tvoří responzivní weby na míru.

Chci responzivní web

Po roce 2000

Společně s větší podporou nových technologií ze strany internetových prohlížečů se výrazně zlepšily i možnosti vizuálního podání informací. Díky těmto novým funkcím tak mohl být opuštěn tabulkový design a internetové stránky šlo stavět s daleko větší přesností. Zároveň naprostá většina monitorů měla stále podobné rozlišení a bylo tedy reálné dosáhnout prakticky stejného vzhledu webu ať už jste se na něj dívali kdekoliv. Pokud kodér pracoval dobře, pak se vše shodovalo prakticky do pixele. Ve webdesignerské praxi se tak objevil nový termín: pixel perfect design, neboli pixelově přesný design. Dlouhá léta pak stránky s pevnými statickými rozměry a přesným umístěním jednotlivých elementů kralovaly světu internetu. Ani jim však nebylo dáno tu s námi být věčně.

Po roce 2010

S nástupem mobilních zařízení musel nutně doznat změn i svět webdesignu. Kodéři nyní mohli jen odhadovat, jak se na různých přístrojích bude web zobrazovat a co se stane s jeho podobou. Vedle chytrých telefonů a tabletů různých velikostí se rozrostl i svět stolních počítačů a notebooků. Objevily se nové monitory s rozlišením typu full hd a 4K. Bylo tedy třeba zcela opustit staré myšlení a postupy: Na poli tvorby webu se prosadil takzvaný responzivní design, který umí přizpůsobit svou podobu podle zařízení na kterém se zobrazuje. Všude stejný, pixelově přesný web, měl odzvoněno.

Proč tedy dnes stejný web nikdy nevypadá stejně?

Podstata responzivního designu spočívá v jeho proměnlivosti. Je tvořen tak, aby své velikosti, poměry, odsazení a umístění přepočítával způsobem umožňujícím pokrýt všechna zařízení.
Návštěvník stránek dnes nesedí u stolního počítače se stejným monitorem jako máte vy, ale používá některé ze stovek dnes dostupných zařízení různých velikostí a rozlišení. Všude tam se musí váš web "vejít".
Každý výrobce displeje používá své vlastní velikosti pixelů. Každý element na stránkách mající šířku, výšku a odsazení je tak na různých zařízení jinak široký, vysoký a jinak odsazený. A to i v případě, že mají obě zařízení stejná rozlišení! Zjednodušeně řečeno: není pixel jako pixel.

Zajímá vás toto téma podrobněji? Pak vám doporučuji článek Martina Michálka „Retina“ displeje a CSS pixel.