Getting Started with Responsive Web Design

Last week, I talked about how to update your website and mentioned the importance of considering responsive web design. The concept of responsive web design is relatively new, and it can have implications for any web project you or your students are working on. Why? This morning alone, I have checked websites on my iPad, iPhone, laptop and computer. I’ve opened four windows on one screen and narrowed them down to all display at once so I have the references I need for writing this post. Responsive web design is a reaction to this type of workflow: a set of principles for building websites to make sure that they display properly and remain accessible across all these screens.

Ethan Marcotte describes responsive web design as “designing work meant to be viewed along a gradient of different experiences.” This means building one website that adapts to all the screens, rather than building separate experiences for the huge range of devices out there.

Checking your own page, your class site, your department or library’s page, or your project page for responsiveness can seem daunting if you don’t have a ton of devices available. You can mimic a range of screens using The Responsinator. In good responsive web design, the content changes to fit the user’s screen and display. You can see some great examples of this in action at Media Queries and Admire the Web.

Responsive web design currently often relies on a few tools:

  • Mobile First design means starting by considering how your site looks on the smallest, not the largest, screens. This isn’t just about code: it can mean eliminating huge header images, putting video as links rather than as embedded content, or trimming down excess content for a minimal, focused main page.

  • Media Queries can be added to your site’s CSS, or stylesheets, to react to different screen sizes and change how a page’s content displays. This allows the guiding design to be changed when the screen size is changed by adding new sets of rules that are only implemented when their conditions are met.

  • Fluid Grids are an alternative to standard fixed grids where every column stays the same regardless of the screen. Fluid grids are instead defined by percentages (not pixels) and thus keep their relative proportions to other columns. Their width will change based on the size of the window. Systems like Profound Grid and Grid Pak offer frameworks for building flexible grids.

Building fully-realized sites like these does take a lot of understanding of code and design, but there are tools emerging to fill the gaps. Adobe Edge Reflow, currently in preview, offers visual resizable design tools. Responsive themes for WordPress, Moodle, and Joomla can help update a site quickly. For new projects not built on a content management platform, the Foundation framework offers a beautiful mobile-first toolkit. And even small changes (like cutting down on images, Flash, and video) can impact how your site is viewed across devices.

Have you incorporated responsive web design into your own site or other web projects? Share your experiences and tricks in the comments!

Return to Top