Responsive Design with HTML5 and CSS3

LocationCavendish, Central London
FacultyScience and Technology

This one-day workshop offers an informative and hands-on introduction to creating responsive websites with CSS3 media queries.

It will explore what media queries can do and how to apply them with CSS3 to make a website’s layout, text, images, backgrounds and content respond to the user’s device.

We will also look into what this means for structuring and planning your website and review relevant examples.

Who is this course for?

Typical participants include:

  • web developers who would like a focused introduction to this technology in order to hit the responsive ground running and keep their skill set relevant
  • web designers who have less of a technical background but need to gain understanding of this new technology to prove their design skills and move beyond the traditional flat-page approach
  • marketers, web editors or decision-makers who will not necessarily need to code themselves in the future but who want to understand the new possibilities and their implications on design commissioning, budgets and content strategy
Dates Duration Price  
We run this course on request for a number of people. Please register your interest. 1 day

£375

Register your interest

Course content

This course will cover:

Overview

  • What is responsive design and media queries?
  • What is their place – and why now?

Preparing the ground

  • Pixels versus em
  • Grids
  • Liquid layouts vs responsive design
  • Media queries vs media types

Media queries

  • Implementation and current availability
  • Available features for queries
  • Responsive layouts
  • Responsive text
  • Responsive images
  • Background images
  • Using Modernizr
  • Common sizes and resolutions
  • Viewport

Strategic considerations

  • Effects on content
  • Navigation
  • Use cases
  • Best practice and real-world issues

Practical workshop

By the end of this course you will be able to:

  • understand how media queries work and how to use them to create responsive designs
  • code a responsive web site that looks great on a variety of devices and browsers
  • discuss current developments, resources and helpful tools and utilities
  • understand how responsive design can help you create a better web experience, how it can be applied in the current browser landscape and what this means for your website project

Chris Maigler

A Westminster alumnus, Chris combines a strong design background with technical expertise and a passion for usability in all projects. He is director of Brave Media, a digital media design agency producing work for a wide range of companies such as Eurostar, RedBull Racing, London Metropolitan University, IGN and others.