Embed Size (px)
Citation preview
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
