Co je to „Mobile First“? Ale doopravdy

Jak vznikl princip „Mobile First“ a co přesně znamená? Jaký je trend mobilních webů?

Článek původně vyšel na autorově webu Vzhůru dolů.

Mobile First vzniklo jako reakce na navrhování webů pouze pro desktop. Nesnaží se upřednostňovat mobily, jen jejich význam u designérů dorovnat s desktopem. Když vyrovnáme Mobile/Desktop First extrémy, zbyde design pro všechna zařízení. Je úplně jedno, kdy budou mít mobily většinu, zohledňovat je musíme hned. A Mobile First má, kromě jiného, potenciál vylepšit desktopové verze webů třeba tím, že designéry nutí více se zaměřovat na jádro problému.

Fráze „Mobile First“ má mnoho významů. Původně se jedná o filozofii návrhu UI/UX webu nebo aplikace.

„Mobile First“ je také způsob psaní kódu, speciální odrůda postupného vylepšování (Progressive Enhancement). Na Vzhůru dolů jste si o legracích s CSS a Mobile First přístupem mohli počíst hned několik textů. Hezky je nově shrnuje Bohumil Jahoda. A víte co? Dneska na technikálie pečeme a budeme si povídat jen o Mobile First jako designérské metodice.

Jen pozor! Článek obsahuje prvky víry, místy až sektářského typu. :-)

Mobile First dle Wroblewskiho

Luke Wroblewski tezi nadefinoval asi takto:

„Designéři, navrhujte nejprve pro mobily. Protože smartphony se prudce šíří mezi uživateli, protože nás díky svými omezeními nutí zaměřit pozornost na to nejdůležitější a protože rozšiřují naše možnosti.“

Wroblewski: „V jedno Mobile First věřiti budeš.”

Mobile First bez kontroverze = multidevice design

„Navrhujte to nejprve pro mobily“ – to byla ve své době dost provokativní myšlenka. Vždyť to bylo jen dva roky po uvedení prvního iPhonu! I v USA se v roce 2009 počítaly přístupy na weby z mobilních zařízení na nízké jednotky procent. Mimochodem, v době psaní článku, po šesti letech, je to v průměru více než 40 % celku.

Víte, s těmi tezemi (nebo buzzwordy když chcete) to je občas jako s vírou. Pokud chcete tezi „Mobile First“ přijmout hned, musíte věřit ve dvě věci:

  1. Mobily budou v horizontu jednotek let generovat podíl návštěvnost webů porovnatelný s desktopem.
  2. Každému provozovateli webu se investice do mobilů dlouhodobě vyplatí.
  3. Aby se webaři naučili dobře a levně designovat pro mobily, bude potřeba změnit mnohé z jejich pracovních postupů.

No a teď si vezměte, že Wroblewski tomuhle věřil už v roce 2009. Nevím jak vy, ale já si ještě v té době nebyl zcela jistý, k čemu jako může ten iPhone být vůbec dobrý. Vizionář? Guru nějaké sekty? :-)

Wroblewskimu došlo, že aby okolí tuhle myšlenku vůbec vzalo v potaz, musí znít provokativně. Proto „Mobile First” jako jasný protiklad dodnes bohužel převažujícího „Desktop First” přístupu v návrhu webů.

Jenže doba pokročila a jak už to bývá, buzzwordy začnou časem myšlenkám, které zastupují, dělat medvědí službu. A tak si Mobile First mnozí vykládají jako: „Upřednostni mobil před desktopem.“ Ale to ne!

„Mobile First” má znít jako „Přestaň designovat jen pro ten desktop, vole, a zabývej se tím, jak bude rozhraní použitelné na mobilu.“

Nebo jednodušeji: „dělej design pro všechna zařízení“. „All Devices First”, ehm.

Tolik o slovech a jejich dopadech. Kdyby totiž Wroblewski jezdil po světě a hlásal „holky a kluci, dělejte design pro všechna zařízení“, asi bychom se tu dneska nemuseli přít o významu slov, ale propagace myšlenky by nebyla tak rychlá.

Ale co už… nevezmeš jména Wroblewskiho nadarmo, že jo.

Jak dlouho bude trvat než se naučíte dělat weby pro mobily?

Mně osobně děsně pomáhá navrhovat rozhraní skutečně od nejmenších displejů. Skicuji mobilní rozhraní a pár nejlepších nápadů pak zkouším i na větších displejích. Vím ale o jiných webařích, kteří rozhraní skicují a zkoušejí na desktopu, tabletech i mobilech najednou.

Ani když začínáte desktopem, nemusíte za to jít rovnou do pekla. Tady si ale myslím, že musíte mít buď jednoduchý úkol, výborný cit nebo velké zkušenosti. Nebo na smartphony prostě pečete.

Jenže – jestliže někteří provozovatele webů s mobily spěchat nemusí, u webařů to neplatí.

