A free online tool for testing the page for mobile compatibility is available [here] (/tools/finger-friendly “Free online tool for testing adaptation to the touch screen.”). You can also test the entire site at once using PRO access.
Testing on different screens
Every change in the content of the site can break the display of the page or the entire site on mobile devices. Such errors are difficult to detect, as it is difficult to predict their occurrence in advance.
To test a page on 5 different screens, a person needs from 40 to 70 seconds. For thousands of pages, this turns into 30 hours of routine work. Site Alarm in an instant scans the page on 5 different screens: computer monitor, tablet vertically, tablet horizontally, smartphone vertically, smartphone horizontally.
Images and srcset attribute
Usually site owners specify one link to the image for all devices. But the element containing the picture has different sizes on different screens. If the size of the original image is smaller than the displayed one, it will look blurry. If the image is larger than the displayed one, the user will download extra kilobytes of information.
For tablet and phone screens, you need to take into account the DPR (device pixels ratio) of their screen. This is the ratio of virtual pixels to physical pixels. For example, on a Samsung Galaxy S9+ smartphone, sites will be displayed based on a virtual width of 360 pixels. But the real screen size is 1440 pixels. Therefore, DPR will be equal to 1440/360=4.
Web programmers create websites by optimizing them for virtual width. World statistics on the popularity of screen resolutions are available here https://www.w3counter.com/globalstats.php .
You can set a separate picture for different screens. We recommend optimizing your website for 5 screen widths: 1920 for desktop computers, 375 and 812 the width of the phone vertically and horizontally, 768 and 1024 the width of the tablet vertically and horizontally. For smartphones and tablets, it is better to use images with double the size. For example, if the screen width is 375 pixels, the image should be 750. Larger images will greatly slow down page loading.
To set a separate image for each screen size, use the following code:
Compare the following code blocks:
<picture>
<source media="(max-width: 375px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" />
<source media="(max-width: 768px)" srcset="./images/baner-768px.jpg" />
<source media="(max-width: 812px)" srcset="./images/baner-812px.jpg" />
<source media="(max-width: 1024px)" srcset="./images/baner-1024px.jpg" />
<source media="(min-width: 1024px)" srcset="./images/baner-1920px.jpg, ./images/baner-3840px.jpg 2x" />
<img srcset="./images/baner-1920x1080.jpg" />
</picture>
That’s how much traffic we saved:
- The original image with a width of 1920 pixels weighs 250KB.
- For a tablet vertically 768 pixels wide, it weighs 100KB. Saving 150KB or 60%.
- For a tablet vertically 1024 pixels wide weighs 140KB. Save 110KB or 40%.
- For a phone with a vertical width of 375, you need to hide the image. Specifying the CSS property `display: none’ will not prevent loading, so we specified a transparent pixel. 100% savings.
- For a phone vertically 812 pixels wide, it weighs 120KB. Saving 130KB or 50%.
- For Ultra HD monitors, we specified the largest picture with a width of 3840 pixels.
If you use background images, you can add a high-definition file with the following code:
#element-id {
background-image: -webkit-image-set(
url("backgroundx1.jpg") 1x,
url("backgroundx2.jpg") 2x
);
}
Image optimization for mobile devices is simply necessary for online stores that contain a large number of photos of goods. The time that customers will save on loading pages will be spent on viewing content. Site Alarm automatically checks the size of the downloaded and displayed images and gives recommendations for correction.
Here is a useful article for programmers on using the “srcset” attribute [https://bitsofco.de/the-srcset-and-sizes-attributes/](https://bitsofco.de/the-srcset-and-sizes-attributes / “Guide to the srcset attribute”).
Finger friendly testing
The buttons on your site should be large enough so that you can hit them with your finger and not miss. Microsoft recommends making buttons at least 40x40 pixels, World Wide Web Consortium recommends a size of at least 44x44, [Apple](https://developer.apple.com/design/tips /) recommends a size of at least 44x44. Site Alarm will find and report the presence of buttons that are too small, and a special tool [Adaptation to the touch screen] (/tools/finger-friendly “Visual mobile finger friendly checker”) will highlight such elements to make it easier for you to find them.
Speed
Site Alarm will check for dozens of problems slowing down your site.
Favicons
Various programs need your logo to display your website in the favorites section. Users can bookmark your site or add it to the home screen of their phone or tablet. Such images are called favicon and Site Alarm checks their presence and correct format. Here is a detailed [article] (/blog/vse_chto_vam_nughno_znaty_o_favikonah “Everything you need to know about favicons”) about them. [PRO] (/pro “Test the entire site for compatibility with mobile devices”) access checks for favicons for programs and devices from Microsoft and Android. for programs and devices from Microsoft and Android.