What is an adaptive version of a page?

Responsive design is an approach to web development where the design and content of a page automatically adapt to the size of the user's device screen (desktop, tablet, smartphone).

Main principles:

• Flexible Grids: Using percentages or other relative units to set element sizes instead of fixed pixels.
• Flexible Images: Resizing images proportionally so they do not exceed the container boundaries.
• Media Queries: CSS rules that allow applying different styles depending on device characteristics such as screen width, height, orientation, and resolution.

Example of using a media query in CSS:

/* General styles for all devices */
body {
    font-size: 16px;
}

/* Styles for screens up to 768px wide (e.g., tablets and mobiles) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Example of changing navigation layout */
        display: flex;
        flex-direction: column;
    }
}

/* Styles for screens up to 480px wide (e.g., mobile phones) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Images take up the full width of the container */
        max-width: 100%;
        height: auto;
    }
}

The goal of responsive design is to ensure the website is user-friendly on any device without the need to create separate page versions.

Testing a responsive version includes checking:

• Correct display of elements at different resolutions.
• Ease of navigation and interaction.
• Absence of horizontal scrolling.
• Readability of text.
• Page load performance.