Fix these issues to prevent visitors from leaving your website
It happens all the time - you open a website on your mobile device and it looks awful. But not only that, when you start navigating it makes you frustrated because the text is not fully visible or you can't press the button that is very small that you need to zoom in to do it. Sounds familiar, right?
According to various sources, around 52% - 60% of internet traffic was coming from mobile devices in 2017. This being said, many website owners still don't pay enough attention to user experience that they subject their visitors to. Remember, just stacking up blocks of content doesn't mean it is mobile-friendly. Using it has to feel as easy and natural as it would using a desktop computer.
Talk is cheap, show me something
Let me show you some examples of what I am talking about. It didn't take me too long to find instances like this.
This first image was taken on a 1000px width device. We can see that menu is not fully visible.
These next two examples were taken on an iPhone 5 in a landscape mode. Images are stretched out.
The blue block under the menu ("Plass the Plumber, Inc.") is taking up a lot of screen space which makes it really hard to see and read content.
Another huge issue with this website is that it takes forever for it to load even on a high-speed wifi connection.
This one, for example, doesn't even have a mobile version at all which makes it more difficult to read content because you have to zoom in/out most of the time.
"If your business isn’t mobile-friendly, your business is dead", – Jonathan Stark
And there are many examples like this on the web. So, why is this all really important, especially for people selling something online or promoting their business? It's because it makes your visitors want to leave your website quickly therefore not allowing them to even find out more about your services or products. So how can you sell something to a person when you can't even present it? You can't.
How to improve it
If this is a big obstacle for my business, what can I do about it? Here are some tips that will make your visitors want to stay longer.
Before we start, I would like to point this out - if your design is really bad and it doesn't focus on making your content presentable, it is not much you can do about it besides making a new one.
Group long content together. It is not uncommon that you open a page that is loaded with content and it takes you forever to scroll to the bottom of it. Remember, blocks usually stack up on mobile because there is not enough width making your page longer (Duh!). Even though it is obvious, people tend to forget about it. Group similar content together - use carousels for images, tabs, and accordions for text content or even move it to a separate page.
Make navbars stay with you. Accessibility is very important on small devices, yet I see this flaw often - navbar is not fixed to a side of a page. How do you want to make your users have a good experience when they have a long page and they need to scroll up all the way to the top to access the menu?
Optimize page loading time. Even though in 2018 mobile internet is really good, it is still not capable to process large chunks of information quickly. How can you make a website load faster?
Use smaller images and optimize them. When you download a beautiful picture from a service like Unslplash or Pexels, remember that it has very high resolution and takes up a lot of space. 4 MB is huge for a picture if you're planning to use it for your blog or gallery for example. Download a smaller size picture and then use services like TinyPNG/TinyJPG to compress it.
Combine your js/css together. Even though it is not always possible, try to combine your css and js files together to minimize the number of requests that your browser has to perform.
Be smart. This is probably the least technical piece of advice here but is the most powerful. Don't pack up your pages with tons of images, videos, audios, etc. Generally, a good rule of thumb is to keep your page size under 2 - 4 MB. Use media files wisely and you'll be good to go.
Make it breathe. It might sound poetic, but everything in nature needs to breathe. Your content is no exception. Increase font size, line heights, margins between headings and text blocks. Also, keep lines of text short to improve readability. Remember, optimal length is around 50-60 characters.
Test it on your own. This one is so obvious, yet not done often enough. Simply test your website on all mobile devices you have access to. Interact with your website, see how it works, check whether it is hard to read a block of text, to fill out a form, to go to another page, etc. Become a user and you'll know what you need to improve on.
I hope this article was helpful. Peace.