¿Qué es?

el diseño web responsive es un método de diseño y desarrollo cuyo objetivo es la creación de una página web que sea capaz de transformarse dependiendo del tamaño de la pantalla, la plataforma o la orientación.

Por ejemplo tu contenido puede estar separado en diferentes columnas para el ordenador de sobremesa porque son suficientemente anchos para acomodar esa disposición. Pero si tu separas en columnas tu contenido en un móvil puede ser difícil interactuar con el.

El diseño web responsive hace posible dar al usuario diferentes estructuras del contenido y diseño para diferentes dispositivos dependiendo del tamaño de la pantalla.

¿Por qué es importante?

Hoy en día la mayor parte del trafico de Internet es mediante dispositivos móviles, por lo que tu pagina web necesita verse y funcionar bien en estos dispositivos.

Si tu pagina web no es responsive es probable que tu tráfico baje y los usuarios se vayan de tu web con una experiencia negativa.

Estas son algunas de las razones mas importantes:

  • La experiencia de los usuarios.

    Un factor importante del diseño web responsive es que ofrece una experiencia usuario optimizada a su dispositivo.

    La sociedad de hoy en día consume Internet desde muchos dispositivos diferentes (teléfono, tablet, ordenador,...) y no solo eso, sino que ademas estos dispositivos tienen muchos tamaños de pantalla diferentes. Para poder ofrecer la mejor experiencia a nuestros usuarios es imperativo tener un diseño que pueda ajustarse lo mejor posible a todos estos dispositivos.

    Antiguamente los desarrolladores solían crear diferentes páginas para cada rango de tamaños de pantalla. Por ejemplo una página para ordenadores y otra para portátiles (con pantallas mas pequeñas).

  • Mejoras en el SEO.

    Google ha mencionado varias veces que da preferencia en los buscadores a las páginas que estén pensadas también para ser vistas en los teléfonos y tabletas. Desde 2018 Google indexa las paginas web dando prioridad a las páginas optimizadas para móvil.

    En combinación con otros factores de SEO la adaptabilidad de nuestra página puede darle un empujón a nuestros resultados en los buscadores.

  • Reducir el tiempo de carga de tu web

    La velocidad de carga de tu web es un factor muy importante como ya hemos hablado anteriormente. Tener un diseño web responsive responsive puede remover elementos innecesarios de tu web, en vez de tener dos diseños distintos y cargar esos diseños solo necesitas enviar uno que se adapte al dispositivo que este cargando la web.

    Ademas un buen diseño web responsive sera capaz de generar diferentes tamaños de imágenes, dando al usuario la imagen con la calidad máxima necesaria para su dispositivo en vez de entregar una imagen mucho mas grande de lo que necesita y después reducir su tamaño.

  • Mayor presencia Online

    Con una página web responsive, el diseño de la página principal se mantiene en todos los dispositivos dado a todos tus usuarios la misma experiencia, es decir unificando tu presencia en Internet.

  • Mayor tasa de conversión

    Las tasas de conversión se ven influenciadas en gran parte por la experiencia de tus usuarios. Teniendo en cuenta que tus usuarios pueden visitar tu página desde múltiples dispositivos diferentes vas a necesitar que se sientan igual de cómodos en todos los dispositivos.

    Si un usuario llega a tu página web desde su móvil y tiene que hacer zoom en tu página para buscar algo o clicar algo, probablemente el usuario se valla de tu pagina. Tener un sitio web responsive puede reducir ampliamente el porcentaje de rebote de tu sitio web haciendo que los usuarios estén mas dispuestos a seguir en tu página.

  • Aumenta la viralidad

    Es mucho mas fácil que tu contenido se haga viral si cuando es compartido en las redes sociales la gente que lo vea desde cualquier dispositivo puede disfrutar de ello sin ningún tipo de problema.

¿Cómo funciona?

El diseño web responsive tiene tres características esenciales, por supuesto que hay otros principios que se pueden aplicar pero estos tres son los que comparten todas las páginas.

  • Estructuras flexibles
  • Uso de imágenes fluidas
  • Media Queries

