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. 4.

    » Mobile Design | deepblue networks AG » M.A. Interaction

    Design | HS Magdeburg-Stendal » B.A. Industrial Design | HS Magdeburg-Stendal
  2. 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
  3. 6.
  4. 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:
  5. 14.

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

    to develop or test your websites. Use browsers on the target devices instead!
  6. 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 –
  7. 16.

    It’s a new way of thinking about the web, including

    devices, content, design & typography. Let us have a look why …
  8. 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>
  9. 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" />
  10. 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*/ }
  11. 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*/}
  12. 35.

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

    about media queries, java script and heavy frameworks wisely
  13. 36.

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

    about media queries, java script and heavy frameworks wisely More performance & feature support
  14. 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!
  15. 38.

    We should treat layout as an enhancement. Assume your first

    media query is the absence of a media query. ” – Ethan Marcotte
  16. 42.

    Better approach Mobile site + media queries = Desktop site

    (progressive enhancement) To everyone!
  17. 44.

    Different capabilities! » Touch interaction » Sensors » Portable device

    » Mouse & keyboard » High performance » Large screen
  18. 45.

    Different capabilities! » Touch interaction » Sensors » Portable device

    » Mouse & keyboard » High performance » Large screen Super Hero
  19. 49.

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

    what isn't? Leads us to the question:
  20. 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
  21. 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
  22. 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)
  23. 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
  24. 59.

    Screen density & physical size 1024 x 768 Pixel 1024

    x 768 Pixel iPad Mini iPad 1/2 Source: http://apple.com/pr
  25. 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
  26. 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
  27. 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
  28. 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*/ }
  29. 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>
  30. 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>
  31. 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!
  32. 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
  33. 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!
  34. 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
  35. 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
  36. 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
  37. 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!
  38. 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
  39. 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