Responsive
Web Design
Done Right
A List Apart, 2010
This is our way forward. Rather than tailoring
disconnected designs to each of an everincreasing number...
I think, 2014
Responsive web design is useful when we need to
rearrange the content of each page of a website
depending on...
MEDIA QUERIES!
<link type="stylesheet"
href=“desktop.css">!
!

<link type="stylesheet"
href="mobile.css" media="all and
(max-width: 320px...
Breakpoints ?
There are several tactics for deciding where to put
breakpoints in a responsive design. There is the
rusty i...
If you start with a small screen
and you grow it, every time the
width of the main content
grows wider than either 75
char...
MOBILE FIRST
Resource Wise
With a mobile first viewpoint, we start by
loading the absolute bare essentials on the
smaller platforms. Thi...
<meta !
name="viewport" !
content=“!
width=device-width, !
user-scalable=no”!
>
<meta !
name="viewport" !
content=“!
width=device-width, !
user-scalable=no”!
>
HIGH DENSITY DISPLAY, TOUCH, …
small

Galaxy S2

iPhone 4/5

iPad 2

MBook Pro

Ultrabook

CBook

medium

large

touch

HDD
html.touch a{!
    display: block;!
    line-height: 1.8;!
    background-color: #ACA8A8;!
    text-align: center;!
    co...
@media print,!
  (-webkit-min-device-pixel-ratio: 1.25),!
  (-o-min-device-pixel-ratio: 5/4),!
  (min-resolution: 120dpi) ...
TOO MESSY!
@mixin retina{!
    @media print,!
        (-webkit-min-device-pixel-ratio: 1.25),!
        (-o-min-device-pixel-ratio: 5/...
THERE’S STILL <IMG>
srcset: The attribute essentially takes a commaseparated list of URLs each with one or more
descriptors giving the maximum...
picture: This specification provides developers
with a means to declare multiple sources for an
image, and, through [CSS3-M...
https://github.com/scottjehl/picturefill
UNUSED JS!
we can load some components only if a media
query match; in this way we can save bandwidth
and CPU.

TRY THIS
TIPS AND
TRICKS
Transition
We can use transition to have a smooth animation
between two different states triggered by media
queries.

TRY ...
Zooming with rem
We can set all the dimensions of our page in rem and
then create a height/width breakpoints that changes
...
Thanks
@sandropaganotti ~ compartoweb.com
Responsive Web Design (done right)
Responsive Web Design (done right)
Upcoming SlideShare
Loading in …5
×

Responsive Web Design (done right)

570
-1

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
570
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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.
  4. 4. MEDIA QUERIES!
  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
  8. 8. MOBILE FIRST
  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”! >
  12. 12. HIGH DENSITY DISPLAY, TOUCH, …
  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;! } https://github.com/izilla/Supports-Touch
  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. https://github.com/scottjehl/picturefill
  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
  24. 24. TIPS AND TRICKS
  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 ~ compartoweb.com
  1. A particular slide catching your eye?

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

×