Laurent davoust
Quick. Take a look at your Web browser's address bar.
If you're reading this article in a traditional desktop Web browser, you're probably looking at a page on www.theglobeandmail.com. But if you're reading this article on a smartphone, chances are you're at m.theglobeandmail.com (where the "m" stands for "mobile").
It's a common tactic. Serve up two different sets of Web pages: one for desktop browsers, another for mobile devices.
But when Jeremy Linskill began to think about redesigning his company's website, this kind of "mobile siloing" technique was exactly what he wanted to avoid.
Mr. Linskill is the design director at Zync, a Toronto-based brand and marketing agency.
"It was about this time last year," Mr. Linskill remembers. "We were looking at our website and decided that we wanted to redo it."
The goals for the redesign were clear. The new site had to be easy to update, and it had to work well across a variety of devices – smartphones, tablets and desktops.
"I wanted people to be able to go on whatever device they want, and I wanted it to be simple for them to use," Mr. Linskill says. "We wanted you to be able to go on your phone and not have to pinch and grab things to be able to read it."
"To achieve this, Mr. Linskill decided to pursue a strategy called "responsive design." It's a design philosophy gaining popularity in web development circles, and one that offers many potential benefits to small businesses.
Responsive design is a "write once, run everywhere" style of building websites. Rather than building separate sites for each type of device you want to target (one for smartphones, one for tablets, one for desktops), you can build a single website that intelligently adjusts its layout and features based on how it's being viewed.
New technologies and web standards like HTML5, CSS3, and media queries allow websites to better understand *how* they're being viewed, and adjust themselves accordingly.
For example, if you view Zync's homepage in a desktop browser, you get a standard three-column layout. View it in portrait mode on a tablet, and the third column disappears, leaving more room for text.
Switch to a smartphone, and the site shifts its layout again – this time, it's down to a single column, with more finger-friendly navigation and a prominent "Find Us" icon near the top – the idea is that, if you're mobile, you're more likely to want directions to Zync's offices.
But behind the scenes, there's only one set of device-agnostic Web pages. No separate mobile site required.
For Mr. Linskill, a single set of pages makes updating Zync's site easier – a distinct improvement over its previous site.
"It was a real pain in the butt," he says. "We wanted something that pretty much anybody here, designer or not, could jump on and update."
Ethan Marcotte is the Web designer who coined the term responsive web design in 2010. He's also the author of a book on the same subject., and was part of the team that recently redesigned The Boston Globe's website to be responsive.
Mr. Marcotte says that, in part, responsive Web design is a response ("no pun intended") to the ever-growing number of devices that developers and businesses are expected to support.
With such a wide variety of mobile devices, screen sizes, and hardware features, designing a separate version of a site for each quickly becomes impractical. Instead, Mr. Marcotte argues, businesses should consider a responsive design, with flexibility at its core.
"Every responsive design begins with a flexible layout that doesn't make any assumptions based on the size of your screen or the size of your browser window," he explains.
This approach is markedly different from the traditional way of doing things: designing for desktop browsers first, then shrinking things down for mobile.
Once the basic layout is established, layers of enhancement can be added on, so the site can best use the available screen space, or take advantage of hardware features, like touch screens.
"At the core, responsive design is about making your content and design accessible to a wide array of screens and browser sizes," he says.
Mr. Marcotte sees a strong relationship between responsive design and a "mobile first" Web strategy. "Mobile first is about figuring out what your core set of information is, what's most valuable to your audience, then designing up from that, enhancing the experience based on the capabilities of what people are holding in their hands or what's sitting on their desk."
For businesses that design responsively, Mr. Marcotte says, "mobile doesn't have to mean less."
For Zync's Mr. Linskill, designing a responsive site is a way of extending the life of his company's website design. As new mobile devices come onto the market, additional enhancements can be added to the basic layout, without requiring a complete redesign.
At a time when businesses can reasonably expect to get three to five years out of a website design, Mr. Linskill says, "we built [our site]in a way that, hopefully, it'll last us longer than five years."
Right now, responsive design is not yet a mainstream technique. Not all Web developers have the skills to build responsive websites. But if your business is planning a Web revamp soon, and you want to avoid siloing users into "mobile" and "non-mobile" experiences, responsive design is an approach worth exploring.
To test your own site for responsiveness, or see what it looks like on a variety of screen sizes, you can use tools like responsive.is or responsinator.com. If you're looking for inspiration, mediaqueri.es is a showcase of responsive Web design.
Special to The Globe and Mail
Other stories can be found on the Web Strategy section of the Report on Small Business website .
Join The Globe's Small Business LinkedIn group to network with other entrepreneurs and to discuss topical issues.
Our free weekly small-business newsletter is now available. Every Friday a team of editors selects the top picks from our blog posts, features, multimedia and columnists, and delivers them to your inbox. If you have registered for The Globe's website, you can sign up here. Click on the Small Business Briefing checkbox and hit 'save changes.' If you need to register for the site, click here.