I don’t know about you, but most evenings I find myself sitting on my couch watching television while I use my smart phone to surf the Internet. When I’m out for the day, I also often find myself using my phone to search Google. Then there are the times during the day when I just want to get as far away from my desk as possible and grab my tablet to catch up on some of the blogs I love reading.
In each of these cases, I’m not accessing these websites on my desktop; I’m using a mobile device to access these websites. Over the past decade, this has become increasingly the case for web users. In fact, according to StatCounter, between October 2016 and November 2016, global mobile phone usage surpassed global desktop usage.
On average, 40 percent of people visiting a website on a phone or a tablet will leave if it doesn’t load within 3 seconds. Additionally, website visitors are five times more likely to leave your website if it isn’t mobile friendly!
What does mobile friendly mean?
When the term “mobile friendly” is used, it typically means that a website can be viewed easily on a smartphone or a tablet. The website is either using a completely separate design for mobile devices, or the website uses responsive design–which means that elements will shift, rearrange or hide (or be shown) depending on the screen size that is being used.
A mobile friendly website design is only the first step to helping people easily access your content on a smartphone or tablet; from that point on, it’s a continuous process to keep your content as mobile friendly as possible.
[bctt tweet=”A mobile friendly website is only the first step to helping people easily access your content on a phone.” username=””]
But how do you keep your website content mobile friendly? I’ve got 5 tips below that I use on a daily basis to keep my website mobile friendly.
Always Remember That Visitors May Have a Slow Connection
This is the most important thing that you want to remember when you’re adding any new content to your website. Not all of your visitors may be using a high-speed wifi connection—they may need to access your website using data. This means that you want to keep everything that you add to your website as small (in file size) and fast-loading as possible. This could mean:
- cutting down on the plugins that you’ve installed
- using text content instead of PDFs or images
- hosting videos on a service that specializes in videos (like YouTube)
- avoiding imagery that’s larger than it needs to be (more details below)
[bctt tweet=”Not all of your visitors may be using a high-speed wifi connection. Surprising, but true!” username=””]
I’m not saying to keep your website content to the bare bones, because we all know that great visuals will help grab attention–this means to avoid going overboard with anything that’s not text on your website.
Format Copy so it’s Easy to Read
People who are reading your content on mobile phones or tablets often skim what has been written. In order to best engage them, you need to make it as easy as possible for your content to grab them, and make it as easy as possible for them to look over it quickly while still getting the idea that you’re presenting. This means that you may need to change how you write or format your content. In general, you can best format your text for mobile devices by:
- using short paragraphs and short sentences
- using lists and point form
- using headings frequently to highlight content areas
- keeping page headlines to 10 or less words
- keeping the most important content at the top of your page
Optimize Images
I will admit that I’m guilty of doing this when I’m in a rush–uploading a large image and using the inline editor for my website to resize the image visually. Unfortunately, this doesn’t resize the actual file size–the full large photo that you uploaded will still need to load when you view the page the image is on, and can mean using more bandwidth than needed. Instead, before adding images to your website, you should take the time to resize images in external photo editing software (like Photoshop or Canva) to the size that you will actually be displaying them.
After resizing your image in an external photo editing software, compressing and optimizing your image can help it load even faster. A tool like TinyPNG actually doesn’t even lose any quality in the image when it’s being compressed.
[bctt tweet=”On average, 40% of people visiting a website on a phone will leave if it doesn’t load within 3 seconds.” username=””]
Use White Space
White space (also called negative space) is a website’s best friend. It’s the area that contains absolutely nothing, and helps balance all of your content, draws attention to the most important parts of your content and makes your content more readable.
Oftentimes, site owners will try to add as much content as possible to their website, getting rid of the majority of the white space, but this actually makes your content less mobile friendly! Some areas you can typically add more white space to include:
- the margins and padding around elements
- paragraph and heading line height
- the area surrounding important calls to action
- between letters in high impact headlines
Remove Distractions
Mobile visitors get distracted very easily–a great way to keep content mobile friendly is to remove any distractions on your website. While they can work great on the desktop, they can lead to your mobile readers’ attention being diverted to something that you don’t really care whether you communicate to them immediately. Some potential distractions include:
- popups
- sidebar content
- opt-ins
- slideshows
- auto playing videos
Don’t Forget to Test!
When you are getting ready to publish any new content on your website, don’t forget to test it to see how it looks and functions on mobile devices. Use your own devices, or run your content through Google’s handy mobile testing site to make sure that it is in fact mobile friendly.
Once you’ve started making these tips part of your content creation process, you’ll be well on your way to keeping your content easy to access and read for any of your visitors who are on smartphones or tablets!
Courtney is a web designer, front-end developer and the creative director at MoonSoar Services. With over a decade in the industry, she loves working with people and small businesses to help them create beautiful websites that convert visitors into clients. You can follow her on Twitter at @moonsoar.
