Introduction to Responsive Design

Duration: 2 Days

Objectives

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.

Pre-requisites

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

Navigation

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

Fonts

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

Images

  • 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

Course Dates

London CentralLondon GreenwichBristol

London Greenwich

Dates Price Book Now
2 - 3 Oct £545 Book Now
See more 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


"Absolutely top quality training and facilities."

National Museum of Wales

"The course was excellent - exactly to my company's needs. All questions were answered and concepts explained very clearly."

Hannah Griffiths

"Really impressed! I enjoyed the training and would like to do more in the future."

Silk Pearce



 

 

© Transmedia . 277 Greenwich High Road London SE10 8NB  UK . 0208 269 4260
Designed by Transmedia's Web Team