This post originally appeared on Newswire.ca
When two-thirds of Canadians are pocketing a smartphone, mobile-friendliness should be a top priority for anyone with a website or with responsibility for digital content. If your website is not easy to see and navigate on a phone or tablet, you’re cheating yourself out of an enormous potential audience.
What does Responsive Design even mean?
In the age before data plans, websites were optimized for viewing on computer screens. Today, your audience may view your website on their computer over lunch, but then check back again from an iPhone on the bus, and again from a tablet on the couch at home. In each case, you want that viewing experience to be smooth and efficient, right down to form fills and menu options.
There are three kinds of mobile configurations for web developers to choose from:
- Independent Mobile site: lives on a subdomain from your main site, but has a different URL. For example, http://www.facebook.com and the mobile version, http://m.facebook.com, are two different URLs that provide the same kind of content.
- Adaptive design: screens will adapt to the width of a browser at a specific point. A designer must manually set up those points.
- Responsive design: screens will respond to the size of your browser at any given point, adjusting the layout so that it will be optimized for whatever device you’re using.
CSS Tricks illustrates the differences between adaptive and responsive design really well. Responsive is on top while adaptive is on the bottom.
Unsure of the state of your web pages? You can try looking at your site using multiple devices, but that’s a lot of work. Am I Responsive? is one of many sites that will show you what your site like on a wide range of devices.
Having a responsive web design can help your company in a multitude of ways.
1. Improves your SEO
Google has explicitly stated that it prefers responsive web design over all other mobile configuration types. When search engines crawl your webpage, they only need to do this once on a responsive site, which helps them index your pages faster. This keeps your content fresh on search engines, which will help improve your SEO-potential. Independent Mobile sites, despite being operated by the same company, can potentially be flagged as duplicate content or get overlooked.
2. Supports an omnichannel marketing strategy
Consumers want to have a seamless brand experience across all your promotional channels including web properties. Having a responsive design will ensure that your users receive the same web experience regardless of their access point. Adobe found that 65% of consumers prefer content that displays well on their devices.
3. Cost-effective solution
Although 54% of websites still have a separate mobile site for their content, resist the urge to follow the crowd on this one. Because they run on a different URL and contain separate (but identical) HTML files, any changes to your content must be manually changed on both sets of sites. This can make any project more expensive, particularly if you’re outsourcing your developers. Why run a desktop and mobile site when you can run one?
What can you do?
While having a responsive web design is likely not your issue to tackle, there are a few ways you can streamline the process.
Use high-quality images
Since you have no idea what devices your audience may be using to view your site, ensure that your images are as hi-res as possible. What might look good in mobile may look terrible on a widescreen TV. If your images have text, make sure they look legible on small screens.
Consider the amount of scrolling your user may have to do to read the entirety of your blog post. Try to use bulleted or numbered lists whenever possible and keep your headlines between 50-60 characters; that’s all Google will display when your page comes up in search results anyways.