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

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

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 …

Introductions

  • Class, students and tutor
  • Tools and working environment
  • Preview topics and techniques — course manual
  • Scheduling and support — during and after the course

Responsive Design — Proportion and Scalability

  • Recap time-honoured principles:
    • The measures, the units, the grid
    • All proportional to font metrics
    • Key CSS font metric — font-size
    • Plus weight, stretch, char/word spacing, etc.
  • Horizontal rhythm — grid columns and gutters
    • Line lengths, the measure, spacing, proportions, etc.
  • Vertical rhythm — baseline grid
    • line-height, leading, vertical measures, etc.
  • Breaking rhythm — subheads, floats, images, tables, etc.
  • Returning to the rhythm — getting ‘back on the grid’
  • Techniques, tips and tools
  • Exercises

Responsive Design — Stretchy, Flexible, Fluid Layout

  • Recap CSS2 flexible layouts
  • Key problems — and common workarounds
  • Recent ‘evolution’
    • HTML5
    • Grid frameworks
    • CSS3 and Sass — CSS4?
    • Progressive enhancement techniques
    • New & updated browsers
  • Convert fixed-size layout boxes to flexible dimensions
    • Key formula — target/context x 100
    • Percentages with great precision
    • Flexible images and movies
  • Outstanding issues:
    • Performance
    • Visual quality
    • Graceful degradation — older, buggy browsers
  • Current and future workarounds
  • Exercises

Core Responsive Design — Media Queries

  • Recap CSS2 — select CSS for media type
    • E.g. separate styles for print, screen, hand-held
    • Limitations — esp. with handheld
  • CSS3 media queries — select CSS for media features
    • Vast numbers of selection criteria/features
    • Incl. state — e.g. tablet switching portrait to landscape
    • Not just media type
    • Extremely fine-grained
  • Basic media query syntax
  • Key media — and characteristic use patterns
  • Critical media properties to test for
  • Make a flexible 3-column, landscape layout responsive:
    • Automatically adapting
    • To a single-column smartphone view
    • In portrait aspect
    • And touch-controlled
  • Exercises

Responsive Design — Media Specifics

In-depth analysis of the features and use patterns of the following media:

  • Smartphones
  • High pixel-density — 'retinal' — displays
  • Tablets and netbooks
  • Super-large displays — Smart TV, etc.

Based around practical hands-on exercises in which students modify a PC desktop-oriented web page design so that it automatically re-adapts itself to the particularities of each of these media — using only one CSS stylesheet and leaving the HTML file untouched.

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.