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.

State of the art responzivních technikálií (Devel.cz)

3,933 views

Published on

— Responzivní webdesign jak jej definoval Marcotte je přežitý
— První problém je v rychlosti načítání: naštěstí tu máme Picturefill, lazy loading, compressive images a back-end
— Dalším problémem je pracovní postupy: Mobile Up namísto Desktop Down, hodně breakpointů, hodně verzí kódu a kód orientovaný na stránky namísto UI komponent
— Třetí problém: uživateli dáváme daleko víc než potřebuje: téma je AjaxInclude a podmíněné načítání assetů pomocí Modernizru

  • Sex in your area is here: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

State of the art responzivních technikálií (Devel.cz)

  1. 1. Devel.cz konference 9. listopadu 2013 State of the art responzivních technikálií Martin Michálek www.vzhurudolu.cz @machal
  2. 2. responzivní webdesign
  3. 3. Přežitý responzivní webdesign
  4. 4. Responzivní kbps.cz Ne-responzivní blackcomb.cz 150 requestů, 750 kB. Minimálně 2 minuty načítání na EDGE. 27 requestů, 330 kB. 16 vteřin načítání na EDGE.
  5. 5. Rychlost načítání
  6. 6. Pomalost načítání
  7. 7. Pomalý web = špatný byznys Jednovteřinové zpoždění z doby načítání stránky může způsobit až 7 % pokles konverzí. 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. http://blog.kissmetrics.com/loading-time/
  8. 8. Jak zjistit rychlost připojení? (Spíš budoucnost) ★ Testovací obrázek ★ Network Information API navigator.connection   //  Android  browser //  vrátí  typ  připojení  (ethernet,  2g,  3g,  wifi…) navigator.connection.bandwidth //  Firefox  Android  a  noční  buildy  Webkitu   //  vrátí  rychlost  připojení
  9. 9. Jak zlepšit pomalost načítání? 1) Začít testovat 2) Co nejméně requestů 3) Co nejméně dat
  10. 10. Na obrázky máme Picturefill      <span  data-­‐picture  data-­‐alt="Obrázek">              <span  data-­‐src="small.jpg"></span>              <span  data-­‐src="medium.jpg"  data-­‐media="(min-­‐width:  400px)"></span>              <span  data-­‐src="large.jpg"  data-­‐media="(min-­‐width:  800px)"></span>              <noscript>                      <img  src="small.jpg"  alt="Obrázek">              </noscript>      </span> Více řešení: http://blog.cloudfour.com/responsive-imgs/
  11. 11. Datový objem obrázků: Lazy Loading http://www.appelsiini.net/projects/lazyload http://luis-almeida.github.io/unveil/
  12. 12. Datový objem obrázků: Compressive Images 14 kB 6 kB http://filamentgroup.com/lab/rwd_img_compression/
  13. 13. Kód třetích stran: Průšvih se sdílecími tlačítky Na maximu rychlosti EDGE se tlačítka stahují 10 vteřin.
  14. 14. Kód třetích stran: Průšvih se sdílecími tlačítky Na iOS nedávat Jen odkazy Vlastní tlačítka Lazy load http://sapegin.github.io/social-likes/ http://socialitejs.com/
  15. 15. Back-end zachraňuje <?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
  16. 16. History API (pushState) http://pjax.heroku.com/ https://github.com/browserstate/history.js/
  17. 17. OK, teď je to rychlejší. Jenže… …uživatel smartphone na EDGE stahuje spoustu balastu. … responzivní web nás stojí moc práce.
  18. 18. Sky is the limit
  19. 19. Sky Workflow is the limit
  20. 20. Architektura kódu zezdola nahoru Desktop Down Mobile Up /*  Desktop  */ .nav  {  …  } /*  Mobile  */ .nav  {  …  } /*  Mobile  */ @media  (max-­‐width:  480px)  {    .nav  {  …  } } /*  Desktop  */ @media  (min-­‐width:  480px)  {    .nav  {  …  } } Nevýhody: – křápy dostanou nejpokročilejší řešení – desktop se špatně předefinovává Nevýhody: – IE8- nerozumí obsahu min-width https://github.com/scottjehl/Respond http://kratce.vzhurudolu.cz/post/42187934506/mobile-first-css
  21. 21. Hodně breakpointů, hodně verzí kódu švih prů aky mr jak <link  rel="stylesheet"  href="smartphone.css"      media="(max-­‐width:  480px)"> <link  rel="stylesheet"  href="tablet.css"      media="(min-­‐width:  481px)  and  (max-­‐width:  1023px)"> <link  rel="stylesheet"  href="desktop.css"      media="(min-­‐width:  1024px)  and  (max-­‐width:  1280px)"> <link  rel="stylesheet"  href="desktop-­‐large.css"      media="(min-­‐width:  1281px)"> http://kratce.vzhurudolu.cz/post/46416507703/jake-breakpointy-zvolit-v-responzivnim-webdesignu
  22. 22. Komponenty namísto stránek http://bradfrostweb.com/blog/post/atomic-web-design/
  23. 23. Jedna verze kódu, zaměřeno na komponenty e kódu 1 verz index.less: @import  “/components/nav“ @import  “/components/article“ @import  “/components/article-­‐list“ onenty né komp pointy mostat i break sa lastním sv
  24. 24. Uživateli dáme jen to co opravdu potřebuje.
  25. 25. Uživateli dáme jen to co opravdu potřebuje.
  26. 26. AjaxInclude Základní počasí Počasí rozšířené pro větší displeje <a  href="..."      data-­‐replace="pocasi-­‐plne.html"      data-­‐media="(min-­‐width:  480px)">        Počasí </a> http://filamentgroup.com/lab/ajax_includes_modular_content/
  27. 27. AjaxInclude http://filamentgroup.com/lab/ajax_includes_modular_content/
  28. 28. Modernizr.load() 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();         }              }   }); https://twitter.com/machal/status/296152170716356608 https://bitbucket.org/machal/ubytovaniprovence.cz/…
  29. 29. SouthStreet workflow Balíček JS/CSS pro danou stránku a zařízení: Enhance.JS — podmíněné načítání JS eCSSential — podmíněné načítání CSS QuickConcat — spojování a minifikace on-the-fly
  30. 30. Děkuji! @machal www.vzhurudolu.cz facebook.com/VzhuruDolu martin@vzhurudolu.cz

×