By now you should have a website that is made for people to view on handheld devices like mobile phones. But you’d be surprised just how many sites aren’t. What, then, are the most important factors to nail down on your mobile website?
We’re quite a few years into the mobile internet now. We’ve had iPhones for a good decade and Android phones for just a little less than that. So mobile websites are pretty common now. You might have even redone your website years ago to be mobile-friendly. But seeing that mobile consumption of the web far outweighs desktop consumption of websites, have you considered that you need to ensure that your site isn’t just mobile friendly, but mobile-first?
How to take your mobile-friendly website to mobile-first
• Shorter sentences, using simple language
• Structured writing using bullet points
• Make your articles or blog posts short and to-the-point
• Keep images small in file size
• Make you whole design light and fast
Shorter sentences and simple language
First up, mobile websites are not the place for people to linger longer than they need to. Apart from social media and streaming services, use of the internet on mobile devices is designed is short and intentional. When you’re looking on a website on a mobile device, you’re looking for information. And you want that information delivered quickly.
One way to help your reader find the information they need is to serve it up quickly. Short sentences get them to-the-point faster. If you’ve ever clicked on one of those “list” articles that show you the “Top 10” of something, you will probably skip all the intro text, and dive straight into the list. The writers and journalists on those sites love words. And they love to fill up space with as many words as they can. Which is why journalists are terrible marketing writers. They want to tell a story, so you’ll stay longer on the page. The reader just wants to get to the point and move on.
How do you keep sentences shorter?
• Use simple language. Simple language uses shorter words that make more sense to more people. No one is impressed by your use of the word “receive” when you could use the word, “get.”
• Limit yourself to a max of 20 words per sentence. Short sentences are easier to follow. That’s because they tend to deliver one idea per sentence. And that makes your points easier to remember.
• Limit your paragraphs to dropping in just one idea at a time. This gives your reader a mental pause between one idea and the next.
Structure your text
The way you structure your words will make a big difference for how easy it is to read on a mobile. Breaking your information up using Titles and Subtitles, or in website terms, H1s, H2s and H3s is vital. Subtitles let your reader to skim your most important points, before committing to read the whole thing.
Using bullet points to list your main points can speed up reading time. And it throws great data at Google to better index your site. Important info and instructions are often shown in bullet points or numbered lists. Google know this, so they will prioritise the listing of this kind information. Organised info beats long-winded articles every time. Particularly on mobile.
Why are lists important in articles?
• Just like shorter sentences, they deliver one idea at a time
• Lists provide a mental pause from one point to the next
• Lists provide a place for eyes to land on when you are looking for information
• Lists are commonly used to deliver basic information in news articles
• Numbered lists often show a process or a priority list of important tasks
In addition to lists, breaking up your writing with titles will assist your reader to scan your article in the same way that they will scan a newspaper or magazine for headlines. We use headlines to decide what information is interesting or vital. Especially when we’re faced with what looks like a long, boring article.
Keeping your articles short
While we’re on the topic long, boring articles, please keep it short and to the point. Unless you’re writing for an academic audience, there is no need to deliver long-winded articles. That’s the theme of everything you do to make a website mobile-first. Keep it short. Small screens don’t have a lot of space to show long articles. Short articles make it easier to get the info you need, fast.
Go easy on the images
Big pics and busy photos are public enemy #1 when it comes to slowing down websites on all devices. On mobile phones, your big photos are wasted anyway. Designers like to use images to break up long articles. But, if you’re keeping your paragraphs short and your articles nice and lean, then you’re not going to need all those pics.
But if you simple must have some photos and images on your site, you can do a few things to stop them slowing you down.
How to stop images from slowing your website down
• Black and white photos load faster than colour
• Limit yourself to one image per article
• Load less photos on the mobile version of your site
• Reduce the file size of each image by editing it before you load it up
• Resize your pics to be no more than 800 pixels wide
A leaner, lighter design
The most drastic way to make your website work better on a mobile phone might be to start again. That’s a slap in the face if you’ve just done that recently. Bear with me here though. Web designers like to design. They like their fonts, their images, their colours and their layouts. And they do all that on a big screen computer. After they’ve created a beautiful desktop design, they try to scale it down to something workable on a mobile phone. More progressive designers will actually design a website for a mobile phone first. Once that’s right, they’ll then scale that up to a bigger screen.
I like working with designers that take the second option.
How do you design a website for mobile-first?
• Use buttons instead of links
• Keep titles shorter
• Reduce the size of the text in your titles and subtitles
• Use some whitespace to break up your text, rather than images
• Put your title at the top of the page, rather than after an image
The good news is that most of you won’t have to redesign your whole website. Most of the tips earlier in the article will already make a big difference to your site. The main points you need to action to be able to make your website better on mobiles are:
• Short sentences with using simple language
• Structure your articles with headings, sub headings and dot points
• Limit the number of images on the page. Aim for just one, if you can
• Keep the file size of those image as low as you can go
• Keep the page design light so it loads fast