Content Strategy for Mobile Web Design

There’s no getting away from it, mobile internet is not going away any time soon and for those designers that have been avoiding it, now’s the time to face it. Rightly so, many designers are taking the ‘mobile first’ approach to ensure that a mobile site, even if it’s a responsive one, performs to the best of its ability.

In an earlier article, I talked about how best to optimize responsive sites for performance, so I refer you to that one for tips on cutting load times and so on. This time, I’ll be looking at planning the content to address Return On Investment (ROI) and usability.

Responsive or dedicated mobile site?

This is a debate that shows no sign of letting up for the time being. On the one hand, most organizations would choose to have ‘one-size-fits-all’ when it comes to their site. However, it seems that a lot of the argument surrounding responsive is to do largely with cost.

Creating a responsive site that works and performs well while delivering the same content to mobile as to desktop is a tricky affair. It tends to cost money. If a client chooses to stick with his desktop site and have another made for mobile, then it’s likely to cost less than if he’s chosen to go down the responsive route. This is because a responsive site will have to be started from scratch and thus will be a far bigger project.

Future proofing

It’s worth asking the client how long they think it will be before the desktop site has to be changed. A mobile site is going to have to adjust to different screen sizes, resolutions and bandwidths anyway, so why not go the whole hog and have a complete makeover?

The answer comes down to how happy a client is with taking the easy way out and compromising on getting a great design done. This means that the client needs to be aware of the potential cost to business when investing in a design that’s not future proofed.

Talking ROI

When it comes down to it, the majority of business owners understand figures and the chances of them shelling out for a more costly design will come down to providing proof of a return on their investment.

When planning a project this should be at the forefront of the designer’s mind. This means it’s necessary to think about what a less expensive design might cost in terms of lost business.

Think about:

• Presenting a unified brand experience across all platforms
• How quickly technology changes
• Usability and competitor sites
• Landing pages and how CTAs will perform
• How content will be delivered

It’s necessary to show the client that a design for the short term will very likely cost them more in the long term. Consumers these days have certain expectations when it comes to websites, and they are certainly not fussy about heading over to the competition if one doesn’t come up to scratch.

A site that’s slow to respond when it comes to browsing or tapping the screen will have them running for the virtual hills.

Which comes first? Content or design?

So, the question is, is it better to have a clear content plan to work to, or is it better to make the content fit the design? The answer is clearly the former, as without an agreed framework to design around, problems can occur.

When considering content it’s necessary to think about:

• CTA – text or buttons?
• Space – how much do you have to work with and how can it be used efficiently?
• Images – how many will be delivered to mobile devices?
• How can you take advantage of in-built functionality such as calls, maps, geo-location and so on?
• How can you reduce the amount of content for different device sizes?
• What layout is it best to use?
• How will the navigation work?

Once you start to consider all this, it soon becomes apparent that the content will very much dictate the design. Another reason from the client’s point of view is that this content should be able to be adapted for each device. This does away with the need for publishing different content for each platform and from a ROI angle, it will up productivity in the workplace.

That’s one big, long term cost-saving right there.

Content and the UI – Fitt’s Law

As a developer/designer you will no doubt have heard of Fitt’s Law, but just in case you haven’t, a brief overview. According to an article on the MDSN Developer site, Fitt’s Law “can be applied to software interfaces as well as web site design because it involves the way that people interact with mouse or other pointing devices”.

Basically, a person using a mouse to move the cursor will find certain clickable areas easier to click on than others, based on the size of the clickable area and the distance to be covered to get there. The same principle can be applied when thinking about the more personal input device that is the finger.

The further a person has to move the input device around in order to get to the clickable area, the more difficult they will find it. Bearing this principle in mind, it’s easy to see why a user might abandon a site that doesn’t respect Fitt’s Law. If a user keeps missing a clickable target area, they are less likely to stay.

For mobile, more conversions are made with a clear CTA towards the top of the screen and navigation often lives there too. This is because Fitt’s Law tells us that it’s the shortest distance to click and it frames the page nicely, so it’s also logical.

However, if these clickable areas are easy to get to but have very small targets, such as text in the middle of a button, then they are still going to discourage the visitor from staying on the site.

The thumb test

For fingers, the recommended size for a clickable area is 16-22mm, whilst for the thumb it’s 25mm. This is a guideline though and many people feel that it’s just not enough. So try to make them as big as possible; this goes for product links as well as navigation, as people will abandon a sale if they become frustrated.

Try sketching out designs in various sizes and see how much room your own thumb takes up on the clickable area. The visitor should be able to click comfortably with no overlap into adjoining content and one tap should take them to the link.

(Source: MDSN Developer)

For mobile, ensure that clickable areas are clear, meaning that it must be apparent to the user that this is where they click.

CTA

A strong Call To Action on mobile sites is essential and you don’t have much room to play with. One of the most used (and best) for mobile sites is to use a ‘call us’ button. Alongside maps, this is very useful for the visitor, as many will be looking to use a local business when searching.

The simplest CTAs will work the best on mobile, so think buttons, images and so on, and position them near the top of the page.

When it comes to planning content for mobile sites based on desktop models, the delivery is important too. Does the client use a CMS to manage content and are you going to use redirects or media queries?

Common mistakes when it comes to designing for mobile include: faulty redirects, irrelevant URLs/cross linking, unplayable video and more. This means that real world testing is vital to pick up any potential problems that may occur at end-user level.

Design is clearly going to evolve in such a way that designing for different screen sizes and resolutions is going to be standard, in my opinion, although I’m sure some people will disagree. However, it’s still a relatively new approach and it tends to mean taking a more holistic approach to design, looking at the overall needs of the client, rather than individual sites, mobile sites and so on.

Designers who are prepared to put the work in and really get to grips with adaptive design may have trouble convincing clients to part with cash in the short term, but over time they will see that they’re onto a winner.