For those who have been in the business of website building, it should come as no surprise that the mobile experience has great significance in both the technical set-up and design choices made. After all, 95% of mobile users look up local information on their phones for the purposes of visiting or calling a business. That’s 95% of over 2 billion mobile users in 2017!
This means that a vast amount of your potential clients will see your website for the first time on their smartphone. This is where your design choices can make the difference between a warm lead, and a lost one, as people who can’t properly use your site on mobile will just carry on browsing for other businesses whose websites are properly up-to-date.
What’s more, if you don’t optimize for mobile, you may even lose out to your competitors when it comes to where your website ranks in Google’s search results. This is because Google has begun to index websites based on how well the mobile version is performing:
“Mobile-first indexing means that we’ll use the mobile version of the page for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for.” – Google Webmaster Central
So with all these great reasons to improve the mobile user experience, what can you do technically and design-wise to make sure your site is up to scratch? See our infographic, and check out a more detailed explanation below.
Technical Optimisation
Let’s keep this section brief, as there are very clear guidelines on mobile-first optimisation. As long as you’ve got those bases covered, your website is good to go, technically speaking. The first thing you want to make sure of is that the template you’re using for your site’s layout and overall look* is using responsive design per default, or easily applicable to all elements. Responsive design is simply a way of saying that all elements in your website dynamically adjust their size and positioning to the screen size of the device they are being viewed on. You can see how this is useful with all kinds of media, as you don’t want to have text or images that look fine on desktop, while not fitting correctly to a smaller screen.
In a similar vein, dynamic serving ensures that your website’s code adjust itself based on the end user that is viewing your website’s parameters such as device and location. While this may be more complicated to set up than responsive design, you can still have a conversation with your developer about which is the best option for your website.
Another quick fix on the technical end is to minimise all manner of plug-ins, add-ons and custom code on your website. Clear away the bulk, and see your website load lightning-fast!
* Assuming you aren’t writing a website from scratch, in which case, you will need another article to give you in-depth guidelines on custom responsive design in CSS.
UX Design
The really interesting part is getting into the design of your mobile website to optimise for user experience. Since every website is unique, it is only possible to provide guidelines for best results. You can implement these design choices to your whole website, or just the mobile version if you prefer to have them separate.
The main thing to keep in mind is that people on mobile don’t have the patience for bells and whistles. Too much media, frills, and copy can seriously slow down your website and lose your lead before they even get to the actionable part of the page.
- First tip is to Keep It Clean. You don’t want users scrolling endlessly; instead, you want introductory content that guides them seamlessly to the part of your website where they can take action. Whether that action is filling out a form, proceeding to a checkout page on your webstore, or signing up for your newsletter, keep reading for the next optimisation tip:
- Make sure any form that needs to be filled out on your page only has a maximum of 3 mandatory fields. The simpler, the better. Name, e-mail, and delivery address should be enough information for any new customer to provide, in order to subscribe to your newsletter or purchase your product on your mobile website. Make sure that the form is easy to locate and quick to fill out, or you will lose out on valuable leads.
- Always test for site loading speed on mobile. Remember that the average user closes a website on mobile if it fails to load within 6 seconds. Your website will be opened on different browsers, different operating systems, in different locations, and use one of the many available online mobile site speed test tools to make sure your site works optimally across all of these. One such tool is provided by Google here. These same tools offer in-depth advice on how to optimise your website for better performance, in case the results come out less-than-perfect.
- Images and icons can take up way too much space, and take away valuable browsing time from the content that actually sells your product or service. Like any first conversation with a potential customer, you want that person to hear your brief “elevator” pitch, and then proceed to engage with your product. To this end, any images or video must be there to guide the user to make a decision, rather than to distract them and increase scroll time to the actionable content.
- On that note (and a slightly more technical one), make sure all your media is compressed and that you are taking full advantage of cache. For more on this subject, check out this article from Google Web Developers.
This should get you started on the right track – keep an eye on our blog for more tips on UX and mobile website building!
Comments are closed.
