Web, UX & Technologie

Mobile-first

Přístup k tvorbě webu, kde je mobilní verze na prvním místě

(návrh od nejmenší obrazovky)

Co je mobile-first

Mobile-first je návrhový přístup, při kterém se web navrhuje nejdřív pro mobilní obrazovku a teprve pak se doplňuje o prvky pro tablet a počítač. Pořadí není kosmetické. Na displej široký pár centimetrů se prostě nevejde všechno, takže vás přinutí rozhodnout, co na stránce doopravdy musí být.

Mobile-first není mobile-first indexing

Ty dva pojmy si plete kdekdo, přitom každý mluví o něčem jiném. Mobile-first je způsob, jakým designér a kodér web staví. Mobile-first indexing je pravidlo na straně Googlu: pro hodnocení a zařazení do výsledků vyhledávání se bere mobilní verze stránky. Web navržený od mobilu tomu vychází vstříc, jedno ale nezaručuje druhé. Postavit web od široké obrazovky a přesto mít na telefonu kompletní obsah jde taky.

Rozdíl proti responzivitě

Responsive design říká, jaký web je, tedy že se přizpůsobí šířce obrazovky. Mobile-first říká, v jakém pořadí vznikal. Skoro každý mobile-first web je zároveň responzivní, obráceně to neplatí. Znám dost šablon, které se na telefonu poslušně poskládají pod sebe, a přesto je z nich znát, že se nejdřív kreslila široká úvodní stránka a mobil se dolaďoval na poslední chvíli.

Co se návrhem od mobilu mění

z osmi položek v navigaci se vyberou čtyři, na které lidé opravdu klikají
hlavní sdělení i tlačítko musí padnout do prvního dotyku obrazovky, dřív než začne kdokoliv rolovat
fotky se vybírají tak, aby dávaly smysl i po ořezu na výšku
formuláře se krátí, protože každé pole navíc znamená na telefonu další klepání do malé klávesnice, další překlep a další důvod odejít

Co bych z mobilu vyhodil

Neprodávám mobile-first jako metodiku, kvůli které se předělává celý web od nuly. U běžného klienta začínám tím, že si na telefonu otevřu tři stránky, které vydělávají nejvíc, a sepíšu, co bych z nich vyhodil. Bývá to slider, uvítací odstavec o firmě a jedna ze dvou navigací pod sebou. Když se to opravdu smaže, nikomu to nechybí a stránka se navíc dřív vykreslí. Důsledně řešit pořadí návrhu má smysl hlavně u webu, který se dělá na zelené louce.

Časté otázky

Je mobile-first totéž co mobile-first indexing?

Není. Mobile-first je způsob návrhu webu, kdy se začíná od nejmenší obrazovky. Mobile-first indexing je postup Googlu, který si pro hodnocení stránky bere její mobilní verzi. Souvisejí spolu, zaměňovat se ale nedají.

Dává mobile-first smysl u B2B webu, kam chodí lidé z počítače?

Dává, jen ne tak vyhroceně. Podíl mobilů si zjistěte ve své analytice, ne z obecných statistik. I v B2B se první kontakt často odehraje na telefonu a k počítači si člověk sedne až kvůli poptávce.

Znamená mobile-first, že se na počítači web ošidí?

Nemělo by. Postup je opačný, od mobilu se přidává, ne ubírá. Když široká verze vypadá jako roztažený telefon s obrovskými mezerami, chyba není v přístupu, ale v tom, že se na velké obrazovky nikdo nepodíval.