A Beginner's Guide to Responsive Web Design

4 minute read
Sean Robertson avatar

Responsive web design emerged in 2010 as an option for businesses scrambling to deliver their websites across multiple devices. Though the approach is not new, some businesses still don't know what responsive web design entails and what value it provides. Here's a developer's introduction to the basics.

Responsive web design is a technique which allows a single website with a single theme to serve all kinds of devices with different screen resolutions. A responsive website adapts the layout to the viewing environment through the use of fluid proportional grid layouts, flexible images and CSS media queries to reflow page elements at lower resolutions. On your desktop, you can resize your browser while looking at a responsive site and the layout and content will reflow to fit the screen width as it gets smaller.

What is Responsive Design?

Responsive design is becoming a major concern for developers and clients alike.Though clients may not know the term responsive design, they increasingly need to have their website be usable on a range of mobile devices. More people now access websites on mobile devices rather than desktop browser, and that percentage is growing every day, especially in the developing world where cellphone ownership surpasses computer ownership.

How Does It Benefit Clients?

Businesses have turned to responsive design to ensure their sites are accessible on a variety of devices. Besides giving clients better SEO and customer engagement, responsive websites also save money on development and maintenance. Rather than paying for a separate mobile site or even a separate mobile theme, responsive design makes it possible to have a single theme work for a variety of different sized devices. Updates are easier because you’re updating one site, not two. We expect responsive design to continue to play a major and growing role in client projects.

Learning Opportunities

What Advantages Does Responsive Web Design Offer Developers?

The big advantage as a developer and content manager is there’s only one theme and one, consistent piece of code to worry about -- you don’t have a separate mobile site or theme. You’re using the same data in different sizes, but it’s all in one place so you don’t have to do the same thing twice.Responsive design takes more time in the design phase, requiring you to really think about how you want to present content in a way that can reflow and still make logical sense on different devices, but the payoffs are enormous.

When Do Clients Ask for Responsive Web Design?

The majority of our clients request mobile friendly designs as part of a website upgrade and redesign, or during a transition from one CMS to another.All of our Drupal work now includes responsive design.A major transition like that is the perfect time to consider a redesign and responsive implementation.

Does Responsive Design Require a Lot of Additional Effort?

A common misconception about responsive design is that you have to build it from scratch. If you’re using an open source platform, you won't have to in many cases. With Drupal you can choose from a number of distributions that give you responsive websites out of the box. For example, Panopoly and Commerce Kickstart allow you to get up and running quickly with diverse feature sets.You can also build your own from scratch with a selection of modules designed for responsive sites like Picture, Bear Responsive Menus, Flexslider and others, as well as one of several responsive base themes like Omega if one of the existing distributions doesn’t suit your needs.There are also some great responsive admin themes like Ember to make editing content and managing your site on the run easier.

About the author

Sean Robertson

Sean Robertson is a senior developer at DOOR3. He got his start in web design and development in high school teaching himself Photoshop and HTML.