Course Code: litbsp
Duration: 14 hours
Overview:

Bespoke course for the Limerick Institute of Technology

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

<Bootstrap element TBD>

Course Outline:

Responsive Design Training (one day)

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 …

Introduction to Bootstrap (one day)

<Topics to be determined>