responsive web design: buzzword or revolution?
DESCRIPTION
Presentation given at http://techcamp.pl/ event in Kraków, Poland.TRANSCRIPT
#rwd:
KRAKÓW 21.02.2013Wojtek Zając
Buzzword or revolution?
X-Team.comXHTMLized.com
BUZZ·WORDnoun
HTML5
next generationWeb 2.0
Cloud computing
AJAX
MVP
long tail
Flash
Is #RWD*the new one?
* Responsive Web Design
Czy #RWD*to kolejny z nich?
* Responsive Web Design
no
mobilerevolution
46%of population has access
to a mobile phone (of any kind)
http://www.economist.com/blogs/babbage/2012/10/global-mobile-usage?fsrc=scn/tw_ec/sim_earth
http://www.flickr.com/photos/captain_die/7697183522/
1,083billion of smartphones
used worldwide
http://www.lukew.com/ff/entry.asp?1644
http://www.flickr.com/photos/lng0004/7881151510/
59%of smartphone owners
use them every day
http://www.thinkwithgoogle.com/mobileplanet/en/
content strategy
http://www.flickr.com/photos/yourdon/2715583000/
context != intent
http://blogs.forrester.com/sarah_rotman_epps/12-04-11-the_tablet_tv_connection
85%of US tablet owners
use them while watching tv
“Mobile must never be a dumbed-down,
limited experience.”
— Steven Hoober
http://www.flickr.com/photos/chrisjl/5664339020/
Content parityhttp://alistapart.com/article/your-content-now-mobile
Designingfor people,not devices
http://www.flickr.com/photos/epsos/5644801034/
InclusiveDesign
http://www.flickr.com/photos/adforce1/4425475660/
embracelong tail
of devices
http://www.flickr.com/photos/brad_frost/
CANVAS-INvs
Content-out
ProgressiveEnhancement
http://www.flickr.com/photos/aigle_dore/4089511514/
• dedicated mobile websites
• Responsive Web Design
• “Mobile last”
• Mobile first
• RESS
Possible approaches
``````````````````towards responsive website
steps3
@media screen and (min-width: 50em) { article { float::left; }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Media Queries
@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* CSS styles */}
Detecting high density displays
checkbackwards
compability(caniuse.com)
2. adapt your interface
1. linearize your content
http://www.flickr.com/photos/stuartpilbrow/3565808509/
2. adapt to mobile screen size
http://www.flickr.com/photos/stuartpilbrow/3565808509/
3. input device independence
http://www.flickr.com/photos/stuartpilbrow/3565808509/
4. utilize touch events
http://www.flickr.com/photos/stuartpilbrow/3565808509/
5. common html
http://www.flickr.com/photos/stuartpilbrow/3565808509/
DEMO
3. responsive media
1.25MBaverage page weight (2012)
http://wpdaily.co/responsive-server-side/
86%of responsive websites
don’t optimize resources
http://www.lukew.com/ff/entry.asp?1681
http://mobile.httparchive.org/
Images are often the biggest part
responsive images
adaptive-images.com
optimizefront-end
performance!
xui,a lightweight
js libraryxuijs.com
responsivedesign
process
responsiveprototyping
(uxpin.com)
testingbreakpoints
quirktools.com/screenfly
css style guides
http://www.starbucks.com/static/reference/styleguide/
creatinga css style guide
(.net magazine)
CSS frameworks
Mobile emulatorshttp://www.mobilexweb.com/emulators
preview allyour devicessimultaneously(Adobe Edge Inspect)
Stayfuture
friendly.
@rwd,
Books:
…Learn more
http://mobile.smashingmagazine.comWEB:http://bradfrost.github.com/this-is-responsive/
Q & AWojtek Zając (@theanxy)http://www.slideshare.net/wojciechzajac
This work is licensed under a Creative
Commons Attribution 3.0 Unported License
Thanks!