The Distilled Practice for Building Mobile Friendly Website

In 2015, Google brought out the algorithm “Mobilegeddon” which sort of punished websites who weren’t mobile friendly. In accordance with this algorithm, the ranking of the websites which weren’t mobile-friendly would decrease.

As you can see that mobile has overtaken desktops and laptops and is the most extensively used device for internet browsing. Google has encouraged businesses to think about mobile first.

global mobile data traffic growth

This means that graphic designers and marketers need to expand their vision past desktops and laptops while working on a website.

What is a mobile-friendly website?

what is mobile friendly website

As the name suggests, a mobile-friendly website is a site designed, developed and optimized so that the website will be smooth on mobiles – it is more intricate and imperative than it seems. On the most basic level – users want content that is easy to view on mobile devices.

If your text is too small, or the images aren’t loading, the users will get irritated and leave. Hence it is critical to have the content appropriately sized. Unfortunately, it is tricky to implement because smartphones, tablets come in different sizes and resolutions; hence there is no fixed format to display the content perfectly on ‘every’ device.

Here are some tips to help you optimize your website for mobile.

Avoid making a separate mobile-friendly website:

avoid making separate mobile friendly website

To make the implementation easy, at times the designers, while designing a website for mobile, decide to cut out content to ‘fit’ and which parts to not show on the mobile.  However, we can’t control what type of content the users want to see and neither it is possible to create a separate space for mobile apart from a desktop.

Google will penalize you if it finds out that you have identical content for two same websites – one is a desktop and/or laptop version while the other is a mobile version because there’s only one Google. Hence don’t even think about creating a separate website for mobile.

Make use of responsive designs:

use responsive design templates

Responsive design allows website developers to create a website that can be easily viewed on different sizes of devices. This reduces the amount of extra effort that developers must put in to make a website compatible with different device sizes.

The responsive design uses flexible images, flexible layouts and surging stylesheet media queries. When this responsive design is used on a website, the webpage will be able to detect the user’s screen size and positioning and then adjust the webpage’s layout accordingly.

Make use of media queries:

Media queries allow you to ask a device about its size and then point the browser to display things following the set of CSS that you have set in the code:

example media screen queries

Media queries are the key part in the most mobile-friendly websites but before that, you need to make sure that the system is properly configured for all the devices currently in use – not just two or three most popular mobile devices. Keep a list of the devices or you can take a subscription to get this information.

Make use of frameworks like Bootstrap:

For the front end, you can make use of the freely available frameworks like Foundation 3, Skeleton etc. The best free framework is Twitter’s Bootstrap.

use bootstrap framework

Bootstrap is a front-end framework designed to swiftly and inevitably scale your website’s web page to any device. Putting to work a pre-built system is much easier than creating a new code for every possible combination on your own (and even testing it) – and it is much less down and out.

But before you start using any framework, make sure to study if the framework is fully compatible with your website and goals. The more are the custom codes and functions on your website, the more difficult it will be to ensure that everything works smooth on a mobile device; take help from an expert if you face any difficulties.

Always make use of a virtual Meta Tag:

The viewport is a virtual area used by the browser interpreting engine to determine how the content is scaled and sized. Having said that, it is a critical code while building a multi-device experience. Without this code, your website will not work well on a mobile device.

A viewport tag tells your browser that the page needs to fit in the screen. There are many other configurations that you can tell your viewport to control. Following is the recommended one to be used at the start of the document:

<meta tag = “viewport” content = “width=device-width, initial-scale = 1”>

Zero in on simpler design:

use simple responsive design

The significant difference between desktop and mobile websites is that people prefer a simple website design while viewing on a mobile. This is a real-world stuff like anything else – things that are large and complicated become slow on a mobile device and one of the main demands of users is to have the website content instantly available.

Keeping the designs simple also make it simple to keep the attention of the viewers on the content you want them to see – mobile users have an awfully short span of attention and it’s in your best interest to keep the design simple rather than investing in a complex theme.

Never ignore the Font Size and button Size:

The font size and button size on your webpage matter a lot for mobile devices. The font size should be at least 14px. This may look big, but is better than making the user zoom-in to read your content; make it simple for them by adjusting the font to maximum clarity. The only time when you should use a smaller font (to a minimum of 12px) is on label or forms.

do not ignore font size

Now coming to the buttons, the bigger the button, the better – this will reduce the chance of users hitting a wrong button or missing hitting the button. Like Apple’s guidelines recommend a button size to be at least of 44px by 44px. With the help of these guidelines, you will improve your user experience and increase the conversion rate for E-commerce.

Augment the image size:

When dealing with mobile devices, the goal is to have smallest file size for images while still looking crisp and rich on whatever screen it’s been viewed. The reason is that the bandwidth of a mobile device is much less compared to a desktop or laptop and hence causes longer loading time.

Hence if you are going to make your viewers download a 1MB file just to view a thumbnail image, they are going to be irritated and leave the website.

Mobile friendliness isn’t just about having a nice site – but also improving the user’s experience and the loading time. Shrinking the image size uses less data (saving data of limited data plans), helps to load the page faster and leaves a positive impression of your website.

Get rid of the default zoom:

Auto-zoom can mess up the layout elements, specially for images and navigation. It may appear small or too big in your layout. To solve this problem, use the viewport meta tag to set up custom variables within the content. Ensure that you add the tag in your <head> HTML:

<meta name = “viewport” content = “initial-scale=1”>

Try to use the standard fonts:

Custom, creative fonts make your website look nice but in case of mobile devices, the users don’t like to be prompted to download a font to view a webpage. Chances are that they won’t download the font and move to some other website instead.

Although most of the fonts come installed in the mobile device and hence you will be able to use those in your website design. There’s one more thing to remember that, though – some fonts are easier or harder to readapt different sizes, hence be sure that you check the readability of the font before using it in your design.

Bear in mind, the directions:

An average desktop or laptop is horizontal, of course we scroll up and down but it’s wide. Smartphones, on the other hand, are sleek and slander mostly, hence the width of content may vary and hence needs consideration. When you are creating videos, images, drop-downs, remember the direction that people will be using while viewing the content.

Don’t be scared to rely on a professional to fix your website and make it friendly if anything fails. This may require some investment but with the everyday increasing mobile users and Google’s updated algorithm, this investment might prove to be a calculated one.

Take Away:

With the world mobilizing, it is very important to keep your website mobile friendly and in fact, something above expectation, only then can you can attract users to your website. Ensure that you read the guidelines for mobile friendliness and take opinion from experts before starting the work of your website. I hope these tips will help you to make your website mobile-friendly. Your website isn’t the only thing that needs to be mobile-friendly, assure that your social management is also mobile-friendly.

Earleen Brown is working with a reputed SEO Services company, a leading SEO Company India. The company basically is an IT firm Providing SEO Services India and has helped her a lot in enhancing her writing skills.

David Cross

David is the chief editor at WebHostingMedia right from the beginning. He has a great passion for building and managing websites and creating helpful content. He is also interested in programming - currently learning python.