Looking for the latest tips for mobile website design? There cannot be a better time. Statista reveals that 52.6% of global website traffic originates from mobile devices. Here’s one more statistic. There are 59.46 million smartphone users in the UK. Imagine the volume of traffic in the UK that originates from mobile devices. The question though, is whether your business website is primed for that traffic.
In case you’re unaware, a mobile-ready website is optimised for mobile devices. There’s a significant difference when you open such websites from a desktop and a mobile device. The mobile version will generally load faster. It will have a streamlined design with elements stacked above one another. The buttons will be larger as well. These are just some of the common features though.
Every major player in the Internet space started to shift focus towards mobile-friendly websites years ago. Google announced it officially in 2015. Facebook did it in 2013. That segues into the question. Is it too late for businesses to try and capitalise on the mobile boom? Well, the ideal time for a business website to focus on mobile traffic was 10 years ago. The next best time is now.
Tips for Mobile Website Design – Top 10!
Mobile traffic will grow leaps and bounds in the next few years. That’s precisely why we have created this list of 10 tips for mobile website design. It doesn’t matter whether you already have a mobile-ready site, or are looking to get one designed now. These actionable tips will ensure that your business website provides visitors with a great mobile experience.
#1 – Ensure that it’s responsive
Let’s start with the most basic, but crucial tip. You ‘must‘ have a responsive website. There’s no way around it. Responsive is a term used to describe websites that render perfectly on any device. The code uses CSS to automatically scale down to fit a mobile phone screen. On the other hand, if it’s a static website, it will not auto-adjust.
Your website visitors will then have to scroll up and down, or to the sides to access the entire web page. They will have to pinch and zoom too to see buttons. It’s annoying, and users do not have that kind of patience anymore. That’s not all either. Google search guidelines make it amply clear that non-responsive websites don’t rank well. In case you are unsure about your website design, here’s a link that allows you to test for responsive code.
Merely having a responsive design won’t cut it though. Your website design team needs to picture how the website will look and feel on a mobile device. They need to think of the design like a visitor. What does a visitor expect when they land on a website on a tiny mobile screen? For one, they expect the important elements on the page to be clearly visible. That’s precisely why you do not need a navigation bar on top.
Every mobile device screen has limited real estate. Why allocate a precious few pixels to a navigation bar, when there are better uses for it? There are three ways to do this.
- You can either opt for a single page mobile layout. This is minimalistic and it works great for small business websites.
- The second way is to incorporate a hamburger menu. Hamburger menus are collapsible, and remain hidden behind your website icon. Clicking on the icon reveals the menu. It quickly disappears again upon clicking.
- Lastly, there’s a technique used by content-heavy websites called prioritising the menu. You only show as many menu items as necessary. The rest are concealed neatly behind a more button. This way, you don’t have to deal with the heartbreak of hiding the entire navigation bar. Here’s a great example of this in action on the BBC website:
#3 – The money is in the middle
Let’s start this with a small exercise. Pick up your mobile phone and log in to your favourite website. Hypothetically, let’s assume that your favourite website is BBC. Now notice how the important details, articles, videos, pictures centre on the middle of the screen? That’s no coincidence. That’s a critical part of website UX design called hot spots.
Hot spots are the areas on the mobile screen that we touch accurately and frequently. The most recent UX design trends reveal an emphasis on the middle of the screen. That’s because the accuracy of touch drops dramatically towards the outer parts of the screen. Your website design team should organise the content in a way that the critical elements get the hot spots. The less accurate parts of the screen are best used for tertiary functions.
#4 – The most useful tips for mobile website design – Speed
Slow-loading websites are detrimental to a business’s prospects. For one, it creates a poor user experience if they have to wait minutes for a page to load. Chances are that they won’t wait. Congratulations. You just lost a lead to your competition. This has a direct influence on bounce rates. Secondly, Google hates it. Why take chances with the Big G?
In most cases, the culprit is media. Particularly, images. Believe it or not, reducing image size for quicker page loads is not rocket science. There are many image processing tools that allow you to do just that. In Adobe Photoshop, it’s as easy as clicking ‘exporting for web’.
Typically, you will have to choose between high quality and smaller sizes. But it doesn’t have to be the extremes. There is a healthy middle ground. You can get a decent quality image that loads in the blink of an eye. In case you want to test your mobile website speed, here’s a helpful link.
#5 – Work on the clickable parts
One of the best tips for mobile website design is to work on the clickable parts of a web page. For instance, the phone number. We have visited so many websites where we wanted to reach out to the business. Much to our dismay, we often find phone numbers listed as plain text. This means that we have to double click on the number to copy it. Then backtrack and open the phone dialler to paste it.
That’s a pathetic user experience. A simple HTML code will make your phone number clickable. Ditto with Google maps integration. These are seemingly simple things that make a huge difference in user experience. It will also help you when you are trying to rank in local search. Without these, you risk choking the traffic at the lower end of the marketing funnel.
#6 – Font size
We have noticed a growing trend in mobile design where large fonts occupy the bulk of the screen. Well, we are all for enhanced visibility. But it must not sacrifice navigation. An overly large font size only squeezes in lesser text into the same area. This means that a user has to scroll more to read the same amount of text.
Work on a middle ground. While this is not set in stone, there’s a thumb rule we follow. We use 16-point font paragraph size for website headers on mobile screens. The same headers are 20-point on the desktop version. The primary copy is generally 14-point, while the supplemental copy is 12. This is neither small enough to cause squinting nor large enough to affect readability.
#7 – Best tips for mobile website design – CTA Buttons
If there’s anything that deserves more importance, it’s your CTA buttons. Buy Now, Contact Us & Fill the Form. Ensure that your buttons get the attention they deserve. These are crucial in meeting your business goal conversions. 44 pixels x 44 pixels is a reasonable size for buttons on mobile-friendly websites.
#8 – Do away with the pop-ups
Google announced a penalty in 2017 for websites with distracting pop-ups. They called it interstitials, which is a fancy term for obstructive page elements.
Businesses should work with designers who are updated about SEO-friendly design guidelines. Pop-up advertising is considered highly distracting for a website visitor. Just do away with them. If you have an important piece of information that you are showing as a website popup, just add it to your content instead.
#9 – Keep your forms short
The average UK citizen spends 3 hours and 23-minutes a day on their smartphone. It would be safe to assume that a bulk of this is spent typing on social media and chat apps. Businesses should therefore consider limiting the amount of typing on a business website. For instance, if you have forms, reduce the number of fields. We know that’s not possible all the time.
Sometimes, you need to collect a fair bit of information. Forms are a necessary evil. Here’s a great work around. Split the form into multiple tabs that a user can toggle through. Somewhat like the carousel Facebook Ads. This means that a user only has to fill in two to three form fields in one tab. They can scroll ahead and fill in the rest.
This is a win-win situation. It makes the form appear a lot less intimidating to the user. Also, it gets you the data you want to collect.
#10 – Best tips for mobile website design – Integrate a search bar
Part of smooth navigation is the ability to find things easily. Integrating a search bar makes this possible. If you are an e-commerce business, then it goes without saying that the search bar should get prominence above the fold. But even if you do not sell products, you can consider integrating a search bar. It allows the user to find information easily. It’s one of the most underrated tips for mobile website design.
Conclusion
Mobile website design does not have to be overwhelming. A skilled website design team will be able to create a beautiful website that matches your business goals. Rockstar Marketing can help you visualise the perfect mobile-ready digital asset for your brand. One that communicates your story in the most effective way, while ensuring compliance with Google’s ever-changing guidelines.
Be it a simple landing page or a complex e-commerce website, our experienced team of web designers can make it happen. Speak to us now.
0 Comments