Responsive web design allows websites to be accessed from different devices by dynamically changing the layout depending on screen size, while maintaining overall navigation and interaction. Key aspects include using media queries to load different style sheets for different screen widths, starting with a mobile-first approach to load minimal resources, and techniques like srcset and picture to serve the most appropriate image assets. Designing breakpoints based on text length rather than fixed widths allows the layout to adapt better to varying screens. Unused JavaScript and resources can also be loaded conditionally based on media queries to improve performance.

1. Responsive
Web Design
Done Right

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?

4. 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. MEDIA QUERIES!

6. <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)">!

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

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

10. MOBILE FIRST

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

12. <meta !
name="viewport" !
content=“!
width=device-width, !
user-scalable=no”!
>

13. <meta !
name="viewport" !
content=“!
width=device-width, !
user-scalable=no”!
>

14. HIGH DENSITY DISPLAY, TOUCH, …

15. small
Galaxy S2
iPhone 4/5
iPad 2
MBook Pro
Ultrabook
CBook
medium
large
touch
HDD

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

17. @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;!
}!
}

18. TOO MESSY!

19. @mixin retina{!
@media print,!
(-webkit-min-device-pixel-ratio: 1.25),!
(-o-min-device-pixel-ratio: 5/4),!
(min-resolution: 120dpi) { !
@content !
}!
}
TRY THIS

20. THERE’S STILL <IMG>

21. 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">

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

23. https://github.com/scottjehl/picturefill

24. UNUSED JS!

25. we can load some components only if a media
query match; in this way we can save bandwidth
and CPU.
TRY THIS

26. TIPS AND
TRICKS

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

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

29. Thanks
@sandropaganotti ~ compartoweb.com