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

1. MSFest Praha
Responzivní
webdesign
Martin Michálek
www.vzhurudolu.cz
@machal

2. ★
★
★
★
★
Statistiky
Klasický responzivní webdesign
Různé verze médií
Rychlost načítání
Efektivita práce: mikrobreakpointy a mobile up

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. 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. ★
★
★
★
★
Statistiky
Klasický responzivní webdesign
Různé verze médií
Rychlost načítání
Efektivita práce: mikrobreakpointy a mobile up

6. Klasický responzivní webdesign

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. 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. Media queries
@media screen and (max-width: 767px) {
#head {
…
}
}
http://www.vzhurudolu.cz/projects/snowkidz-mobile-demo/responsive/

10. Viewport
<meta name="viewport" content="width=device-width">
//pro Windows 8 a snap mode:
@viewport { width: device-width; }

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. ★
★
★
★
★
Statistiky
Klasický responzivní webdesign
Různé verze médií
Rychlost načítání
Efektivita práce: mikrobreakpointy a mobile up

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. 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. ★
★
★
★
★
Statistiky
Klasický responzivní webdesign
Různé verze médií
Rychlost načítání
Efektivita práce: mikrobreakpointy a mobile up

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. 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. Sdílecí tlačítka
Problém:
Na maximu rychlosti EDGE se tlačítka
stahují 10 vteřin.

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. History API
http://pjax.heroku.com/
https://github.com/browserstate/history.js/

21. ★
★
★
★
★
Statistiky
Klasický responzivní webdesign
Různé verze médií
Rychlost načítání
Efektivita práce: mikrobreakpointy a mobile up

22. Neefektivita klasického responzivního vývoje
smartphone.css
tablet.css
desktop.css
Problém #1
hodně breakpointů, hodně verzí kódu

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. 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. 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. 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. 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. 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. 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. Inspirace
http://mediaqueri.es/

31. Děkuji!
@machal
www.vzhurudolu.cz
martin@vzhurudolu.cz