Designing for mobile: Responsive design vs. mobilized sites vs. mobile app
Which is best for reaching your website's mobile users?
Image credit: flickr/Brandon Carson
With analyst firm IDC predicting that smartphone sales will double PC sales in 2014, it's no surprise that companies are rushing to provide mobile-device-friendly access to corporate websites.
But you may be selling your business short if your goal is merely to offer a "good enough" mobile experience. "This isn't about 'how do I make my website available to a smartphone?' -- it's 'How do I make my business available in a smartphone context?,'" says John Armstrong, President and founder, Bright & Shiny, a web and mobile app design and development agency.
[ Programmer picks: 7 must-try mobile dev tools ]
There are three main approaches to providing information and interaction to mobile device users: Responsive (and adaptive) web design, mobilized websites, and mobile apps. Which option is best for your business will depend on your use case, your users' habits, and, of course, your budget.
Here, developers, designers, and other mobile experts weigh in to help you decide which approach makes the most sense for you.
Responsive web design
Example: www.pcworld.com
Responsive web design (a term popularized by web developer/designer Ethan Marcotte) means that the site's code automatically susses out key information about the user's device and environment, and delivers a view optimized to take advantage of it. In particular, reacting to the width of the browser window -- not just flowing the text, but often changing aspects of page layout.
Tommy Landry
Depending on who you talk to, adaptive web design is either a subset of responsive design, or a related approach. A responsive design will show more stuff or less, optimized for a mobile layout -- for example, if you rotate the phone between landscape and portrait, it will change the spacing, but not the content -- but is likely to still provide access to the full desktop-view's content. An adaptive design, by contrast, might show very different content, and also present a different UI, reflecting touchscreen's tap/swipe/scroll versus desktop's keyboard/mouse interaction.
In either case, a responsive (and adaptive) web design will be drawing on the same code as a desktop ("classic") site, and will present the same URL at the browser.
[ 7 tools to build websites using responsive design ]
"A responsive site will let us adjust the view of the site to reflect the browser window width," says Prasant Varghese, Technical Analyst, Icreon Tech, a NYC-based web design and development firm. "Future capabilities may include different rendering for night-versus-day, and reflecting bandwidth and resolution availability."
Mobilized websites
Example: m.itworld.com
As the name implies, a mobilized website is designed specifically for mobile devices -- in particular, smartphones.
Prasant Varghese
"The smartphone user often wants/needs a completely different experience," says Jason King, President and CEO, Accella, an interactive agency that designs, builds, and integrates websites and mobile applications. "For example, on the sites we did for VolvoRents.com, the desktop site presents you with the idea of being able to look around, navigate to equipment you might want. The mobile website starts by finding your location, if possible taking advantage of mobile capabilities like information from the GPS, so we can show you where the closest store is."
A mobilized website may share some content and back end with a "classic" (desktop-oriented) website, but will have a lot of its own code -- and is likely to present at the browser with a slightly different URL, like "m.FOOBAR.com" or "mobi.FOOBAR.com". For companies with both desktop and mobilized websites, the code may detect the user's device, and either automatically switch to the appropriate site or offer a choice.
Mobile apps
Example: Southwest Airlines
A mobile app resides on the device, and doesn't require Internet access to run (although it may require Internet access to perform most tasks). Mobile app code may be native code, written (or generated) for each mobile platform (Android, iOS, Windows, etc.), or it can be HTML, CSS, and JavaScript wrapped in an "app shell" using a tool like PhoneGap or RhoMobile -- or a combination of these approaches.
[ 10 top mobile application development platforms ]
(Note, this isn't the same as saving a "web-app enabled" site as an app; that's basically creating a shortcut icon that takes you to that URL in a browser window.)
Aside from the obvious connectivity-dependent things, apps can do some things that websites can't do (or certainly can't do as easily), notes Todd Miller, Managing Director, The Archer Group, a web development firm. "For example, you'd need to use an app to take a picture of something -- your surroundings, a receipt, etc. -- and upload it. Apps also have access to the address book and other core smartphone functions. A mobile site can achieve limited access, including your smartphone's GPS."
Other smartphone features you need an app to access -- or that may be possible but will be much harder from a website -- include accessing the file system and path, and using the compass and accelerometer, according to Justin Smith, Manager of UX Development, thunder::tech, an integrated (online and offline) marketing agency.
When which approach makes the most sense
Your content goals, coding technology/skill sets, budget, timing, and whether you're looking to add alongside an existing system or are ready to rip-and-replace all play a role in choosing responsive/adaptive design vs. mobilized site vs. apps to reach smartphone users.
"If your goal is just to display and show content, I suggest a responsive or mobilized website," says Icreon Tech's Varghese. "If your goal is to show productivity tools, build an app."
"The value proposition is very different," says Bright & Shiny's John Armstrong. "The mobile app may do something very different from their website."
Jason King
That's not necessarily bad, Armstrong claims. "Desktop is about data mining and collection -- 'lean forward,' engage and interact with the content, in 'hunter mode.' Mobile tends to be action-focused -- 'Where am I, what's available, like, say, where's the closest restaurant?' And in a mobility world, our networks and devices can push us relevant content and action. For most classic websites, that doesn't exist."
"Most people don't want to install an app just to get static information," says Michael Freeman, Senior Manager, Search, ShoreTel Sky, a cloud-based hosted-PBX service. "Our website provides information about our products, services and company, and is the main way we generate new business leads."
"You want a mobile-friendly version of your site," Freeman advises, "so that if somebody discovers it from a smartphone or tablet -- perhaps from checking email -- they've got a link that delivers a good mobile experience."
On the other hand, "A mobile app makes sense if you are trying to offer something you want smartphone owners to use on a daily basis," says Freeman. "Another reason to do something as a mobile app is if it requires a lot of interaction, like entering travel expenses."
Money matters
"Building a responsive site is less expensive than doing two sites," says ShoreTel Sky's Freeman. But responsive also "means I do not have to maintain separate code bases or websites, while the look-and-feel and the user experience is consistent on any platform, and any form factor will deliver a good experience," adds Tommy Landry, President, Return On Now, an Internet marketing consultancy. Even better, my team can manage the whole site via a CMS (Content Management System), so we do not need any manual intervention from developers to make changes or launch pages."
While adding smartphone accessibility can't help but push up the development and testing budget, "Our web developers know JScript, CSS, and other web technologies," says Joe Gerard, VP Sales & Marketing, i-Sight, which provides configurable Case Management for Investigations. "Building apps requires a different set of language skills. And developing and testing multiple apps for 100 or more mobile device scenarios would add many times the expense versus building a browser-based application."
The cost difference to serve a mobile as well as a desktop audience?
"For a desktop-oriented website that might cost $30,000 to $50,000, adding mobile adaptivity might add another $15,000 to $25,000," ballparks Icreon Tech's Varghese. "Responsive design would cost more, because there's more work, particularly more testing involved."
Pragmatically, over time, the odds are that more new websites will take smartphones and other mobile devices into consideration from the beginning. "If we do anything, it will start out with responsive design," says Matt Howell, Global Chief Digital Officer, at advertising firm Arnold Worldwide. "There's no project that isn't at least responsive, and from there, we'll ask 'how much more important is the mobile user case?' to consider also doing adaptive design."
"A stand-alone mobile site is usually the least expensive approach, but it's probably a stopgap to going to a responsive/adaptive design," says Archer Group's Todd Miller. "Responsive design will be less expensive to maintain in the long-run. The nightmare of a mobile-only site is that you're designing for specific phones and handsets, while responsive design is more flexible."
"None of this is cheap," Accella's King stresses. "Desktop, mobile web, and apps are all different marketing channels. You have to decide where to focus your development budget.... If you have the budget, do it all. It's like other marketing channels. You should have a mobile website, native iOS and Android apps, be on Facebook, etc. If you're smaller, you have to evaluate on a case by case basis. An app may help you reach out, be a good marketing ploy."
