Responsive Web Design

Nicolas Mouchel

Omnilog

What i'll talk about

Why responsive ?

Problems

Architecture

Web

Media

Tools

why ?

All in one

One url,

One set of mark-up,

One deployment

Interesting ?

Problems ?

positioning

diversity of screens

media

complex elements

Client Side

RWD

CSS3,

Javascript,

and in a future not far, far away

HTML5

Server Side

RESS

User Agent detection

Components

Responsive Web Design + Server Side Components

Web

data + style

WEB

data + layout + style

Data Source

json
xml
db
...

Layout

Layout is a part of presentation,

it defines positioning, flow.

block : top to bottom
inline : left to right

First

Design needs to be fluid,

flexible, define with percent.

Content needs to be adaptive,

can easily move in layout and be resized.

demo

Modular

Mobile first

CSS

Media Query

Define different css rules by width (breakpoint).

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

CSS

MEDIA QUERY

Define different css rules by density.

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

example

Icons

Q: Flat icons ? A: Web Font

website - example

Q: Colored or different icons ? A: SVG

article - demo

ICons

Q: Still using images ?

.ico{
    background-image: url('img-1.png');/*size 256px 256px*/
    background-size: 16em 16em;
}@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .ico{
        background-image: url('img-2.png');/*size 512px 512px density 2*/
    }
}

example

IMages

We need to provide different pictures depending on :

size screen
density screen
format

HTML5

<img alt="A rad wolf" srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"
                      src="pix1x.jpg" width="500" height="500">

 <picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 18em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
  </picture>

Can we use it now ?

Polyfill ?

NO

Double image loading

<img/>
srcset="..."

Browser are not ready

One Solution

<noscript data-src-small="img-small.jpg" 
    data-src-medium="img-medium.jpg" 
    data-src-high="img-high" 
    data-src-x-high="img-x-high.jpg">
        <img src="img-small.jpg">
</noscript>

var screenPixelRatio = function () {
    var retVal = 1;
    if (win.devicePixelRatio) {
        retVal = win.devicePixelRatio;
    } else if ("matchMedia" in win && win.matchMedia) {
        if (win.matchMedia("(min-resolution: 2dppx)").matches {
            retVal = 2;
        } 
    }
    return retVal;
}

article