Responsive design is the idea of designing for all screens. Considering how our site adapts for a variety of devices, will help us to focus our content and build sites that meet the needs of every user.

Examples

Many (if not most) modern sites employ responsive design techniques.

• The Boston Globe
• Mashable
• Pittsburgh Children’s Museum
• Tattly

How To

Together let’s walk through Grid: A simple guide to responsive design by Adam Kaplan.

Mobile First

Mobile first responsive web design means that we start by designing the basic mobile experience and layer on additional functionality/design for larger devices. Doing so allows us to focus on the most important bits of our site’s design and content.

This article by Brad Frost is a very thorough overview of mobile first & responsive design.

Together

Let’s design and build a mobile first responsive page.

This is Responsive

This is Responsive is an essential resource with patterns, resources, and news about responsive design.

On Your Own

On your own build a responsive photo gallery page. It should have at least a dozen images and adapt the design based on the user’s screen size. Start by creating the mobile experience first.