1 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<h2>Testing on real devices</h2>
1
<h2>Testing on real devices</h2>
2
<p>Checking the adaptive layout is a significant part of layout design. Doing it during the creation process allows you to control the entire development process and quickly fix styles without changing a whole layout simultaneously.</p>
2
<p>Checking the adaptive layout is a significant part of layout design. Doing it during the creation process allows you to control the entire development process and quickly fix styles without changing a whole layout simultaneously.</p>
3
<p>So, how do you check for adaptability? The best option is to have dozens of different devices with different resolutions - phones, tablets, and anything. But let's face it, not many people have that many devices. In this scenario, you constantly buy new devices, which isn't easy on the pocket.</p>
3
<p>So, how do you check for adaptability? The best option is to have dozens of different devices with different resolutions - phones, tablets, and anything. But let's face it, not many people have that many devices. In this scenario, you constantly buy new devices, which isn't easy on the pocket.</p>
4
<p>Because of this, the first step in checking the site's adaptability is to use the devices you already have. Don't forget about the<strong>cross-browser compatibility</strong>- display the layout in different browsers.</p>
4
<p>Because of this, the first step in checking the site's adaptability is to use the devices you already have. Don't forget about the<strong>cross-browser compatibility</strong>- display the layout in different browsers.</p>
5
<p>One way you can get out of checking with different devices is to use special software.</p>
5
<p>One way you can get out of checking with different devices is to use special software.</p>
6
+
<h2>Developer tools in the browser</h2>
6
<p>Almost all modern browsers allow you to view the site as it would look on different screen resolutions. Using the Google Chrome browser as an example, let's check the professions page on the Hexlet site.</p>
7
<p>Almost all modern browsers allow you to view the site as it would look on different screen resolutions. Using the Google Chrome browser as an example, let's check the professions page on the Hexlet site.</p>
7
<p>It requires:</p>
8
<p>It requires:</p>
8
<ul><li><p>Go to the page we want to look at</p>
9
<ul><li><p>Go to the page we want to look at</p>
9
</li>
10
</li>
10
<li><p>Open the developer panel by pressing Ctrl (CMD) + Shift + I:</p>
11
<li><p>Open the developer panel by pressing Ctrl (CMD) + Shift + I:</p>
11
</li>
12
</li>
12
<li><p>Switch to<em>Toggle device toolbar</em>mode by pressing Ctrl (CMD) + Shift + M:</p>
13
<li><p>Switch to<em>Toggle device toolbar</em>mode by pressing Ctrl (CMD) + Shift + M:</p>
13
</li>
14
</li>
14
</ul><p>Now you can select different types of devices or set the desired screen resolution and see how the site looks.</p>
15
</ul><p>Now you can select different types of devices or set the desired screen resolution and see how the site looks.</p>
15
<p>For example, let's observe a Hexlet page on iPhone X in landscape orientation:</p>
16
<p>For example, let's observe a Hexlet page on iPhone X in landscape orientation:</p>
16
<h2>Online services for checking adaptability</h2>
17
<h2>Online services for checking adaptability</h2>
17
<p>In addition to the built-in browser tools for checking adaptability, there are special online services. They can show the site's appearance on mobile devices and point out typical errors like insufficient element contrast or small font size.</p>
18
<p>In addition to the built-in browser tools for checking adaptability, there are special online services. They can show the site's appearance on mobile devices and point out typical errors like insufficient element contrast or small font size.</p>
18
<p>You can check a website's adaptability using a service called<a>Mobile Friendly</a>by Google. If you put your page's link in the service, you'll get a message about whether your site is optimized for mobile devices:</p>
19
<p>You can check a website's adaptability using a service called<a>Mobile Friendly</a>by Google. If you put your page's link in the service, you'll get a message about whether your site is optimized for mobile devices:</p>
19
<p>If your site is listed in the Google Search Console, you can see these statistics for all pages.</p>
20
<p>If your site is listed in the Google Search Console, you can see these statistics for all pages.</p>
20
<p>Another popular service is<a>BrowserStack</a>. Although it's a paid service, its capabilities allow you to check the page in almost all available combinations of operating systems and browsers. The site has a free period during which you can test your pages and see how the application works:</p>
21
<p>Another popular service is<a>BrowserStack</a>. Although it's a paid service, its capabilities allow you to check the page in almost all available combinations of operating systems and browsers. The site has a free period during which you can test your pages and see how the application works:</p>
21
<p>BrowserStack is often used in companies, so knowing it is a good skill for any layout designer:</p>
22
<p>BrowserStack is often used in companies, so knowing it is a good skill for any layout designer:</p>
22
<p>If the team's budget is limited, we recommend using the service<a>Lambda Test</a></p>
23
<p>If the team's budget is limited, we recommend using the service<a>Lambda Test</a></p>