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.
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:
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 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.
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ě.
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.
Zajímá vás toto téma podrobněji? Pak vám doporučuji článek Martina Michálka „Retina“ displeje a CSS pixel.
Praktický
Inspirující
Zábavný
Nic moc
