Responzivní webdesign a HTML5

Ještě před pár lety byla situace sice ne jednoduchá, ale přehledná. Každý měl svůj stolní počítač nebo notebook a rozměry obrazovek byly víceméně standardní. A hlavně, jejich formáty byl 'na šířku' (landscape).

Od chvíle, kdy se rozšířily chytré telefony se svými malými display a lidi je začali houfně používat, je všechno jinak. Klasická webová stránka s fixním designem je nutí stále rolovat nejen dolů a nahoru, jak byli zvyklí, ale i doleva a doprava. Ani tradiční pružný layout na tom není o moc lépe. Sice počítá šířky prvků odvozeně z šířky okna prohlížeče, nicméně má svoje spodní limitní hodnoty, pod nimiž je design už nepoužitelný.

Má-li být možné zobrazit obsah webu (nebo webové aplikace) stejně srozumitelně na velké obrazovce, tak na malém smartphone, nezbývá, než změnit strategii. Přizpůsobit layout stránky aktuálně použitému zobrazovacímu zařízení. Některé prvky stránky rozměrově přizpůsobovat, jiným dovolit změnit polohu tak, aby se neocitaly v neviditelné zóně. Tomu se říká 'responzivní webdesign'.

A jak je to s tím kouzelným HTML5 (a CSS3)?

Před časem se Apple nechal slyšet, že nebude ve svých mobilních zařízeních podporovat Flash. Tím zasadil ránu Adobe - pokud by tvrdošíjně lpěli na prosazování formátu Flash, přišli by časem o velkou část trhu. Myslím, že tímto okamžikem se výrazně urychlil proces zavádění HTML5 do praxe. HTML5 totiž na rozdíl od klaického HTML přidává možnosti dynamického obsahu, který do té doby bylo možné na webu zobrazit právě jen prostřednictvím Flash (nebo Silverlight) technologie (jistě, i další neohrabané možnosti jsou). Obrovská síla vývojářů a programátorských kutilů si s nabídnutými možnostmi začala hrát a vzniká tak nepřeberné množství různých dynamických miniaplikací a celé to nové prostřědí se tak báječně testuje a vyvíjí. Do boje za oživení HTML5 se pustil i softwarový gigant Adobe. Je jen několik problémů, s nimiž je třeba se vyrovnat.

Podpora jednotlivých nových součástí HTML5 novými verzemi internetových prohlížečů je nevyrovnaná. Uživatelé navíc používají i starší verze prohlížečů, kde podpora HTML5 zcela chybí. Je tedy nutné detekovat co prohlížeč konkrétního uživatele dovede a podle toho mu nabídnout relevantní obsah tak, aby ani ti, co neradi upgradují, nebyli ochuzeni.

Moc pěkně se o tom píše třeba zde: http://kniha.html5.cz/detect.html

Není zatím k dipozici dost kvalitních vývojářských nástrojů. Tak jako pro tvorbu Flash animací bylo možné použít řadu vymazlených programů, animace v HTML5 (tedy vlastně v javascriptu) je spíš programátorská záležitost. A málokterý grafik je zároveň programátor. Na druhé straně kód je otevřený a tak rychle vznikne jistě velká spousta chytrých pomůcek. Jen to bude chaos;-)