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 ﬂexible, but
more adaptive to the media that renders them. In
short, we need to practice responsive web design.
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.
href="mobile.css" media="all and
(max-width: 320px)"> !
href="tablet.css" media="all and
(min-width: 321px) and max-width:
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
Vasils van Gemert
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
With a mobile ﬁrst 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
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"!
srcset="banner-HD.jpeg 2x, !
banner-phone.jpeg 100w, !
banner-phone-HD.jpeg 100w 2x">
picture: This speciﬁcation 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
<picture width="500" height="500">!
<source media="(min-width: 45em)" src="large.jpg">!
<source media="(min-width: 18em)" src="med.jpg">!
<img src="small.jpg" alt="">!