Your SlideShare is downloading. ×
0
Henrik Ekelöf        Robert Piirainen     @henrikekelof           @robertpiira
‣ Introduction to Responsive  Design‣ Answering common questions‣ The way forward is flexibility,  not adapting to popular...
Responsive Design
What it is:- A new cool way to build mobile web
In fact:
is no
There is not a specific Web   for mobile devices.  It’s the same web.
640 x 480            800 x 600                   1024 x 768
1024 x 768320 x 480
768 x 1024 1024 x 768320 x 480
The web has moved beyondthe desktop, and it’s not turning             back.
whatever device or screen size
Responsive           Design                 Flexible   MediaFlexible grids                  media     queries
Grid Layout
Flexible Media
img {max-width: 100%}
MediaCSS3   Queries
Querieswidthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolor...
Breakpoints320px480px 768px1024px1200px
Flexible   MediaFlexible grids                  media     queries
Problems and  Solutions
Wallpapers
Optimisation of background images       in CSS‣ Use Data URIs for images to be  displayed in all sizes
li { background:url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7//...
Optimization of background images       in CSS‣ Use Data URIs for images to be  displayed in all sizes‣ Use sprites
Sprites
Optimisation of background      images in CSS‣ Use Data URIs for images to be  displayed in all sizes‣ Use sprites‣ Do not...
Inline Pictures
Content Optimisation      images‣ Use “Lazy Load” if you have many (or  large) images that only appear on  certain screen ...
<img src="pixel.gif" data-original="example.jpg">            <img src="example.jpg">
Content Optimisation      images‣ Use “Lazy Load” if you have many (or  large) images that only appear on  certain screen ...
<!DOCTYPE html><html> <head>  <script>   document.cookie = resolution= +     Math.max(screen.width, screen.height) +     ;...
Pictures‣ The background images downloaded‣ All inline images downloaded regardless  of whether they are shown or not
Legacy versions of Internet Explorer   (IE8 and older)
/* Style for small screens and basic style for all */.example { ... }@mediaall and (min-width: 321px) {    /* Style for a ...
<!DOCTYPE html><html><head>  <!--[if (gte IE 9)|!(IE)]><!-->  <link rel="stylesheet" href="rwd.css">  <!--<![endif]-->  <!...
Responsive by design
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Weshould embrace the fact that the webdoesn’t have the same constraints,and design for this flexibility.
The journey begins by letting go ofcontrol, and becoming flexible.
A flexible web!
A flexible web‣ Large variations in screen resolutions
Top 10 screen resolutions in Sweden during the last year
A flexible web‣ Large variations in screen  resolutionsVarious devices with different  characteristics
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
Priority: 1As an increasing variety of screen and windowsizes among users is the best solution to create alayout that is f...
Strategy?Mobile First
Losing 80% of your screen space forcesyou to focus. You need to make sure thatwhat stays on the screen is the mostimportan...
Responsivedesign       Semantically, meaningful markup          Separate design and layout   Introduce layout styles with ...
http://www.flickr.com/photos/merlin/sets/72157622077100537/
Responsive  Tools
‣ Rendering of font differs depending on  browsers and operating systems‣ Different browsers‣ Impossible to visualize a re...
http://24ways.org/2009/make-your-mockup-in-markup
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
aresponsive  process
Summary‣ Introduction to Responsive  DesignAnswering common  questions‣ The way forward is flexibility,  not adapting to p...
Henrik Ekelöf   Robert Piirainen@henrikekelof          @robertpiira
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
An Introduction to Responsive Design
Upcoming SlideShare
Loading in...5
×

An Introduction to Responsive Design

1,042

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×