Responsive web design: How mobile gadgets changed the web

TORONTO – The recent explosion of smartphones and tablets left web designers in a quandary – how to bring an audience to their content from all of these devices? Every week or month brought a new gadget, with a bigger or smaller screen.

To keep up, content providers had to build custom apps for these devices. One for an iPhone, one for an Android, one for an iPad, one for a Blackberry Playbook, and on and on. It was a costly and time-consuming process that never seemed to end.

That is, until responsive design arrived on the scene. The term was coined by designer/developer Ethan Marcotte in a 2010 article and 2011 book entitled Responsive Web Design.

“The web has always been a flexible design medium, even though we haven’t always thought of it that way,” says Marcotte.

“Responsive design tries to embrace that flexibility, allowing us to create flexible sites that grow, shrink and adapt to the multitude of devices and screen sizes accessing them.”

Canadian context

Canadians are increasingly turning away from computer web use, in favour of mobile browsing on their tablets, smartphones and even smart TVs.

While Deloitte Canada’s 2013 trends report estimates that more than 80 per cent of the data used online in Canada this year will come from desktop computer use, new growth is coming from mobile, as tablet and smartphone ownership soars.

“Rather than creating and maintaining separate mobile, tablet, and desktop sites, businesses can create a single responsive site that meets their audiences wherever they are,” said Marcotte.

Once “media queries” are used to detect the resolution of the device the site is being accessed from, images, content and the physical design of the site will resize itself to fit the screen correctly. The result is the same user experience whether you’re on a desktop, tablet or smartphone.

For content providers this is a huge advantage, as regular readers will be able to find their favourite sections of the website with ease and not spend time searching for content.

“If the responsive designer’s done their job right, I’d hope their audience wouldn’t notice anything,” said Marcotte.

“Depending on the device or browser they use to visit the site, everything should just work: information will seamlessly present itself in a design best suited to the constraints of the device; complex interfaces will adapt to the needs of a touchscreen, a mouse, or directional inputs.”

Why not just create a mobile app, you ask?

Not every content provider can afford to create and support multiple mobile apps – especially in a world with such a variety of devices.

Not the end of apps

Unlike websites, applications are made specifically for devices, meaning a company would have to consider making an iPhone, Android and BlackBerry app, as well as tablet and eReader apps.

But responsive websites may not signal the end of the app craze. “I don’t feel like app culture is dead,” said web designer and partner at Upstatement Tito Bottitta.

“I think apps are more about taking advantage of things that the phone or the tablet is best at. The web is still really good for reading content – but things that are more interactive, like picture-taking – something that ties into the phone’s capability, those things are still much harder to do on the web.”

Bottitta’s design firm, based in Boston, designed The Boston Globe’s responsive website in 2011. It also designed the new Globalnews.ca.

He believes that responsive web design is more than a trend; that it is the natural progression based on how users have adapted to changes in technology.

“I think people are just going to expect this from websites. We have changed the way that we approach building websites and the expectation is that the world visits the web from multiple platforms. It’s more of a philosophical switch than it is a trend.”

As a result of this switch many content providers have launched responsive web sites, including The Boston Globe and Time. 

Globalnews.ca has also launched a responsive website in order to make it easier for our readers to access their news through their mobile devices.

To see how the new site works if you’re reading this on a desktop, try making your browser window smaller and watch the content shift to adapt to the size of the window. If you are viewing our homepage in a full-sized window, you will see the list of stories shrink from two columns to one as you make the window smaller.

Learn more about the new Global News website.

Editors Note: This story previously mentioned that The Guardian’s website was responsive. The story has been corrected to include Time’s website as an example of Responsive web design.