Register to get access to free programming courses with interactive exercises

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


Hexlet Experts

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

For full access to the course you need a professional subscription.

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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

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.