Případová studie: Prezentační web na mobilních zařízeních

Snowkidz

Malý prezentační web, to je webařská rutina. Technologických nástrojů pro tenhle typ webů máme víc než dost, a tak je tady dnes už široký prostor pro vytvoření zajímavého vizuálního sdělení. Anebo technické experimentování. Během práce na Snowkidz.cz jsme zkoušeli, jak co nejsnadněji zjednodušit používání desktopového prezentačního webu mobilnímu uživateli.

Seriál: Případová studie Snowkidz.cz (3 díly)

  1. Případová studie: Prezentační web na mobilních zařízeních 28.5.2012
  2. Případová studie Snowkidz.cz: Zvláštní mobilní web 18.6.2012
  3. Případová studie Snowkidz.cz: responzivní webdesign a jQueryMobile 19.12.2012

Webdesign mobilní? Raději přivětivý budoucnosti.

V článcích se budeme dotýkat populární fráze  — mobilního webdesignu, ale přemýšlejte o něm jako o webdesignu multiplatformním. Webdesignu nezávislém na zařízení.

Mobilní webdesign je množina znalostí a praktik zjednodušujících uživatelský prožitek na tabletech, čtečkách ebooků, starých křápech a smartphonech. V další várce můžeme očekávat televize, herní konzole, ovládací panely v autech, Google brýle, varnou konvici s Androidem…

Vidíte, že ne vždy půjde o mobilní zařízení. A jedno je jisté — kdo sedí pod další vzedmutou vlnou technologické revoluce, vůbec netuší, jak budou vypadat vlny příští. Vlny, co přinesou nová zařízení pro zobrazování webů. A pod takovou vlnou sedí celá webařská branže. Takže lépe — budeme mluvit o future-friendly webdesignu. Přívětivém budoucnosti.

Autor seriálu pořádá veřejná školení mobilního webdesignu. Téma moderních postupů na front-endu si u něj můžete objednat také jako firemní školení.

Sněžné děti? WTF?!

Snowkidz je značka světové lyžařské federace (FIS) pro propagaci lyžování mezi dětmi. Cílem první verze webu Snowkidz.cz je informační servis ke vznikajícím lyžařským parkům a budování značky. Nástrojem tedy bude malý prezentační web.

S používáním na mobilech se ve webové strategii zatím nepočítá. I tak jsme s Pospolu dostali chuť zamyslet se, jak tenhle typ webů čistě v technické rovině co nejjednodušeji optimalizovat pro zobrazování na mobilních zařízeních.

Uvážili a vyzkoušeli jsme čtyři varianty:

  1. „Zmobilněný” desktop
  2. Desktop + zvláštní mobilní verze
  3. Desktop pomocí responsive webdesignu + zvláštní mobilní verze
  4. Desktop + mobilní verze pomocí jQuery Mobile

U všech variant jsme díky rychlému prototypování hned viděli klady i zápory. Ještě chvilku vydržte a budete je znát i vy.

Dnes se podíváme na první. Další varianty rozebereme v dalších dílech.

Varianta 1: Zmobilněný desktop

První způsob jak udělat mobilní variantu prezentačního webu je — nedělat ji skoro vůbec. Smartphony s tímhle přístupem webdesignérů odjakživa počítají a jakžtakž si s ním umí poradit. Uživateli poskytnou zoomování nebo web proženou trávicím traktem požírače datového objemu — jako to dělá Opera Mini nebo částečně i Mobile.

Není zmobilněný desktop až příliš opatrná strategie? Ano, odvážný webový vývojáři, jenže když nic neuděláš, nic nezkazíš, rozpočet klientovi neutratíš. A na startovní čáře mobilního webdesignu to není strategie odsouzeníhodná. Složitá práce na některých komplexních mobilních webech může být za dva roky v kontextu nových postupů a technologií k smíchu. Jaké nové webařské nástroje se během následujícího roku objeví? A co vlastně dnes opravdu víme o tom, jak lidé budou smartphony s laciným přístupem k internetu používat?

Otázka „Kdy a jak jít s webem do smartphonů?” je pro vývojáře důležitá, ale ne akutní. Horší situaci mají majitelé webů a jejich byznys stratégové. Pro ty opravdu začíná být pozdě.

Zpět ke zmobilněnému desktopu. U Snowkidz postupujeme stejně — první variantou mobilního webu je konvenční desktopový web, který skrze analýzu, návrh strategie, vizuálního stylu a informační architektury probublal až do finálního produktu netechnologické fáze — PSD s návrhem obrazovek.

My ovšem tenhle náš starý dobrý desktopový web vylepšíme. Určité novinky prostě nemůžeme ignorovat: počet prodaných smartphonů je obrovský, ale máme tady i tablety. S minimálním množstvím energie tedy zkusíme ten náš starý desktopový web proměnit ve zmobilněný desktopový web.

Čtyři kroky pro veselejší mobilní uživatele

a) Uděláme velké tapovací plochy. Kurzorem myši najdeme jehlu v kupce desktopového sena, ale prstem ruky? Apple jako minimální rozměr „tapovací” plochy doporučuje 44×44 pixelů:

