responsive web design (done right)

29
Responsive Web Design Done Right

Upload: sandro-paganotti

Post on 07-Nov-2014

560 views

Category:

Technology


5 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Responsive Web Design (done right)

Responsive Web Design

Done Right

Page 2: 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?

Page 3: Responsive Web Design (done right)
Page 4: Responsive Web Design (done right)

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.

Page 5: Responsive Web Design (done right)

MEDIA QUERIES!

Page 6: Responsive Web Design (done right)

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

Page 7: Responsive Web Design (done right)
Page 8: Responsive Web Design (done right)

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

Page 9: Responsive Web Design (done right)

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

Page 10: Responsive Web Design (done right)

MOBILE FIRST

Page 11: Responsive Web Design (done right)

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

Page 12: Responsive Web Design (done right)

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

Page 13: Responsive Web Design (done right)

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

Page 14: Responsive Web Design (done right)

HIGH DENSITY DISPLAY, TOUCH, …

Page 15: Responsive Web Design (done right)

small medium large touch HDD

Galaxy S2

iPhone 4/5

iPad 2

MBook Pro

Ultrabook

CBook

Page 16: Responsive Web Design (done right)

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

Page 17: Responsive Web Design (done right)

@media print,!  (-webkit-min-device-pixel-ratio: 1.25),!  (-o-min-device-pixel-ratio: 5/4),!  (min-resolution: 120dpi) { !  .logo {!    background-image: url("[email protected]");!    background-size: 100px 50px;!  }!}

Page 18: Responsive Web Design (done right)

TOO MESSY!

Page 19: Responsive Web Design (done right)

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

TRY THIS

Page 20: Responsive Web Design (done right)

THERE’S STILL <IMG>

Page 21: Responsive Web Design (done right)

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

Page 22: Responsive Web Design (done right)

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>

Page 23: Responsive Web Design (done right)

https://github.com/scottjehl/picturefill

Page 24: Responsive Web Design (done right)

UNUSED JS!

Page 25: Responsive Web Design (done right)

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

TRY THIS

Page 26: Responsive Web Design (done right)

TIPS AND TRICKS

Page 27: Responsive Web Design (done right)

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

TRY THIS

Page 28: Responsive Web Design (done right)

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

Page 29: Responsive Web Design (done right)

Thanks@sandropaganotti ~ compartoweb.com