Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile First v praxi

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

  • Login to see the comments

  • Be the first to like this

Mobile First v praxi

  1. 1. Mobile First v praxi Martin Michálek @machal 31. května 2016
  2. 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. 3. Proč vlastně Mobile First?
  4. 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. 5. Pojmy kolem Mobile First
  6. 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. 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. 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. 9. Mobile First jako designérská filozofie
  10. 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. 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. 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. 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. 14. „Moje” Lentiamo, navržené Mobile First postupem je na všech zařízeních maximálně jednoduché a konzistentní.
  15. 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. 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. 17. Mobile First jako způsob psaní kódu
  18. 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. 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. 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. 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. 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. 23. <video class="jumbo-video" preload="none" loop data-poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> </video>
  24. 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. 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. 26. Problémy s Mobile First
  27. 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. 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. 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. 30. Děkuji! @machal facebook.com/VzhuruDolu martin@vzhurudolu.cz 


×