Checking site adaptability — CSS: Site Adaptability

Testing on real devices

Checking the adaptive layout is an important part of layout design. Don't wait until you've finished writing everything to check it, do it during the creation process. This allows you to control the entire development process and allows you to quickly fix styles without changing a whole load of the layout at once.

So, how do you check for adaptability? The best option is to have dozens of different devices. Various mobile devices, monitors with a large screen resolution, tablets, anything. But let's face it, not many people have that many devices. They need to be constantly updated, and new models need to be bought, which isn't exactly easy on the pocket.

Because of this, the first step in checking the site's adaptability is to use the devices you have now. Phone, laptop, computer. You need to check on all of these devices. Don't forget about cross-browser compatibility - display the layout in different browsers.

One way you can get out of checking with different devices is to use special software.

Developer tools in the browser

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.

This requires:

• Going to the page we want to look at.
• Opening the developer panel. Which can be done by pressing Ctrl (CMD) + Shift + I

• Switch to Toggle device toolbar mode. This can be done by pressing Ctrl (CMD) + Shift + M

Now you can select different types of devices or set the desired screen resolution and see how the site looks.

The professions page on iPhone X in landscape orientation

Online services for checking adaptability

In addition to the built-in browser tools for checking adaptability, there are special online services. They can show not only how the site will be displayed on a mobile device, but also point out typical errors. For example, insufficient element contrast or small font size.

One such service, which checks a website's adaptability for mobile devices is created by Google service, it's called Mobile Friendly. If you put a link to your page in the service, you'll get a message telling you whether your site is optimized for use on mobile devices.

If your site is listed in the Google Search Console, you'll be able to see these statistics for all pages of your site.

Another popular service is BrowserStack. 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.

BrowserStack is often used in companies, so knowing it is a good skill for any layout designer

If the team's budget is limited, we recommend using the service Lambda Test

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“