El diseño full-width

Un diseño full-width (ancho completo) es un tipo de diseño Web en el que, por motivos estéticos, se intenta utilizar todo el ancho posible de la pantalla.

En los diseños clásicos, lo habitual es colocar todo el contenido de la página Web dentro de un elemento al que se le asigna un ancho y se le centra en pantalla. Este elemento usado para centrar el contenido, muchas reces recibe el nombre de #wrapper.

En un diseño full-width se intenta aprovechar mejor el ancho de la pantalla, pero eso no implica que no debamos mantener un ancho (o ancho máximo) para el contenido, ya que de lo contrario el aspecto no sería nada agradable visualmente. Además, sería molesto de leer, ya que no bastaría con mover los ojos de lado a lado, sería necesario mover también la cabeza como quien está viendo un partido de tenis.

En un diseño full-width cada fila o sección de la página ocupa todo el ancho, y en su interior hay un elemento que hace la función del #wrapper, centrado y con un ancho (o ancho máximo). Dicho de otro modo; en lugar de un único #wrapper, tenemos múltiples elementos que hacen la misma función, uno por cada fila/sección de nuestra página Web.

El siguiente código HTML es un esquema del diseño full-width anterior.

<header id="header">
  <div id="header-top">
    <div class="wrapper">
      <!-- contenido (logo y redes sociales) -->
    </div>
  </div>
  <div id="header-bottom">
    <div class="wrapper">
      <!-- contenido (menú y buscador) -->
    </div>
  </div>
</header>

<main>
  <section id="hero">
    <div class="wrapper">
      <!-- contenido (presentacion) -->
    </div>
  </section>
  <section id="services">
    <div class="wrapper">
      <!-- contenido (servicios) -->
    </div>
  </section>
  <section id="contact">
    <div class="wrapper">
      <!-- contenido (formulario) -->
    </div>
  </section>
</main>

<footer id="footer">
  <div id="footer-top">
    <div class="wrapper">
      <!-- contenido (listas de enlaces) -->
    </div>
  </div>
  <div id="footer-bottom">
    <div class="wrapper">
      <p>Copyright &copy; 2020 Escola Espai.</p>
      <p>Design by <a href="#">ACB</a></p>
    </div>
  </div>
</footer>

Tal y como se puede observar, el HTML de este diseño es muy repetitivo. Tenemos el #header, el main y el #footer divididos en filas o secciones. Cada fila/sección ocupa todo el ancho, y puede tener un color de fondo diferente o una imagen. Dentro de cada una de estas filas/secciones, tenemos un elemento que hace la función de un #wrapper. Este elemento tiene un ancho (o ancho máximo) y está centrado (margin: 0 auto). Dentro de estos elementos de la clase .wrapper tenemos el contenido de cada fila/sección.

En lo que respecta al CSS, tenemos algo tal que así:

.wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

#header-top {
  background-color: #11321f;
}

#header-top .wrapper {
  padding: 10px 0;
  overflow: auto;
  /* etc... */
}

#header-bottom {
  background-color: #4b6b1d;
}

#header-bottom .wrapper {
  padding: 10px 0;
  overflow: auto;
  /* etc... */
}

/* etc... */

A todos los elementos que van a hacer la función de #wrapper los centramos y les indicamos un ancho (o ancho máximo). Es MUY IMPORTANTE no indicar este ancho en porcentaje (%), ya que sería un porcentaje basado en el ancho del navegador, y por lo tanto en cada pantalla la página se vería con un ancho diferente, y en monitores muy anchos podría ser un ancho excesivo. Para los elementos que tengamos dentro de estos .wrapper podemos usar anchos en porcentaje sin ningún problema, ya que es un porcentaje del ancho (o ancho máximo) que hemos indicado.

Para comprobar si nuestro diseño funcionaría correctamente en pantallas muy anchas podemos usar la opción de ZOOM del navegador; si reducimos el tamaño, el contenido debería de aparecer siempre centrado.