Most Important Mobile Optimisation Principles
Even though responsive design is much better than having to pinch and zoom all the time, it still isn’t an ideal experience for mobile visitors. Responsive design will make your site look good on mobile, but it still does not address the specific needs of mobile users.
Call To Action Buttons
Like on desktop, your call-to-action buttons need to be obvious and easy to spot. Since the screens are smaller on mobile, you don’t want to overwhelm users with multiple CTAs. To start, think about the goal of your landing page, this could be getting new subscribers, get users to buy something, get downloads, etc. The most important thing is to make your CTA focus on that primary goal and nothing else. Taking advantage of this will give you an edge over your competition because more than half of all websites have CTA buttons that are hard for users to spot.
Easy To Find Customer Service
Even if you put in the work and get your mobile web design to near perfection, people will still have some questions. This is nothing to worry about and it’s perfectly normal. When there is a problem, the key is being able to quickly help your mobile visitors solve their issues. The first step would be to have standard customer support information clearly displayed on your mobile site. This includes support email address, phone number, and social media profile links. Anything that gives the user a way to contact support from your company will be helpful.
A good way to see how you can do that is to simply put yourself in the shoes of a mobile user who may have a question about something. Try browsing your website from a mobile device and see if you can quickly and easily contact support. This is crucial because if a user can’t reach out and get an answer in a short time period, they will most likely leave and they’ll have a bad impression.
Forms Should Be Kept Short
Take a look at all the forms you have on your site. On a computer, having a longer form is not a problem because it is much easier to type on a full-size keyboard and navigate around on a big screen, but this isn’t the case when a user is on a mobile device. On mobile, you should definitely keep your forms as short as possible and remove any lines that are not absolutely necessary. One example would be your email list opt-in where it is not necessary to ask for their phone number of home address. Also, GSP is usually accessible so don’t ask someone to manually populate their city, state, and ZIP code if you can prepopulate it for them. It is no wonder that a long and complicated checkout process with too many fields to fill in is in the top 3 reasons for shopping cart abandonment.
Mobile screens are a lot smaller than desktop screens and you should keep this in mind when you’re designing your menus. It’s totally fine to have an extensive menu with lots of options on desktop but this would be an overkill on a small screen. You don’t want mobile users to have to scroll and zoom in order to see all the navigation choices. Keep everything on one screen without the need to scroll and this will really help with the conversion rate.
In the case of e-commerce websites, we can notice that mobile shoppers expect to be able to sort and filter listings to their liking since it’s harder for them to read a long list of items on a smaller mobile screen. On the desktop, vast filtration options are an asset but on mobile, it’s a hassle. The same way you prioritise the text on a page, you must also prioritise your menu items and filtration options.
Size Is Very Important
Everybody knows how simple it is to use a website from a desktop computer. You have your mouse for controlling a cursor and a big monitor so it’s easy to navigate around and find what you need. But browsing with your thumb on a small 4-inch screen isn’t as easy. For example, buttons need to be large enough so users can tap them with a finger but you should also keep enough space between buttons so users don’t accidentally tap the wrong one.
75% of mobile users use their thumbs to tap on the screen and interact with the site. Studies have shown that people hold their phones in one of three basic grips as shown below:
We know from our phone habits that we change grips frequently but in most cases, we are using our thumbs to tap. There is something called the thumb zone and while a thumb can sweep most of the screen (depending on the screen size), only a third of the screen will be an effortless territory. The green zone on the image below is the most accurate region for one-handed users and you should avoid the red zone in most cases if you can.
Don’t Use Pop-Ups
Everyone dislikes pop-ups as it is because they are really annoying and can degrade the user experience. This is even worse on a mobile site because pop-ups are difficult to close. The small “X” button on the top of the pop-up is usually difficult to tap so in a lot of cases users won’t be able to close the window. This can also lead to them tapping the ad while trying to close it which will take them away from your website.
They will also try to zoom in and position their screen on the close button to make it easier to tap it but then their screen will get messed up and it’s a hassle overall. If you have something that you want to advertise to site visitors, then find another way to promote it.
Make It Fast
One of the best ways to increase the site speed is to serve images that are optimised for mobile. The mobile web is significantly slower than cable internet so you need to work on stripping down the heavy media files that exist on your desktop site version (e.g. videos). Mobile device resolutions are very fragmented and range from 240×320 to 2560×1440 or above. Consider that mobile devices who are using a 3G network are still behind in download speeds and that a lot of mobile users pay plenty of money for bandwidth use.
When you take all of this into the account, you will see that it’s crucial to resize and optimise images to best fit mobile devices and their resolution and aspect ration. This will save your mobile user’s lots of bandwidth, significantly reduce web page loading times and increase their browsing experience overall.
Google’s research has shown that it takes 22 seconds for the average mobile page to load. On the other side, 53% of people will leave a mobile page if it didn’t load within 3 seconds. Needless to say, the average mobile page is terribly optimised and not meeting mobile user’s expectations. Site speed doesn’t just affect the bounce rate, it affects revenue directly. No matter what, faster is always better and removing unnecessary elements from the page is always the best.
Google says that 30% of the pages it analysed could save over 250KB by compressing images. You can use their “Test My Site” tool which will analyse mobile page speed and mobile-friendliness and give you benchmarks that you can use to compare your results with.