18.06.2018

Tips & tricks for a mobile-friendly website

In March, Google announced that they were rolling out mobile-first indexing. Is your website mobile-friendly? If not you might find your search ranking on Google has taken a hard hit! Here are some tips & tricks for designing a mobile-friendly website...

Tips-tricks-for-a-mobile-friendly-website-MadBit-Dublin

In March, Google announced that they were rolling out mobile-first indexing. It’s not a new idea and, considering that since 2014 there have been more mobile subscriptions than people in the world, it is no surprise. In Ireland, 90% of people have a smartphone, and that puts us in amongst the top smartphone users in Europe. Therefore, it is fair to say that if your website is not mobile-friendly then, sorry to tell you, you’re a digital dinosaur! Not only are you a digital dinosaur, but Google is manning the meteorite hurtling towards you…

Google’s mobile-first indexing is designed to weed out websites that do not provide users with a modern standard of user experience. It is worthwhile to remember that Google is not ‘’the internet’’ even though many of us treat it as though it is. It is a search engine service. To continue being the leader in what they do, Google needs to maintain a high-quality standard which means fantastic user experiences. Therefore, it is your job to ensure that your website meets their standards if you want to appear in your target market’s Google search results.

With that in mind, let’s get to the tips and tricks for mobile-friendly website design!

How to design a mobile-friendly website

1. Start with responsive design

Too many companies make the mistake of designing a mobile website isolated from the desktop version. This is an overhang from when it was a novel idea to browse the internet on mobile. Those days are far behind us. Today people regularly flit between multiple devices when browsing the internet, and each of these devices can have a different screen size. Responsive design ensures that your website looks its best on all screen sizes.

In fact, it is so important to have a mobile-friendly website these days that some web designers favour mobile-first design. This means that rather than starting with a design for desktop screens and then scaling that down for mobile, these designers work the opposite way. Global trends suggest that mobile is the most popular choice of personal device, so it is easy to see why many web designers choose this approach.

2. Simplicity is key for effective navigation

A smaller screen means limited space, with most mobiles offering just 720 pixels of width in portrait mode. However, this does not mean that you should squash in as much information as possible! Instead, simple, clean design that lets your users focus on a few key elements is best. Crystal-clear navigation is everything.

Ideally, you will start designing the look and feel of your website long before a single line of code is typed. Take the time to consider the ideal journey you want your customers to take through your website and then create all the signposts to get them there. Keep the number of pages to a minimum and limit your menu options to 4 – 7.

Some websites will require multilevel navigation. In this case, ensure the second menu, which is often a drop-down menu, is as simple as it can be. Remember that users will be using their fingers and thumbs to navigate, so give individual navigation buttons plenty of space so that users end up on the right page.

3. A quick introduction to typography

Do you have an interest in typography? If not, that’s ok, just make sure that you have a good web designer on your side who does! Typography is all about arranging the type on your website to be legible and pleasing to the eye. It is a bit of an art and web designers tend to have very strong opinions on the subject, often for a good reason. The Papyrus font, for example, gets a lot of slack!

However, font size is a particularly important issue for mobile design. Users should not have to use the zoom tool to read your text. 16 pixels font size for body text is widely considered best practice. This means headings and subheadings are bigger again. Take into consideration that your users will only be able to see a limited amount of text at any given time, so break up the text into paragraphs, lists and bullet points where possible to improve legibility.

4. High-resolution images matter

Optimising your website for mobile means optimising every aspect of it, including your images. High-resolution images are great for compatibility across all sizes of screen, but if they are too big it will increase your website’s loading time. Therefore, a bit of a balancing act is required. According to http.archive, which compares the top 100 performing websites, the average PNG come to 16KB and the average JPG is 29KB.

With responsive design, you can include several versions of the same image at different sizes in your website’s media so that the one best suited to the user’s device is always ready to go. If you are still sure an image will appear too small on mobile for a user to glean the finer details, you can always make the image clickable for a larger version.

5. UX design is your mantra

Knowing to make an image clickable so that users can access a larger version comes directly from a good understanding of user experience (UX) design. UX is the foundation of a high-quality mobile-friendly website. Understanding how your mobile users navigate the internet should be the driving force behind your mobile-friendly design. Team up with a web design company that put the user first and the result will be a high converting websites your users fall in love with.

At MadBit, we specialise in user-focused, mobile-friendly web design. If you have a website project coming up and would like to work with a forward-thinking, responsive development agency, get in touch today.