b) Informace nebudeme zobrazovat v mouseover vrstvách. Mouseover vrstvy, to je kapitola sama pro sebe. Z některých by měl Alfred Hitchcock velkou radost:

c) Zrychlíme načítání webu nejlíp, jak to jde, protože…

Pokud váš desktopový web připravujete pro mobilní zařízení a vybíráte si mezi návrhem speciálního vzhledu a optimizací rychlosti načítání webu, uděláte lépe, když desktopový web uděláte šíleně rychlý.
— volně podle Jasona Grigsbyho

d) Omezíme náročnost webu na výkon zařízení a spotřebu energie:

Sedíme u našich výkonných pracovních stanic, ale hardwarový výkon je na tabletech jinde a na smartphonech ještě jinde. Kromě standardních doporučení pro desktop vznikají nová pro smartphony. Problematika je složitější, ale třeba nevíte, že…

  • Vykreslování elementů rozhraní pomocí CSS3 (stíny, kulaté rohy, gradienty) je skoro vždy rychlejší než obrázky. Jen vždy testujte — pozor na velké stíny a gradienty.
  • Javascriptové animace jsou na mobilních zařízeních pomalé, používejte CSS3 transitions a animations.
  • Renderováno je i to, co není vidět ve viewportu. V případě, že například schováte text v elementu pomocí text-indend: –9999px, zařízení musí renderovat několikanásobně větší plochu, než je viewport samotný.
  • Jeden z hlavních původních argumentů pro jQuery — kompatibilita napříč desktopovým prohlížeči je na mobilech mimo mísu. Tady žádný IE6 nemáme. Pro mobilní weby je lepší hledat alternativu.

A hlavně testovat. A testovat. A taky testovat

Těch doporučení je docela dost, že ano? A to jsme ještě s opravdovým mobilním webdesignem nezačali. Zatím jen v mezičase přizpůsobujeme své desktopové weby novému prostředí, jež se pomalu zaplňuje tablety a smartphony.

Nové pravidlo dnešního webdesignu zní — testujte na tabletech, testujte na mobilech. Kupte si smartphone a tablet, nejlépe laciný. Nebo si je na pár dní půjčte a otestujte si své weby. Udělejte to dříve, než se vaši rodiče budou na svém tabletu divit, jak pomalý je váš web.

Zmobilněný Snowkidz.cz

Vraťme se k našemu webu — milý starý desktopový web se tak proměnil ve starý desktopový web přizpůsobený tabletům a trochu i smartphonům:

  • načítá se rychle
  • je méně náročný na hardwarový výkon
  • nekomplikuje dotykové ovládání
  • neprudí tabletisty a tabletistky vyskakováním mouseover vrstev.

V tabletu je to moc fajn…

Pokud ale takový web navštívíme se smartphonem, načte se nám rychleji než běžný dnešní desktopový web a po zazoomovaní nebude problém tapnout na aktivní elementy.

Dnes to je docela dobré skóre, ale zítra může konkurence přijít s rychlým mobilním webem, kde se zoomovat nemusí. A my si chceme vyzkoušet všechny technické možnosti mobilního webdesignu. Příště tedy zkusíme jít o krok dál, co říkáte?

Kódování téhle verze šablony z celkového rozpočtu sebralo 8 hodin práce. Pokud na všechny zásady zmobilnění myslíte už během výroby, nemusí to být o nic víc než práce na vašem desktopovém webu.

Tabletům a smartphonům se dnes jako webaři  nevyhneme. I pokud stále děláte weby jen pro desktop, nepodceňujte význam rychlosti načítání a výkonu na nových zařízeních. Přidejte velké tapovací plochy, zapomeňte na mouseover a hlavně si své weby pořádně na nových zařízeních vyzkoušejte.

Příště se podíváme na další varianty — zejména jak se zbavit zoomování a docela snadno vytvořit zvláštní mobilní verzi Snowkidz.cz.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 20

Přehled komentářů

none_ Zajímavé
@lukoko_name Nejstarší křáp
Martin Michálek Re: Nejstarší křáp
honzamac Re: Případová studie: Prezentační web na mobilních zařízeních
Chamurappi Je výsledek osmihodinové práce někde k vidění?
Martin Michálek Re: Je výsledek osmihodinové práce někde k vidění?
Chamurappi Re: Je výsledek osmihodinové práce někde k vidění?
Chamurappi Nejasnosti v kroku d)
Koca Re: Nejasnosti v kroku d)
Martin Michálek Re: Nejasnosti v kroku d)
Chamurappi Re: Nejasnosti v kroku d)
keff Re: Nejasnosti v kroku d)
keff Re: Nejasnosti v kroku d)
keff Re: Nejasnosti v kroku d)
Chamurappi Re: Nejasnosti v kroku d)
keff Re: Nejasnosti v kroku d)
Chamurappi Re: Nejasnosti v kroku d)
Chamurappi Re: Nejasnosti v kroku d)
keff Re: Nejasnosti v kroku d)
Chamurappi Re: Nejasnosti v kroku d)
Zdroj: https://www.zdrojak.cz/?p=3662