Pokud jste se ještě nezačali učit dělat uživatelské rozhraní na mobilech, jak dlouho bude trvat, než to zmáknete? Jak dlouho pak bude trvat, než změníte pracovní postupy celého webařského týmu? Jak dlouho bude trvat, než se naučíte přesvědčovat šéfy, klienty, že rozhraní je potřeba dělat jinak? Kdy budete zaučovat lidi spravující obsah, aby potřeby uživatelů na mobilech pochopili, když vy sami jste ho ještě nezačali chápat – protože váš pohled na webdesign se točí kolem zkomírajících desktopových návrhových vzorů?

U sebe to počítám na roky. Máte pak dost času naučit dělat webdesign jinak, když ještě v roce 2015 navrhujete pro desktop a „ty mobily nějak pošudlí kodér, že jo…“?

Pokud jste přijali víru „Mobile First” až teď, máte málo času. Proto si neuškodí udělat pár responzivních webů a s mobily si opravdu vyhrát, i když to klient nechce.

Wroblewski: Desktopový webaři, zapomeň, abys den sváteční světil!

Je 16 % málo nebo dost? Trend je jasný

Je pravda, že než by někteří čeští provozovatelé webů na vlastním byznyse nějak výrazně ucítili nepřítomnost dobře udělané mobilní verze, projdou ty weby ještě jedním až dvěma redesigny. Vezměme třeba běžné firemní neprodejní prezentační stránky. Nebo segmenty, kde je jeden dominantní hráč. Nebo segmenty, kde všichni významní hráči na mobily kašlou.

Můžeme se přít, kdy mobilní zařízení začnou mít v ČR nadpoloviční většinu. Ale proč bychom to dělali? Dnešních 16 % a meziroční růst v desítkách procent se mi zdá jako dost významný podíl pro to, abychom jejich uživatele neignorovali.

Nemluvě o tom, že v i ČR je mnoho segmentů kde návštěvnost z mobilních zařízení dosahuje třiceti nebo klidně padesátiprocentní hranice.

A pokud se něco nečekaného nestane, ve vyhlídce jednotek let budou mobilní zařízení generovat větší návštěvnost než desktop i v ČR.

Do-mobile-firstovat se k lepšímu desktopovému webu

Vraťme se ještě k té původní Wroblewskiho definici.

Že mobily „nutí designéry zaměřit pozornost na to nejdůležitější“? Yeah!

Smartphony nás webaře omezují z technického pohledu hlavně velikostí displeje a pomalým datovým připojením. Daleko důležitější je ale omezení z pohledu uživatelského chování:

  • na mobilu mám málo času
  • na mobilu nechci moc klikat, než se dostanu k výsledku
  • na mobilu nechci vyplňovat nesmyslně dlouhé formuláře
  • na mobilu prostě nebudu trpělivý

Nahraďte frázi „na mobilu” za „na desktopu” a máte to. Ano, pomocí Mobile First nebo jiného poctivého návrhu pro všechna zařízení, mohou vznikat lepší desktopové weby.

Takže – i pokud jsem vás ani teď nepřesvědčil, že ty mobily jsou fakt důležité a chcete dál navrhovat jen pro desktop:

  1. zmenšete si okno prohlížeče
  2. zpomalte si internet na úroveň český-130kbps-EDGE
  3. vypíchněte si jedno oko
  4. uřízněte všechny prsty kromě palce a ukazováčku
  5. udělejte si menší lobotomii mozku

Šup, a je z vás typický mobilní uživatel! A pak designujte. Tento návod, jak udělat lepší web na desktopu, sdílím s láskou zadarmo jen pro vás.

Ale vážně – pojďme si to ukázat na konkrétním příkladu. Obrázek je z připravovaného – Mobile First, ach jistě – redesignu VašeČočky.cz:

VašeČočky.cz

V desktopové verzi se uživatel uvnitř kategorií produktů pohybuje třemi a na některých stránkách i čtyřmi způsoby.

To je v mobilním světě nepředstavitelné. Lidově řečeno je prostě není kam nacpat. A protože trváme na konzistenci důležitých ovládacích prvků napříč zařízeními, stejnou verzi dostanou i uživatelé desktopu. Po několika iteracích tedy jdeme do vyhodnocovací fáze s touto radikálně redukovanou variantou navigace.

Pojďme si tedy shrnout Mobile First:

  • Nejde o upřednostňování mobilů, ale o dorovnání jejich významu.
  • V zásadě nám jde o design pro všechna zařízení.
  • Na čekání na větší mobilní návštěvnost nemáme jako webaři dost času, budeme muset změnit spoustu svých návyků.
  • Díky Mobile First máte šanci vylepšit i desktopový web.

Wroblewski: Nepromluvíš už křivého svědectví proti Mobile First svému.

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

Komentáře: 7

Přehled komentářů

Ivan Nový Jak existují normální formy pro návrh relačních databází,
jl Nightmare
asdf Re: Nightmare
Martin Michálek Re: Jak existují normální formy pro návrh relačních databází,
Martin Michálek Re: Nightmare
asdf Re: Nightmare
jl
Zdroj: https://www.zdrojak.cz/?p=15709