Applying responsive design to an HTML, CSS, Javascript website

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

Adapting a website to be responsive is a process that involves designing and developing a website that adjusts to different screen sizes and devices, providing an optimal user experience across all of them.

In order to adapt a website to be responsive, it is necessary to consider the following steps:

  1. Identify the content and design of the page: Before starting to design a responsive web page, it is important to identify what content is essential and how it will appear on different screen sizes. It’s important to consider that on smaller devices, you may need to rearrange the content to ensure everything is readable and accessible.
  2. Use flexible measurements: To make the page adapt to different screen sizes, it’s necessary to use flexible measurements instead of fixed measurements. This means that instead of specifying sizes in pixels, percentages or units like vh or vw should be used.
  3. Create a flexible layout: Flexible layout involves using CSS rules that allow elements to automatically adjust to different screen sizes. An example of this is using the CSS property “display: flex” to create containers that automatically adjust to different screen sizes.
  4. Create mobile designs: It’s important to create a specific design for mobile devices that accommodates how users interact with these devices. For example, on mobile devices, you may need to use a dropdown menu instead of a horizontal menu to save screen space.
  5. Test on different devices and screen sizes: Once the changes have been implemented, it’s important to test the page on different devices and screen sizes to ensure it looks and functions correctly on all of them.

Example: Let’s imagine we want to adapt a page with the following fixed design:

<div style="width: 960px; margin: 0 auto;">
  <header style="width: 100%; height: 80px; background-color: #333; color: #fff;">
    Header
  </header>
  <nav style="width: 100%; height: 50px; background-color: #ccc;">
    Menu
  </nav>
  <main style="width: 100%; height: 500px; background-color: #fff;">
    Main content
  </main>
  <footer style="width: 100%; height: 80px; background-color: #333; color: #fff;">
    Footer
  </footer>
</div>

To make it responsive, we can use flexible measurements and create CSS rules for different screen sizes:

<style>
  /* Styles for screen sizes larger than 720px */
  @media (min-width: 720px) {
    header, footer {
      width: 960px;
      margin: 0 auto;
    }
  }

  /* Styles for screen sizes smaller than 720px */
  @media (max-width: 720px) {
    header, footer {
      width: 100%;
      padding: 0 20px;
    }
  }
</style>

<header style="width: 100%; height: 80px; background-color: #333; color: #fff;">
  Header
</header>
<nav style="width: 100%; height: 50px; background-color: #ccc;">
  Menu
</nav>
<main style="width: 100%; height: 500px; background-color: #fff;">
  Main content
</main>
<footer style="width: 100%; height: 80px; background-color: #333; color: #fff;">
  Footer
</footer>

With these changes, the page will be flexible and adapt to different screen sizes and devices.

In summary, adapting a website to be responsive is an important process to provide an optimal user experience on all devices. By identifying essential content, using flexible measurements, creating a flexible layout, and testing on different screen sizes, an adaptable and accessible web page can be achieved.

Post Views: 1

Leave a Comment