Responsive Web Development Deep Dive Training

Course #:WA2401

Responsive Web Development Deep Dive Training

This instructor-led course will teach developers and designers how to build a single responsive site that can be viewed across all devices by applying the latest HTML5 techniques and strategies.


At course completion, attendees will have experience with:

  • Building responsive sites with fluid grids, media, and media queries
  • Learn to implement the appropriate layout patterns for your content
  • Learn to apply a responsive image strategy
  • Learn to build a responsive navigation menu
  • Learn to create responsive typography with percentages, ems and rems
  • Use feature-detection and server-side enhancement to provide a richer experience
  • Learn responsive workflow patterns including: Bento box, Nested doll, Append around, and Ajax-include
  • Learn how to apply adaptive techniques to create truly unique user experiences
  • Learn about tools and frameworks that help simplify responsive web development
  • Learn performance strategies that keep your sites lean, fast, and responsive
  • Learn to apply the fundamentals we learn in class by building responsive solutions for five classroom exercises
  • Gain real-world experience as we convert your own corporate or client homepage into a responsive site during the all-day workshop on day three


2 days

Outline of Responsive Web Development Deep Dive Training

  • Responsive Advantages
  • Grab the code
  • Responsive Building Blocks
    • Fluid Layouts
    • Fluid Images/Media
    • Media Queries
    • Breakpoints
  • Layout Patterns
    • Mostly Fluid Pattern
    • Column Drop Pattern
    • Layout Shifter Pattern
    • Mondrian Pattern
    • Basic Gallery Pattern
  • Exercise #1: Building a Fluid Layout
  • Exercise #2: Building a Responsive Layout
  • Responsive Images
    • Picturefill
    • Use Cases
    • Responsible Icons
  • Responsive Videos
  • Responsive Maps
  • Exercise #3: Responsive Media
  • Responsive Content
    • Flexible Fonts
    • Elastic Layouts
    • Responsive Fonts
    • Ajax-Include Pattern
    • Content Ordering
  • Exercise #4: Responsive Typography
  • Responsive Navigation
    • Toggle Navigation
    • Off -Canvas Flyout Navigation
  • Exercise #5: Responsive Navigation
  • Responsive with Server-side Support (RESS)
    • User Agent Detection
    • Feature Detection
  • Responsive Workflow Patterns
  • Adaptive Design
  • Responsive + Adaptive = Awesomeness
  • Responsive Frameworks
    • jQuery Mobile
    • Twitter Bootstrap
    • Foundation
  • Responsive Style Guides
  • Responsive Testing Tools
    • Actual Devices
    • Emulators
    • Simulators
  • Responsive Performance
  • Securing Responsive Sites
  • Responsive Project Strategies
  • Responsive Email
  • Responsive Ads
  • Analytics
  • Responsive WireframingTools
  • Responsive Layouts with Flexbox
  • Resources
We regularly offer classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC.