This post is a revised version of a post that previously appeared on the Summersault blog, now edited to be more generally useful.
If you've read any kind of article on website development or related topics from the last few years, it almost certainly told you that making your website "mobile-friendly" is critical to its success. Everyone wants their new website to look great and work great, and they want to make sure it's mobile-friendly too.
It's a great goal, but it can also be a confusing one.
Making a website "mobile-friendly" can mean a lot of different things depending on the type of site and the end result you're looking for. Most new websites created these days now have some minimum level of compatibility with mobile devices, but when discussing mobile-friendliness as an interest or when you need to use mobile components to achieve a particular business/organizational goal, there are some details to talk about.
Here are a couple of different interpretations of the phrase "mobile-friendly" when it comes to website development:
- It doesn't break on mobile devices.
The website should look and function on a mobile device the same way it does on a desktop browser or other traditional computer screen. If you can get to a piece of content or fill out a certain form on the site while sitting in front of your computer, you should be able to do the same thing on your smartphone or tablet, even if it involves some more scrolling, pinching, shaking and tapping to get there. - It responds and adapts to mobile devices.
The website not only functions well on a mobile device, it rearranges itself to be optimized for viewing on those devices. If you look at it on a smartphone, the site should present its navigation, content and design elements in a way that are easy to view and interact with on that smaller screen. Maybe this means simplifying the interface, or maybe it just means changing how it's presented, but whatever the result, a mobile user doesn't end up feeling like they're scrolling back and forth across a page that wasn't meant to be viewed that way. - It was designed for mobile devices.
The website and all of its elements were designed to be viewed exclusively on a touch-screen mobile device, taking full advantage of the mobile platform and the features that come with it. The navigation, content and functionality fully expect the user to be on a device with a touch-screen, and perhaps take advantage of other tools like GPS readings, interactions with other mobile sites or apps, and the ability to share or save content for later viewing on other devices. - It's not a website at all, it's a mobile app.
The website is not a website at all, but instead a software application ("app") written specifically for the operating system of the device you're viewing it on (iPhone, iPad, Android, etc.). These applications are the ones that you usually download from an app store, install on your system, and then launch from your phone's menu instead of from a web browser. Sometimes the app might have pieces of its operation that look and feel like a website, and behind the scenes, these apps are often interacting with a website in some form, but the apps themselves are made from fundamentally different building blocks than websites.
Each of these approaches come with their own pros and cons.
Creating a dedicated mobile app (#4) can give your users an incredibly rich and customized experience of your content, but often requires a level of investment and commitment to maintaining a project that is very different from the flexibility of creating a website. Just making sure your site doesn't break on a mobile device (#1) can be a great starting point for an organization not yet sure of its mobile strategy, but may lead to more significant reworking or redesigning of a site when the time does come to incorporate more mobile technologies. And so on.
I'm sure there are further interpretations to be made within and in between even those categories, so by no means is this a complete breakdown of mobile options. But if you're just starting to think about what kind of mobile-friendliness you want your site to have, hopefully this list is helpful.