Todos los días miles de usuarios acceden a internet desde tablets, smartphones, notebooks, netbooks, entre otros. Es por eso que es imposible pensar una web sin sus interfaces diseñadas para dispositivos móviles, teniendo en cuenta que la mayoría de los usuarios acceden desde sus dispositivos móviles.

Un diseño web responsive es la solución que necesitas para garantizar una mejor experiencia a tus usuarios. Si tienes un negocio online, esta herramienta te ayudará a obtener mayor cantidad de visitas, suscripciones y conversiones de clientes.

¿No comprendes qué es un diseño web responsive? ¡No debes asustarte! En este artículo de Coderhouse podrás informarte sobre todo lo que precisas saber sobre este tipo de diseño web.

¿Qué es una web responsive?

Seguramente te ha pasado que visitaste un sitio web desde tu smartphone y, como solo accediste a su versión de escritorio, automáticamente abandonaste la página. Es muy común que suceda eso, ya que el tamaño de la pantalla u orientación (vertical u horizontal) en que se visualiza una web influye en la experiencia de navegación. No es muy cómodo apretar un botón que es demasiado diminuto o hacer zoom en la pantalla para poder leer una publicación.

Es por eso que si un usuario quiere consumir el contenido de internet desde cualquier dispositivo, es necesario que cada sitio web esté diseñado de tal manera que se ajuste a todas las variedades de pantallas existentes.  

Obvio que invertir esfuerzo en diseño para cada tipo de dispositivos es una locura y un trabajo interminable. La solución es aplicar un diseño web responsive (RWD, por sus siglas en inglés).

Este tipo de diseño tiene como objetivo optimizar las páginas web para que sean amigables y accesibles, sin importar el dispositivo que se utilice. Textos, imágenes y videos son elementos que deben adaptarse para mejorar la experiencia del usuario.

¿Qué importancia tiene un diseño web responsive?

No implementar este tipo de diseño, puede desencadenar, en algunos casos, en un problema que afecte directamente a los intereses y ganancias de tu proyecto.

Al garantizar una experiencia atractiva esté donde esté el usuario y desde cualquier dispositivo, el diseño web responsive te permite llegar a un público más amplio. Por lo tanto, si no lo aplicas a tu website, se produciría una disminución del tráfico de visitantes.

Esta merma de visitas no solo ocurriría porque no les estarás brindando a tus seguidores una navegación agradable, sino porque además tu posicionamiento en los motores de búsqueda se verá afectado.

Sí, Google prioriza en sus resultados de búsquedas a las webs que son responsives. Incluso, el buscador, en su Webmaster Tools, ofrece una prueba de optimización para móviles, “Mobile-Friendly Test”, que es una herramienta que se utiliza para saber si una web puede ser visualizada correctamente en un dispositivo móvil.

Historia del diseño web responsive

En sus comienzos las páginas web tenían un diseño genérico, por lo que si una persona ingresaba con un dispositivo con una pantalla diferente, se desplazaba por la web utilizando las barras de desplazamiento. 

Al surgir los teléfonos móviles y los sitios web, las empresas comenzaron a crear un sitio web diferente con la posibilidad de ser visitado desde un móvil. Esto implicaba que a la hora de actualizar la información, se debía aplicar en dos sitios web diferentes. 

En 2004, previo a la creación del diseño responsivo, Cameron Adams publicó un ensayo en el que expuso un método de diseño que se adapte a la variedad de resoluciones de pantalla detectada por JavaScript y luego se cargue el CSS adecuado.

Finalmente, el concepto fue creado en 2010 por Ethan Marcotte tras la combinación de dos mecanismos: 

1. La idea de redes e imágenes fluidas, es decir, que en el caso de las imágenes, podían reducir su tamaño con el objetivo de adaptarse a la pantalla, pero nunca expandirse, ya que en este caso se corre riesgo de que se pixele. 
2. Se pone a prueba la consulta a los media, que implica la posibilidad de cambiar el diseño ante los cambios de pantalla.

Beneficios de aplicar un diseño web responsive

