tips to design a mobile friendly website

Did you know 52.2% of all website traffic is generated through mobile phones?

If you haven’t made sure your business is accessible on mobile phones, you’re missing out.

However, there’s much more to a mobile-friendly website than just filling up the screen of your tablet or smartphone. What works for a desktop website might hurt your mobile site.

A mobile site also needs to look good and function perfectly regardless of the size of the device. Loading quickly and being easily readable, your design should be simple but still engaging. You’ll also want to minimize the number of form fields when asking people to take action, while content should be minimized.

These are just a handful of the boxes you’ll need to tick if you want to connect with your customers. With 57% of consumers saying they won’t recommend a business with a poorly designed mobile site, it’s clear you need to take action now if you haven’t already.

Here are 7 simple changes you need to make to ensure your mobile site is giving you the best chance of extra clicks, calls and conversions.

#1 – Improve the user experience

When designing a mobile-friendly website, you need to think about the end users. 

  • What they do they hope to find when they come to your website? 
  • Are the CTA buttons easy to find and press on a small screen?
  • Can they navigate the site easily with their smartphones? 

The main goal of a mobile-friendly site is to enhance your user’s experience. 

You need to make sure that they can go through the website without any frustration or annoyance. There are a few aspects to consider when designing a mobile-friendly website for different types of screens. For instance, the text might appear differently on a smartphone than a desktop.

On the other hand, if the website is not optimized for mobile users, they will be forced to zoom in to view the site, especially with smaller fonts. This will definitely impact their experience on your website. 

Bonus Tip: Look at the websites belonging to your competitors to get an idea of what to do and what to avoid when designing a mobile-friendly website. Focus on the top ranking mobile sites as these will give you an indication of what Google considers to be a quality mobile site.

team of web designers creating mobile site

#2 – Add a viewport meta tag

The viewport meta tag will determine how your content will be sized or scaled over the screen. This will control the layout of your website on multiple devices.

Without having a viewport meta tag, the content will appear compressed on mobile devices, simply to fit into the screen’s dimensions. 

Therefore, users will be forced to pinch and zoom to see anything on the page. For users who want information quickly, this can drive them to bounce off your site and potentially end up with your competition instead. By adding the viewport meta tag, you will prompt the mobile browser to fit your page properly on the screen. 

This is very easy to apply to your website. You can simply paste the HTML code <meta name=”viewport” content=”width=device-width, initial-scale=1″> for each page and enjoy the best results. 

Or, if you’re not comfortable making changes to your website’s code, speak to the experts from Web Design Just For You for quick and affordable help.

#3 – Design for ‘Thumbs’

Think about how you browse on your smartphone.

Or, if you’re using your smartphone to read this right now look at the position of your thumbs.

The majority of consumers navigate using their thumb, so you need to match their browsing habits to your design. 

Sydney SEO expert Diego Varoli explains “that means your site should be easy to navigate with one thumb without any need for pinching. This is referred to as the thumb zone. Regardless of how someone holds the phone, the thumb zone allows them to navigate, tap, and swipe without using a second hand.” 

The thumb zone covers 3 areas which are: 

  • hard to reach
  • easy to reach
  • neutral areas

For instance, the bottom centre part of the phone is easy to reach. Therefore, make sure all the calls-to-action and the static menus are placed here. 

Design For Thumbs

Nailing your thumb zone design will help you to:

  • Increase your click-through-rate (CTR)
  • Increase your conversions
  • Decrease your bounce rate

#4 – Use the right fonts, sizes & weights

You need to take button and font sizes seriously. 

Remember, things always look different on a smaller screen. So if you’re designing your site on a desktop, what may look great can actually become a huge headache on the small screen.

Make sure your font size is between 14 and 16 pixels. That might seem a little big, but it’s easy for users to read without being forced to zoom into their screens. 

The minimum font size should be 12 pixels and can be used on forms or labels. Any important icons and call-to-action buttons should have bigger font size. Mental expert Leonie O’Connell explains that “typography is directly linked to how people perceive and react to your site. In fact, you can reduce your bounce rate up to 92% through site redesign. Our minds will push back against text that is hard to read or mentally tiring, so make all text easy to read.”

Many business owners and marketers know that pop-ups are not a good idea on mobile sites (no one wants to search for that tiny ‘cancel’ button). But too many site owners still apply desktop best practices to their mobile sites.

More than an issue of user experience (UX) your choice of font, size and weight will impact your branding, credibility, readability and conversions – so opt for safe and simple choices!

#5 – Consider a mobile-first site

Mobile responsive and mobile-first website designs are completely different. 

Both concepts require a website to fit to any screen properly but there is still a notable difference. For instance, a mobile responsive website will be resized after it appears on a mobile phone screen. 

Try minimizing your existing window and see how it appears on different screens. The responsive website design simply rearranges everything so it’s easy to read. However, other elements such as content, navigation and speed will be left for the desktop version of the website. 

A mobile-first website, on the other hand, is designed for mobile phone screen. 

Here, you can count on rich content, fast loading speeds, easy navigation and much more. The main concept with a mobile-first design is to provide the mobile user with an amazing experience while on the website. 

As an added incentive, Google now uses the mobile version of your site when indexing, meaning the mobile version is your first impression when it comes to SEO and improving your rankings on Google.

So go for mobile-first, not responsive!

#6 – Simplify your design

Simplicity is the main concept to consider when looking to create a mobile-friendly website. 

Design expert Gary Hamer says “just like interior design dealing with smaller spaces, screens don’t have enough space to house everything. If there are too many texts, graphics or flashy animations, the whole page will appear cluttered. We simplified our website using this ethos and noticed a whole bunch of user signals improved” 

It might also affect the loading speed of the site. A simplified site allows you to provide the best content with a clean design. 

Super simple.

Super effective.

#7 – Test frequently

Most website designers test a site once it is completed. However, testing the site frequently during the development phase allows you to remove errors that could be hassles during the final stages of launching it. 

Once your website is completed, you need to constantly test it out on a mobile device. You can use Google’s Mobile-Friendly Test tool to determine whether or not your site is working on all devices. 

Creating a great mobile-friendly website isn’t easy. 

However, by working on every element from performance to user experience, device adaptability and overall appearance, you can count on the best results. 

Follow the latest trends on mobile-friendly websites to guarantee the best experiences for all your users. 

Looking for a little help creating a winning mobile friendly website? Chat to the experienced team at Web Design Just For You for a free quote!

Author Bio:

Luke Kurtz is a freelance writer and a student majoring in Accounting in Sydney. Luke’s favourite pastime is watching movies. This is what he does when he is not in school.

Content Disclaimer: This article was authored by the writer/author indicated above in his/her personal capacity.  The opinions and views expressed in this article are the author’s own and do not necessarily reflect the view or opinions of Web Design Just for You, or Eileen Forte.