Modelovanie webového sídla - mobilná verzia najskôr

Padlo niekoľko otázok, prečo je vhodné riešiť mobilnú verziu ako prvú a až potom verziu pre „väčšie“ zariadenia. V tomto článku skúsim vysvetliť dôvody a odpovedať na vyslovené i nevyslovené otázky.

Prečo začať mobilnou verziou danej HTML štruktúry

Pretože to je základ, to je to, čo uvidí každý. Mobilná verzia webového sídla zaručí, že funkcie budú prístupné každému bez rozdielu: od Nokie s rozlíšením 128 na 128 pixlov, cez Nokiu N-série a iPhone až po iMac. V tomto prípade nejde ani tak o zariadenie, ale o prehliadače (zase) a ich obmedzenia na danom zariadení. Niektoré neviedia robiť absolútne pozície v CSS, niektoré nevedia plávajúce boxy, niektoré zase áno.

Začať treba s HTML, ktoré do istej miery zvládne každý prehliadač. Dobrá štruktúra je základ použiteľnosti: dajte zoznam do zoznamu, text do odseku, nadpis nech je nadpisom. Dobrá štruktúra zabezpečí čitateľnosť stránok sídla bez CSS, bez obrázkov, bez JS. S dobrou štruktúrou sa dá sídlo ponúknuť tým najslabším zariadeniam, aké sú momentálne používané na trhu, ktoré ovplyvňujú surfovanie na webe.

Čo ďalej?

Ako ďalší krok je vyrábať CSS nad danou HTML štruktúrou v postupnosti od najslabších po najlepšie, a iné (tlačiarne, projektory) zariadenia podľa potreby, kde všade sa má webové sídlo zobrazovať. Nehovorím nič nové, tieto myšlienky tu boli už dávno, no je vhodné, ba priam nutné, ich opakovať a pripomínať si ich, pretože práca cechu webových dizajnérov sa posunula kamsi ku klikateľným „lesklým“ obrázkom, ktoré podmieňujú aj použiteľnosť (často zlým smerom). Viem si predstaviť, že vytvoriť štyri rôzne obrázky s tými istými prvkami inak zobrazenými a možno aj inak vyzerajúcimi dá zabrať. Potom sa stáva, že nad mohutnou webovou aplikáciou vznikne aplikácia do každého mobilného zariadenia zvlášť, ktorá dohromady neponúka nijakú pridanú hodnotu pre používateľa. Oproti tomu, vytvoriť jednu štruktúru HTML a nad ňou štyri rôzne CSS podľa potreby, to je skutočná práca webového dizajnéra.

Ako na to?

Uvediem jeden veľmi jednoduchý príklad, ako na budovanie webového sídla týmto postupom. Povedzme, že v hlavičke dokumentu máme:

<link rel="stylesheet" href="zakladne.css" type="text/css"
media="screen" charset="utf-8">

ďalej v dokumente dajme tomu máme HTML štruktúru:

<dl>
<dt>…</dt>
<dd>…</dd>
</dl>

a povedzme, že chceme použiť float:left pre dt. Keďže túto vlastnosť staršie prehliadače na mobilných zariadeniach nepoznajú, rozhodneme sa, že dt im vôbec netreba (keďže by iba uberal miesto bez pridanej funkcie). Preto ho v základnom CSS súbore (zakladne.css) nezobrazíme:

dl dt{display:none;}

Podotýkam ale, že nesmieme odobrať žiadnu funkciu! Potom pridáme verziu pre novšie verzie prehliadačov mobilných zariadení. Najprv do hlavičky dokumentu:

<link rel="stylesheet" href="pokrocile.css" type="text/css" media="screen and (min-width:240px)" charset="utf-8">

a potom do CSS (pokrocile.css):

dl dt{display:block;float:left;width:2em;height:2em;}

Už nech to použijeme na čokoľvek, nezodpovedanou otázkou ostáva: „ako sa dá s takou istotou tvrdiť, že novšie prehliadače mobilných zariadení to pochopia (že práve tých 240 pixlov na šírku okna bude dodržaných), kým tú základnú verziu dostanú len staršie?“
Odpoveď: @media dopyty v CSS. Všimnite si atribútu media v link značke. Netreba to brať ako „hack“, čo asi niektorí začnú. Treba to brať ako možnosť technológie posunúť webový dizajn ďalej. Ide o to, že základnú verziu ponúkneme pre všetkých, kým pokročilé verzie pre tých, ktorí používajú novšie prehliadače, ktoré nové @media dopyty poznajú.

Čo z toho vyplýva hneď ako prvé na povrch? Že sa nedá a nemali by sme sa snažiť urobiť webové sídlo rovnaké v každom prehliadači, či už ide o mobilné zariadenia alebo stolné počítače, mali by sme poznať ich nedostatky a s tým pri webovom dizajne počítať. O komunikácii s klientom o týchto záležitostiach som už písal.

Tu uvedený príklad je len jednoduchou ukážkou. Dajú sa s tým veľmi pekné veci. Napríklad vieme odchytiť zariadenia s dvojnásobnou hustotou pixlov (retina displeje), s rozlíšením obrazovky na šírku, na výšku. Ak máme webové sídlo zamerané na články, môžeme pri zobrazení na výšku ponúkať viac textu, pri zobrazení na šírku viac funkcií. Z pohľadu používateľa sa zo zmeny veľkosti okna prehliadača stáva užitočná funkcia. Možností je mnoho. Asi budem uvažovať, že niečo si aj prakticky ukážeme (ale to nesľubujem).

Budúcnosť webových sídiel je zaujímavá v tomto kontexte pri myšlienke o použití SVG na ikonky a inú grafiku.

Keby som to zhrnul

Vyššie popísaný postup umožňuje budovať webové sídlo akéhokoľvek rozsahu postupne, bez nutnosti vymýšľať komplikované pohľady na výpis dát a zároveň použiteľné na akomkoľvek zariadení (pre ktoré sa v danej súvislosti vyrába). Webový dizajnér navrhne po diskusii so zadávateľom (klient, zamestnávateľ, …) elementy, ktoré sa budú opakovanie používať, zadefinuje pravidlá pre ich použitie. S týmito pravidlami sa oboznámi každý v tíme a spolu s grafikom sa vymyslia ikonky, farby, … atď.

Naviac, takýto návrh webového sídla je variabilný a nedrží sa koľajníc fixného návrhu ako priameho výstupu z grafického editora.