How addicted are we to our phones?
Well, for starters, recent research reveals that 50% of smartphone users check their mobile phones first thing in the morning. And another study showed that as of 2018, 52.2% of all global website traffic was generated via mobile devices.
This is great news for your brand and website. Consumer love for mobile devices makes it easier for your prospective and current customers to access your website.
But if you want to make the most out of this global love for smartphone usage, you’ll need to optimize your content and website for mobile traffic.
Without optimization, you’ll be losing out on massive traffic. Google has stated severally that it wants to serve its users mobile-friendly websites.
This makes optimization a must, as not only will it help your SEO but it will also boost user experience on your site, which will ultimately reduce your bounce rate.
With that said, let’s see some quick definitions and then how you can optimize your website for mobile.
A mobile-friendly website simply means a site that appears well not just on personal computers but also on mobile phones. That means users can easily click the navigation elements and links on the website, and the text on each page is visible enough to be read.
“Mobile friendliness ensures that visitors can properly consume your site’s content when using mobile devices.”
To know if your site is mobile friendly you can use Google’s free mobile-friendly test tool, which will show you what aspects of your website you should optimize for adequate mobile compatibility.
To do this type in your site’s URL and hit run test
View the results:
or:
Next, click on “page load issues” and scroll down for more details:
You may have probably come across the term “responsive design”. It is generally used to mean a mobile-friendly design; however, that’s a misconception.
There are numerous ways to create mobile-optimized websites, and utilizing a responsive design is just one of them. Responsive designs simply adjust the content of a webpage to the
Studies have shown that 53% of visitors will leave a website that takes over 3 seconds to load. That means you can lose more than half of your traffic if your webpage loads slowly.
Check out the visual below, the bounce rates rise as the page load time increases:
To avoid this and try to keep your page loading time below 3 seconds, you can simplify your design by eliminating heavy images and unnecessary design elements. The first step, however, is to test your site’s mobile speed and Google has the best tool to help you with that, the mobile speed test tool.
All you’d need to do is type in your site’s URL and then click the arrow button:
The tool will then scan your website and analyze how fast it loads on mobile devices:
If you want more information, you can scroll down and see how well your site’s speed does against your competitors, and the number of seconds you could take off your loading times.
Here are a few ways to optimize your site load performance based on the results of the mobile load test:
Use Caching: When you implement caching, most of your website files will be saved on each user’s device, which ensures your pages don’t have to be downloaded every time visitors access a new page.
Go with a Content Delivery Network (CDN): A CDN allows you to store copies of your files in a series of servers that are in different geographical locations instead of delivering them from a single central server. The effect of using a CDN is that your load time would be the same for all users regardless of their location, while cutting down on your bandwidth usage.
Compress Images: Most times large image files are behind slow loading times, so you’d want to reduce their size by compression. By compressing them, you can decrease image size without hampering on quality.
Minify Your Site’s Code: By optimizing your websites Javascript, CSS and HTML code you can shave off seconds from you load times.
When designing your sites menu options, keep in mind that mobile screens are smaller than desktop or laptop screens. Your desktop website can have extensive menus with many options but on a smaller screen, such elaborate menus can complicate things.
You wouldn’t want your visitors to have to zoom in and out or scroll just to see the navigation options. It needs to fit into their screens.
Check out this example from shareaholic:
That’s how the brand’s website menu looked before optimization. Navigation would be near impossible to the user, as they’ll have to zoom out to see their choices clearly or zoom in to see the menu properly.
If this is how your website appears on mobile devices your bounce rate would probably skyrocket and you’ll lose prospects.
Now look at the menu optimized for mobile:
The brand was able to cut down the complexity of the previous menu to a simple menu option. The options fit properly on the screen and the user can easily navigate to their desired page.
Evaluate your website and optimize it’s menu options for mobile visitors. Also, except if you’re using the kind of sidebars in the image below:
Check all the forms on your site for irrelevant lines. If you’re asking mobile users for too much information, it’ll hurt your conversion rates. Rather, ensure your forms are as concise as possible.
When desktop visitors are filling out forms on your website, long forms won’t be an issue, because they’re using larger screens and can navigate smoothly. But with tablets and smartphones, this won’t be the case.
For instance, if you have a form on your webpage asking visitors to subscribe to a newsletter, you don’t need lines on the form asking for their phone numbers and street address.
Forms for sales conversion should not include lines for irrelevant questions. Just ask for shipping and billing address. Data even shows that complex checkout processes initiate shopping cart abandonment:
To avoid frustrated users hitting the back button, optimize your forms for mobile.
53% of websites use a call to action that takes users 3 seconds to identify. That’s way too much time.
For your mobile design to be effective, your call to action buttons needs to visible. Since mobile visitors are on smaller screens, you don’t want to overwhelm the user with numerous CTAs on the screen.
Whatever the primary goal of your landing page is, that’s what you should focus your CTA on. Are you gunning for new subscribers? Sale conversions? New downloads? or a boost in your social media following?
The exact goal is what your CTA should be about and has to be visible to the user in one or max two seconds.
Remember the bit about menu optimization?
This relates to it.
If the desktop version of your website has a menu with many options, it may seem difficult to make it concise enough to fit into a single page on mobile devices. But it can be done, by including a search bar to the mobile version of your site.
Motivating users to search for their queries eliminates the need for you to depend on a complex menu. When you give visitors too many options, it could negatively affect your conversions because you’ll end up confusing them.
Take, for example, retail giant Amazon, they offer users more than 12 million products but don’t use complex menus because it’ll be impossible to display all those products on a single screen, so they use a search bar.
Use a search bar to break down complex menus and boost user experience on mobile devices.
For desktop visitors, browsing through your website can easily be done by controlling the cursor with a keypad or mouse but for users on smartphone devices, navigating with their thumbs it isn’t as easy.
Screen size is something you must keep in mind when placing different elements for your mobile page. Icons need to be big enough, so visitors can tap them with their thumbs. Also, ensure you leave enough space between each icon or button so people don’t accidentally tap the wrong one.
The right placement of buttons on the screen will increase the quality user experience. You need to place clickable elements where their thumbs can quickly access as 75% of smartphone users tap the phone screens with their thumbs.
Here is an image that shows the right to place clickable buttons:
Try to avoid placing them at the corners of the screen because it’ll be difficult for people to access those areas with their thumbs when holding a phone. The best place to put icons is close to the center of the screen.
If you’re looking for a quick fix then changing your theme to a responsive one entirely will be an excellent option. For an established website, this may not be the best step but if you’re just getting started or still getting low traffic, then changing your theme to a responsive one is an easy solution.
If you use WordPress, you can easily change your theme by navigating to your WordPress dashboard and click on ‘themes’ under ‘appearance’ and then click ‘install themes’.
Type in responsive and search, the search results will show you all the responsive themes in the WordPress database, pick the one most relevant to your website and install it.
Eliminate pop-ups on the mobile version of your site. Most web users do not like pop-ups, as they are annoying and negatively affect user experience. A major issue with pop-ups on smartphones and tablets is how hard they are to close.
Keep in mind that people would be clicking with their thumbs to tap a tiny “X” button to cancel a pop up on a small screen which can be frustrating.
Visitors may even end up clicking on the ad while trying to cancel it, which will take them to another landing page and ultimately make you lose potential leads.
Users may sometimes try to zoom in on the “X” to tap cancel but then the dimensions of the screen may not adjust properly, making for horrible user experience.
The best approach to handling pop-ups is to remove them altogether. Try out other methods to promote whatever it is your pop-up is showing users.
If you do decide to keep popups on your website then you need to do a lot of testing to ensure that mobile visitors can easily navigate away from it if they choose not to engage with it.
Other than eliminating popups from your mobile site, here are other alternatives to handling the popup problem for phone users:
Web users are a lot more receptive to these kinds of pop-ups because they asked for it.
Accelerated Mobile Pages (AMP) was created by a collaborative effort of Google and other major brands to boost user experience for mobile users. These are still HTML/javascript pages but they load fast for mobile users, which is why Google encourages website owners to implement them.
AMP is a method for developing mobile-friendly versions of your website’s pages. It involves stripping down the site’s content and eliminating irrelevant media files and elaborate layouts. When users access your site with a mobile device these AMP versions will be served to them.
Is it compulsory that you make AMP?
There’s no definite answer because on one side it’ll help you attract new visitors and give your mobile visitors a great experience, but on the other, you’ll need to have two versions of your site.
If you’re using WordPress, it’s a lot easier because you can just install a plugin to enable it.
While you’ll need to use words to effectively pass your message across to your visitors, try to keep them as concise as possible. Large text blocks can easily overwhelm the reader, and remember that if a paragraph is 4 lines long on your site’s desktop version, it could be 8 or 9 lines long a phone.
Focus on user comprehension and the ultimate goal of the page when creating your text to ensure users don’t have to stare at large chunks of text.
If you haven’t optimized your website for mobile users you’re missing out on a lot of traffic and potential leads.
You should properly optimize your website for smartphone and tablet visitors and to do this effectively you need to follow certain guidelines such as improving load speed, resizing images, enabling AMP pages and using a responsive theme, etc.
You must also keep in mind that people using mobile devices use their thumbs to tap on icons and buttons, so your placement needs to be where they can easily reach with their thumbs. Just follow the tips in this guide and you’ll effectively optimize your site for mobile.
If you have any experience or tip about mobile optimization, you’ll like to share with us comment below!
