Responsive Web Design Course

1-day Advanced CSS Training Course in Responsive Design — RWD

Responsive Design Training Course 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.

Course contents — 1 Foundations

  • 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

Course contents — 2 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

Course contents — 3 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

Course contents — 4 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 …

Dates for Online courses

Dates for Barcelona

Dates for Milan

Dates for Rome

Dates for Florence

Dates for Frankfurt

Dates for Bologna

Dates for Amsterdam

Dates for Berlin

Dates for Paris

Dates for Cologne

Dates for Brussels

Dates for Dublin

Course Objectives

This responsive design training course enables you 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

  • Experienced 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.

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom