It’s no secret that mobile usage increases every year, and having your website be mobile optimized is no longer a ‘nice to have’, it’s a ‘must-have’. Consumers rely on the mobile web more than ever when it comes to making decisions and purchases. It means that if you’re not optimizing your content and your website for mobile devices, you’re likely not making the most of your traffic. In this article, you will find best practices for mobile design to create a user-centered mobile experience that improves user satisfaction and increases conversions.
Tip #1 Choose how you will design your mobile website
Before building your mobile website, choose how you will design it.
Your options include:
- Responsive web design uses adaptable layouts. It means that content and design adapts to a user’s device automatically regardless of the size of the screen, so the website looks almost the same on desktop, mobile, and tablet devices.
- Adaptive web design uses unique static layouts for devices, which means the website features different designs for desktop, mobile, and tablet devices. Adaptive web design ‘detects’ the screen size and loads the appropriate layout for it.
It may look like adaptive web design requires more work as you have to design separate layouts for at least six widths.
However, responsive web design has its own difficulties and pitfalls.
If you need a quick fix then you can simply choose a mobile responsive theme or template.
This is probably not the best option for an established site with enough traffic but if you are looking for an easy solution then installing a new responsive theme is an easy solution.
If you think you don’t want to do it yourself or none of the team has the necessary skills, we recommend getting in touch with a developer who can help you out with that.
Tip #2 Make your menus simply
When designing menu options, keep in mind that mobile screens are obviously smaller than laptop or desktop screens.
It means that the menu of the desktop version can be more extensive, but as for smaller screens such as mobile ones, a complicated menu will be hardly readable and user-centric.
Users have to zoom in to see the menu on some sites to find what they need.
If your mobile site is the same, it will hurt your conversions.
So make sure everything is concise and fits on one screen.
Tip #3 Use a readable font
When you’ve chosen a font size on desktop, make sure to test out how it looks on your mobile version.
Chances are you may find it smaller than you expect, and you’ll want to bump it up a bit.
16px is a good place to start when choosing a font size for mobile versions.
For secondary texts – like captions, for instance – you can try 13px or 14px.
When choosing a basic size for a website, there are two types of designs:
a. Text-heavy pages
These pages include articles, blogs, news, etc.
The primary purpose of these pages is reading.
So the user lands on the page to read.
Such pages do not invite users to interact much – perhaps just a few clicks.
16px is a minimum for these kinds of pages, and 18px and more may even be a better option.
b. Interaction-heavy pages
Pages that involve clicking, hovering, searching for an item, editing, typing, etc. will work better with smaller text sizes.
The example of an interaction-heavy page is your Facebook feed.
For such pages, 18px text may be uncomfortably large.
If you look at your inbox, twitter, or other apps you use that require interacting over reading, you’re going to find 14px-16px text as the norm.
Double-check not only the font’s size but its readability too. Users shouldn’t guess what’s written on the page.
It should be easy for them to slide down the text and get what they want from the website.
Tip #4 Increase the website speed
Google has been clear about the fact that the speed of the website is a crucial ranking factor.
Slow, or ‘heavy’ websites will lose the competition on the search engine results pages.
So, test your site speed to see how fast your mobile site really is.
There are a lot of tools to measure it. For instance, Ubersuggest is one of them.
If your site’s mobile loading time is 2 seconds, this is an “excellent” score and you have nothing to worry about.
Every additional half of a second that takes to load your site increases the number of visitors that will leave your website.
What can you do about it?
First, compress the images.
When you’re uploading images to your site, it’s vital to compress them, as it greatly reduces the image file size without compromising on the image quality.
When putting videos on your website, host them with a third party rather than embed them on your site.
It means the virtual ‘weight’ of the videos is mostly kept to that chosen website like Wistia, YouTube, or Vimeo, rather than to yours.
Tip #5 Eliminate pop-ups
When used appropriately, pop-ups can work well-increasing conversion rates.
But when it comes to mobile, pop-ups are better avoided.
If you’re sure that pop-ups are crucial on a certain page on your website, make sure to keep them small on mobile.
In general, it’s recommended pop-ups take up no more than 15% of the screen which means staying away from full-page interstitials.
To play it safe, try not to show a pop-up on the first page a visitor sees.
By the first page, we mean the page that a user is directed to by search or a referral website.
Display pop-ups only at the very bottom of a page.
To do this, you could align the pop-up to the bottom of the mobile screen or open the pop-up once the visitor has scrolled all the way to the bottom of the web page.
Make sure your website meets all these requirements
- Can visitors tap all the links on your website?
- Can users use their thumb to read all of a page?
- Is it clear from your home page what your business and value proposition is?
- Are your call-to-action clear and strong?
- Is your most important information at the top of each website page?
- Can you remove images, videos, or other elements that are not really essential?
- Can users easily tap a form field with their thumb?
If you’re not optimizing your content for mobile users, you’re not only missing out on new traffic but also wasting some of your current traffic.
To do this effectively, we’ve pulled up the most important tips to make it easier for you.
Hopefully, they will help you reach more customers and engage them with your company.