mobile first v praxi
TRANSCRIPT
![Page 1: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/1.jpg)
Mobile First v praxi
Martin Michálek @machal
31. května 2016
![Page 2: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/2.jpg)
1) Proč vlastně Mobile First?2) Pojmy kolem Mobile First
3) Designérská filozofie
4) Způsob psaní kódu
5) Problémy
![Page 3: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/3.jpg)
Proč vlastně Mobile First?
![Page 4: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/4.jpg)
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í.
![Page 5: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/5.jpg)
Pojmy kolem Mobile First
![Page 6: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/6.jpg)
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í.
![Page 7: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/7.jpg)
„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í.
![Page 8: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/8.jpg)
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í.
![Page 9: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/9.jpg)
Mobile First jako designérská
filozofie
![Page 10: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/10.jpg)
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
![Page 11: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/11.jpg)
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ů.
![Page 12: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/12.jpg)
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í.
![Page 13: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/13.jpg)
Alza je příkladem „Desktop First“ přístupu. Odvozená mobilní verze má složitější navigaci a celkový uživatelský prožitek trpí nekonzistencí.
![Page 14: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/14.jpg)
„Moje” Lentiamo, navržené Mobile First postupem je na všech zařízeních maximálně jednoduché a konzistentní.
![Page 15: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/15.jpg)
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?
![Page 16: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/16.jpg)
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.
![Page 17: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/17.jpg)
Mobile First jako způsob psaní kódu
![Page 18: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/18.jpg)
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í.
![Page 19: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/19.jpg)
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.
![Page 20: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/20.jpg)
Navigace: „Desktop First”
.nav { display: flex;
}
.nav-item { flex: 1; }
@media only screen and (max-width: 600px) {
.nav { display: block;
}
.nav-item { flex: none; }
}
![Page 21: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/21.jpg)
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.
![Page 22: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/22.jpg)
<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.
![Page 23: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/23.jpg)
<video class="jumbo-video" preload="none" loop data-poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> </video>
![Page 24: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/24.jpg)
<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')); }
![Page 25: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/25.jpg)
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.
![Page 26: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/26.jpg)
Problémy s Mobile First
![Page 27: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/27.jpg)
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í.
![Page 28: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/28.jpg)
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é.
![Page 29: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/29.jpg)
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.
![Page 30: Mobile First v praxi](https://reader033.vdocuments.mx/reader033/viewer/2022042600/58728c041a28ab36118b533d/html5/thumbnails/30.jpg)
Děkuji!
@machal facebook.com/VzhuruDolu