Responsive Web Design Training

Web sites are being viewed on a wide variety of devices, both larger and smaller, including desktop, tablet and mobile. Sites should have a "responsive" architecture - design that responds to any device size. Responsive design is about serving one HTML document to countless browsers and devices, but using flexible layouts and media queries to ensure that design is as portable and accessible as possible.

Your instructor will teach you the three core ingredients to create a responsive website: a fluid grid-based layout; flexible images and media; and Media Queries, a module from the CSS3 specification that allows your layout to adapt to the viewer's device. Learn best practices for preparing the HTML document for responsive design. You can't change the design with a different stylesheet if your HTML is cluttered with layout attributes and design tags. Learn to create clean semantic markup so that your layout can respond to various devices and give the user a tailored web experience. You'll create a responsive web design that can adapt to the constraints of the browser window or device that renders it, seeming to respond to the user's needs. Please note, these exercises are done with pure HTML & CSS code, without a WYSIWYG editor.

Understanding Responsive Web Design

  • The rapid spread of mobile devices has dramatically changed the word of web design
  • Web designers need to ensure their websites look good not only on a big screen, but also on a tiny phone and everything in between
  • You will learn about reference websites, online tools and more to help you create adaptive web designs that are optimized for mobile devices

Flexible Typography

  • Calculating relative type sizes
  • Responsive text styles that respond to device sizes and orientations
  • Converting pixel-perfect layouts to scaling dimensions

Using Fluid Grid Layouts to Adapt to Device Viewports

  • Flexible column widths and margins
  • Working with borders in fluid layouts and nested sections
  • Setting limits to scalability with minimum and maximum widths

Automatic Scaling Images and Media

  • Flexible images and resizing video
  • Automatic scaling background images
  • Supporting IE 8 and older with a background-size polyfill
  • Fixing browser-specific issues with flexible images, including AlphaImageLoader

CSS3 Media Queries

  • Learn about max-width and min-width Media Queries, so that pages automatically adapt to mobile, tablet and desktops
  • Setting the Viewport meta tag
  • Constraining the design at "break points" in your page layout
  • Using a polyfill to get Media Queries working in IE 7 & 8

Mobile Design

  • Learn to optimize pages for faster download on mobile devices by using CSS3 instead of graphics
  • Preventing images from loading on mobile
  • Designing with a "Mobile First" approach
  • Using JavaScript to redirect to a mobile site


  • Familiarity with CSS: classes, IDs, selectors, and rules

Responsive Web Design training is offered at these locations: