— 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

1. Devel.cz konference
9. listopadu 2013
State of the art
responzivních
technikálií
Martin Michálek
www.vzhurudolu.cz
@machal

2. responzivní
webdesign

3. Přežitý
responzivní
webdesign

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

7. Rychlost
načítání

8. Pomalost
načítání

9. 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/

10. 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í

11. Jak zlepšit pomalost načítání?
1) Začít testovat
2) Co nejméně requestů
3) Co nejméně dat

12. 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/

13. Datový objem obrázků:
Lazy Loading
http://www.appelsiini.net/projects/lazyload
http://luis-almeida.github.io/unveil/

14. Datový objem obrázků:
Compressive Images
14 kB
6 kB
http://filamentgroup.com/lab/rwd_img_compression/

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

16. 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/

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

18. History API (pushState)
http://pjax.heroku.com/
https://github.com/browserstate/history.js/

19. OK, teď je to rychlejší.
Jenže…
…uživatel smartphone
na EDGE stahuje
spoustu balastu.
… responzivní web nás
stojí moc práce.

20. Sky
is the
limit

21. Sky Workflow
is the
limit

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

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

24. Komponenty namísto stránek
http://bradfrostweb.com/blog/post/atomic-web-design/

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

26. Uživateli
dáme jen
to co opravdu
potřebuje.

27. Uživateli
dáme jen
to co opravdu
potřebuje.

28. 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/

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

30. 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/…

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

32. Děkuji!
@machal
www.vzhurudolu.cz
facebook.com/VzhuruDolu
martin@vzhurudolu.cz