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

Responsive Web Design – Or what exactly means mobile web?

C9bb952239ca0e05361bb10b2915cd39?s=47 Daniel Kränz
November 27, 2012

Responsive Web Design – Or what exactly means mobile web?

This presentation is a little 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 my talk in the Visual Interface Class at FH Potsdam on 2012/11/20.

C9bb952239ca0e05361bb10b2915cd39?s=128

Daniel Kränz

November 27, 2012
Tweet

Transcript

  1. Respon Web Daniel Kränz Design sive What exactly means mobile

    web? @kraenzmann
  2. » B.A. Industrial Design | HS Magdeburg-Stendal

  3. » M.A. Interaction Design | HS Magdeburg-Stendal » B.A. Industrial

    Design | HS Magdeburg-Stendal
  4. » Mobile Design | deepblue networks AG » M.A. Interaction

    Design | HS Magdeburg-Stendal » B.A. Industrial Design | HS Magdeburg-Stendal
  5. » Junior Art Director | deepblue networks AG » Mobile

    Design | deepblue networks AG » M.A. Interaction Design | HS Magdeburg-Stendal » B.A. Industrial Design | HS Magdeburg-Stendal
  6. Hello.

  7. http://edenspiekermann.com Example: Adaptive layout with breakpoints

  8. http://bostonglobe.com Example: Fluid layout and breakpoints

  9. http://theverge.com Example: Redirect via Server

  10. How it all began

  11. The approach http://alistapart.com/d/resonsive-web-design/ex/ex-site-flexible.html

  12. Responsive Web Design is the approach that the layout respond

    to the user’s screen size. RWD? What a lot of people think it is:
  13. No real use case!

  14. No real use case! Please, do not use this method

    to develop or test your websites. Use browsers on the target devices instead!
  15. 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. RWD? In my opinion, it’s more than layout adaptation: – Credits to Kayla Knight –
  16. It’s a new way of thinking about the web, including

    devices, content, design & typography. Let us have a look why …
  17. Layout: Case study

  18. Built your own (smart) grid

  19. Five (fixed) layouts http://danielkraenz.com Feature phones Smartphones Tablets Netbooks HDTVs/Desktops

  20. Gridpak: Responsive grid generator http://gridpak.com

  21. Media queries (DOM) <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css"

    media="screen and (max-width: 463px)" href="smartphone.css" /> </head> <body> </body> </html>
  22. Media queries (DOM) <link rel="stylesheet" type="text/css" media="screen and (min-width: 1224px)"

    href="HDTV.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 960px) and (max-width: 1223px)" href="Desktop.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 959px)" href="Tablet.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 464px) and (max-width: 767px)" href="Smartphone.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-width: 463px)" href="Feature_phone.css" /> <link rel="stylesheet" type="text/css" media="print" />
  23. Media queries (stylesheet) <head> <link rel="stylesheet" type="text/css" media="all" href="styles.css" />

    </head> @media only screen and (max-width: 463px) { /*put your code here*/ }
  24. (Horizontal) Media queries @media only screen and (min-width: 1224px) {

    /*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: 768px) and (max-width: 959px) { /*put your code here*/} @media only screen and (min-width: 464px) and (max-width: 767px) { /*put your code here*/} @media only screen and (max-width: 463px) { /*put your code here*/} @media print { /*put your code here*/}
  25. Vertical media queries

  26. Let’s play

  27. Problem with this approach Mobile Site = Desktop Site +

    Media Queries
  28. Problem with this approach Mobile Site = Desktop Site +

    Media Queries
  29. Problem with this approach Mobile Site = Desktop Site +

    Media Queries Fail
  30. Server requests & ressources

  31. Server requests & ressources

  32. Approach: Mobile first

  33. What does that mean?

  34. Most basic layout first HDTVs/Desktops Netbooks Tablets Smartphones Feature phones

  35. Most basic layout first Less performance=less code & scripting: think

    about media queries, java script and heavy frameworks wisely
  36. Most basic layout first Less performance=less code & scripting: think

    about media queries, java script and heavy frameworks wisely More performance & feature support
  37. Most basic layout first Less performance=less code & scripting: think

    about media queries, java script and heavy frameworks wisely More performance & feature support Don’t forget: These layouts are on mobile devices!
  38. We should treat layout as an enhancement. Assume your first

    media query is the absence of a media query. ” – Ethan Marcotte
  39. Let’s play

  40. Better approach Mobile site + media queries = Desktop site

    (progressive enhancement)
  41. Better approach Mobile site + media queries = Desktop site

    (progressive enhancement)
  42. Better approach Mobile site + media queries = Desktop site

    (progressive enhancement) To everyone!
  43. Different capabilities! » Touch interaction » Sensors » Portable device

  44. Different capabilities! » Touch interaction » Sensors » Portable device

    » Mouse & keyboard » High performance » Large screen
  45. Different capabilities! » Touch interaction » Sensors » Portable device

    » Mouse & keyboard » High performance » Large screen Super Hero
  46. Wait! What about these guys?

  47. … or this one?

  48. … or this one? The (mobile) web is diverse!

  49. What exactly is the (mobile) web – or more specifically

    what isn't? Leads us to the question:
  50. What do you think?

  51. You think about these OS spontaneously? iOS Android

  52. Well, there are more! (just to name a few) Windows

    Phone Symbian
  53. 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
  54. 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
  55. 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)
  56. 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
  57. It’s thinking beyond screen resolutions! Don’t think the web is

    320 x 480!
  58. Don’t think the web is 320 x 480! Think beyond

    screen resolutions.
  59. Screen density & physical size 1024 x 768 Pixel 1024

    x 768 Pixel iPad Mini iPad 1/2 Source: http://apple.com/pr
  60. 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
  61. Pixel density (CSS vs. Devie 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
  62. (Some) High density displays New iPad 264 ppi Samsung Galaxy

    SIII 306 ppi Galaxy Nexus 316 ppi iPhone 4/4S 326 ppi LG Optimus LTE 329 ppi HTC Rezound 342 ppi https://dl.dropbox.com/u/75469230/responding-to-the-hi-res-web/index.html#/5
  63. Smart 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*/ }
  64. How to handle Icons? One approach: Icon fonts http://sixrevisions.com/resources/free-icon-fonts/

  65. Loading different sources: for video <video controls> <source src="movie-small.mp4" type="video/mp4"

    media="all and (max-width:480px)"> <source src="movie-small.webm" type="video/webm" media="all and (max-width:480px)"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> </video>
  66. Loading different sources: for images? <img 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"/> </img>
  67. Loading different sources: for images? <img 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"/> </img> Maybe in the future!
  68. Be part of the future web http://futurefriend.ly/ luke wroblewski, scott

    jenson, brad frost, jeremy keith, lyza d. gardner, scott jehl, stephanie rieger, jason grigsby, bryan rieger, josh clark, tim kadlec, brian leroux, andrea trasatti
  69. 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!
  70. Content is still king. More than ever! Content – via

    Karen McGrane
  71. 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
  72. Your app is your API.

  73. user_timeline.json Array ( [0] => Array ( [created_at] => Fri

    Nov 16 20:54:44 +0000 2012 [id] => ******* [id_str] => ******* [text] => This tweet is re-thought completely new. It's smart. Entirely different. Startet from scratch. Send from the brand new iPad mini ;) [source] => Twitter for iPad [truncated] => [in_reply_to_status_id] => [in_reply_to_status_id_str] => [in_reply_to_user_id] => [in_reply_to_user_id_str] => [in_reply_to_screen_name] => [user] => Array ( [id] => ******* [id_str] => ******* [name] => Daniel Kränz [screen_name] => kraenzmann [location] => Hamburg [url] => http://www.danielkraenz.com [description] => researcher. observer. grid lover. typography fan. creator. mobile designer. [protected] => [followers_count] => 102 [friends_count] => 145 [listed_count] => 5 [created_at] => Thu May 28 10:30:09 +0000 2009 Twitter API
  74. Rethink your tools & your process Photoshop is awesome!

  75. Rethink your tools & your process Photoshop is awesome! Really?

  76. Photoshop is static!

  77. Think about other tools! Layout-Tool (e.g. InDesign) for grids and

    designs Texteditor (e.g. Sublime text 2) to code prototypes Browser (e.g. Chrome) to test and develop
  78. 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!
  79. 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
  80. 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
  81. <h1>Happy coding.</h1> <p>Questions? Answers!</p>