Como ya explicamos lo que sucedería si no adaptas tu website, ahora toca desarrollar las ventajas que existen cuando tu web tiene un diseño responsive.

• Mejora del posicionamiento SEO. Google premia a las webs con diseños responsives. Por lo tanto, si tienes una mejor posición en los resultados de búsqueda, no solo tendrás muchas más visitas en tu sitio web, sino que además estarás teniendo un mayor tráfico proveniente desde dispositivos móviles.
• Mejora la experiencia del usuario. Si tu página web es difícil de ver en el móvil, probablemente el usuario la abandonará al poco tiempo de haber ingresado y se irá a otro website que pueda brindarle lo que tu sitio no pudo: accesibilidad. Con una web responsive no sucedería eso. Este tipo de diseño facilita el acceso y la usabilidad. De esta manera, quienes visitan tu sitio web experimentarán una mejor navegación. Cosa que podría traducirse en mayores probabilidades de incrementar el ratio de conversión, es decir, de que exista un aumento del porcentaje de visitantes que realizan aquello que la página les invita a hacer.
• Mejora los resultados estadísticos. Con este tipo de diseños se puede tener conocimiento de los usuarios, ya que permite la segmentación de los mismos y saber desde qué tipos de dispositivos ingresa mayor tráfico de visitantes. 
•  Evita la duplicidad del contenido. Si tuvieras que preparar contenido para cada versión de los soportes, sería un trabajo tan desgastante que posiblemente lo abandonarías al poco tiempo. Lo grandioso de aplicar un diseño responsive es que no tienes que producir material para cada versión de un sitio web. Con esta herramienta el mismo contenido se adaptará automáticamente a todos los dispositivos, contribuyendo a la mejora de la experiencia del usuario.
• Ahorro de tiempo en desarrollo web y el mantenimiento. Aunque el costo de un sitio responsive es un número importante, se consideraría una inversión. Ya que el costo total es significativamente menor en comparación a lo que se tendría que gastar si diseñaras una versión de website diferente para cada dispositivo. Gracias a este tipo de herramienta se realiza un solo diseño adaptable. Cosa que también facilita y agiliza los tiempos: cuando sea necesario ejecutar las tareas de mantenimiento, solo tendrás que hacer las modificaciones pertinentes en una sola URL.  

Diferencia entre diseño web responsive y adaptativo 

El diseño web responsive y el adaptativo, puede que aparentan ser similares, pero no lo son.

En un principio, una web responsive es cuando un sitio web se modifica visualmente y de manera automática según el dispositivo que se esté utilizando.

Por ejemplo, si el usuario desea tomarse unas vacaciones y busca apartamentos en una web de hospedaje, el diseño de la misma no será la misma si ingresa desde un ordenador o desde un teléfono móvil.

Sin embargo, una web adaptativa, conoce la resolución de pantalla mediante media queries, las cuales le dan un estilo a elementos de la web basándose en el viewpoint, es decir, el área visible del navegador.

Las Media Queries son una parte importante del diseño web responsive normalmente usadas para tamaños de texto, márgenes y padding que van a variar según el tamaño de pantalla y la orientación.

Consejos para diseñarlo correctamente

Luego de contarte los beneficios que brinda aplicar un diseño responsive a los sitios web, te estarás preguntando cómo aplicar esta herramienta a tu proyecto. Despreocúpate. A continuación encontrarás una guía con lo que tienes que tener en cuenta al momento de diseñar.

Pero ¡atención! Te recomendamos que manejes conocimientos sobre desarrollo web si quieres realizar el trabajo de diseño con tus propias manos. De esta manera, alcanzarás mejores resultados.

1. Conoce a tu público objetivo

Antes de comenzar con los pasos técnicos, es importantísimo investigar el público objetivo al que apuntas, ya que cuanta más información manejes, menos margen de error tendrás al momento de ejecutar el diseño. Para obtener estos datos puedes recurrir a una encuesta. Intenta que la misma sea dinámica, que no aburra, para que tus seguidores o clientes estén predispuestos a responder. Con los resultados en tu ordenador podrás ajustar los rangos de resolución de tu diseño web responsive.

