Register Here

Click on class date to register

Dates available upon request.
Call (202) 223-6813.

To register multiple students for the same class set the student count in the shopping cart.

To be wait listed for a sold out class call (202) 223-6813.


1627 K St NW, Suite 5034, Washington DC 20006

CSS for Multi-Screen Layouts (131)

  • Class Highlights:
  • • Thinking about screen layouts
  • • Mobile first philosophy (pros and cons)
  • • Responsive design workflow
  • • Media queries
  • • Layout breakpoints & flexible grids
  • • Adaptive typography
  • • Multi–resolution images & HDPI screens
  • • Progressive enhancement principles
  • • Working within a CMS (Content Management System)
  • • Special email issues
  • • Testing responsive layouts

  • Class Description:
    Learn to build websites that automatically adapt their layouts to various screen sizes, orientations, and resolutions making your content look its best no matter the device: smart phone, tablet or desktop. In this hands–on class you will use CSS3, media queries, fluid grids, scaleable units, flexible images, fluid type, and more to build responsive layouts that work with myriad viewing devices.

    Why is responsive design so hot right now? It saves time and lowers development cost while increasing website effectiveness.
    INFOGRAPHIC: Responsive Design
    click for infographic

    As tablet and smartphone use rapidly
    we need to roll with the changes. Websites need to work with screens that are both larger and smaller and come in many different aspect ratios. We even need to instantly accommodate screens that flip between portrait and landscape views.

    The old strategy was to create a separate “mobile” design for small screens. This is now both inadequate and impractical. The solution: flexible containers and content that rearranges and resizes to work with all screens.

    “So much smarter than building new layouts for every new device that comes out!”

    Responsive techniques are relevant to both hand–coded websites and to websites that use a CMS (Content Management System like Drupal or WordPress). These techniques apply to both websites and HTML–formatted email.

    This class clearly and concisely presents the website layout methods you must know to create web pages that automatically adapt to many different screens. You will learn the design principles for planning and constructing responsive pages. Learn to use CSS techniques such as fluid grids, flexible images, and media queries. Learn to create tables and menus that function well on all devices. Learn how to make images and fonts responsive. Learn how to add capabilities to old browsers with add–ins like Modernizr.js and Respond.js. Speed work by simulating layouts on multiple screens. Hands–on exercises will give you practical demonstrations of responsive techniques.

    Prerequisite: Ability to write HTML and CSS code. Specifically, how to use CSS selectors and DIVs/floats to create 2-column layouts.
    If you need a refresher, we strongly recommend first taking these 2 half-day classes: CSS: Selectors and CSS: Layout.

  • Platform: This class is for Mac and Windows computers
  • Class length: 2 days
  • Class cost: $975.00
  • Tweet about this class     Share this on Facebook