Responsive Web Design Course

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 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:

• CSS Fundamentals (CSS-03)

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.