Responsive design vs. mobilized sites
Which is best for reaching your website’s mobile users?
When it was predicted that smartphone sales would triple PC sales back in 2016, it seemed like a bold prediction. Today it comes as no surprise that companies are rushing to provide mobile-device-friendly access to corporate websites as their first priority.
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?
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
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.
Responsive 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.
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.
“A responsive site will let us adjust the view of the site to reflect the browser window width. Future capabilities may include different rendering for night-versus-day, and reflecting bandwidth and resolution availability.” – Tommy Landry
Mobilized websites
As the name implies, a mobilized website is designed specifically for mobile devices — in particular, smartphones.
If your goal is just to display and show content, I suggest a responsive or mobilized website. If your goal is to show productivity tools, build an app.
“The smartphone user often wants/needs a completely different experience. 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.” – Prasant Varghese
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.
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 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.”
“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.”
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.”