Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Responzivní webdesign (pro MS Fest)

2.136 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×