- Responsive web design (RWD) is the latest buzzword and may be the new revolution in web design as the mobile phone population grows significantly - 46% of the world's population has a mobile phone and over 1 billion smartphones are used worldwide, with 59% of owners using their smartphone daily - Websites need to be designed for all devices through responsive design which adapts the interface for different screen sizes rather than having a separate mobile site - The three main steps for responsive design are using media queries, adapting the interface, and optimizing responsive images and media for performance

1. #rwd: revolution?
Buzzword or
Wojtek Zając KRAKÓW 21.02.2013

2. Hi!
@theanxy
Designinclusive.com
X-Team.com
XHTMLized.com

3. BUZZ·WORD
noun

4. MVP
Cloud computing
Flash
HTML5
long tail
next generation
Web 2.0
AJAX

5. Is #RWD*
the new one?
* Responsive Web Design

6. n
Czy #RWD*
to kolejny z nich?
* Responsive Web Design
o

7. mobile
revolution

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

9. 1,083
billion of smartphones
used worldwide
http://www.lukew.com/ff/entry.asp?1644
http://www.flickr.com/photos/lng0004/7881151510/

10. 59%
of smartphone owners
use them every day
http://www.thinkwithgoogle.com/mobileplanet/en/

11. content strategy
http://www.flickr.com/photos/yourdon/2715583000/

12. http://xkcd.com/1174/

13. context != intent

14. 85% of US tablet owners
use them while watching tv
http://blogs.forrester.com/sarah_rotman_epps/12-04-11-the_tablet_tv_connection

15. “Mobile must never be a
dumbed-down,
limited experience.”
— Steven Hoober
http://www.flickr.com/photos/chrisjl/5664339020/

16. Content parity
http://alistapart.com/article/your-content-now-mobile

17. Designing
for people,
not devices
http://www.flickr.com/photos/epsos/5644801034/

18. Inclusive
Design

19. http://www.flickr.com/photos/adforce1/4425475660/

21. embrace
long tail
of devices

22. http://www.flickr.com/photos/brad_frost/

23. CANVAS-IN
vs
Content-out

24. Progressive
Enhancement
http://www.flickr.com/photos/aigle_dore/4089511514/

25. Possible approaches
• dedicated mobile websites
• Responsive Web Design
• “Mobile last”
• Mobile first
• RESS

26. 3
steps
towards ``````````````````
responsive website

27. 1. Media Queries
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
@media screen and (min-width: 50em) {
article {
float::left;
}
}

28. @media
only 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

29. check
backwards
compability
(caniuse.com)

30. 2. adapt your interface

31. 1. linearize your content
http://www.flickr.com/photos/stuartpilbrow/3565808509/

32. 2. adapt to mobile screen size
http://www.flickr.com/photos/stuartpilbrow/3565808509/

33. 3. input device independence
http://www.flickr.com/photos/stuartpilbrow/3565808509/

34. 4. utilize touch events
http://www.flickr.com/photos/stuartpilbrow/3565808509/

35. 5. common html
http://www.flickr.com/photos/stuartpilbrow/3565808509/

36. DEMO

37. 3. responsive media

38. 1.25MB
average page weight (2012)
86%
of responsive websites
don’t optimize resources
http://www.lukew.com/ff/entry.asp?1681
http://wpdaily.co/responsive-server-side/

39. Images are often the biggest part
http://mobile.httparchive.org/

40. responsive
images
adaptive-images.com

41. optimize
front-end
performance!

43. xui,
a lightweight
js library
xuijs.com

44. responsive
design
process

45. responsive
prototyping
(uxpin.com)

46. testing
breakpoints
quirktools.com/screenfly

47. css style guides
http://www.starbucks.com/static/reference/styleguide/

48. creating
a css style guide
(.net magazine)

49. CSS frameworks

50. Mobile emulators
http://www.mobilexweb.com/emulators

51. preview all
your devices
simultaneously
(Adobe Edge Inspect)

52. Stay
future
friendly.

53. …Learn more
Books:
WEB: @rwd, http://mobile.smashingmagazine.com
http://bradfrost.github.com/this-is-responsive/

54. Thanks!
Q&A
Wojtek Zając (@theanxy)
http://www.slideshare.net/wojciechzajac
This work is licensed
under a Creative
Commons Attribution
3.0 Unported License