Website optimization for mobile

How to make mobile friendly version of the website

After recent updates of Google’s indexing algorithms, one of the very important factors affecting the position of a page in the search engine is compatibility with mobile devices such as smartphones or tablets.

Search service providers have noticed the trend that more and more internet users are coming from mobile devices.

Currently, it is estimated that over 50% of all internet traffic comes from mobile devices. This is a significant change compared to 2000, where mobile device traffic was only about 10% of overall network  traffic.

It is not surprising that search service providers have come to the conclusion that websites adapted to mobile devices should be promoted  when the search is done out directly from a mobile device.

To achieve this goal, two separate versions of the search index have been introduced, one designed only for mobile devices and the other for the rest, i.e. desktop computers.

In practice, it looks like that by searching the same phrases in the same location of the mobile device we will get different results than searching for the same password from a desktop computer. Pages that are adapted to mobile devices are promoted and presented much higher than pages not adapted to mobile devices when we run a voice or text search on a mobile device.

The natural consequence of this is that SEO and SEM specialists make efforts to customize websites for mobile devices. The main purpose of this action is to increase the amount of organic traffic from mobile devices. This is crucial if we realize that the number of mobile users is constantly growing.

How to optimize website for mobile version?


Answering the question What is the optimization of a website for a mobile version, one should realize that Google, which is a giant in the search engine market, has published guidelines for webmasters working on adapting their website to mobile devices.
In Google documents, we can find information that in order for a page to be considered adapted to mobile devices, several key elements related to page creation, its construction, size of resources, etc. should be taken into account.

One of the basic elements deciding about using a website as a mobile friendly is the visibility of the elements viewed on a mobile device.
The mobile page must not contain too small fonts, content and pictures that are very close together, which prevents a natural  receipt of their content.
in general, the page may not look like this in order to read it you had to use the zoom function, i.e. zoom on the phone or tablet, or scroll horizontally.

Images presented on the mobile page should be scaled to the width of the device and the font size should automatically adapt to the resolution and density of pixels on the screen of the device.

Page loading speed and amount of data downloaded from the server

Another equally important factor affecting the quality of a mobile page is the loading time and amount of data that must be downloaded for the page to be displayed.

Although today’s mobile devices have increasingly more powerful CPU and are able to process larger amounts of data, they undoubtedly have less computing power than modern desktops that are equipped with hardware-optimized web browsers.
Thus, the amount of data downloaded to a mobile device and the size of scripts processed on the phone or tablet side significantly affects the page loading time and the overall impression of using it.
This phenomenon is much less visible when using a computer or laptop.
Therefore, it is recommended that the mobile versions be light – in the sense of the amount of data, so that they load in the shortest possible time.
Unnecessary and large images or animations should be replaced with smaller thumbnails and large Java script libraries should be minimized, compressed and used only for the necessary needs of the mobile version of the site.

It is also recommended to use new graphics formats with higher compression, the use of which guarantees a smaller amount of data necessary to download from the server.
It is also recommended to use techniques called lazy image loading, which means that the page does not load all the images that are on it right away. Instead, the images are loaded only when the user scrolls the screen to where the image is visible.

Mobile site implementation techniques

Basically there are two methods for performing a mobile page optimization.
The first of them, which is a bit out of the question, consists in the fact that we create two separate versions of the website and using the script that recognizes the device we are dealing with during loading, we choose one of the versions. It can be a desktop version for computers and a mobile version for mobile devices. In this situation, we have two completely separate versions of the page, which can look completely different and present completely different content.

The second much more popular and more often used method is the preparation of pages in the so-called responsive technology.
It consists in the fact that we have one source code of the website and one version of the website, which, however, looks completely different on a desktop computer than on a mobile device.

For example, the classic – a horizontal, three-column or two-column arrangement visible on a computer-type device – in the mobile version it is “broken” and presented vertically thanks to the technology “changing the layout of the page on the fly”.

If the same page is created on a mobile device using responsive technology is much more convenient for programmers and webmasters because we are dealing only with one page and not two that should be updated in parallel.

In general, responsive site versions also save server disk-space and reduce the amount of data needed to load a page.
Modern libraries for generating responsive views such as bootstrap help webmasters prepare pages in responsive technology in fast and efficient way.
The responsive technology also allows you to hide some elements in the mobile version, change their sizes etc.

RWD technology is recommended by Google as the proper way to provide web versions adapted to mobile and tablet devices.