What is an adaptive version of a web page?

The adaptive version of a web page is an approach to web design and development where the content and layout of the page automatically adjust to the screen size of the user's device (smartphone, tablet, desktop, etc.).

Main principles:

• Fluid Grid: The page layout is built not on fixed pixels but on relative units (percentages, em, vw/vh), allowing elements to change width and position depending on available space.
• Flexible Images: Images scale proportionally to avoid exceeding the parent container, or srcset/picture are used to load the optimal file size.
• Media Queries: CSS rules applied under certain conditions, such as screen width, device orientation, or resolution. They allow changing styles (font sizes, margins, element visibility) based on device characteristics.

Example of using media queries:

/* Default styles (for large screens) */
.container {
  width: 960px;
  margin: 0 auto;
}

/* Media query for screens less than 768px wide (tablets and mobiles) */
@media screen and (max-width: 768px) {
  .container {
    width: 95%;
    padding: 0 10px;
  }

  h1 {
    font-size: 24px;
  }
}

/* Media query for screens less than 480px wide (mobile) */
@media screen and (max-width: 480px) {
  .container {
    padding: 0 5px;
  }

  h1 {
    font-size: 20px;
  }

  .sidebar {
    display: none; /* Hide sidebar on small screens */
  }
}

Advantages:

• Improved user experience on different devices.
• Increased SEO ranking (Google prefers responsive sites).
• Easier maintenance compared to separate mobile versions.
• Single codebase for all devices.

Testing the adaptive version includes checking correct display and functionality on various screen resolutions, different browsers, and device orientations. Developer tools, device emulators, and real devices are used.