Entonces, ¿qué tienes que saber? 

Los tipos de dispositivos y navegadores desde los cuales acceden a tu página web.

 2. Medidas web responsive

Una vez definido el público objetivo al que nos dirigimos, tenemos que saber cuáles son los tamaños de pantalla destino a los cuales se va a adaptar el diseño. Debes tener mucho cuidado a la hora de diseñar.  Es recomendable hacerlo con el patrón mobile-first para evitar tener problemas de adaptación con las pantallas y evitar sobrecargar la página de elementos inútiles.

Debido a la gran cantidad de dispositivos y pantallas que existen en el mercado, hace que tengamos que tener muy en cuenta tamaños de contenido fluido y no estáticos para evitar que haya usuarios que no vean bien nuestro contenido.

Estas son las resoluciones de pantalla más comunes:

• 360×640 (móvil pequeño).
• 1366×768 (ordenador portátil medio).
• 1920×1080 (escritorio grande).
• 375×667 (móvil medio).
• 1440×900 (escritorio medio).
• 720×1280 (móvil grande).

3. Interviene el Viewport

Cuando los navegadores muestran una página web que está diseñada para escritorio, adapta los contenidos para que se vean de la mejor forma posible en un dispositivo móvil. Sin embargo, en estas circunstancias, es muy probable que tengamos que ampliar la imagen, hacer zoom para poder leer. 

Para que no suceda esto puedes configurar el viewport. Pero, ¿qué es el viewport? Es el área donde se plasma el contenido, es una etiqueta que nos permite verificar cómo se verá un proyecto web en los dispositivos móviles.

Entonces, si realizamos modificaciones a esta etiqueta, le indicamos al navegador que dimensión que debe adquirir tu sitio web es la del dispositivo destino.

En la etiqueta META ten en cuenta estos parámetros: 

• Width: anchura virtual de la pantalla.
• Height: altura virtual de la pantalla.
• Initial-scale: la escala inicial del documento.
• Minimum-scale: la escala mínima que puede tener el documento.
• Maximum-scale: la escala máxima que el documento puede alcanzar.
• User-scalable: si se permite o no al usuario hacer zoom.

4. Modificar propiedades CSS

Tener conocimientos sobre el lenguaje de programación CSS te ayudará a adaptar el estilo de tu web a los distintos dispositivos.

Con la técnica llamada Media Queries podrás condicionar estilos de la estructura de los contenidos a la variedad de dispositivos existentes. Es una herramienta que te permitirá agregar condiciones, es decir,  establecer cómo se distribuirán los elementos dentro de un diseño y el tamaño de los mismos.

Para predecir cómo se desplegará tu sitio en las diferentes pantallas deberás saber las dimensiones de ventanas por dispositivo móvil para luego añadir esas características por medio de una modificación HTML.

5. Unidades de medida CSS: ¿fijas o relativas?

Durante el diseño web responsive lo más habitual sería usar unidades de medida relativas. Pero esto dependerá de las características de los elementos que queramos modificar para saber cuál conviene usar:

Si de layouts hablamos, necesitaremos usar unidades relativas para definir un  determinado elemento. De esta manera se adaptarán adecuadamente al espacio cuando cambien las dimensiones del navegador. 

Con las fuentes sucede lo mismo. Lo recomendable es utilizar unidades relativas para que los tamaños se adapten al contenedor, elemento del layouts. 

En caso de que nos interese mantener las dimensiones de un elemento concreto, independientemente del tamaño de la pantalla del dispositivo, necesitaremos emplear unidades fijas. Por ejemplo, en imágenes o columnas. 

6. Usa un tema responsive 

Durante el desarrollo de tu web puedes elegir un diseño responsive, ya que este se adapta  tanto a la versión de escritorio como al de una tablet o celular. Este tipo de recurso suele ser pago, pero si buscas de una manera más exhaustiva en internet quizás accedas gratis a este tipo de temas.

7. Evita utilizar efectos

