Responsive Web Development


Duration Three Days


Duration: 3 Days


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.

Learning Objectives

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


This course is intended for developers and designers who want to start creating a single site that displays and functions well across our diverse landscape of devices including mobile phones, tablets and desktop browsers.


Before attending this course, the student should have experience with:

  •  HTML knowledge
  •  CSS knowledge
  •  JavaScript basic preferred

Course Outline

  •  Responsive Advantages
  •  Responsive Building Blocks
    •  Fluid Grids
    •  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 Responsive Layout
  •  Responsive Images
    •  Picturefill
    • Src
  •  Exercise #2: Adding Responsive Images
  •  Responsible Icons
    •  Grunticon
  •  Responsive Navigation
  •  Exercise #3: Adding Responsive Navigation
  •  Responsive Typography
  •  Exercise #4: Adding Responsive Fonts
  •  Responsive with Server-side Support (RESS)
  •  Responsive Workflow Patterns
  •  Adaptive Design
  •  Responsive + Adaptive = Awesomeness
  •  Responsive Layouts with Flexbox
  •  Responsive Templates & Frameworks
  •  RWD with jQuery Mobile
  •  RWD with Twitter Bootstrap
  •  Responsive Testing Tools
  •  Responsive Wireframing Tools
  •  Performance Advantage
    •  Responsive Implications
    •  Analysis Tools
    •  Tuning
    •  Remote Debugging
  •  Inspiration
  • Resources