Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Responzivní webdesign (pro MS Fest)

2 138 vues

Publié le

http://www.vzhurudolu.cz

3 kroky za klasickým responzivním webdesignem:
— Různé verze médií
— Rychlost načítání
— Efektivita práce: mikrobreakpointy a mobile up

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

Responzivní webdesign (pro MS Fest)

  1. 1. MSFest Praha Responzivní webdesign Martin Michálek www.vzhurudolu.cz @machal
  2. 2. ★ ★ ★ ★ ★ Statistiky Klasický responzivní webdesign Různé verze médií Rychlost načítání Efektivita práce: mikrobreakpointy a mobile up
  3. 3. Aktuální podíly prohlížečů Mobilní 9% Opera 4% IE8 12% Firefox 29% IE9 5% IE10 14% Chrome 27% Podíly prohlížečů v ČR 9/2013 zdroj dat: rankings.cz
  4. 4. Spousty rozlišení obrazovky 600 450 300 150 1/2009 1/2010 1/2011 1/2012 0 1/2013 e-Slovensko.cz – počty rozlišení obrazovky
  5. 5. ★ ★ ★ ★ ★ Statistiky Klasický responzivní webdesign Různé verze médií Rychlost načítání Efektivita práce: mikrobreakpointy a mobile up
  6. 6. Klasický responzivní webdesign
  7. 7. Flexibilní layout .container .box .container  {    width:  1000px; } .container  {    max-­‐width:  1000px; } .box  {    width:  500px;    padding:  50px;    margin:  50px; } .box  {    width:  50%;    padding:  50px  5%;    margin:  50px  5%; }
  8. 8. Flexibilní obrázky <img src="mapa.jpg" width="312" height="175" alt="…"> .map img { max-width: 100%; height: auto; } http://unstoppablerobotninja.com/entry/fluid-images/
  9. 9. Media queries @media screen and (max-width: 767px) { #head { … } } http://www.vzhurudolu.cz/projects/snowkidz-mobile-demo/responsive/
  10. 10. Viewport <meta name="viewport" content="width=device-width"> //pro Windows 8 a snap mode: @viewport { width: device-width; }
  11. 11. Klasický responzivní webdesign Řeší ★ Přizpůsobení velikosti displeje Neřeší ★ Různé verze médií ★ Rychlost načítání ★ Efektivita práce
  12. 12. ★ ★ ★ ★ ★ Statistiky Klasický responzivní webdesign Různé verze médií Rychlost načítání Efektivita práce: mikrobreakpointy a mobile up
  13. 13. Responzivní obrázky – výběr možností ★ Response (front-end JS) ★ Picturefill (front-end JS) ★ Adaptive Images (back-end PHP) http://responsejs.com/ https://github.com/scottjehl/picturefill http://adaptive-images.com/ Více řešení: http://blog.cloudfour.com/responsive-imgs/
  14. 14. Někdy je efektivnější back-end <?php if ($isSmartphone): // button s odkazem na mapu else: // iframe s mapou endif; ?> http://mobiledetect.net/ http://kratce.vzhurudolu.cz/post/44227784297/docasna-server-detekce
  15. 15. ★ ★ ★ ★ ★ Statistiky Klasický responzivní webdesign Různé verze médií Rychlost načítání Efektivita práce: mikrobreakpointy a mobile up
  16. 16. Pomalý web = špatný byznys 40% lidí opustilo stránku, která se natahovala déle než 3 vteřiny. 73% uživatelů mobilního internetu řeklo, že narazilo na stránku, která se načítala příliš pomalu. Jednovteřinové zpoždění z doby načítání stránky může způsobit 7%ní pokles konverzí. http://blog.kissmetrics.com/loading-time/
  17. 17. Datový objem obrázků Lazy Loading http://www.appelsiini.net/projects/lazyload http://luis-almeida.github.io/unveil/ Compressive Images http://filamentgroup.com/lab/rwd_img_compression/ Detail: JPEG kvalita = 0%, 44kB Zmenšeno v HTML
  18. 18. Sdílecí tlačítka Problém: Na maximu rychlosti EDGE se tlačítka stahují 10 vteřin.
  19. 19. Sdílecí tlačítka Na iOS nedávat Vlastní tlačítka http://sapegin.github.io/social-likes/ Jen odkazy Lazy load http://socialitejs.com/
  20. 20. History API http://pjax.heroku.com/ https://github.com/browserstate/history.js/
  21. 21. ★ ★ ★ ★ ★ Statistiky Klasický responzivní webdesign Různé verze médií Rychlost načítání Efektivita práce: mikrobreakpointy a mobile up
  22. 22. Neefektivita klasického responzivního vývoje smartphone.css tablet.css desktop.css Problém #1 hodně breakpointů, hodně verzí kódu
  23. 23. Neefektivita klasického responzivního vývoje smartphone.css tablet.css desktop.css Řešení # 1 — 1 layoutový breakpoint (např. 600px) — mikrobreakpointy vázané k UI elementům
  24. 24. Neefektivita klasického responzivního vývoje CSS kód CSS kód CSS kód Problém #2 architektura kódu od desktopu dolů
  25. 25. Neefektivita klasického responzivního vývoje CSS kód CSS kód CSS kód Řešení #2 Mobile Up namísto Desktop Down
  26. 26. Zezdola nahoru nebo naopak? Desktop Down Mobile Up /* Desktop */ .nav { … } /* Mobile */ .nav { … } /* Mobile */ @media (max-width: 480px) { .nav { … } } /* Desktop */ @media (min-width: 480px) { .nav { … } } – křápy dostanou nejpokročilejší řešení – desktop se špatně předefinovává – IE8- nerozumí obsahu min-width https://github.com/scottjehl/Respond http://kratce.vzhurudolu.cz/post/42187934506/mobile-first-css
  27. 27. Mobile Up… jenže MSIE8 neumí Media Queries! 1. 2. Respond.js <script src="/js/respond.js"></script> CSS preprocesory http://kratce.vzhurudolu.cz/post/42187934506/mobile-first-css http://kratce.vzhurudolu.cz/post/49758753713/responzivni-mobile…
  28. 28. Podmíněné načítání pluginů s Modernizrem Modernizr.load({ test: Modernizr.mq('screen and (min-width: 481px)'), yep : [ '/fancybox/jquery.fancybox.pack.js', '/fancybox/jquery.fancybox.css', ], complete : function () { if (Modernizr.mq('screen and (min-width: 481px)')) { $('.fancybox').fancybox(); } } }); além na m ! tbox Ligh bina j je bl isple d https://twitter.com/machal/status/296152170716356608 https://bitbucket.org/machal/ubytovaniprovence.cz/…
  29. 29. AjaxInclude Základní počasí Počasí rozšířené pro větší displeje <a href="..." data-append="pocasi/plne" data-media="(min-width: 30em)"> Počasí </a> http://filamentgroup.com/lab/ajax_includes_modular_content/
  30. 30. Inspirace http://mediaqueri.es/
  31. 31. Děkuji! @machal www.vzhurudolu.cz martin@vzhurudolu.cz

×