Algunos de los efectos que se aplican en la web de escritorio no funcionarán en la web responsive. Esto es de gran importancia, ya que si no realizas una comprobación de los múltiples dispositivos y plataformas, te sorprenderás al notar que el tiempo de visita desde móvil es demasiado bajo.

No debes olvidar: medir, medir y medir continuamente para detectar posibles fugas y fallos de rendimiento en la navegación móvil.

Diseño responsive y la accesibilidad web para personas con discapacidad

Cuando hablamos de accesibilidad web estamos refiriéndonos al acto de democratizar el acceso a los productos digitales. Todos tenemos derecho a disfrutar de contenidos web. Es por eso que hay que tener presente la inclusión social en un diseño responsive u otro tipo de desarrollo web.

Los usuarios con algún tipo de discapacidad deben experimentar nuestros websites sin ningún tipo de dificultad. 

A continuación te dejamos algunas recomendaciones para aplicar en tu diseño:

•  La semántica de HTML. Cada sección de nuestra web debe tener una etiqueta semántica específica para que los lectores de pantalla puedan reconocerlas y de esta manera ubicar al usuario correctamente.
• Textos. Con el diseño de los textos utilizamos medidas relativas para que los usuarios que necesiten agrandarlo no tengan ningún tipo de inconveniente en la lectura, es decir, que el texto se agrande sin perder definición.
• Labels – alt – titles. Interactuar con los botones, enlaces y controles de formulario debe ser sencillo. Las etiquetas o labels son importantes porque las reconocen los softwares de lectura de pantalla. Por ejemplo, con solo pasar el mouse por la etiqueta se accede a rellenar el espacio del formulario.
• Alt permite agregar una descripción de la imagen. Este atributo es importante porque lo reconoce lector de pantalla, que es quien leerá la descripción al usuario.
• Siguiendo la lógica anterior, el atributo title sirve para las descripciones de imágenes y también es reconocible por los lectores de pantalla. Esta descripción se muestra al pasar el mouse sobre el elemento. 

A tener en cuenta para un sitio responsive

El tener un diseño web responsive implica tener en cuenta diferentes factores para lograr una exitosa navegación por nuestro sitio web. Algunos de ellos son:

• La tipografía. El tamaño de la letra variará según el tamaño de la pantalla con el objetivo de que el usuario no tenga que hacer zoom. Además, debes tener precaución con la tipografía que eliges, ya que la misma debe ser legible. 
• Imágenes y videos. Los elementos audiovisuales deben cumplir con un orden proporcional acorde al dispositivo. 
• Formato. Tanto para textos como para imágenes y videos, los usuarios tienen mayor preferencia por la orientación vertical. Por eso, es recomendable que pienses el contenido en esa orientación. 
• Tiempo. Ya que el usuario tenga que encender su ordenador para visitar una web, resulta riesgoso sumado a que su objetivo es obtener lo que busca con total rapidez. Es por eso, que el tiempo de carga debe ser lo más breve posible.

Algunas conclusiones

En este artículo viste que el diseño responsivo se refiere a un diseño de un sitio web o una aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente el modo como construimos los sitios web de forma predeterminada. 

Si piensas en los sitios web que has visitado con tu dispositivo móvil; probablemente no te encontraste un sitio web que tenga la versión de escritorio reducida o en que necesites desplazarse hacia los lados para encontrar el contenido. Esto se debe a que la web se movió a este enfoque de diseño responsivo.

En otras palabras, el diseño web responsive llegó para quedarse. Los dispositivos móviles no van a desaparecer. El contexto demanda que adaptes tu sitio web a ellos. De lo contrario, los usuarios dejarán de preferir tu contenido. Además, el diseño web responsive es considerado como una de las mejores prácticas actualmente en el diseño web.

¡No debes dejar pasar la oportunidad de brindar a tus seguidores una gran experiencia digital!

Conoce el programa de nuestro curso de Desarrollo Web aquí.

Si quieres seguir leyendo sobre este u otros temas te invitamos a recorrer nuestro blog.