April 29, 2013

4 Mobile Design Strategies for Content-Heavy Websites

You’re redesigning your website. Of course you want it to look as good on a mobile device as it does on a large screen. But do you need an app, too?

For most organizations, a responsive website is more than sufficient. But, there are some things that a mobile browser just can’t do. Here’s a quick breakdown of four approaches and key considerations for mobile design.

Responsive Design
Responsive Design is a technique where a website’s layout and elements automatically shrink, stack, and expand to fit the space they’re in, all through the HTML/CSS. Once the upfront effort of defining breakpoints and handling navigation is complete, responsive design is very low-maintenance. Responsive Design works best for sites whose contents are relatively simple and consistent. Tabular data, dynamic infographics, data visualization, and complex user interfaces can be problematic, however, and if your site has lots of rich media or special features, it can be difficult translate them to small screens with responsive design alone.

Responsive Design offers a great way to give a relatively customized user while maintaining the same back-end code base. It offers an experience that’s specifically formatted for, and can be slightly customized for, mobile devices, while making long-term maintenace easy, since there’s only one back-end to maintain.

Mobile Websites
When Responsive doesn’t cut it, a completely different version of a web page can be served to mobile devices. For example, you may have a very graphic-heavy, media rich page that works well on a desktop, but takes forever to load on a phone or just isn’t readable on a small screen. By creating a mobile-specific site, you can deliver a more streamlined version that loads faster and is easier to digest for someone on the go.

Mobile-specific sites are a great way to create a fully customized experience to mobile audiences, because you can modify features and functionlity along with your HTML/CSS to deliver exactly what you want. The main downside is cost—both in initial development, and ongoing maintenance of a separate back-end.

Hybrid Apps
Development tools like PhoneGap and Titanium allow programmers to package up web content and treat it like an app. Why would you want to do such a thing? Well, the most common reason is that apps are available offline, allowing your audience to browse content even when they have no internet connection. If some of your content is exclusive and you want to charge for it, or even if you just want the marketing benefit of having a presence in the iTunes store, a hybrid app may be a good choice.

On the downside, a hybrid app won’t operate as efficiently as a native one, and in many ways will still feel like a browser experience when the user may be expecting something that feels more like their mobile device’s native controls. Since it’s effectively a website masquerading as an app, you won’t be able to make direct use of the hardware, like the camera. So if you feel you absolutely need a dedicated mobile app, a hybrid approach offers you some of the benefits, with lower costs.

Native Apps
Where hybrid apps have a wrapper sandwiched between the content and operating system, native apps run directly on the OS. This makes them faster and more efficient, and generally creates a more seamless experience for the user. Native apps offer the greatest potential for device interactivity, such as interfacing directly with GPS and SMS functions, as well as pre-installed apps like the address book, calendar, music player, and so on.From a mobile perspective, in many ways, the holy grail. Everything you’d like a mobile experience to be for your audience, leveraging all the built-in technologies devices have to offer. From a cost perspective, potentially the least efficient approach if your interactive strategy also includes a separate site.

Still not sure what the right parth for you is? Every situatioon’s is different, and there are plenty of other factors and nuances to work through. I’ve created the decision tree below to help you think through the basics. Of course, at some point, it makes sense to speak with an experienced design & development partner to help you weigh the pros and cons of each approach.

MSDS mobile design decision diagramMSDS mobile design decision diagram

This article originally appeared at http://ms-ds.com/mobile-strategies-organizations-large-content-heavy-websites, and is re-printed here with permission.

Like what you're reading?
Sign up to receive the latest articles and updates on nonprofit tech from NTEN and its community of experts.

Subscribe

Niki Hammond
Niki Hammond is a Technical Strategist and Project Manager with over 15 years of web application design and development experience. She’s worked in the publishing, financial services, retail, education, advocacy, and non­profit sectors with organizations like Union Bank of Switzerland, Columbia University, Girl Scouts of the USA, Catalyst, the Washington Institute, and dozens of NPOs of all sizes. Her superpowers include team leadership, jargon­to­human translation, and aligning technology outcomes with strategic business goals.
Interest Categories: Mobile, Websites
Tags: Mobile, website redesign