Martin Michálekwww.vzhurudolu.cz

@machal

State of the art responzivních

technikálií

Devel.cz konference9. listopadu 2013

responzivníwebdesign

Přežitýresponzivníwebdesign

Responzivníkbps.cz

150 requestů, 750 kB. Minimálně 2 minuty

načítání na EDGE.

Ne-responzivníblackcomb.cz

27 requestů, 330 kB. 16 vteřin načítání

na EDGE.

Rychlost načítání

Pomalost načítání

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/

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í

Jak zlepšit pomalost načítání?

1) Začít testovat2) Co nejméně requestů3) Co nejméně dat

Více řešení: http://blog.cloudfour.com/responsive-imgs/

       <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>

Na obrázkymáme Picturefill

http://www.appelsiini.net/projects/lazyload http://luis-almeida.github.io/unveil/

Datový objem obrázků:Lazy Loading

http://filamentgroup.com/lab/rwd_img_compression/

Datový objem obrázků:Compressive Images

14 kB 6 kB

Na maximu rychlosti EDGE se tlačítka stahují 10 vteřin.

Kód třetích stran:Průšvih se sdílecími tlačítky

Na iOS nedávatJen

odkazy

Vlastní tlačítka Lazy loadhttp://socialitejs.com/http://sapegin.github.io/social-likes/

Kód třetích stran:Průšvih se sdílecími tlačítky

<?php  if  ($isSmartphone):                                                                                                       //  button  s  odkazem  na  mapuelse:     //  iframe  s  mapouendif;  ?>

http://kratce.vzhurudolu.cz/post/44227784297/docasna-server-detekcehttp://mobiledetect.net/

Back-end zachraňuje

https://github.com/browserstate/history.js/http://pjax.heroku.com/

History API (pushState)

OK, teď je to rychlejší.Jenže…

…uživatel smartphone na EDGE stahuje spoustu balastu.

… responzivní web nás stojí moc práce.

Sky is thelimit

Sky is thelimit

Workflow

Desktop Down Mobile Up

https://github.com/scottjehl/Respond

/*  Desktop  */.nav  {  …  }

/*  Mobile  */@media  (max-­‐width:  480px)  {    .nav  {  …  }}

/*  Mobile  */.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

http://kratce.vzhurudolu.cz/post/42187934506/mobile-first-css

Architektura kóduzezdola nahoru

Hodně breakpointů,hodně verzí kódu

<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

průšvih

jak mraky

Komponenty namísto stránek

http://bradfrostweb.com/blog/post/atomic-web-design/

Jedna verze kódu,zaměřeno na komponenty

index.less:

@import  “/components/nav“@import  “/components/article“@import  “/components/article-­‐list“

samostatné komponenty

s vlastními breakpointy

1 verze kódu

Uživatelidáme jen

to co opravdupotřebuje.

Uživatelidáme jen

to co opravdupotřebuje.

Základní počasí

Počasí rozšířené pro větší displeje

http://filamentgroup.com/lab/ajax_includes_modular_content/

<a  href="..."      data-­‐replace="pocasi-­‐plne.html"      data-­‐media="(min-­‐width:  480px)">        Počasí</a>

AjaxInclude

http://filamentgroup.com/lab/ajax_includes_modular_content/

AjaxInclude

https://twitter.com/machal/status/296152170716356608

https://bitbucket.org/machal/ubytovaniprovence.cz/…

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();         }              }  });

Modernizr.load()

SouthStreet workflow

Balíček JS/CSS pro danou stránku a zařízení:Enhance.JS — podmíněné načítání JSeCSSential — podmíněné načítání CSSQuickConcat — spojování a minifikace on-the-fly

Děkuji!

@machalwww.vzhurudolu.cz

facebook.com/VzhuruDolumartin@vzhurudolu.cz