The Basics of Responsive Web Design

It should be no surprise to news organizations today that we now live in a multi-device world. Sales of tablets and smartphones continue to rise daily. Audiences are consuming a variety of content on their laptops, tablets and smartphones, and doing so frequently throughout the day.

There are multiple platforms to reach audiences today and it can be a challenge for any news organization to create a custom design and layout for all platforms to reach their news audience.

Responsive Web Design is the route many organizations including news organizations are now taking to accommodate these different platforms and screens.

Mashable declared 2013 to be the “Year of Responsive Web Design.”

What is Responsive Web Design?

Responsive Web Design takes into account the user’s device and the web browser they are using to access a website and makes adjustments to fit the content to the screen. The design allows for the overall layout to be flexible so that the text, images, and screen width will fluidly adjust within the browser window. Ethan Marcotte is a web designer and developer who coined the term Responsive Web Design in 2010.

Responsive Web Design allows your website to know the user’s media type and make adjustments in size accordingly all through the use of media queries in a linked stylesheet to your website.

Ethan Marcotte states, “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.”

Advantages to Responsive Web Design

Responsive Web Design is cost effective because it allows your designers to create one design and layout that can be accommodated across several devices versus having to create custom experiences for each. It also allows for easier maintenance in the long run because you only have one website layout/template to change.

In addition, if your organization is tight on resources and you cannot afford to create a separate mobile app, Responsive Web Design may be an option.

Furthermore, having a Responsive Web Design can impact your audience reach. As more news consumers are using multiple devices throughout the day to access news and information, they can go to your responsive design website on their smartphone, tablet or laptop and have the same experience. This can lead to new growth in audiences you didn’t reach before and help to sustain your existing audience base. If you don’t have a website presence on these other platforms that works well, the news consumer may never come back again.

Responsive Web Design can also help your search engine optimization strategy. Google recommends web developers use responsive design:

“Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”

Basically, with a Responsive Web Design layout you have one URL to your website content instead of multiple which allows your website content to be ranked and searched more effectively in the search engines.

Responsive Web Design is Not for Everyone

According to a guest post on Forbes by Carin van Vuuren, using this strategy depends on how your user engages with your website:

“However, while responsive design aims to scale web content fluidly across multiple devices with different screen sizes, it may not represent the best option for organizations aiming to deliver unique and innovative experiences to customers.”

She states that if your site is heavy on web development technologies with complex functionality, responsive design may not be an option. Furthermore, if your user is completing a series of specific tasks in a variety of contexts and situations on your site, Responsive Web Design may not be an option. One example she highlights is an airline website. A user may not want to have the same kind of website experience on their smartphone if they just want to check into a flight or check their flight status.

Using Responsive Web Design comes back to what kind of experience you would like your user to have whether on the smartphone, tablet or laptop. As Carin van Vurren clearly states:

“While responsive design can help you achieve a certain measure of consistency across channels, the real prize lies with the ability to create unique experiences. A broader multi-screen approach designed dynamically by channel will enable the sort of customer experiences that yield higher engagement and contribute to overall success.”

Having a Website Strategy is Key

Matt Waite states that 2013 will be the “Year Responsive Design Starts to Get Weird.” Waite predicts that organizations will have to go beyond just thinking about how to design website content for the tablet or the smartphone but what about the refrigerator, smart TV or bathroom mirror? Waite states it’s only a matter of time when these other devices will also connect the news consumer to the website:

“It doesn’t take much imagination or deep reading of the tech press to know that in 2013 more and more devices will connect to the internet and become another way for people to consume internets.”

Whether you decide on Responsive Web Design or not, one thing is clear is that your news organization should have a website strategy. That strategy should dictate your goals and objectives of the kind of user experience you want your audience to have when they come to your website whether they accessing it on the smartphone or the desktop computer. Time is of the essence and if you are not where your news consumers are – in terms of how they are engaging with the news – they are not going to wait for you to catch up. They will go onto another news source that does.

Helpful Links to Get Started

Here are some links that provide helpful tips on Responsive Web Design:


Photo Credit: podluzny via photopin  cc