From the BlogSubscribe Now

Responsive Design and Your Website: A Match Made in Heaven?

Have you ever viewed your organization’s website on a smartphone? A tablet? Netbook? Does it behave the way you expect or does it become an unruly mess or too small to read? Do you think that as long as it looks ok on a desktop, the rest doesn’t matter? Think again.

2011 was the first year that mobile device shipments surpassed PC shipments and it doesn’t look like the tide is going to turn any time soon. With this in mind, it’s no longer safe to have your site designed for only one resolution. Of course, there’s always the option of building a separate mobile specific site but mobile devices vary greatly so this is really a sub-par and potentially expensive solution.

There is another option now. It’s called responsive design. The term was coined by designer/developer Ethan Marcotte and comes from the relatively new field of “responsive architecture”. Architects are experimenting now with designing spaces that react to the behaviour of their occupants rather than dictating behaviour. It’s simliar with responsive web design. The goal is to have the website change and adapt to the user’s behaviour (eg. using a smartphone in portrait mode or a tablet in landscape) rather than for the user to adapt their behaviour to your site. Using the techniques below you can have one code base and still provide the user experience best suited to the device the site is being viewed on.

While the focus so far has mostly been on making traditionally sized websites more usable on a mobile device, these techniques can also be used to make a site more usable on larger widescreen displays.

How Does a Website Become Responsive?

Responsive web design is composed of three techniques. Each on their own have been around for awhile but when combined together, you get something pretty powerful. The three elements are:

  • Flexible Layouts – instead of fixed width layouts we’re all familiar width, sites are designed using a percentage based grid instead.
  • Flexible Images and Media – media that can grow or shrink to best fit its container.
  • Media Queries – these dictate the breakpoints where a site’s design needs to adapt for a new resolution.

Is it Right for My Organization?

By and large, responsive design is a good match for a lot of web projects. Depending on your unique project and audience however, a mobile site or even a full blow mobile app may be the best route. It’s something you’ll need to decide together with your designer while you’re in the planning stages of your web project. If you have a more general audience, a tight timeline, a smaller budget or want to keep all of your site’s content in one place to make edits easier, we’d encourage you to consider a responsive site. You can save time and money and still give mobile and widescreen visitors a rich experience.

Worried that you won’t be able to edit your own content if you go responsive? Not to fear – sites built on platforms such as WordPress can also be created to be adaptive so don’t let that stop you.

Where Can I See it in Action?

Responsive web design is still a pretty new field but there are already some great examples out there. If you don’t have a range of devices to look at these on, try resizing your browser to various sizes to see how the sites adapt and change in response.

If you’d like to learn more about responsive web design and whether it’s right for your next web project, don’t hesitate to get in touch. We love to help you out and share our enthusiasm about web design.