When insurance company Sun Life Financial Inc. noticed the number of people visiting its site by smartphone or tablet had tripled within a year, it realized it was time to start taking the mobile experience more seriously. While it’s convenient for mobile users to access a site from anywhere, at any time, it can be tricky to navigate a site when the site’s content doesn’t fit neatly onto a mobile screen. The result is a lot of headache-inducing zooming and twisting to try to view text and images.
So to give mobile users a better experience, Sun Life revamped about 1,300 pages on its site to make them fit onto smaller screens, using the concept of responsive web design.
Responsive Web design allows users to see the same site content from different screens, but the size of the page adjusts itself based on the user’s screen size. With more and more people going online with their smartphones and tablets, businesses like Sun Life are increasingly turning to responsive web design to make it easier for users to access their Web sites. Instead of creating a whole set of apps for various pages and sites, many businesses are making their Web sites adjust to fit the screens of not only desktops and laptop computers, but also smartphones and tablets.
Digital consultancy company Delvinia Interactive Inc. has a number of posts on its site about how to use responsive web design. Here are some of its top tips:
1. Think about context.
When your developer is building a site exclusively for the desktop computer, you can assume the end user is probably going to have time and space to read articles carefully, the luxury of time to consider what he or she has just read, etc.
But in building a site that will appeal to both desktop and mobile users, you have to keep in mind that site might be a whole different animal. Mobile users are often in a hurry, reading the site content on the bus, or in between meetings, or while walking down the street. They may not have as much time to devote to reading things carefully, so your responsive site’s content needs to reflect that.
2. Use your content as building blocks.
While you may be tempted to build as big and beautiful a desktop site as you can, then scale it down to fit onto a mobile screen, that might actually make things more complicated in the long run.
Instead, Delvinia’s staff advises developers to start with a mobile strategy first, forcing you to pick and choose the most relevant, core content for the mobile site. Other add-ons can come later as the screen grows larger for a tablet or desktop user. If you build the biggest site first, it may be harder to remove the extras for a smaller site.
3. Our own lessons learned from building a responsive design site
Our own site, ITBusiness.ca, made the switch over to a responsive web design format to better accommodate our readers and to simplify modifications to our site. We could have built different apps for each operating system, like Apple iOS and Android. Or, we could have buildt one app and then ported that to other operating systems. Yet our developer, Jeff Radecki, says a news and current affairs site like ours will always need modifications and updates, so it just made sense to go this route. Radecki and his team launched our site in February.
He also has a few tips of his own for businesses looking to establish responsive sites. For example, he says, you can choose whether you want to build apps or if you want to have a responsive site – it really depends on the needs of your business.
A simple blog linking to a few pages might do just fine with an app, Radecki says. But our news site runs a lot of advertisements, video content, slideshows and other widgets. Not all of them will work well within an app, so he had to plan how they were going to be embedded when building a responsive site.
This means thinking about media queries, a module of the CSS3 specification that allows developers to set different styles, like screen resolution, window size, and number of colours. That’s something that might not be possible if you’ve had a site for 10 years and will have to move all your content into a framework that will allow for responsive design.
“A lot of good responsive design is playing with media queries, researching the common ones and accounting for those, but then also having ranges built in so when the iPhone changes its screen size, it’s OK,” he says. “You’re always going to be constantly tweaking your media queries.”
As a final tip, developers may also be able to simplify the process if they use a program like Twitter Bootstrap as a framework for building a responsive site, Radecki says. The program already sets up what the responsive design grid will look like, so developers only need to worry about customizing the design to their company’s specifications.
“And what works on a mobile phone may not work on a desktop. And vice versa,” he says. “That’s what powerful responsive design is, it’s actually changing that experience so now it’s the best experience on that device.”