Estructuras Flexibles

Antiguamente se determinaba de forma absoluta especificando una cantidad de pixeles donde y como se iba a mostrar el contenido.

Para un diseño web responsive estas medidas absolutas no pueden funcionar, por lo que se usan medidas relativas al tamaño de la pantalla en vez de las absolutas.

Se empezaron a popularizar todos estos valores relativos como rem, tamaño relativo a la fuente raíz vh ,un 1% de la altura de la pantalla vw, un 1% de la anchura de la pantalla.

Uso de imágenes fluidas

Si utilizamos propiedad width de CSS al 100% en una imagen, esta imagen se adaptara a la pantalla agrandándose o encogiendo dependiendo del tamaño

<img src="imagen.jpg" style="width:100%;">

Con este ejemplo la imagen puede escalar mas que su tamaño original, lo cual puede deformar como se ve la imagen o bajar su calidad. En la mayoría de los casos una mejor solución es utilizar max-width en vez de width.

<img src="imagen.jpg" style="max-width:100%;height:auto;">

La solución que yo considero ideal es utilizar el elemento picture de HTML ya que nos permite definir diferentes imágenes para diferentes tamaños de pantalla, lo cual nos hace reducir la velocidad de carga de la web al descargar imágenes de tamaño mas ajustado a nuestra pantalla.

Este es un ejemplo de la documentacion oficiales de mozilla.

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

Al principio parece complicado pero realmente lo que esta diciendo es, tengo estas dos fuentes para esta imagen

"elva-fairy-480w.jpg" y "elva-fairy-800w.jpg" , al lado de la fuente escribes el tamaño que tiene la imagen

elva-fairy-480w.jpg 480w

elva-fairy-800w.jpg 800w

Después especificas cuando eliges cada imagen. "sizes="(max-width: 600px) 480px, 800px""

Aquí nos dice que para tamaños hasta 600px de ancho utilizamos la imagen de 480 de ancho, a partir de ahí solo utilizamos la de 800px.

Por ejemplo este es una parte del código de Cantabria digital

<picture>
    <source type="image/webp" 
            srcset="/static/07d087fd6cd110faaf84dbb2f581d411/9a69a/Webp.net-resizeimage%20(1).jpg.webp 240w,/static/07d087fd6cd110faaf84dbb2f581d411/3b380/Webp.net-resizeimage%20(1).jpg.webp 480w,/static/07d087fd6cd110faaf84dbb2f581d411/94ad3/Webp.net-resizeimage%20(1).jpg.webp 960w" sizes="(min-width: 960px) 960px, 100vw">
    <img data-gatsby-image-ssr="" data-main-image="" style="opacity: 1;" 
         sizes="(min-width: 960px) 960px, 100vw" decoding="async" loading="lazy" alt="" 	src="/static/07d087fd6cd110faaf84dbb2f581d411/cbcbb/Webp.net-resizeimage%20(1).jpg.jpg" srcset="/static/07d087fd6cd110faaf84dbb2f581d411/b5b1e/Webp.net-resizeimage%20(1).jpg.jpg 240w,/static/07d087fd6cd110faaf84dbb2f581d411/9fff0/Webp.net-resizeimage%20(1).jpg.jpg 480w,/static/07d087fd6cd110faaf84dbb2f581d411/cbcbb/Webp.net-resizeimage%20(1).jpg.jpg 960w">
</picture>

Algunas partes no están en el código ya que utilizamos SSR (server side rendering) y luego purgamos nuestro código para reducir el tamaño, pero la idea básica es la misma.

Media Queries

Las Media Queries son utilizada para aplicar diferentes estilos dependiendo del tamaño de la pantalla. por ejemplo

@media only screen and (max-width: 600px){
    body{
        background-color: green;
    }
}

Con esta Querie estamos diciéndole a nuestra página que el fondo de nuestro elemento "body" es verde siempre que el tamaño de la pantalla sea de 600 pixeles o menos.