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. 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.
  2. 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?
  3. 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:
  4. 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*/ }
  5. 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.
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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)
  11. 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
  12. 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
  13. 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
  14. 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.
  15. 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
  16. 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
  17. 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
  18. 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
  19. 40.

    Approach #3: Responsive Design + Server Side Components (RESS) Website

    request What kind of device? Layout S Layout M Layout L
  20. 41.

    Approach #3: Responsive Design + Server Side Components (RESS) Website

    request What kind of device? Tablet XY! Layout S Layout M Layout L
  21. 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
  22. 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/
  23. 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!
  24. 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
  25. 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
  26. 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
  27. 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?
  28. 55.
  29. 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.
  30. 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.
  31. 60.

    Mobile devices get more source code than powerful devices, they

    partly can't even handle! Top down approach (graceful degradation) Fail
  32. 61.

    Different capabilities! » Touch interaction » Sensors » Portable device

    » Mouse & keyboard » High performance » Large screen
  33. 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
  34. 65.

    ” – Bryan and Stephanie Rieger We should treat layout

    as an enhancement. Assume your first media query is the absence of a media query.
  35. 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.
  36. 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.
  37. 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*/}
  38. 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.
  39. 77.
  40. 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)
  41. 80.

    What retina devices would do normally: display the image at

    half of the size 50% 50% 320 x 320 Pixel
  42. 81.
  43. 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
  44. 87.

    How do you get a one pixel thin line on

    a retina display? Any suggestions? Question
  45. 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
  46. 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
  47. 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*/ }
  48. 91.

    Guess what we will have in the future! What do

    we do now? Be resolution independent! Learning
  49. 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/
  50. 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>
  51. 97.

    Not every information is needed: optimize your SVGs (e.g. via

    svgo-gui) https://github.com/svg/svgo-gui
  52. 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
  53. 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>
  54. 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.
  55. 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
  56. 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!
  57. 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.
  58. 119.

    Use tools like typecast, to choose the right web fonts

    and combinations in the browser http://typecast.com
  59. 120.
  60. 121.

    Create a global design language with your client and design

    a master. Then just continue on with components. Learning
  61. 122.
  62. 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
  63. 126.
  64. 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
  65. 128.

    Create a pattern library (online style guide or library for

    web components) http://style.codeforamerica.org
  66. 129.

    Use dev tools all time while development dev tools: right

    click in the browser > inspect element
  67. 131.

    Take browsers on real devices as canvas for decisions and

    client presentations Browsers display elements often very differently!
  68. 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!
  69. 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
  70. 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