Responsive Web Design

Part 1 of a talk called “Responsive Web Design in theory and practice” that I gave at the Geneva web Group on 27 February 2013

http://doodle.com/uzsxghdcz3ivipg5

1. RESPONSIVE WEB DESIGN David Roessli Cybermedia Concepts GENEVA WEB GROUP • 27 FEBRUARY 2013
2. @roessli cybmed.com davidroessli.com
3. GENEVA WEB GROUP • 27 FEBRUARY 2013
4. theverge.com/2012/2/4/2769538/smartphones-overtake-computers-shipping-increase-2011-canalys mediapost.com/publications/?fa=Articles.showArticle&art_aid=120590 morganstanley.com/institutional/techresearch/mobile_internet_report122009.html GENEVA WEB GROUP • 27 FEBRUARY 2013 “ ” Mobile browsing is expected to outpace desktop-based access within 2013 to 2015
5. alistapart.com/articles/responsive-web-design by Ethan Marcotte / @beep GENEVA WEB GROUP • 27 FEBRUARY 2013
6. alistapart.com/articles/responsive-web-design by Ethan Marcotte / @beep GENEVA WEB GROUP • 27 FEBRUARY 2013
7. www.osteofrance.com vs m.osteofrance.com GENEVA WEB GROUP • 27 FEBRUARY 2013
8. www.osteofrance.com vs m.osteofrance.com GENEVA WEB GROUP • 27 FEBRUARY 2013
9. www.osteofrance.com vs m.osteofrance.com GENEVA WEB GROUP • 27 FEBRUARY 2013
10. www.osteofrance.com vs m.osteofrance.com GENEVA WEB GROUP • 27 FEBRUARY 2013
11. www.osteofrance.com vs m.osteofrance.com GENEVA WEB GROUP • 27 FEBRUARY 2013
12. www.osteofrance.com vs m.osteofrance.com GENEVA WEB GROUP • 27 FEBRUARY 2013
13. GENEVA WEB GROUP • 27 FEBRUARY 2013 We’re faced with a greater number of devices, input modes, and browsers than ever before. TODAY
14. GENEVA WEB GROUP • 27 FEBRUARY 2013 ic.kr/p/cfQwL7
15. GENEVA WEB GROUP • 27 FEBRUARY 2013
16. GENEVA WEB GROUP • 27 FEBRUARY 2013
17. GENEVA WEB GROUP • 27 FEBRUARY 2013
18. GENEVA WEB GROUP • 27 FEBRUARY 2013
19. GENEVA WEB GROUP • 27 FEBRUARY 2013
20. GENEVA WEB GROUP • 27 FEBRUARY 2013
21. GENEVA WEB GROUP • 27 FEBRUARY 2013
22. GENEVA WEB GROUP • 27 FEBRUARY 2013
23. GENEVA WEB GROUP • 27 FEBRUARY 2013
24. GENEVA WEB GROUP • 27 FEBRUARY 2013
25. LAYOUT AGNOSTIC GENEVA WEB GROUP • 27 FEBRUARY 2013
26. #1 FLUID GRIDS GENEVA WEB GROUP • 27 FEBRUARY 2013
27. target ÷ context = result FLUID GRIDS GENEVA WEB GROUP • 27 FEBRUARY 2013
28. FLUID GRIDS: adapt beautifully GENEVA WEB GROUP • 27 FEBRUARY 2013 www.lukew.com/ff/entry.asp?1514
29. FLUID GRIDS: adapt beautifully GENEVA WEB GROUP • 27 FEBRUARY 2013 www.lukew.com/ff/entry.asp?1514
30. FLUID GRIDS: adapt beautifully GENEVA WEB GROUP • 27 FEBRUARY 2013 www.lukew.com/ff/entry.asp?1514
31. FLUID GRIDS: adapt beautifully GENEVA WEB GROUP • 27 FEBRUARY 2013 www.lukew.com/ff/entry.asp?1514
32. FLUID GRIDS: adapt beautifully GENEVA WEB GROUP • 27 FEBRUARY 2013 www.lukew.com/ff/entry.asp?1514
33. FLUID GRIDS: adapt beautifully GENEVA WEB GROUP • 27 FEBRUARY 2013 www.lukew.com/ff/entry.asp?1514
34. GENEVA WEB GROUP • 27 FEBRUARY 2013
35. Flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes. FLUID GRIDS: adapt beautifully alistapart.com/articles/ uidgrids 24ways.org/2011/theres-no-formula-for-great-designs GENEVA WEB GROUP • 27 FEBRUARY 2013
36. #2 FLEXIBLE IMAGES GENEVA WEB GROUP • 27 FEBRUARY 2013
37. FLEXIBLE IMAGES GENEVA WEB GROUP • 27 FEBRUARY 2013 img { max-width: 100%; } unstoppablerobotninja.com/entry/ uid-images
38. FLEXIBLE IMAGES: resize smoothly GENEVA WEB GROUP • 27 FEBRUARY 2013
39. FLEXIBLE IMAGES: resize smoothly GENEVA WEB GROUP • 27 FEBRUARY 2013
40. FLEXIBLE IMAGES: resize smoothly GENEVA WEB GROUP • 27 FEBRUARY 2013
41. FLEXIBLE IMAGES: resize smoothly GENEVA WEB GROUP • 27 FEBRUARY 2013
42. #3 MEDIA QUERIES GENEVA WEB GROUP • 27 FEBRUARY 2013
43. MEDIA QUERIES GENEVA WEB GROUP • 27 FEBRUARY 2013 www.w3.org/TR/css3-mediaqueries <link rel = "stylesheet" type = "text/css" media = "screen" href = "styles.css" />
44. MEDIA QUERIES GENEVA WEB GROUP • 27 FEBRUARY 2013 www.w3.org/TR/css3-mediaqueries <link rel = "stylesheet" type = "text/css" media = "screen" href = "styles.css" />
45. MEDIA QUERIES GENEVA WEB GROUP • 27 FEBRUARY 2013 www.w3.org/TR/css3-mediaqueries <link rel = "stylesheet" type = "text/css" media = "screen and (min-width: 480px)" href = "480.css" />
46. MEDIA QUERIES GENEVA WEB GROUP • 27 FEBRUARY 2013 www.w3.org/TR/css3-mediaqueries @media only screen and (min-width:480px){ … }
47. MEDIA QUERIES GENEVA WEB GROUP • 27 FEBRUARY 2013 www.w3.org/TR/css3-mediaqueries @media only screen and (-webkit-min-device-pixel-ratio:1.5) and (min-width:992px), only screen and (min-resolution:144dpi) and (min-width:992px){ … }
48. MEDIA QUERIES GENEVA WEB GROUP • 27 FEBRUARY 2013 www.w3.org/TR/css3-mediaqueries width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
49. GENEVA WEB GROUP • 27 FEBRUARY 2013 Fluid grids, exible images, and media queries are the three technical ingredients for responsive web design. RESPONSIVE WEB DESIGN
50. When considering a mobile Web strategy and weighing responsive Web design against a separate mobile website, the most important metric is This goes beyond better content organization for smaller screens. Mobile (and desktop) websites should be easily found, easily shared, fast loading, easy to maintain and easy to build on. GENEVA WEB GROUP • 27 FEBRUARY 2013 mobile.smashingmagazine.com/2013/02/14/responsive-web-design-planning-future/ how functional the website is for the user. “
51. CONTENT CENTRIC GENEVA WEB GROUP • 27 FEBRUARY 2013
52. Users need and expect full functionality on their mobile device, because they could be using it anywhere, for any reason. CONTENT: everywhere pewinternet.org/Reports/2011/Smartphones/Section-2.aspx GENEVA WEB GROUP • 27 FEBRUARY 2013
53. URL structure is very important on the Web. Your website and its content get shared in many different ways, from different places, on different devices. URL FETICHISM GENEVA WEB GROUP • 27 FEBRUARY 2013
54. Keep the same page structure and the same URLs, and organize the display of the content based on the device. That presents a speci c challenge for responsive design: load time. LOAD FAST GENEVA WEB GROUP • 27 FEBRUARY 2013
55. •All content and functionality needs to be available for mobile users; •URL structure is important; •Load time is important (but it will one day be less of an issue); •Websites need to evolve in an agile way; and new hardware is never far ahead… WHY RWD MAKES SENSE GENEVA WEB GROUP • 27 FEBRUARY 2013
56. Designing for mobile rst can not only open up new opportunities for growth, it can lead to a better overall user experience. MOBILE FIRST GENEVA WEB GROUP • 27 FEBRUARY 2013
57. •Embrace mobile constraints to focus on key tasks •Prioritize what really matters •Use mobile capabilities to innovate CONTENT: think mobile rst GENEVA WEB GROUP • 27 FEBRUARY 2013
58. •Grid system design should begin with a constraint to build its modules •Derive the constraint from your content, not from an imaginary page •Thinks responsively - design effective adaptive layouts that respond to their environment CONTENT: think “content out ” GENEVA WEB GROUP • 27 FEBRUARY 2013
59. GENEVA WEB GROUP • 27 FEBRUARY 2013
60. The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be exible, and it should be our role as designers and developers to embrace this exibility, and produce pages which, by being exible, are accessible to all. GENEVA WEB GROUP • 27 FEBRUARY 2013 John Allsopp alistapart.com/article/dao 7 April 2000 “ ”
61. EMBRACE THE FLUIDITY OF THE WEB GENEVA WEB GROUP • 27 FEBRUARY 2013
62. THANK YOU GENEVA WEB GROUP • 27 FEBRUARY 2013 cybmed.com davidroessli.com @roessli