Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design (done right)


Published on

Media queries really is a cure-all ? In this talk we're going to analyse the right way to implement this feature without causing harm to our web mobile experience.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Web Design (done right)

  1. 1. Responsive Web Design Done Right
  2. 2. A List Apart, 2010 This is our way forward. Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?
  3. 3. I think, 2014 Responsive web design is useful when we need to rearrange the content of each page of a website depending on the viewing experience while maintaining the same overall navigation and keeping more or less the same interaction. Gmail and LinkedIn all uses different UIs depending on the device used by user.
  5. 5. <link type="stylesheet" href=“desktop.css">! ! <link type="stylesheet" href="mobile.css" media="all and (max-width: 320px)">        ! ! <link type="stylesheet" href="tablet.css" media="all and (min-width: 321px) and max-width: 800px)">!
  6. 6. Breakpoints ? There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no “common” screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks. Vasils van Gemert
  7. 7. If you start with a small screen and you grow it, every time the width of the main content grows wider than either 75 characters or 10 words, something should happen. Simply said, these are your breakpoints. TRY THIS
  9. 9. Resource Wise With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an asneeded basis to platforms that can handle them well. Joshua Johnson
  10. 10. <meta ! name="viewport" ! content=“! width=device-width, ! user-scalable=no”! >
  11. 11. <meta ! name="viewport" ! content=“! width=device-width, ! user-scalable=no”! >
  13. 13. small Galaxy S2 iPhone 4/5 iPad 2 MBook Pro Ultrabook CBook medium large touch HDD
  14. 14. html.touch a{!     display: block;!     line-height: 1.8;!     background-color: #ACA8A8;!     text-align: center;!     color: #ffffff;!     margin: 1px 0;!     text-decoration: none;! }
  15. 15. @media print,!   (-webkit-min-device-pixel-ratio: 1.25),!   (-o-min-device-pixel-ratio: 5/4),!   (min-resolution: 120dpi) { !   .logo {!     background-image: url("logo@2x.png");!     background-size: 100px 50px;!   }! }
  16. 16. TOO MESSY!
  17. 17. @mixin retina{!     @media print,!         (-webkit-min-device-pixel-ratio: 1.25),!         (-o-min-device-pixel-ratio: 5/4),!         (min-resolution: 120dpi) { !         @content        !     }! } TRY THIS
  18. 18. THERE’S STILL <IMG>
  19. 19. srcset: The attribute essentially takes a commaseparated list of URLs each with one or more descriptors giving the maximum viewport dimensions and pixel density allowed to use the image. From the available options, the user agent then picks the most appropriate image. <img alt="The Breakfast Combo"!     src="banner.jpeg"!     srcset="banner-HD.jpeg 2x, ! banner-phone.jpeg 100w, ! banner-phone-HD.jpeg 100w 2x">
  20. 20. picture: This specification provides developers with a means to declare multiple sources for an image, and, through [CSS3-MEDIAQUERIES] (CSS Media Queries), it gives developers control as to when those images are to be presented to a user. <picture width="500" height="500">!    <source media="(min-width: 45em)" src="large.jpg">!    <source media="(min-width: 18em)" src="med.jpg">!    <source src="small.jpg">!    <img src="small.jpg" alt="">!    <p>Accessible text</p>! </picture>
  21. 21.
  22. 22. UNUSED JS!
  23. 23. we can load some components only if a media query match; in this way we can save bandwidth and CPU. TRY THIS
  25. 25. Transition We can use transition to have a smooth animation between two different states triggered by media queries. TRY THIS
  26. 26. Zooming with rem We can set all the dimensions of our page in rem and then create a height/width breakpoints that changes only the html font-size to obtain a zooming effect. TRY THIS
  27. 27. Thanks @sandropaganotti ~