Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome or Safari browser. Firefox 10 (to be released soon) will also handle it.

A Pragmatic Approach to

Responsive Web Design

Defining Responsive Web Design

  1. Flexible Grid
  2. Flexible Images or more specifically, media that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
  3. Media Queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.

- Ethan Marcotte

Types of Layouts

Why should you use Responsive Design

Who should use Responsive Design

Viewport

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Should I always use this?

Media Queries

Media Queries Examples

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

code example from Andy Clark

Media Queries High Density Screens

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2), 
       only screen and (min-device-pixel-ratio : 1.5) { 
  .imagebox {background:(url:"images/high/demo.jpg");} 
}

Media Queries Screen Orientation

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px)
                   and (max-device-width : 1024px)
                   and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) 
                   and (max-device-width : 1024px) 
                   and (orientation : portrait) {
  /* Styles */
}

Media Queries Compatibility

Browser Support Issues

Not supported in Internet Explorer 6-8

 

Solution

Flexible Grid Systems

Flexible Grid Systems Concepts

Flexible Grid Systems Box-sizing

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Features

  • Resolves borders & padding issues

Browser Compatibility Issues

  • no support in IE6-7

Workarounds

Flexible Grid Systems FlexBox [Experimental]

CSS3 Specification

Features

Example:http://flexiejs.com/playground/

 

Support

Workarounds

Flexible Grid Systems Inline-Block

Features

Browser Compatibility Issues

Note Whitespace dependent layout

 

Workarounds

Flexible Grid Systems Multi-Column Text

div#multicolumn1 {
-webkit-column-count: 2;
   -moz-column-count: 2;
        column-count: 2;
-webkit-column-gap: 20px;
   -moz-column-gap: 20px;
        column-gap: 20px;
}

Features

  • Brake up text into multiple columns without using additional divs

Browser Compatibility Issues

  • No support for Internet Explorer 6-9

Workarounds

  • Gracefully Degrades to single column text
  • Polyfill



Flexible Grid Systems Grid Frameworks

Features

  • Handles math and browser compatibility
  • Good for rapid prototyping
  • Can include full layout frameworks

Short List

 

 

Images

Images Fluid Images

Fluid images allow the image to scale to fit the maximum size of the container while maintaining aspect ratio

Images Font Icons

Font Icons provide resolution indepent versions of icons

Images Responsive Images

A proposed solution by Filiment Group to provide varients of images depending on layout size

Javascript

Javascript Feature Detection

Run tests to determin if a browser is capible of using CSS3, HTML5

Javascript Asynchronous and Parallel

Use a resource loader to spead up loading time and prevent browser lagging while resources are loading

Examples

Javascript Other Tips

Other Gatcha's

Other Gatcha's

Got Questions?

Resources: http://bit.ly/J2OTKy

Use a spacebar or arrow keys to navigate