93% of Internet users surf the Internet on a mobile device every day. That's 3.5 billion people who could potentially see your website on their phone or tablet at some point.
It follows that you should work as hard as possible to optimize your mobile online presence. Believe me, there is nothing worse than having a marketing funnel that is totally ineffective on non-desktop devices.
To give you some tips, I've put together 8 best practices in mobile design that you must follow. They will help you streamline the user experience of your visitors, maximizing the impact of your marketing funnel for any device .
1. Get rid of your navigation bar
On mobile, real estate is a priority – I think of the screen of my iPhone as a map of downtown Manhattan, where each pixel costs a pretty penny. Discover the space that a mobile navigation bar can take.
This means that you have to optimize what you get on your mobile website.
An easy way to do this is to drop your mobile navigation bar.
On a laptop or desktop, your navigation bar can be incredibly useful – it's a simple way for your visitors to browse the pages of your site, allowing them to find exactly what you're looking for. ;they are looking for.
But on mobile, your navigation bar can occupy a ton of space that could be used for text, images or any other content you have on your site or on your landing pages.
Now, you may be wondering how visitors should navigate your site without a navigation bar. There are several ways to get around this problem …
The most popular way is to incorporate a hamburger menu, which allows you to create a much smaller (but still marked) top bar. The hamburger menu acts as a drawer, pulling on the left side of your screen to display the different menu items in your navigation bar.
Or, depending on the size of your web pages, you may choose to create a one page layout for mobile devices. However, unless your site is relatively sparsely populated, this is probably not the best option for your business.
2. Keep important items at your fingertips
Think about the time you spend on your smartphone.
I'm willing to bet you use it often enough – maybe while you're on the bus or waiting in line at Starbucks (or maybe reading this article, now?). Now think about how you hold it. If you are like most of us, you only use one of your thumbs to interact with your screen.
You are not alone: according to a recent study by Steve Hoober, a mobile UX expert, 75% of people use only one inch to interact.
A few years ago, the diagram below was a bible for mobile designers, giving them an insight into how they should layout the content to optimize the user experience for the majority of visitors of the site.
Although the above could have been accurate at the time, things are changing fast (and in technology, even faster). In recent years, our phones and screens have become bigger and bigger … but our hands are the same.
The way we hold our phones has changed – as such, the "hotspots" of the screen have moved, with tactile accuracy that decreases as we approach the outer edges of the screen. ;screen.
Therefore, as designers, we must organize the content in such a way as to put the primary interactions forward and center, saving the secondary and tertiary functions for the upper and lower screen edges.
The position of these functions is directly related to the ease of access for a user. The primary functions are in the area that users can easily access with their thumbs, while the tertiary (and to some extent secondary) functions are in areas of low precision and require a little more work.
3. Optimize and minimize file sizes
You are probably already aware of the importance of optimizing the size of images on your website. They significantly affect the loading time, which has a cascading effect on the user experience and on the ranking of your pages in the search results.
This is doubly important on mobile. Not only are connections less reliable on mobile, but mobile users do not like to wait. This means that if your page does not load quickly, they will probably not stay there to let it finish.
Use a site such as TinyJPG or tools like ImageOptim (Mac only) or Photoshop "Export for the Web" to make sure you minimize the size of your images before uploading them to your website.
There are two main properties that affect the file size:
- Quality : Simply put, quality is exactly what it looks like. Reducing the quality setting reduces the sharpness of your images and increases the risk of artefacts appearing on your images.
- Size / Resolution : Go figure – The actual size of your image has a big effect on the size of its file. Obviously, you do not want your images to be so tiny that your visitors can not see them – but if, for example, the column in which you place your image is 600 pixels wide, your image does not need to be 1000 pixels wide. Resize them to adjust them before downloading.
4. Link telephone numbers and addresses
The optimization for mobile is to streamline the experience of a visitor. It should take them as little as possible.
This means enjoying mobile interactions that will help you make your website (and buy your product or contact your business) a pleasant experience.
If your website depends on sales or if the phone is an important point of contact in your marketing funnel, one of the most important things you can do is to make it easier for people to call.
A simple way to add value to your "contact us" page is to make your phone number a clickable link. Everyone knows the trouble of frantically trading between your phone and browser applications to type in a phone number, or to try to copy it and accidentally copy all the contents of the page.
Trust me, making your clickable phone number makes a big difference .
All you have to do is to link your phone number like this:
And he will appear like this:
123-123-1234
This will allow users to click to call.
In the same vein, you will want to make sure that other important details are also interactive – for example, if you click on your address, the application maps a visitor 's. will open. Although most applications such as Facebook automatically configure it, you can enter your address in Google Maps and copy the Share link to associate it with the address of your website.
These are the little things that help visitors to think that they do not miss anything when they visit your pages on a mobile, and this saves them from having to do extra work.
Simply put, do not let your mobile browsing experience smother your marketing and sales funnels.
5. Design for responsiveness
If you were there during the advent of the mobile Web, you may remember that most websites have created new mobile layouts that would work for small screens of the era pre-iPhone.
These pages often had minimal images and were relatively heavy text to combat slow browsing speeds that mobile users were receiving on their non-3G, non-LTE and non-WiFi networks.
Fast forward a decade or so and the mobile landscape has changed completely. The screens are huge, Internet connections have accelerated and tablets exist.
These advances (and other advances in frontal design languages like CSS) paved the way for responsive and adaptive design .
Although there are nuances between these two types of design, their main purpose remains the same: to create a unique website layout that responds and changes dynamically depending on the device used by each visitor.
Hopefully, the webpage template or landing page editor you use will automatically create a mobile-friendly version as you compile it, saving your designers from creating it manually.
There are a few things to keep in mind when you consider reactivity:
- Image Sizes: If images are important to the content on your page, make sure they are clearly visible on mobile. Images whose width is 50% on the desktop can also appear at 50% on the mobile, and it is too small.
- Page Layout / Order: Depending on how you arrange the items on your desktop page, your content may be poorly ordered when you switch to mobile. Check that all content is in order, even on other devices.
- Animations: Animations that look good on the desktop may not work properly on mobiles. Check them on your phone before publishing your page to make sure they are fine.
- Video: Keeping in mind my previous recommendations regarding file size, consider hiding (or removing) mobile video. It is bulky, heavy and can dramatically slow down your mobile experience.
- JavaScript: Although JavaScript is a wonderful and magical thing, it will not always work on mobile – check to make sure that is the case.
6. Disable pop-up windows
In 2017, Google deployed its penalty for what they call "intrusive interstitials".
In simple terms, it roughly means popups. Here are some examples taken directly from the horse's mouth.
In fact, displaying pop-ups on your web pages on mobile devices significantly harms the user experience because visitors can not access the content they clicked on. To combat this, Google penalizes pages with popups by reducing their search rankings, to discourage people from adding popups to their sites.
The simple solution? Disable mobile popups Seriously – just turn them off.
Apparently, some user-triggered popups like scrolling or click popups are not penalized – but I can not find anywhere that confirms it, so take it with a grain of salt.
If your popup is large enough, add the content as a section on your page, in your content (or even above the fold). This will prevent Google from penalizing the search ranking of your site.
7. Optimizing Mobile Forms
If you have already done some online shopping on your phone, you probably know how frustrating it can be to fill out a form after an endless form.
While the overall mobile typing experience has greatly improved since the days of T9, it's still not perfect. It relies heavily on automatic correction, and can still be very painful on the thumbs.
What's the lesson here? A simple syllogism: long forms require a lot of typing. Typing sucks on mobile. Therefore … long forms suck on the mobile.
If you want to try to minimize the negative effect that your mobile might have on your conversion rates, try making one of the following changes to your form fields.
Reduce the number of form fields on your page
It's simple: reducing the number of form fields that a user must complete significantly reduces the perceived workload, which can help reduce visitor friction.
Although this is not always a viable option – often, form fields are there because they are needed – reducing some of the least needed (surname, perhaps?) Or combining multiple fields form in a single field (first and last name, for example) can make a big difference.
Divide the forms into several stages
Segmenting your form into several steps can help you increase mobile conversion rates.
For example, if you have 9 fields, you might want to put only 3 in the first step. When a user completes these 3 and presses the form submission button, they are redirected to the next page to fill in some additional fields, and so on.
Not only does the conversion on your form seem less daunting at first, but it also allows you to collect information in a little bit about your visitors, which can help you bounce off your form. I recommend that you collect at least one e-mail on the first part of your form so that you can market them in the future.
8. Using collapsible sections / accordions
When your content has been completely reduced to a single column on a smaller screen, it will eventually be much longer.
This is a problem on mobile because it suddenly becomes a lot harder for a visitor to navigate and find what he's looking for.
An elegant solution to this is to use collapsible content sections, otherwise known as accordions.
Accordions are containers containing content; they appear as a header and grow once a user taps on them. This allows your visitors to browse your page to find the content or subject that they are looking for without sifting through a ton of copies and pictures.
You will need to do some front-end work to assemble an accordion, so put your designer or developer on the line!
Wrap it all up
I hope these mobile design tips have given you insight into how you can streamline the user experience for people who visit your website (or landing pages) on mobile.
These are things that are often overlooked, which can lead to significantly lower conversion rates on non-desktop devices.
Follow these tips, and I can guarantee that your mobile visitors will have a better experience with your site, which will make them more likely to convert.
Good luck!
About the author: Carlo is a digital distributor and designer at Wishpond. When he does not create A / B content or test, he likes to make music, drink a good amount of coffee and buy sneakers. Follow him on Twitter and Instagram @carlonathan.