Whether you design for mobile devices as a primary target or as a nice extra, you can use the power of CSS to ensure that the same content can be accessed across all hardware platforms, from mobile phones to wide-screen high-resolution displays.

Three key technical features are the heart of responsive Web design:
• Media queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger.

Having to serve both segments shouldn’t stop designers from being innovative which is why Responsive Design is now the standard in creating web sites today.

Objectives for this class:
• Understand the main components of responsive design.
• Use of media queries
• Know the importance of the viewport
• The importance of a mobile first design
• How to apply a grid system
• Use the various HTML5 semantic elements
• Learn the most up-to-date responsive image techniques
• How typography can be made responsive
• Use of polyfills for legacy browsers
• Mobile menu techniques
• How to fully test a responsive design
• Learn about web components

Who Should Attend: This course is for anybody who wants to know how to create websites that will display its content appropriately for all types of mobile and desktop devices.

• What is Responsive Design?
• Mobile First concepts
• Core Concepts
  • fluid grids
  • flexible images
  • media queries
• Examples
• Viewport Meta Tag
• Testing tools

• Content Strategy
• Developing Content
  • How users read
  • Headings
  • Content Parity
• Responsive Content
  • Dynamic loading (ie. lazy loading)
  • Selective loading
• Viewport
• Separating Content from Presentation
• Media Queries
  • Syntax
  • embedded vs external
  • Determining breakpoints
• Navigation
  • Types
  • Navigation Patterns
  • Examples

• Grid overview
• Absolute and relative font sizes
  • Ems
  • Rems
  • Converting pixel to ems/rems
• Responsive Images
  • Retina screens (high resolution)
  • DPR
  • Issues with fixed-width sizing
  • srcset and sizes attribute
  • element
  • Best solutions and pitfalls
  • Polyfills
  • What is supported today?

• Testing techniques overview
  • Browser
  • Device testing
  • Unit testing
  • Visual Regression testing
  • Automated testing
• Common problems with RWD testing

• Overview of CSS frameworks
• Bootstrap highlights
• How Bootstrap Grid works
• Other fun components

• We will review step-by-step the creation of a simple responsive website with custom CSS (no CSS frameworks).