Young woman using a smartphone.Thinkstock
A few years ago, building a mobile-optimized website went something like this: Take your regular-sized desktop site, and squeeze.
The result was mobile websites that were hobbled versions of their bigger, better desktop counterparts. From a design standpoint, mobile devices were second-class citizens.
Today, Web developers are turning that process on its head.
Spurred on by the growing popularity of smartphones and tablets, an increasing number of businesses are building mobile-optimized sites first, then scaling things up for laptop and desktop visitors.
Earlier in this Web Strategy series, we looked at why a "mobile first" strategy is worth pursuing now, and which types of businesses benefit most from going mobile. This instalment offers a look at some guiding design principles that businesses should keep in mind when adopting a "mobile first" website strategy.
Keep it concise
It seems obvious, but size matters.
"Mobile devices, by virtue of being mobile, have to be portable. They have to fit in your pocket or purse," says Luke Wroblewski, a Silicon Valley-based Web design strategist, entrepreneur, and author of Mobile First
"As a result, the screens are very small," says Mr. Wroblewski, who co-founded Bagcheck, which was acquired by Twitter Inc.
For example, the average smartphone screen has about 80 per cent less available space than a standard desktop Web browser. To get a sense of the difference, try testing your existing website with a tool like Google's GoMoMeter. Designing for "mobile first" means making important decisions about what to include, and what to leave off of a smaller screen.
"The sheer physics of it require you to rethink what's really important on a site," says Mr. Wroblewski, who thinks smaller screen sizes should be seen as a positive design constraint that can benefit both mobile and desktop design. If your mobile site includes simple navigation and minimal clutter, those same principles can be applied to your desktop site as well.
Rather than shrinking your existing desktop website to fit a smaller screen, designing a mobile site from scratch should involve a winnowing process. Mr. Wroblewski suggests distilling your mobile site down to features and content that "provide immediate value to your customers, and ultimately your business."
In other words, your mobile site should focus on the things that make you money.
Make it fast
On the mobile Web, milliseconds matter.
"Study after study shows that hundred-millisecond delays in the loading of Web pages can cost companies huge amounts of revenue and engagement," Mr. Wroblewski says.
Indeed, in 2009, Forrester Consulting found that "40 per cent of consumers will wait no more than three seconds for a Web page to render before abandoning the site."
Speed is especially important for mobile visitors who go to your site over a Wi-Fi or cellular data connection. These connections, though ubiquitous, aren't always as reliable or robust as the high-speed, wireline network connections in homes and offices.
Free tools like Yahoo's YSlow and Google's PageSpeed can analyze your mobile site and suggest changes to improve speed.
Designing for speed on mobile devices can pay off on the desktop, too. "If you make it fast enough for mobile, it'll be blazingly fast on big pipes on a desktop," Mr. Wroblewski says.
Make use of expanded capabilities
Mobile devices often have hardware features that aren't present in most desktops and laptops – such as GPS, accelerometers, gyroscopes, and touch screens.
Increasingly, mobile browsers are gaining access to these hardware features through Web standards like HTML5. Depending on the device, your website may be able to make use of a user's camera, GPS location, or other information like device orientation.
When used effectively, these additional features can help you build a mobile experience that goes beyond the point-and-click paradigm of desktop Web browsing. When your website becomes location-aware, or can understand how a user is holding a device, it becomes possible to create richer, more engaging mobile experiences.
However, Mr. Wroblewski cautions that support for these types of hardware features varies significantly across devices. Just because a smartphone has GPS functionality doesn't necessarily mean your website will be able to make use of it ( Mobilehtml5.org has a useful rundown of mobile devices and the capabilities they offer to websites).
"The devil is really in the details there: testing to see if a capability is available, and making sure it runs smoothly," Mr. Wroblewski says.
Think like a device
The "mobile first" design strategy represents a significant departure from the past two decades of Web development. Smartphones and tablets fit into our lives in different ways than laptops and desktops, and developing for them requires a different kind of thinking.
For Mr. Wroblewski, a successful "mobile first" strategy requires a deep understanding of the devices themselves – "understanding the circumstances and the environment of use, understanding the capabilities of these devices, and understanding their constraints," he says.
Armed with that understanding, "you can start to think like one of those devices."
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.