Minule jsme si ukázali, jak udělat a zároveň neudělat mobilní verzi Snowkidz.cz — naučili jsme se zmobilnit desktopový web. Zařídili jsme velké tapovací plochy, nezobrazujeme informace v mouseover vrstvách a omezili jsme náročnost webu na výkon zařízení a spotřebu energie.

Vznikl nám tak web docela dobře použitelný na tabletech, ale pro zobrazování na smartphonech se našim postupem podařilo odstranit jen část z obvyklých problémů běžného desktopového webu viděného klíčovou dírkou mobilního zařízení.

Zoomovací komplikace

Zoomování nás teď trápí především. Když vyťukáme adresu webu do prohlížeče, vidíme nejdříve něco takového:

A pokud se chceme dostat ke konkrétnímu obsahu, vyžaduje od nás dvojité tapnutí, které zařídí přiblížení na část, jež žádáme:

Pojďme se téhle komplikace zbavit. Druhá z variant, kterou budeme zkoušet, je doplnění desktopového webu o pohled upravený pro mobilní zařízení. Technicky vyřešíme tak, že přidáme stylopis pro mobilní zařízení.

Vzorovou šablonu si můžete prohlédnout už teď, ale projdeme si celý postup. Jen prosím berte na vědomí, že pro jeho názornost budeme docela dost zjednodušovat.

Varianta 2: Desktop + zvláštní mobilní verze

Předně si pojďme ujasnit, co vlastně máme v desktopové šabloně hotové a jak moc nám to může být užitečné. Vezměme to ve vrstvách od obsahu až k „nepovinným” prezentačním vychytávkám:

1. Struktura obsahu v HTML — tu máme solidní a myslíme si, že je to dobrý základ pro jakoukoliv verzi webu.
2. Typografie a vertikální rytmus dokumentu v CSS — máme vybrané fonty pro nadpisy a text, velikosti i rytmus (vertikální okraje elementů) můžeme s drobnými úpravami použít.
3. Vzhled jednotlivých elementů v CSS — s drobnými úpravami můžeme převzít.
4. Layout dokumentu v CSS — ten musíme úplně opustit nebo navrhnout jiný, pokud se chceme zoomování zbavit.
5. Prezentační javascripty — (např. slideshow) musíme v mobilní verzi opustit nebo minimálně zásadně přepsat.

Tedy — na desktopovém HTML můžeme postavit jakoukoliv verzi vzhledu webu. Na mobilu není pro layout stránky místo a tak z desktopové verze převezmeme jen vzhled elementů. Ten případně doladíme podle potřeby a přidáme vlastní navigaci.

Pojďme si postup projít krok po kroku:

1) Zrušíme přednastavený viewport

Už je asi notoricky známo, že mobilnímu prohlížeči musíme nejprve oznámit, ať jako dostupnou šířku pro naši webovou stránku počítá šířku zařízení, a ne šířku obvyklou pro desktopové weby. Slouží k tomu meta značka viewport v hlavičce HTML dokumentu:

<meta name="viewport" content="width=device-width">

2) Založíme nový CSS soubor pro mobilní zařízení

Pomocí media queries detekujeme šířku zobrazovací plochy prohlížeče a podle ní pak servírujeme buď mobilní, nebo desktopový stylopis. Řekněme, že oním bodem zlomu bude šířka iPadu v portrait režimu. Cokoliv užšího pro naše potřeby považujeme za mobilní zařízení:

<link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 768px)">

Tady je potřeba přiznat velikánské zjednodušení. V praxi si s touto triviální detekcí nemusíte vystačit, protože:

1. Pro detekci by bylo lepší použít šířku displeje zařízení (max-device-width), do kategorie „mobil” vám totiž s max-width spadne i uživatel desktopového počítače se zmenšeným oknem prohlížeče.
2. Detekovat mobily jen pomocí rozměrů obrazovky není spolehlivé — na trhu začínají být běžné smartphony s takřka desktopovým rozlišením.

Vždy je potřeba zvážit, s jakými zařízeními lidé na vaše mobilní stránky budou chodit. Pokud to nevíte, udělejte detekci co nejprimitivnější a sledujte statistiky.

Jednoduchá detekce podle šířky okna prohlížeče se nám ale hodí pro testování. Na vzorové stránce si můžete měnit velikost okna a prohlédnout si mobilní variantu i v pohodlí vašeho desktopového prostředí.

I tak tu ale máme jeden malý problém. Problém s velkým „I” a velkým „E”. Však víte, kam mířím. Internet Explorer ve verzi 8 a nižších nerozumí media queries výrazům s čísly. Problém můžeme vyřešit buď použitím polyfillu respond.js, nebo založením nového souboru ie8-.css, do kterého importujeme obsah desktopového stylopisu…

@import "desktop.css"

…a který vložíme do hlavičky stránky s podmíněným komentářem:

<!--[if lte IE 8]><link rel="stylesheet" href="/css/ie8-.css"><![endif]-->

3) Vytvoříme mobilní stylopis

Ve stručnosti tak, že obsah desktopového stylopisu upravíme podle obecných pravidel pro jednotlivé prezentační vrstvy. Například odstraníme layout a upravíme velikost písma. Výsledkem bude mobilní stylopis.

Vezměme třeba nadpis stránky, který v desktop.css zjednodušeně vypadá asi takto:

.snowpark_head .head {
  font-family: 'VAGRundschriftD', sans-serif;
  margin: 30px 0 2px 30px;
  font-size: 38px;
  line-height: 38px;
}

