Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design – A collaboration of different disciplines

C9bb952239ca0e05361bb10b2915cd39?s=47 Daniel Kränz
February 20, 2014

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.

C9bb952239ca0e05361bb10b2915cd39?s=128

Daniel Kränz

February 20, 2014
Tweet

Transcript

  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!