Mobile First v praxi

Mobile First v praxi

Martin Michálek @machal

31. května 2016

1) Proč vlastně Mobile First?2) Pojmy kolem Mobile First

3) Designérská filozofie

4) Způsob psaní kódu

5) Problémy

Proč vlastně Mobile First?

0 %

5 %

10 %

15 %

20 %

6/2012 6/2013 6/2014 6/2015 6/2016*

Podíl mobilních prohlížečů na celkovém počtu zobrazení stránek

Zdroj: velké české weby měřené Gemius SA, gemiusTraffic, Rankings.cz. www.vzhurudolu.cz

Podíly mobilních prohlížečů rostou. Důležitější než současný stav je ale trend. V mnoha vyspělých zemích je podíl mobilních zařízení na webu nadpoloviční.

Pojmy kolem Mobile First

Native × web

V kontextu Mobile First je jedno zda mluvíme o aplikaci, responzivním webu nebo jiném typu média. Neexistuje obecně dobrá volba mezi nativní, hybridní nebo webovou aplikací.

„m tečka web“ × responzivní web

Zato dilema mezi zvláštním mobilním a responzivním webem je možné vyřešit snadno. Z pohledu efektivity vývoje je dlouhodobě udržitelný jen ten responzivní.

Adaptivní × responzivní

Je dobré si také uvědomit, že responzivní design je svými prostředky jen menší částí širší skupiny technik adaptivního designu. Například serverová detekce není responzivní.

Mobile First jako designérská

filozofie

Luke Wroblewski

Navrhujte nejprve pro mobilní zařízení, protože:

1) Mají větší budoucnost než desktop 2) Díky omezením nás nutí redukovat 3) Rozšiřují naše možnosti

Proč s Mobile First nečekat?

1. Významná návštěvnost už dnes.

2. Dlouhodobě výhodná investice.

3. Netriviální adaptace výrobních postupů.

Mobile First = Upřednostni mobil?

Ne. Prostě jen mysli na všechna zařízení. Dělej „Multidevice Design“.

Mobile First by nemělo být dogma. Ve své době bylo reakcí na neudržitelné „Desktop First” myšlení. Dnes je samozřejmě nutné návrh dopředu promýšlet pro všechna zařízení.

Alza je příkladem „Desktop First“ přístupu. Odvozená mobilní verze má složitější navigaci a celkový uživatelský prožitek trpí nekonzistencí.

„Moje” Lentiamo, navržené Mobile First postupem je na všech zařízeních maximálně jednoduché a konzistentní.

Přežijí Mobile First?

Zamysleme se teď nad dnes běžnými komponentami rozhraní. Třeba tooltipy nebo záložky. V desktopové éře byly samozřejmostí. Jsou ale tyhle komponenty výhodné i na mobilech?

Přežijí Mobile First?

Podobně uvažujme i o dalších – karusely, lightboxy, modální okna. Nebo složité navigace, komplexní formuláře… Ano, jejich užití v Mobile First světě musíme přehodnotit.

Mobile First jako způsob psaní kódu

Progressive Enhancement – postupné vylepšování

Začneme nejnižším společným jmenovatelem, realizovaným nejjednodušší technologií. Pro lepší zařízení pak postupně přidáváme UX. To je postupné vylepšování.

Progressive Enhancement – postupné vylepšování

// javascript pro staré křápy

if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) {

// javascript pro moderní prohlížeče

}

Můžeme tak třeba rozdělit Javascriptový kód na dvě části – pro moderní a pro zastaralé prohlížeče.

Navigace: „Desktop First”

.nav { display: flex;

}

.nav-item { flex: 1; }

@media only screen and (max-width: 600px) {

.nav { display: block;

}

.nav-item { flex: none; }

}

Navigace: „Mobile First”

(žádný kód)

@media only screen and (min-width: 600px) {

.nav { display: flex;

}

.nav-item { flex: 1; }

}

Když píšeme nejprve pro jednodušší zařízení, kód se zjednodušuje.

<video loop poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> </video>

Takto se ale video začne na mobilech stahovat, i když tam je k ničemu. Mobily neumí automatické přehrávání videa. Celý postup zde.

<video class="jumbo-video" preload="none" loop data-poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> </video>

<video class="jumbo-video" preload="none" loop data-poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> </video>

if (!isMobile()) { $('.jumbo-video').prop('preload', 'auto') $('.jumbo-video')[0].autoplay = true; } else { $('.jumbo-video') .prop('poster', $('.jumbo-video').data('poster')); }

Bootstrap mřížka

<div class="col-sm-6 col-md-4 col-lg-3"> … </div>

Také layoutová mřížka Bootstrapu je Mobile First. Zjednodušuje to psaní HTML kódu.

Problémy s Mobile First

Problém #1: Chybí vhodné nástroje pro návrh

Když už nástroje umožňují návrh pro více zařízení, bez přítomnosti kodéra často vznikne rozhraní, které nelze realizovat se společným kódem jako plnohodnotně responzivní.

Problém #2: Poctivý Mobile First proces je náročnější

Pokud chceme hodně testovat přímo v prohlížečích, je to samozřejmě zdlouhavé a drahé. Nicméně třeba pro vývoj vlastního produktu je to nedocenitelné.

Problém #3: Buzzwordy se stávají ideologiemi

Už při návrhu prostě myslete na všechna relevantí zařízení.

Občas se hold najde někdo, kdo filozofii Mobile First vykládá jako „dej přednost mobilům”. Takhle by to být nemělo. Chtějte kvalitní uživatelský prožitek na všech zařízeních.

Děkuji!

@machal facebook.com/VzhuruDolu

martin@vzhurudolu.cz