Responsive Web Design – A collaboration of different disciplines

This presentation is a mid-level introduction to Responsive Web Design. The slides dive into some basic aspects and contains some approaches, tools and techniques to start with this topic.

Originally this slides have been prepared for an internal academy at deepblue networks.

1. Responsive Web Design A collaboration of different disciplines
2. Warm up Facing the problems of the web today.
3. Example for old era of (static) websites on different devices
4. Fixed layout, that don‘t adapt anything
5. (Mobile) Browser scale the static website into the device viewport
6. Website is only accessible via zooming: poor user experience is the result
7. Goal: Creating a digital product, that adapt to different environments, …
8. … that is mobile optimized and perform very well.
9. One possible solution to address mobile (touch) devices, such as smartphones, tablets and desktop computers (and maybe more) at the same time, is responsive web design.
10. RWD Basics Good to know.
11. Responsive Web Design is the approach that the layout respond to the user’s screen size. What a lot of people think it is: What is RWD?
12. Responsive Web Design is the approach that the layout respond to the user’s screen size. Well, it‘s much more than that. Let‘s go more into detail … What is RWD? What a lot of people think it is:
13. How responsive web ”began“ http://alistapart.com/article/responsive-web-design/
14. Marcotte's approach http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html
15. Media Queries (for screens) from – to from – to from – to
16. Media Queries (for screens)
17. Media Queries (stylesheet) HTML <head> <link rel="stylesheet" type="text/css" media="screen" href="styles.css"> </head> CSS @media only screen and (max-width: 463px) { /*put your code here*/ }
18. Printers are devices as well (that can be adressed via media queries)
19. Breakpoints Breakpoint Breakpoint from – to from – to from – to
20. The (mobile) web is diverse: many devices with different resolutions and pixel densities makes it hard deciding which devices to support. The possibility to change the screen orientation increases the number of screen widths.
21. Smartphone resolutions in the wild 540 x 960 Motorola Photon 4g 640 x 960 480 x 800 720 x 1280 480 x 320 320 x 240 320 x 480 Apple iPhone 4s Nokia Lumia 800 Google Galaxy Nexus BlackBerry Bold 9000 BlackBerry Curve HTC Wildfire S x2
22. Tablet resolutions in the wild between 7˝ and 10˝ 1024 x 600 800 x 480 2048 x 1536 1280 x 800 2560 x 1600 Google Nexus 10 Motorola Xoom Apple iPad Dell Streak 7 BlackBerry Playbook 1024 x 768 x2 x2
23. Device overview by OS iOS 480×320 (3:2) 960×640 (3:2) 1136×640 (16:9) Android 320×240 (4:3) 400×240 (15:9) 480×320 (3:2) 640×360 (16:9) 640×480 (4:3) 800×480 (15:9) 854×480 (16:9) 960×540 (16:9) 960×640 (3:2) 1280×720 (16:9) 1024×768 (4:3) 1280×768 (15:9) 1280×800 (16:10) 1920×1080 (16:9) Windows Phone 800×480 (15:9) 1280×720 (16:9) 1280×768 (15:9) Symbian 208×176 (13:11) 320×240 (4:3) 640×360 (16:9) MeeGo: Harmattan 854×480 (16:9) BlackBerry 320×240 (4:3) 400×360 (10:9) 480×320 (3:2) 480×360 (4:3) 640×480 (4:3) 800×480 (15:9) 720×720 (1:1) 1280x720 (16:9) 1280x768 (15:9) Maemo 800×480 (15:9) http://generatedcontent.org/post/34217358607/deviceresolution Smartphones
24. Device overview by OS iOS 1024×768 (4:3) 2048×1536 (4:3) BlackBerry Tablet OS 1024×600 (16:9) Android 1024×600 (17:10) 1024×768 (4:3) 1280×800 (16:10) 1440×900 (16:10) 1920×1200 (16:10) 2560×1600 (16:10) Windows Tablet 1366×768 (16:9) http://generatedcontent.org/post/34217358607/deviceresolution Tablets
25. Device overview by OS Nokia OS 160×128 (5:4) 320×240 (4:3) 480×320 (3:2) 400×240 (15:9) Bada 400×240 (15:9) 800×480 (15:9) 480×320 (3:2) http://generatedcontent.org/post/34217358607/deviceresolution Feature phones E-Ink TV 800×600 (4:3) 1024×768 (4:3) 1200×824 (150:103) 1280×720 (16:9) 1920×1080 (16:9)
26. 1280×720 (16:9) 1280×768 (15:9) 1280×800 (16:10) 1366×768 (16:9) 1440×900 (16:10) 1920×1080 (16:9) 1920×1200 (16:10) 2048×1536 (4:3) 2560×1600 (16:10) … 160×128 (5:4) 208×176 (13:11) 320×240 (4:3) 400×240 (15:9) 400×360 (10:9) 480×320 (3:2) 480×360 (4:3) 640×360 (16:9) 640×480 (4:3) 720×720 (1:1) 720×720 (1:1) 800×480 (15:9) 800×600 (4:3) 854×480 (16:9) 960×540 (16:9) 960×640 (3:2) 1024×600 (17:10) 1024×768 (4:3) 1136×640 (16:9) 1200×824 (150:103) Screen size overview (there will be more) Just in case you wan’t to support ‘all’ screen sizes
27. This is the web
28. This (and much more) will be the web
29. Breakpoints should never be defined by existing devices – but be set where the content of the website collapse. Prototyping in the browser and on real devices is required, to find out how many layouts/templates your website will have. Learning
30. Approach #1: Adaptive layout via breakpoints 1 1 1 320 Pixel 768 Pixel 1024 Pixel 2 3 4 5 2 3 4 5 4 2 3 5
31. Approach #1: Adaptive layout via breakpoints 1 1 1 320 Pixel 768 Pixel 1024 Pixel 2 3 4 5 2 3 4 5 4 2 3 5 Pre-defined layout widths form the content or its container.
32. http://ia.net Approach #1: Adaptive layout via breakpoints in the wild (more or less)
33. Approach #1: Adaptive layout via breakpoints BENEFITS * full control of div container, text lengths and breaks * Pixel precise elements in the browser (as in layouts) DISADVANTAGES * addresses only selected screen widths * losses by fixed widths
34. Approach #2: Fluid layout and breakpoints 100 %, max 1024 Pixel 100 % 100 % 45 %, max 500 Pixel 45 %, max 500 Pixel 30 % 30 % 30 % 45 % 45 % 30 % 30 % 30 % 100 % 100 % 100 % 100 % 320 – 480 Pixel 481 – 768 Pixel 769 – 1024 Pixel
35. Fluid columns let the content float – depending on the screen width. All nested elements grow or shrink with them. At defined values the website adapt to another layout. Approach #2: Fluid layout and breakpoints 100 %, max 1024 Pixel 100 % 100 % 45 %, max 500 Pixel 45 %, max 500 Pixel 30 % 30 % 30 % 45 % 45 % 30 % 30 % 30 % 100 % 100 % 100 % 100 % 320 – 480 Pixel 481 – 768 Pixel 769 – 1024 Pixel
36. http://bostonglobe.com Approach #2: Fluid layout and breakpoints in the wild
37. Approach #2: Fluid layout and breakpoints BENEFITS * maximum support of different screen resolutions * use of the entire screen space DISADVANTAGES * demanding basic structure or complex grid * no pixel-precise website (fluid grid/columns) * breaks, text lengths, etc. vary – no full control
38. Approach #3: Responsive Design + Server Side Components (RESS) Layout S Layout M Layout L
39. Approach #3: Responsive Design + Server Side Components (RESS) Website request Layout S Layout M Layout L
40. Approach #3: Responsive Design + Server Side Components (RESS) Website request What kind of device? Layout S Layout M Layout L
41. Approach #3: Responsive Design + Server Side Components (RESS) Website request What kind of device? Tablet XY! Layout S Layout M Layout L
42. Approach #3: Responsive Design + Server Side Components (RESS) Website request What kind of device? Delivery of appropriate site Tablet XY! Layout S Layout M Layout L
43. http://cnn.com Approach #3: RESS in the wild Updated
44. Approach #3: RESS BENEFITS * Super-performance website * Adequate, device-optimized page will be delivered DISADVANTAGES * can be very complex, since high-level APIs operate in the background * complex queries and server-side frameworks are necessary * can lead to false linking (UA sniffing and device detection not always correct) * time intensive * caching problems more information: http:/maddesigns.de/RESS/
45. Be future friendly … not just mean to design and perform well. It’s a lot about smart content delivery. What we need is a content strategy!
46. Content is still king. More than ever! Mobile Apps Mobile Web Website Social Media Microsites Blogs Intranet E-Mail Print Tablet Apps Content – via Karen McGrane
47. Your app is your API.
48. Device detection (e.g. via Wireless Universal Resource FiLe (WURFL))
49. User Agent (e.g. Browser, E-Mail-Client, News reader) User Agent iPhone 5 mit iOS 7 Safari: Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 like Mac OS X) AppleWebKit/ 537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449d Safari/9537.53
50. User Agent (e.g. Browser, E-Mail-Client, News reader) User Agent iPhone 5 mit iOS 7 Safari: Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 like Mac OS X) AppleWebKit/ 537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449d Safari/9537.53 hard & unreliable
51. Client side feature detection (e.g. HTML 5/CSS 3 via modernizr) http://modernizr.com
52. Polyfills (e.g. for HTML 5/CSS 3) https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
53. Responsive Web Design is the approach that the layout, content and development respond to the user’s environment based on screen size, platform, orientation and performance. In my opinion, it’s more than layout adaptation: What is RWD?
54. Performance A No. 1 topic!
55. You speak of performance? Why? Performance is often one of the most underrated topics in RWD.
56. You speak of performance? Why? If the loading time of your website will take more than 5 seconds, you lose your user before you can display your shiny designs.
57. You speak of performance? Why? Long loading time of your website will not forgiven by the users! Maybe they will never come back to visit your website again.
58. Top down approach (graceful degradation)
59. Top down approach (graceful degradation) Desktop Website + Media Queries + Code = Mobile Site
60. Mobile devices get more source code than powerful devices, they partly can't even handle! Top down approach (graceful degradation) Fail
61. Different capabilities! » Touch interaction » Sensors » Portable device » Mouse & keyboard » High performance » Large screen
62. Wait! What about these guys?
63. … or this one? The web is diverse!
64. Device feature » Touch interaction » Sensors » Portable device » Mouse & keyboard » High performance » High-end browser » Keypad interaction » WAP » Portable device » Keypad interaction » Large screen » Couch Mode » Shared device
65. ” – Bryan and Stephanie Rieger We should treat layout as an enhancement. Assume your first media query is the absence of a media query.
66. Bottom up approach (progressive enhancement or mobile first)
67. Bottom up approach (progressive enhancement or mobile first) Mobile Website + Media Queries + Code = Desktop Site
68. Bottom up approach (progressive enhancement or mobile first) Mobile devices only get the source code, they can handle! This creates an increase in performance and satisfaction among users.
69. Bottom up approach (progressive enhancement or mobile first) Mobile devices only get the source code, they can handle! This creates an increase in performance and satisfaction among users. … will be delivered to each client – unless it provides more opportunities.
70. Approach: Mobile first
71. Media Queries body { /*put your basic code here*/} @media only screen and (min-width: 464px) and (max-width: 767px) { /*put your code here*/} @media only screen and (min-width: 768px) and (max-width: 959px) { /*put your code here*/} @media only screen and (min-width: 960px) and (max-width: 1223px) { /*put your code here*/} @media only screen and (min-width: 1224px) { /*put your code here*/} @media print { /*put your code here*/}
72. Let’s play
73. Learning Peformance is no longer an aspect that should be taken into account in the second step – today it‘s a quality feature, that needs your attention from the first minute of your project.
74. Pixel, vectors & Co. A Designer-Developer-Collaboration.
75. DPI vs. PPI Web Print
76. DPI vs. PPI Web PPI (Pixels per Inch) Print DPI (Dots per Inch)
77. Standard resolution @1x 320 x 320 Pixel e.g. iPhone 3 with 163 Pixel per Inch (ppi)
78. Retina resolution @2x (4 times the number of pixels compared to standard resolution) x2 x2 640 x 640 Pixel e.g. iPhone 4 with 326 Pixel per Inch (ppi)
79. Standard resolution @1x image example 320 x 320 Pixel
80. What retina devices would do normally: display the image at half of the size 50% 50% 320 x 320 Pixel
81. What they really do: scaling images by 50 percent 320 x 320 to 640 x 640 Pixel x2 x2
82. Screen density & physical size 163 ppi 132 ppi 1024 x 768 Pixel 1024 x 768 Pixel iPad Mini iPad 1/2 Source: http://apple.com/pr
83. Device pixels vs. CSS pixels http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ Standard Device Pixels
84. Device pixels vs. CSS pixels http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ Standard CSS Pixels Device Pixels height: 2px width: 2px
85. Device pixels vs. CSS pixels http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ x4 Standard Retina CSS Pixels Device Pixels height: 2px width: 2px
86. Device pixels vs. CSS pixels http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ x4 == Standard Retina CSS Pixels Device Pixels height: 2px width: 2px height: 2px width: 2px
87. How do you get a one pixel thin line on a retina display? Any suggestions? Question
88. There are not just devices with @1x and @2x resolutions! In the wild there are devices with @1,5, @3x, @4x et cetera resolutions. By the way
89. (Some) High density displays iPad Air 264 ppi iPhone 5/5S 326 ppi Samsung Galaxy S4 441 ppi LG Nexus 5 445 ppi HTC One 468 ppi https://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
90. Media Queries (for high pixel density displays) @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { /*put your code here*/ }
91. Guess what we will have in the future! What do we do now? Be resolution independent! Learning
92. Vectors vs. pixels vector shape pixel graphic
93. Icon sprites for @1x; @1,5x; @2x; @3x? Mhhh … sprite example preparing a sprite http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/
94. Scalable Vector Graphics (SVGs)
95. SVG export
96. How does this SVG look like for the browser? <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve"> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#2D2D2D" d="M505.072,673.393h13.608c1.5,0,2.722,1.218,2.722,2.721v13.609 c0,1.503-1.222,2.721-2.722,2.721h-13.608c-1.5,0-2.722-1.218-2.722-2.721v-13.609C502.351,674.61,503.572,673.393,505.072,6 73.393 z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#2D2D2D" d="M637.288,36.782H386.462c-21.042,0-38.097,17.056-38.097,38.097 v619.124c0,21.042,17.055,38.101,38.097,38.101h250.826c21.042,0,38.097-17.059,38.097-38.101V74.879 C675.385,53.838,658.33,36.782,637.288,36.782z M511.88,73.274c2.628,0,4.761,2.132,4.761,4.764c0,2.629-2.133,4.762-4.761,4.762 c-2.635,0-4.768-2.133-4.768-4.762C507.112,75.406,509.245,73.274,511.88,73.274z M488.742,97.09h46.263 c3.007,0,5.443,2.133,5.443,4.765c0,2.629-2.437,4.762-5.443,4.762h-46.263c-3.004,0-5.44-2.133-5.44-4.762 C483.302,99.223,485.738,97.09,488.742,97.09z M511.873,713.619c-17.532,0-31.745-14.213-31.745-31.749 c0-17.533,14.213-31.749,31.745-31.749c17.533,0,31.749,14.216,31.749,31.749C543.622,699.406,529.406,713.619,511.873,713.6 19z M653.165,630.506H370.588V135.209h282.577V630.506z"/> </g> </svg>
97. Not every information is needed: optimize your SVGs (e.g. via svgo-gui) https://github.com/svg/svgo-gui
98. SVG support: need a fallback? http://caniuse.com/#search=svg
99. Icon fonts (e.g. via IcoMoon) http://icomoon.io/app/#/select
100. What you get: .eot, .ttf, .woff http://icomoon.io/app/#/select/font
101. Retina resolution is a real topic for assets like icons, images that you want to display on your website or layouts, that should be tested on real devices. Learning
102. Responsive Images? Oooh … huge topic! https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 16 kB 54 kB 187 kB
103. Loading different sources for images in your HTML-File? That would be nice. <picture alt="example"> <source src="example.png" width="100" height="80"> <source src="example.png" width="200" height="180"> <source src="example.svg" width="400" height="400" media="min-device-width: 320px"> </picture>
104. But … how to create layouts in Photoshop right?
105. Ignore the old Photoshop dialogue! Don‘t get confused by the old Photoshop dialogue: Important are the real pixels of your layout – not the resolution in dpi.
106. Layout example in standard resolution @1x
107. Want to create a layout in retina resolution? Double the pixels! @2x
108. It doesn't matter, if you create layouts in retina or standard resolution. Most of the time layouts are a tool to discuss different solutions with your frontend team or present them to clients. Learning
109. Starter Kit Helpful tips to get started.
110. Form a team and assign roles
111. Kick your waterfall workflow Concept Design Development Launch
112. What if something change? Bad Concept Design Development Launch
113. Work interdisciplinary and iterative Concept Development Launch Release Design
114. Involve every team member from the beginning of the project
115. Try to communicate ideas visually
116. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasdd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Never start before you know something about your content Kill Lorem ipsum!
117. Choose a flexible grid, that matches your needs
118. … and play around with typography deepblue Academy 27.02.2014 Responsive Web Design – ein Zusammenspiel unterschiedlicher Disziplinen Der Vortrag hat zum Ziel über Grundlagen, Methoden, Ansätze, Best Practises und Arbeitsweisen im Responsive Design/Responsive Frontend Development zu informieren. Ein besonderer Fokus der Academy liegt darauf, eine Brücke zwischen Konzept, Design und Frontend Entwicklung zu schlagen, um den alltäglichen Arbeitsablauf in Projekten mit einem Responsive Design Anteil zu stärken. Der Vortrag ist damit nicht nur für die Kreation interessant – sondern soll die verschiedenen Gewerke in der Agentur in einen Dialog bringen – um zukünftig unsere interdisziplinäre Zusammenarbeit zu vertiefen.
119. Use tools like typecast, to choose the right web fonts and combinations in the browser http://typecast.com
120. Forget to create all the different layout templates of a website Layout L Layout M Layout S
121. Create a global design language with your client and design a master. Then just continue on with components. Learning
122. Style tiles can help you to find the right visual design http://styletil.es
123. Example: TechCrunch http://superfriend.ly/TechCrunch
124. Think about other tools Layout-Tool (e.g. InDesign) for grids, wireframes and designs Texteditor (e.g. Sublime text) to code prototypes Browser (e.g. Chrome) to test and develop
125. Go for prototyping with basic HTML/CSS. http://www.sublimetext.com
126. No frontend skills? Don't worry: take frameworks like foundation as your base. http://foundation.zurb.com
127. Custom built: choose your colors, set your grid and have a lot of feature out of the box http://foundation.zurb.com/develop/download.html#customizeFoundation
128. Create a pattern library (online style guide or library for web components) http://style.codeforamerica.org
129. Use dev tools all time while development dev tools: right click in the browser > inspect element
130. Rethink your tools of collaborative work http://github.com
131. Take browsers on real devices as canvas for decisions and client presentations Browsers display elements often very differently!
132. Create and discuss a browser and device matrix with your client Desktop Mobile
133. To wrap up 1. Think about your content strategy (i.e. API as your App). 2. Rethink your team communication, your process and your tools. 3. Be aware of diverse screen resolutions and device capabilities. 4. Test as often as you can on real devices. 5. Decide, if you really need a RWD approach!
134. Responsive Web Design by Ethan Marcotte Mobile First by Luke Wroblewski Getting started The Elements of Content Strategy by Erin Kissane Content Strategy for Mobile by Karen McGrane
135. Responsive Design http://de.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu http://de.slideshare.net/yiibu/pragmatic-responsive-design http://de.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server Links Mobile Design patterns http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/ http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial http://www.uxbooth.com/blog/designing-for-mobile-part-1-information-architecture/ Mobile App vs. Web App http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/ https://docs.google.com/present/view id=0ARVpkVHr1HpsZGd6cThnNzhfMTFuMmdnemZnag&hl=en&pli=1 http://blog.brightcove.com/de/2011/11/der-erfolg-der-hybrid-apps Responsive Design Patterns http://www.lukew.com/ff/entry.asp?1569 http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://www.palantir.net/blog/scalable-navigation-patterns-responsive-web-design http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/ Responsive Design Tools http://gridpak.com/ https://gridsetapp.com/ http://www.lukew.com/ff/entry.asp?1599
136. Discussion Questions? Answers!