Introduction to Responsive Design

Duration: 2 Days


This hands-on course covers the skills necessary to design and build responsive web sites for mobile devices such as phones and tablets. Students will learn the use of techniques such as CSS3 media queries and flexible layouts to build mobile-compatible web sites. The course also provides an extensive introduction to JavaScript and the jQuery Mobile Framework for building mobile-specific web sites.


Basic Web/HTML skills.

Course includes

A comprehensive set of reference notes covering course topics, follow-up telephone support and, for training on Transmedia premises, lunch and refreshments.

Course outline

Overview of responsive design

  • Examples of responsive sites
  • Planning a responsive design
  • Progressive enhancement vs. graceful degradation
  • HTML5, CSS3 and JavaScript for responsive design
  • Defining breakpoints

HTML5 for responsive design

  • New HTML5 elements
  • Practical uses of new elements
  • HTML forms; placeholders, required, auto focus
  • Input types email, number, date, time

Using CSS3 in responsive design

  • Defining breakpoints
  • Mobile first vs. desktop first - how to decide?
  • Designing content
  • Resetting styles
  • Vendor prefixes
  • Tricks and common issues

Media queries

  • Why they are important
  • How to write the syntax
  • Which features can we test for?
  • Examples of how they can alter designs
  • What to do when they aren't supported- IE8?
  • Using Polyfills

Responsive Layouts

  • Fixed vs fluid proportional layouts
  • Changing from fixed to proportional (target/context = result)
  • Measurements - ems, pixels and percentages
  • Fluid images and limits (max-width)
  • CSS grid systems
  • Example of using a CSS grid system


  • Responsive navigation strategies
  • Switching navigation for mobile devices
  • Using JavaScript for navigation


  • Using @font-face for Web fonts
  • Font sizes - pixels/percentages/ems


  • Setting fluid images
  • Retina images for high resolution displays

Using Frameworks and tools

  • Dealing with older browsers: Modernizr
  • Overview of jQuery and jQueryUI
  • Bootstrap
  • Foundation framework

Live Chat

Course Dates

London CentralLondon GreenwichBristol

The new course schedule is currently being updated and will be ready shortly. Please phone us on 0208 269 4260 or email us for the latest dates.

All our courses run in London and Bristol, or can be tailored to requirements at your own offices. For alternative dates, please email or call us on 0208 269 4260
All prices are per person and are subject to VAT
15% discount for groups of four delegates.
10% discount for groups of three delegates.
(This offer applies for delegates on the same public scheduled course on the same date.)

Related Courses

"The whole experience was great. Trainer and staff were extremely helpful and approachable."

Faithful & Gould

"Excellent. The best training I have ever had."

National Housing Federation

"Our trainer worked at a great pace and was very easy to understand."

Clarks International

© Transmedia . 85 Tottenham Court Road, London, W1T 4TQ  UK . 0208 269 4260       Privacy Policy