Designing for mobile: Responsive design vs. mobilized sites vs. mobile app

Credit: Image credit: flickr/Brandon Carson

Which is best for reaching your website's mobile users?

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.

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.

"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.)

1 2 Page
Top 10 Hot Internet of Things Startups
Join the discussion
Be the first to comment on this article. Our Commenting Policies