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

• Fixed Layout: Single fixed pixel width layout
• Fluid Layout: Single percentage base flexible layout
• Adaptive Layout: Multiple fixed layouts with breakpoints using media queries
• Responsive Layout: Multiple fluid layouts with breakpoints using media queries
• Hybrid Layout: Multiple fixed and fluid layouts with breakpoints using media queries

Why should you use Responsive Design

• Better experience for more devices
• Use one code base for all devices
• Reduce page load for mobile and tablet devices
• Provides a better experience for both small and large screens
• Reduce the time to manage multiple layouts and content
• Fun watching the page move around when you resize the browser
• Buzzword compliant

Who should use Responsive Design

• Everybody (not really)
• Clients looking to capitalize on the widest audience
  • eCommerce, web applications, heavy content driven websites, task driven websites
• Clients looking to progressively provide features to users.
  • Geolocation, local storage, etc.

Viewport

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

• width=device-width: Fix for device rotation and also fixes issue of layout extending past device width
• inital-scale=1: Set scale on initial page load to zoom page to 100% else many mobile browsers with default to a "virtual page" width of around 900px

Should I always use this?

• Fluid layouts it is generally recommended
• Fixed layouts it doesn't really matter
• Mobile layouts definitely use it

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");} 
}

• Be aware of bandwidth limitations for mobile devices
• Use browsers built in scaling feature to reduce varients
• limit amount of images being used for mobile presentation

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 */
}

• Orientation browser support is limited
• iPhone does not adjust device width on orientation change
• Use both device-width and orientation

Media Queries Compatibility

Browser Support Issues

Not supported in Internet Explorer 6-8

Solution

• Use Modernizr and Respond.js as a pollyfill

• yepnope({test:Modernizr.mq('(min-width)'),nope:['js/libs/respond.min.js']});

Flexible Grid Systems Concepts

Flexible Grid Systems Box-sizing

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

Flexible Grid Systems Grid Frameworks

Images Fluid Images

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

• img, object { max-width: 100%;}

• img { width: 100%;} /*Fallback for IE*/

Images Font Icons

Font Icons provide resolution indepent versions of icons

•  @font-face {  
      font-family: fico;  
      /* reference font files here */  
      }  
    
    .icon:before {  
      content: attr(data-icon);  
      font-family: fico;  
      }  

• Font Icons List
• Browser support is excellent provided that you supply multiple varients of the font (EOT for Internet Explorer)
• Note Minimize font file size for mobile and low band-width users
• Note Browsers render differently

Images Responsive Images

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

• <img src="small.jpg?full=large.jpg" >

• Requires modifying .htaccess file
• Requires javascript to be enabled
• Supported Browsers Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera. Firefox 4
• Supported Caveats:Firefox 3.6-, IE 6/7, etc
  • The script still serves up correct image but will load both images
• More information about Responsive Images

Javascript Feature Detection

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

• Modernizr.load({
    test: Modernizr.geolocation,
    yep : 'geo.js',
    nope: 'geo-polyfill.js'
  });

• Requires Javascript, Modernizr
• Conditionally loads your javascript or CSS

Javascript Asynchronous and Parallel

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

• Modernizr.load({
    test: Modernizr.geolocation,
    yep : 'geo.js',
    nope: 'geo-polyfill.js'
  });

Examples

• Modernizr.Load
• HeadJS
• LabsJS
• RequireJS

Javascript Other Tips

• Put javascript at the bottom of the body so that it loads after Content
• Minimize your productions code help reduce file size

Other Gatcha's

• Use of overflow can cause issue when trying to force scroll
  • solution by fillament group Overthrow
• Using fixed positioning in mobile can cause issues with the layout for scrolling (fixed in iOS 5.1)
  • solution use iScroll as a ployfill
• Display:none still loads the image if it is contained in the html
• Prevent text resize

  • -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;