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 ever-increasing 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?

I think, 2014Responsive 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.

MEDIA QUERIES!

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

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

MOBILE FIRST

Resource WiseWith 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 as-needed basis to platforms that can handle them well.

Joshua Johnson

<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 medium large touch HDD

Galaxy S2

iPhone 4/5

iPad 2

MBook Pro

Ultrabook

CBook

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

TOO MESSY!

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

TRY THIS

THERE’S STILL <IMG>

srcset: The attribute essentially takes a comma-separated 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 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>

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

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

TRY THIS

Zooming with remWe 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