Responsive Web Design (done right)

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 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.
But how?

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.

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

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

Resource Wise
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
well.
Joshua Johnson

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;!
    color: #ffffff;!
    margin: 1px 0;!
    text-decoration: none;!
}
https://github.com/izilla/Supports-Touch

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

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

TRY THIS

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

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

https://github.com/scottjehl/pictureﬁll

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

TRY THIS

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

TRY THIS

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

Thanks
@sandropaganotti ~ compartoweb.com

Responsive Web Design (done right)

Responsive Web Design (done right)

Recommended

More Related Content

Viewers also liked

Viewers also liked(8)

Similar to Responsive Web Design (done right)

Similar to Responsive Web Design (done right)(20)

Recently uploaded

Recently uploaded(20)

Responsive Web Design (done right)