mobile first

Why Mobile First website design is so important

Google is performing more searches on mobile devices than through desktop computers. That is why in 2017 Google implemented measures to stimulate the use of mobile sites. In 2018 they have gone one step further with their 'Mobile First' approach. This was so drastic that the ranking of 80% of all indexed websites has changed. If you want your website to rise in the ranking instead of falling, you should read this page immediately!

What does Mobile First mean?

Previously, the desktop version of a website was leading. Later a mobile version was made, but often the web builder did not even care about it. With a Mobile First strategy you start as a web designer with the mobile version, then you look at how this website can best be translated to a larger screen. With Google's emphasis on mobile devices, this shift applies not only to the user but also to the ranking in the Google search engine. Make sure that as a webmaster you do not fall victim to "Mobilegeddon".

mobile first

The best way to design websites

In the head above this paragraph is nowhere the word 'mobile' and that is a conscious choice. Afterall you are not just designing a webiste for mobile devices, you want your website to look good and be functional on any kind of device.  

1. Use responsive design

By using scalable layouts, a website will automatically adjust based on the device. This gives you less control over the layout, but all elements are dynamically scaled for the most optimal display on every screen size.

mobile first

2. Add a Viewport Meta Tag

The viewport determines the scaling of a website. If you do not fill in this meta tag, part of the website may fall away on a smaller screen. With the Viewport Meta Tag, you indicate that the website has to be scaled to the dimensions of the screen.

3. Use larger buttons

With a mouse, you can click buttons more accurately, especially when the screen is large. On mobile devices, you have to tap on a compact screen with big fingers and hope you are not wrong. By making the buttons larger, and not putting many buttons and links close together, the user-friendliness is much better.

4. Disable autocorrect for forms

Typing on mobile often goes wrong, but because autocorrection is so smart nowadays you will often not even notice it. Until you fill in a form and suddenly see all kinds of unwanted corrections. Therefore turn off autocorrect for input fields in forms, which often leads to more problems than solutions.

5. Make images larger in size

An average smartphone screen has a higher pixel density than the average computer monitor. To show images sharply you will have to use high-quality images to present a sleek website.

6. Make images smaller in data usage

Although the resolution may go up, you want to reduce the amount of data. With mobile devices, websites are often visited via data connections that are not always fast, and 'heavy' sites can also absorb a lot of data. Make use of data compression without affecting the quality of the images too much.

7. Allow a desktop version on mobile

If you can not escape a more extensive desktop website, give mobile users the option to activate them. Most mobile browsers have an option for this, if you block this you exclude a large group of users and potential customers.

Always keep testing on different devices, do not limit yourself to the computer in front of you and the mobile phone that you have on the desk. Think Mobile First, but certainly not Mobile Only. This way you reach more visitors with less effort.

If you have any questions regarding this topic or seeking help with your website, feel free to contact us!