By using site services you agree to our Cookies Use. We and our partners operate globally and use cookies, including for analytics, personalisation, and ads.Accept
X

/Deep mobile optimization.

Up to 70 percent of whole Internet traffic is mobile one. Many people visit your website after the ads in social networks. And about 80 percent of them do it from mobile devices.

It's typical situation when an accidental element breaks a mobile layout.
It's typical situation when an accidental element breaks a mobile layout.

You need about 40 to 70 seconds to check the page view in five different resolutions. For thousand pages it becomes 30 hours of routine work.

There are two kinds of mobile layout errors: systematic and accidental.

The first ones are typical for repeating content. For example, the main menu does't fit the screen. Due it is presented in each page, the whole site becomes messed up.

The accidental error is much harder to identify. For example, the content manager has created a table in the product card description occasionally with large number of columns. After that the page does't fit the screen. Exactly in such cases our checker shows its best side.
"srcset" attribute

Desktop monitor and mobile phone screen have different resolution. So it makes no sense for the mobile device to load large images intended for a PC.

This banner is blurred because it has a width of 600 pixels and the screen of the phone is 812 pixels wide..
This banner is blurred because it has a width of 600 pixels and the screen of the phone is 812 pixels wide..

In order not to load excess pixels, you may specify additional images adapted for certain resolutions.

Compare two parts of code:

<img src="image.png" />
<img 
srcset="/full-width-baner-1024px.jpg 1024w, 
    /full-width-baner-768px.jpg 768w, 
    /full-width-baner-812px.jpg 812w, 
    /full-width-baner-375px.jpg 375w"
src="full-width-baner.jpg" />

In the second case we specified four alternative images for different screen sizes. "1024w" means to use this source file when width of the image area block is 1024 pixels. Compare the speed gain:

  • Original image: 1920px, 250kb. 
  • iPad portrait: 768px, 100kb - 60% gain. 
  • iPad landscape: 1024px, 140kb - 40% gain. 
  • iPad portrait: 375px, 30kb - 80% gain. 
  • iPad landscape: 812px, 120kb - 50% gain. 

Each of the devices would load the suitable size image.

Our robot determines the excess pixels and notifies you about them.

These tricks would make you more competitive. And at all else being equal you will oust your competitors from the market.

Check your site for issues

Only useful instructions