How to build a mobile friendly website

On April 21, 2015, Google released a mobile friendly update known as Mobilegeddon. The update rewarded mobile friendly sites while punishing websites that were deemed mobile unfriendly by lowering their rankings. While the update may not have been as apocalyptic as the name suggests, it is something webmasters are following keenly.

In 2014, mobile devices overtook desktops as the primary devices people use to access the internet. This meant that marketers and web designers had to change tact when building sites. By releasing the Mobilegeddon, Google was encouraging businesses to put mobile devices first when building sites.

So, how do build a mobile friendly site?

Basically, a mobile friendly site is a website that is easily displayed on hand-held devices such as tablets and smartphones.

Here is how to go about it:

Use responsive design

A responsive web design responds to the device and size of the screen it is being viewed on. The design makes use of flexible images, layouts and cascading style sheet media queries. As a result, a web page is able to detect the user’s screen size and orientation and change appropriately in line with the device the visitor is using.

Include a viewport meta tag

A viewport is an area utilized by the browser rendering engine to determine how content is sized and scaled. The viewport meta tag informs the browser that the page needs to fit the screen of the mobile device. Without it, the website cannot work effectively on a hand-held device.

Use high-resolution images

To ensure that the user experience is enhanced, use high resolution images. Latest iOS devices have high definition screens which need double the resolution of a desktop. Using high resolution images will avoid having blurry images when viewed on a retina-quality screen.

Button and font size

The button and font size on your website is critical when being viewed on mobile devices. For buttons, the bigger, the better. This reduces the chances of the user hitting the wrong button by mistake or missing it out altogether.

As for fonts, they should not be less than 14px.This may seem large but it makes easier for users to read your content without having to zoom in. Here, the only time when you can go slightly smaller is on forms or labels.

Use YouTube videos

If your website includes a lot of videos, users may have difficulty viewing them since the way videos are viewed on mobile devices is very different from desktops. To avoid running into such difficulties, use YouTube videos. YouTube videos have an embedded code which is already responsive. This will save you from going through many processes which are critical for ensuring your videos can be viewed on a mobile device.

Get rid of auto-zoom

Default zoom has the potential of interfering even with the best layout elements. This is especially true for navigation content and images. In some instances, they will appear too small or too large in the layout. To avoid this, use the viewport meta tag to set up custom variables in the content.

Keep testing on different devices

Once you are done creating a mobile friendly website, keep testing it to ensure that your visitors get the best experience. When testing, do not just try it on one device continuously. Instead, try it on a Windows phone, iPhone, an Android and different tablets. When running the tests, put yourself in the shoes of the user, alternatively ask someone else to test the site for you.