Přejít k navigační liště

Zdroják » Mobilní vývoj » Co je to „Mobile First“? Ale doopravdy

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.

Komentáře

Subscribe
Upozornit na
guest
7 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Ivan Nový

měly by existovat i normální formy pro návrh designu, v podstatě problém rozvržení obrazovky je analogie problému rozvržení řádků do tabulek. Přineslo by to pak to, že by pak stačilo navrhovat design jen pro mobily, a definovat jednotná konverzní pravidla, která by sloužila k automatickému vygenerování css stylů pro ostatní zařízení, klidně ad hoc. Vynutí si to trend, kdy uživatelé budou na stránky a aplikace přicházet většinou z mobilu a tabletu. Stejně v každé době chtějí mít všichni stránky stejného stylu. Přirozeným způsobem to usnadňuje komunikaci.

jl

Webovy design by se mel vratit zpet na zemi. Stranky jsou rok od roku nepouzitelnejsi. Jedinym vysledkem „mobile first“ jsou nevyuzite plochy dosahujici bezne 50 % stranky i vice a na zbytku je nasazena spousta hejblatek a klikatek slouzici k odkryti zbytku rozectene vety. Vse pochopitelne vyzadujici Javascript a dalsi zhuverilosti.

asdf

Asi tak, viz redesign algoritmy.net. Pokurvit co se dá, menu schovat do burgerů, hlavně že si to můžu scrollovat na tabletu.

asdf

Samozřejmě. Čím dál tím více se setkávám s desktop-nepřátelskými weby. Hamburgerová a jíná menu, kdy se k potřebné položce dostanu až skrz sedmero podmenu. Parallaxní weby, kde mi upadne kolečko od myši než najdu potřebné. Přehledné a rychlé lišty se přeměnily na pomalé a zbytečně velké dlaždice. Od ikonek a piktogramů zmizely popisky, jejich význam člověk objeví až kliknutím, neboť prsem se nedá najet a zobrazit si titulek, tak proč se namáhat. Boční panely mizí. Autoři neumí plně využít možnosti velké obrazovky a vysoké přesnosti myši. Cílem je totiž obrazovka chytrých hodinek a tučný prst uživatele.

jl

Ja jsem uzivatel, me nejake formalismy nezajimaji. Ale zrejme ano, doporucuje se to dokonce i v clanku na prikladu tech cocek. Co clovek ve stavajici verzi vidi jednim pohledem, bude po nasazeni verze „vylepsene“ nucen hledat v nekolika komponentach. A dost mozna neuvidi nic. I to se stava.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.