… v mobile.css zmenšíme jeho spodní vnější okraj (margin) a velikost písma:

.snowpark_head .head {
  font-family: 'VAGRundschriftD', sans-serif;
  margin-bottom: 3px;
  font-size: 20px;
  line-height: 22px;
}

V prohlížeči pak rozdíl vypadá asi takto — nahoře je desktop, dole mobil:

A teď to zopakujeme pro všechny elementy naší desktopové šablony.

4) Připravíme extra vzhled pro navigaci

Navigaci webu budeme muset zásadně přestylovat, protože uživatelské potřeby pro desktop a mobilní zařízení jsou v jejím případě naprosto odlišné.

Pomocí CSS3 vytvoříme hlavičku jako lištu, kterou znáte z nativních aplikací, a vložíme do ní kotvu na navigaci, kterou máme na konci HTML dokumentu:

Mimochodem, hlavička i navigace obsahují jediný bitmapový obrázek — logo Snowkidz. Žádný jiný obrázek při výrobě těchto elementů nezahynul. Použití CSS3 nám hrozně usnadní přebírání těchto elementů do dalších projektů. (A teď jakoby tajnůstkářsky a šeptem: Určitě se nestyďte převzít navigaci do svých projektů, v nejjednodušším případě vám bude stačit změnit barvy v CSS zdroji.)

A máme hotovo!

Vypadá to docela dobře, ne?

Pokud na náš web přijde uživatel se smartphonem, načte se mu stylopis, jenž upraví prezentaci obsahu pro potřeby jeho zařízení. Zbavili jsme ho tedy desktopového vzhledu, potřeby zoomování a komplikované navigace napříč webem.

A všimli jste si, že jsme nepotřebovali podkladové PSD? Vytvořili jsme tak něco, čemu se dá říkat…

Kodérská mobilní verze

Tady se pozastavím, protože se s podobným postupem setkávám v nejedné webařské firmě: Designér navrhne desktopový web, kodér vytvoří šablony a sám připraví i jednoduchou mobilní variantu. Jakmile má kodér připravenou první verzi mobilní varianty, baví se o ní zase s designérem a iterují do chvíle, než jsou oba s výsledkem spokojení. Designér tedy nekreslí PSD s mobilním webem.

Kromě Snowkidz takhle vznikl třeba mobilní web Webexpo Academy nebo Pospolu. S jejich kodérem, Vojtou Bulantem, jsme hledali důvody, proč nejen my docházíme ke stejným pracovním postupům. Vojtu tady ocituji doslova:

Nejvíc se mi zamlouvá skočit do kódování rychle (případně si hrát už s prototypem, pokud je na to čas, chuť nebo rozpočet) a rovnou začít mobilní/responsive varianty zkoušet a ladit je s grafikem. Obvykle má kodér před obdržením všech návrhů a podkladů k dobru nějaký čas, který může využít.

Ano, ano. Postup „grafik nakreslí PSD → kodér je celé nakóduje →  programátor naprogramuje” je v době mobilního/responsive webdesignu na vymření. Vodopádový postup, kdy každá fáze výroby probíhá izolovaně a v dlouhých časových úsecích, se nahrazuje intenzivní spoluprácí designéra s vývojářem, krátkými iteracemi a rychlým prototypováním.

Autoři agilního manifestu musejí příchod mobilních zařízení na web slavit ještě dnes.

Odvrácená strana vlastní mobilní verze

Pokud bychom nad naší mobilní verzí uvažovali přísně očima uživatele, měli bychom jít ještě dále:

1. Pořadí a hierarchii obsahu by v mobilní variantě bylo lepší pozměnit — například kontakty nahoru bychom přesunuli daleko výše.
2. Některé elementy bychom pro ušetření datového objemu do stránky vůbec nenačítali — třeba Facebook like tlačítko nebo partnery.
3. Navigaci by bylo pohodlnější otevírat například přímo pod horní lištou.

Vidíme, že i u poměrně jednoduchého desktopového webu navrženého konvenčně nás obsah a jeho struktura v HTML omezuje v přípravě mobilní varianty. Museli bychom tedy přistoupit k nějaké formě serverové detekce zařízení (vizte RESS přístup) nebo ke striktní aplikaci Mobile First filozofie, která by znamenala navrhnout desktopovou variantu podle potřeby mobilních uživatelů. Tedy zcela jinak.

A hodinový účet? Na přípravě mobilní varianty této šablony jsme strávili 4 hodiny. To je celá polovina času stráveného s přípravou desktopové varianty! K tomu – jak jsme viděli – by mobilní varianta potřebovala ještě další energii.

Tudy Snowkidz k mobilům cesta nevede!

Už dnes existují projekty, kde by třetina času front-end vývojáře věnovaná do přípravy mobilní varianty byla dobrou investicí, ale je to web Snowkidz.cz? Návštěvnost z mobilních zařízení tady v horizontu několika let očekáváme maximálně v řádu desítek denně. A pak přichází rozpočet projektu a dává nám jednoznačnou odpověď: „Zbláznili jste se?”

Cestu vlastní mobilní varianty tedy v našem experimentování považujeme za slepou a jdeme se zamyslet nad jinou. Příště si ji zkusíme vytvořit s pomocí jQuery Mobile, ale ještě předtím krátké pozastavení u responsive a u smyslu celého našeho mobilního pachtění.