Přednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu. ✎ http://www.vzhurudolu.cz/prirucka/mobile-first

1. Mobile First
v praxi
Martin Michálek
@machal
31. května 2016

2. 1) Proč vlastně Mobile First?
2) Pojmy kolem Mobile First
3) Designérská filozofie
4) Způsob psaní kódu
5) Problémy

3. Proč vlastně
Mobile First?

4. 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í.

5. Pojmy kolem
Mobile First

6. 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í.

7. „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í.

8. 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í.

9. Mobile First jako
designérská
filozofie

10. 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

11. 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ů.

12. 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í.

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

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

15. 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?

16. 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.

17. Mobile First jako
způsob psaní kódu

18. 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í.

19. 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.

20. Navigace: „Desktop First”
.nav {
display: flex;
}
.nav-item {
flex: 1;
}
@media only screen
and (max-width: 600px) {
.nav {
display: block;
}
.nav-item {
flex: none;
}
}

21. 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.

22. <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.

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

24. <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'));
}

25. 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.

26. Problémy s
Mobile First

27. 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í.

28. 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é.

29. 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.

30. Děkuji!
@machal
facebook.com/VzhuruDolu
martin@vzhurudolu.cz