An Introduction to Responsive Design

1,370 views

Published on

Responsive design is a combination of techniques aiming to create interfaces able to adapt to a wide range of devices, optimising the user experience in each of them but using the same code-base. But responsive design is not just about technology, as it also requires a different way of thinking and planning the development of interfaces.

Published in: Technology, Design

An Introduction to Responsive Design

  1. 1. Henrik Ekelöf Robert Piirainen @henrikekelof @robertpiira
  2. 2. ‣ Introduction to Responsive Design‣ Answering common questions‣ The way forward is flexibility, not adapting to popular devices
  3. 3. Responsive Design
  4. 4. What it is:- A new cool way to build mobile web
  5. 5. In fact:
  6. 6. is no
  7. 7. There is not a specific Web for mobile devices. It’s the same web.
  8. 8. 640 x 480 800 x 600 1024 x 768
  9. 9. 1024 x 768320 x 480
  10. 10. 768 x 1024 1024 x 768320 x 480
  11. 11. The web has moved beyondthe desktop, and it’s not turning back.
  12. 12. whatever device or screen size
  13. 13. Responsive Design Flexible MediaFlexible grids media queries
  14. 14. Grid Layout
  15. 15. Flexible Media
  16. 16. img {max-width: 100%}
  17. 17. MediaCSS3 Queries
  18. 18. Querieswidthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolor...
  19. 19. Breakpoints320px480px 768px1024px1200px
  20. 20. Flexible MediaFlexible grids media queries
  21. 21. Problems and Solutions
  22. 22. Wallpapers
  23. 23. Optimisation of background images in CSS‣ Use Data URIs for images to be displayed in all sizes
  24. 24. li { background:url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7") no-repeat left center;}
  25. 25. Optimization of background images in CSS‣ Use Data URIs for images to be displayed in all sizes‣ Use sprites
  26. 26. Sprites
  27. 27. Optimisation of background images in CSS‣ Use Data URIs for images to be displayed in all sizes‣ Use sprites‣ Do not mix images for different screen widths in the same sprite
  28. 28. Inline Pictures
  29. 29. Content Optimisation images‣ Use “Lazy Load” if you have many (or large) images that only appear on certain screen widths.
  30. 30. <img src="pixel.gif" data-original="example.jpg"> <img src="example.jpg">
  31. 31. Content Optimisation images‣ Use “Lazy Load” if you have many (or large) images that only appear on certain screen widths.‣ Resize images on the server
  32. 32. <!DOCTYPE html><html> <head> <script> document.cookie = resolution= + Math.max(screen.width, screen.height) + ; path=/; </script> </head><body> <img src="example.jpg" alt="">
  33. 33. Pictures‣ The background images downloaded‣ All inline images downloaded regardless of whether they are shown or not
  34. 34. Legacy versions of Internet Explorer (IE8 and older)
  35. 35. /* Style for small screens and basic style for all */.example { ... }@mediaall and (min-width: 321px) { /* Style for a slightly wider device (like the iPhone portrait) */ .example{ ... }}@media all and (min-width: 481px) { /* Style for a even wider device (like the iPhone landscape) */ .example { ... }}@media all and (min-width: 769px) { /* Style for wide screens */ .example { ... }}
  36. 36. <!DOCTYPE html><html><head> <!--[if (gte IE 9)|!(IE)]><!--> <link rel="stylesheet" href="rwd.css"> <!--<![endif]--> <!--[if (lte IE 8)]> <link rel="stylesheet" href="rwd-ie.css"> <![endif]--> ...
  37. 37. Responsive by design
  38. 38. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  39. 39. Weshould embrace the fact that the webdoesn’t have the same constraints,and design for this flexibility.
  40. 40. The journey begins by letting go ofcontrol, and becoming flexible.
  41. 41. A flexible web!
  42. 42. A flexible web‣ Large variations in screen resolutions
  43. 43. Top 10 screen resolutions in Sweden during the last year
  44. 44. A flexible web‣ Large variations in screen resolutionsVarious devices with different characteristics
  45. 45. http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  46. 46. Priority: 1As an increasing variety of screen and windowsizes among users is the best solution to create alayout that is flexible and can adapt to usersneeds and wishes. Avoid making a site with fixedlayout.— 24-hour WebCreate a design that worksregardless of window and screen size
  47. 47. Strategy?Mobile First
  48. 48. Losing 80% of your screen space forcesyou to focus. You need to make sure thatwhat stays on the screen is the mostimportant set of features for yourcustomers and your business.
  49. 49. Responsivedesign Semantically, meaningful markup Separate design and layout Introduce layout styles with media queries "Mobile" CSSs + media queries = Desktop site
  50. 50. http://www.flickr.com/photos/merlin/sets/72157622077100537/
  51. 51. Responsive Tools
  52. 52. ‣ Rendering of font differs depending on browsers and operating systems‣ Different browsers‣ Impossible to visualize a responsive layout
  53. 53. http://24ways.org/2009/make-your-mockup-in-markup
  54. 54. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  55. 55. aresponsive process
  56. 56. Summary‣ Introduction to Responsive DesignAnswering common questions‣ The way forward is flexibility, not adapting to popular devices
  57. 57. Henrik Ekelöf Robert Piirainen@henrikekelof @robertpiira

×