3 tips for designing mobile websites

Many people still approach mobile design as secondary to the design of their “desktop” website.

Designing for different size devices is essential for all websites. Yes, even when over 70% of your visits are on desktop.

Read Time: 2 minutes 

With mobile devices now contributing to over 50% of website visits, search engines like Google are judging your website based on your mobile performance.

We’ve put together 3 quick top tips that are frequently missed when designing websites for mobile.

1)      Size Matters – Make your buttons big enough

Touch screens are unquestionably more widespread and reliable than they were 10 years ago. But the size of your links is worth paying attention to.

Google expects all links (including any buttons on your website) to be at least 44px tall and 44px wide. That’s this big:

Why? Because research from MIT shows that the common area finger pads are 10-14mm and fingertips are 8-10mm. An area of 44px by 44px takes this into consideration, meaning that the button of that size will be more manageable to touch.

2)     Don’t hide content

Mobile websites that give me a different experience from a desktop site have always been a huge bugbear of mine. For example, if a bit of text or information doesn’t appear on a mobile website but does when viewed on a desktop.

This year, Google chose to start marking you down if you hide content for any screen size.

This contributes to ensuring that everyone, no matter what device they are on, gets a consistent experience.

Why? Well, as always with Google, it is down to relevancy. If some content is relevant to a desktop user, then it should be relevant to a mobile user.

Whilst, personally, this is a welcome change, it has meant we’ve needed to employ creative thinking around areas where hidden content does enhance the user experience. For example, where images are hidden to reduce the amount of scrolling needed.

3)     Loading your website quickly

This is super important for all devices.

Your website must load quickly. Google uses a slow 4G connection to benchmark your website, whilst many of your visitors may be on a decent broadband connection, Google uses this as a ranking factor.

Reduce the size of your website by ensuring the image sizes are compressed, not loading too many fonts, and embedding videos from services like YouTube and Vimeo.

Another tip is to introduce Caching.

Caching uses your website hosting to remember certain elements of the page so it can load them faster next time.

This can often be installed into your website by your developer, to speed things up.