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.
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.
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
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
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.