Adaptive layout design is an integral part of modern development. When creating adaptive layouts, we change the page's design depending on user behavior, screen size, and device orientation.
Previously, designers used a separate template to create a mobile version of a site, and phones often loaded from a subdomain. This solution was difficult to support because you needed to do double the work to create or remove elements: for the desktop site and the mobile version. We can now save a lot of time, and instead of giving the user a new layout, we can modify the current one.
This course will cover standard practices for creating adaptive websites:
- Flexible elements
- Using Flex features
- Using CSS media-queries
- Creating breakpoints
Adaptive layout
Let us use this introduction to emphasize a few points that'll make it easier to study this topic. Separation of adaptive and fluid layout design is a thing of the past. It used to be the thing to separate layouts according to specific screen resolutions and completely change the CSS accordingly.
The variety of devices in today's world is too great for us to choose from three to five specific resolutions and design versions for them. You need to use as many approaches as possible and create a layout that will display well on all devices at all resolutions.
Here we will combine all approaches into one concept — adaptive layout.
Practice
Many of the lessons in this course will include a practice section with a web view. It's a good idea to do more than complete just the task. Once you've completed it, try experimenting with the code and the features you've learned.
Practice segments in this course are built around screenshot testing. This course doesn't check against the values you specify. It takes a screenshot of the page with your styles and compares it to the screenshots from the teacher's solution. You can easily see how the page should look at different viewport resolutions.
You can see screenshots of the styles from the teacher's solution in the tests/image_snapshots directory.
Developer tools
Every modern browser has a developer toolkit. In Google Chrome, you can call it:
- Using the context menu, which has the option Inspect
- Use the key combination Ctrl+ Shift+I(Command+Option+I on Mac)
We're currently concerned with the Toggle Device Toolbar button in this panel. It will bring up a view of the browser, within which you can specify the screen resolution and check the site's layout.
- Description of mobile device emulation mode in Google Chrome
- Description of mobile device emulation mode in Firefox
- Description of mobile device emulation mode in Safari
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
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.
