Embed Size (px)
DESCRIPTION
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
Citation preview
Martin Michálekwww.vzhurudolu.cz
@machal
Responzivníwebdesign
MSFest Praha
★ Statistiky★ Klasický responzivní webdesign★ Různé verze médií★ Rychlost načítání★ Efektivita práce: mikrobreakpointy a mobile up
zdroj dat: rankings.cz
Mobilní9%
Opera4%
IE812%
IE95%
IE1014% Chrome
27%
Firefox29%
Podíly prohlížečů v ČR 9/2013
Aktuální podíly prohlížečů
Spousty rozlišení obrazovky
0
150
300
450
600
1/20091/2010
1/20111/2012
1/2013
e-Slovensko.cz – počty rozlišení obrazovky
★ Statistiky★ Klasický responzivní webdesign★ Různé verze médií★ Rychlost načítání★ Efektivita práce: mikrobreakpointy a mobile up
Klasický responzivní webdesign
Flexibilní layout
.container { width: 1000px;}
.box { width: 500px; padding: 50px; margin: 50px;}
.container { max-‐width: 1000px;}
.box { width: 50%; padding: 50px 5%; margin: 50px 5%;}
.box
.container
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/
Media queries
@media screen and (max-width: 767px) {
#head { … }
}
http://www.vzhurudolu.cz/projects/snowkidz-mobile-demo/responsive/
Viewport
<meta name="viewport" content="width=device-width">
//pro Windows 8 a snap mode:@viewport { width: device-width; }
Klasický responzivní webdesign
Řeší★ Přizpůsobení velikosti displeje
Neřeší★ Různé verze médií★ Rychlost načítání★ Efektivita práce
★ Statistiky★ Klasický responzivní webdesign★ Různé verze médií★ Rychlost načítání★ Efektivita práce: mikrobreakpointy a mobile up
Responzivní obrázky – výběr možností
★ Response (front-end JS)http://responsejs.com/
★ Picturefill (front-end JS)https://github.com/scottjehl/picturefill
★ Adaptive Images (back-end PHP)http://adaptive-images.com/
Více řešení: http://blog.cloudfour.com/responsive-imgs/
Někdy je efektivnější back-end
<?php if ($isSmartphone): // button s odkazem na mapuelse: // iframe s mapouendif; ?>
http://kratce.vzhurudolu.cz/post/44227784297/docasna-server-detekcehttp://mobiledetect.net/
★ Statistiky★ Klasický responzivní webdesign★ Různé verze médií★ Rychlost načítání★ Efektivita práce: mikrobreakpointy a mobile up
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/
Datový objem obrázků
Lazy Loadinghttp://www.appelsiini.net/projects/lazyload
Compressive Imageshttp://filamentgroup.com/lab/rwd_img_compression/
Detail: JPEG kvalita = 0%, 44kB
Zmenšeno v HTML
http://luis-almeida.github.io/unveil/
Sdílecí tlačítka
Problém:
Na maximu rychlosti EDGE se tlačítka stahují 10 vteřin.
Sdílecí tlačítka
Na iOS nedávatJen
odkazy
Vlastní tlačítka Lazy loadhttp://socialitejs.com/http://sapegin.github.io/social-likes/
History API
https://github.com/browserstate/history.js/http://pjax.heroku.com/
★ Statistiky★ Klasický responzivní webdesign★ Různé verze médií★ Rychlost načítání★ Efektivita práce: mikrobreakpointy a mobile up
Neefektivita klasického responzivního vývoje
smartphone.css tablet.css desktop.css
Problém #1hodně breakpointů, hodně verzí kódu
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
Neefektivita klasického responzivního vývoje
Problém #2architektura kódu od desktopu dolů
CSS kód
CSS kód
CSS kód
Neefektivita klasického responzivního vývoje
Řešení #2Mobile Up namísto Desktop Down
CSS kód
CSS kód
CSS kód
Desktop Down Mobile Up
Zezdola nahoru nebo naopak?
https://github.com/scottjehl/Respond
/* Desktop */.nav { … }
/* Mobile */@media (max-width: 480px) { .nav { … }}
/* Mobile */.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
http://kratce.vzhurudolu.cz/post/42187934506/mobile-first-css
Mobile Up… jenže MSIE8 neumí Media Queries!
1. Respond.js
2. CSS preprocesory
<script src="/js/respond.js"></script>
http://kratce.vzhurudolu.cz/post/42187934506/mobile-first-csshttp://kratce.vzhurudolu.cz/post/49758753713/responzivni-mobile…
Podmíněné načítání pluginů s Modernizrem
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(); } }});
Lightbox na malém
displej je blbina!
AjaxInclude
Základní počasí
Počasí rozšířené pro větší displeje
http://filamentgroup.com/lab/ajax_includes_modular_content/
<a href="..." data-append="pocasi/plne" data-media="(min-width: 30em)"> Počasí</a>
