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
  1. <img/>
  2. 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

TAble

Holy crap, not today...

NAvigation

tree
beautiful
sweet

Tools

CSS


CSS Lint

Javascript


GRUNT


IDE

Google Chrome
with source map
and auto reload

Questions ?

Thanks

Made with Slides.com