Responsive Web Design

1-day Advanced CSS Training Course in Responsive Design — CSS3-04

Responsive Design TrainingCourse Overview

This responsive design training course teaches students how to use CSS3 media queries to deliver different views of the same HTML web content to different types and qualities of media device — to give output and to receive input.

Responsive design for mobile devices is the most obvious application for the skills and techniques taught in this training course — and we cover mobile-specific web design in some depth. For example, designing small user interfaces (UIs) driven by fat fingers, and designing user interfaces that re-arrange themselves when a mobile device switches from portrait to landscape orientation. But mobile web design is not the be all and end all of responsive design.

In addition to teaching Responsive design for smartphones and tablets (iPad, etc), this training course also covers the design needs of increasingly popular non-mobile devices for the web, e.g. very large screens, high definition (HD) and ultra-high definition screens, high pixel-density screens (so-called 'retinal displays'), progressively scanned and interlaced TV screens, etc.

Last, and not least, this course pays great attention to the usability and accessibility concerns of delivering different views to different media devices.

Responsive Design TrainingCourse Contents


  • What is responsive web design?
  • Responsive vs. adaptive web design
  • Technical issues and challenges
  • Challenges: work habits & workflow
  • Commercial and ‘political’ challenges
  • Media queries: critical CSS feature
  • Browser challenges: esp. IE8 & IE9
  • Feature detection: Modernizr objects
  • Foundation HTML: viewport, polyfills
  • Foundation CSS3: best practices

Phone first proportions

  • The measures, units, grid
  • Weight, stretch, char/word spacing
  • All in proportion to font metrics
  • Vertical rhythm, baselines, leading
  • Convert fixed heights to proportions
  • ‘Unbreakable’ proportional heights
  • Breaking rhythm: subheads, figs …
  • Restoring rhythm: auto & custom …
  • Vertical alignment and distribution

Multicolumn fluid layout

  • Horizontal rhythm: grid, cols, gutter
  • Fluid layout: problems, workarounds
  • Perspective: content 1st, devices 2nd
  • Procedure: calculate whitespace 1st
  • Converting fixed to fluid/responsive
  • The key relationship: target/context
  • ‘Unbreakable’ percentage widths
  • Horizontal alignment and distribution
  • ‘Rubber spacing’ using auto widths

Responsive images

  • Preparing responsive design assets
  • png/jpg vs. scalable vector graphics
  • Aspect: pixel ratio vs. frame ratio
  • Fitting images to a fluid grid
  • Managing percentage width images
  • Grid line based image heights
  • Browser-drawn pics, icons, gradients
  • Using background images creatively
  • Performance: alternatives, sprites …

Responsive Design TrainingCourse Schedule

Responsive Design TrainingFurther Details

Course Objectives

On completion of this responsive design training course you will be able to:

  • Deliver different views of the same web content to different devices
  • Produce responsive designs that adjust automatically to context
  • Understand the different needs and constraints of different devices
  • Understand the design implications of different use contexts, e.g. portrait vs. landscape, finger vs. mouse vs. keyboard, on-the-go vs. desk-bound
  • Design proportional layouts that scale properly
  • Design fluid layouts that adjust to changing window sizes
  • Design fluid layouts that adjust without ugliness or breakage

Target Audience

  • Experieced web designers
  • Experienced web developers

Training Pre-requisites

Delegates should have completed the following Web Design Academy courses, or be able to demonstrate equivalent skills and learning:

Knowledge of HTML5 and CSS3 would be helpful, but is not strictly required. Less experienced, or rusty, designers might consider taking our Advanced Web Design Course or our CSS3 Essentials Course to get up to speed with recent developments in HTML5 and CSS3.

Training Style

This responsive design training course is instructor-led, but strongly practical. The majority of the time is spent on well-structured, hands-on, exercises.

Exercises begin by converting fixed-size designs to proportional, fluid and responsive designs. Students eventually create a range of full-page responsive designs from scratch.