How to Decide Your Mobile Web Strategy

What is the one thing you never leave home without, that you carry around with you all the time and keep within reach even when you’re asleep?

For me, it’s my smart phone and I’m guessing it’s the same with most of you. The growing attachment we are developing towards our mobile devices (and wearables) is apparent. Having a strong mobile web strategy should be an integral part of future proofing your web designs and sites.

The first thing that comes to mind when we hear “mobile web”, is responsive design and the plethora of tools and frameworks that make it possible. Some simply scale down the desktop site. That’s not a mobile web strategy. That’s a band-aid, a stop-gap arrangement to make the best of the situation, with the least effort. But this misses the whole point of mobile – delivering an exquisite user experience, on the go. It’s time to move the focus of mobile web strategy away from responsive web tools and back to users.

Key differences between Desktop and Mobile

The first step is to understand that mobile devices provide a very different user experience than desktops. They serve a different purpose. Some of the ways a smart phone experience is different from a desktop experience are:

• It’s a ‘personal’ device. Few people share a phone. And the small screen assures that anyone peering over your shoulder won’t be able to figure out much!
• It’s meant for easy, instant access. Which means people would ideally want the web page to load ‘instantly’ or at least, much faster than on desktops. Mobile users won’t navigate a 3 layer deep menu. If they can’t get to the content in 2 touches, it doesn’t exist.
• It’s meant to always be connected. Either through a data plan or wifi. Which means unless your user is on an unlimited data plan, mobile users will be wary of the size of downloads.
• Primary mode of interaction is touch. Not mouse clicks. And perhaps the primary mode may soon change to voice.
• Screen real estate is limited Compared to desktop, this leads to different viewing and usage patterns.

For more detail, read this research that highlights aspects of the mobile user experience contrary to what we learnt during the desktop design hey-day. Tomi Ahohen has been calling the mobile the 7th mass media and shares 8 unique abilities that make mobile experience different from any other form of mass media that came before. Basically, you can’t blindly carry over web design principles from the desktop to the mobile space.

Don’t just scale down your desktop site

As you can see from the list above, the usage model for mobile devices is different to what we’ve been used to while designing for the desktop. The common approach of scaling down your desktop site for mobile devices defeats the essence of mobile access. The mobile context offers its own unique opportunities. You’re selling your clients, and yourself, short when your design ignores them.

Responsive web design serves the same HTML to all devices, using CSS to change the way content is displayed. But that doesn’t work well for mobile devices. As an example, HTML markup decides the order in which the web page is rendered. On a desktop, you want the menu at the top, easily visible and accessible, so that the user can navigate easily. On a mobile device, being able to see and access real content first beats being able to navigate to other pages. So you don’t want to load your menu first. It’d be better to have a collapsed or simplified menu at the bottom of the screen.

Take media. Even if you use CSS or JavaScript to resize images, usually you end up loading the larger image first and then scaling it down. The larger (unnecessary) download adds to both user data consumption and to overall page load times. Both of these are at a premium on mobile devices.

Focus on the User Experience

Instead of starting your mobile web strategy thinking about the tools you have at your disposal to scale down a desktop website or make it responsive. An alternative approach (in my opinion, better) is to start your mobile web strategy by focusing on your users, and exactly what you want them to take away with them when they visit your mobile site.

Consider breakpoints. They form the basis of RWD and determine which layout, content and so on to load, based on properties of most common devices. But is that really the right way to go? Again, the problem with this approach is that it focuses on mobile devices. Not on the people using them. Instead, why not choose logical breakpoints based on how you want the user to experience your site?

Map out how you want them to interact with your site, what you want them to experience at each stage and the overall feeling or message you want them to leave with. Perhaps these are all elements of good design, but then, they often get lost when we approach mobile web design from the technical aspect rather than from the user’s perspective.

Web app vs Responsive Site / Separate mobile site?

Once you’ve decided how you want the mobile web experience to be, then figure out the tools. This would be the right time to explore the options – should you go for a native web app, should you make a responsive site, or do you need to create a separate mobile site? They each have their own pros and cons, and you need to decide based on what’s best suited for your users.

A responsive site is easier to manage – a single URL and a single design across all devices make it easier for your users to remember and access and for you to maintain. Desktop and mobile both leverage a common set of SEO and marketing efforts. Making one website is definitely cheaper than making two or more (to suit different mobile devices). But then your mobile experience may not be optimal for conversion, it may take longer to download and perhaps not render properly across all mobile browsers. Here are some situations where responsive sites are not worth it.

You could avoid all the issues above by creating a separate mobile site, but then you’d have to create and maintain two separate sites and URLs and perhaps separate SEO and marketing efforts. But hey, you’ll have a website ideally suited to your client’s mobile vision and geared towards improved conversions.

Native apps are also incredibly popular. There’s an app available for almost everything. Apps are instantly available and easier to access than websites. But they do cost extra to develop and maintain. They’re also not universal across mobile devices – you’ll need to port it for iOS, Android and any other type of device you want it to run on.

Ultimately the decision should be based on which medium best serves your client’s business. This DesignModo article may help you take a better call.

Structure the content right

Showing a subset of your desktop content on a mobile device, is not going to work. People are fluid about their device choices. Users may often choose a handy mobile device to do something rather than walk over to their laptop on the table across the room. They may use their tablet to capture important notes during a meeting, or in an early morning haze propped up in bed. Your focus while deciding on content should ensure you deliver the right user experience. Not simply deliver pared down content for the mobile user. That’s the poor man’s content strategy.

A responsive web design won’t fix your content problems. And neither will a separate mobile site.

Design has come a long way from the laser printer days when we put everything neatly arranged from left to right across the page. Since then the F-pattern has become the predominant design layout with the Z-pattern coming in a close second. Heat map studies abound, showing the best ways to position content on your page for better conversions. Since all of this is so pervasive and deep set in our minds, we assume the same holds true of mobile web sites. Think for a moment, in the narrow confines of a mobile screen, does the F-pattern or Z-layout hold? The mobile screen requires a vertical layout. Not the horizontal designs we’re used to. All the more reason for you to evaluate what end goals do you really want your mobile website to achieve. Focus on what’s important – the end user, and your conversions. Structure your content accordingly.

Honestly, there’s no right answer to developing your mobile web strategy. It comes down to assessing your client’s business and how they want to interact with users and then developing a mobile strategy focused on the end user experience. I’d love to hear the strategies and approaches that have worked for you and why you think they did.

Frequently Asked Questions on Mobile Web Strategy