¿Qué es una página web responsive?

responsive

Sí, lo sé. Habéis escuchado hablar sobre este término y habéis pensado igual que todos: “pero esto de responsive, ¿qué es?” Lo siguiente es que si lo habéis traducido directamente del inglés, aquello de “responsive” vendría a ser algo así como “sensible”, algo “que responde”. Y si habéis llegado a esa conclusión, lo primero es felicitaros por vuestro inglés (“congratulations!”) y lo segundo es que no andáis lejos de la verdad. Descubramos la trama de este cuento corto.

¿Qué quiere decir Responsive?

El término “responsive” hace referencia a aquellas páginas web multidispositivo. Se trata de aquellas páginas que están preparadas para una óptima lectura por parte del usuario en diferentes dispositivos como ordenador, móvil o tablet.

Como bien sabréis, el contenido no se puede desplegar igual en una pantalla de ordenador que en una de móvil. Por eso mismo todo aquel que tenga una página web debe pensar en cómo se presenta la información de su página en cada uno de los dispositivos desde los que se pueda buscar.

Si sois de los que creéis que no necesitáis adaptaros a otros dispositivos que no sean el típico escritorio de ordenador, estáis muy equivocados. Da igual que vuestra página sea una tienda de ropa o una de material de construcción. Lo primero que hacemos todos es buscar la web desde el dispositivo que más a mano tengamos, es decir, en el móvil.

Así que empezad a cambiar de opinión si no queréis quedaros atrás.

Entonces, ¿cómo es un diseño responsive o adaptable?

Para crear un diseño web adaptable deberemos ajustar la dimensión de nuestros contenidos a las pantallas desde las que nos vayan a ver los usuarios. Es decir, el sistema directamente detecta el ancho de la pantalla del dispositivo desde el que se busca y ajusta la información que se va a mostrar.
La idea es que el contenido de vuestras páginas se adapte para que la información más relevante se pueda ver en todos los dispositivos. Como por ejemplo aquí:

Web:

responsive-web

Móvil:

responsive-mobile

A priori podemos decir que la diferencia entre ambos es que el menú de la página para ordenadores está en línea horizontal, mientras que en la del móvil se agrupa en un desplegable. ¿Fácil, no?

Pero veamos realmente qué elementos debemos tener en cuenta a la hora de tener un buen diseño responsive:

Las tipografías

Es evidente que el tamaño de las letras no puede ser el mismo en un ordenador que en un móvil. De ser así, tardaríamos horas en leer un artículo como este y sería tan eterno que se nos quitarían las ganas. A mí el primero, no creáis.

Pero cuidado, tampoco podemos pasarnos y hacerlas muy pequeñas, porque también es un incordio tener que hacer zoom cada dos por tres.

Así que probad diferentes tamaños y tipografías hasta encontrar la combinación perfecta.

Las imágenes y videos

El tamaño de todos los recursos gráficos deben ir acorde con las proporciones del dispositivo. ¿Os gustaría entrar en una web con una imagen enorme que no os deja ver nada más? O mejor aún, ¿una que la imagen sea tan pequeña que tengáis que hacer muchísimo zoom para ver de qué trata?

Usabilidad

Tenemos que tener en cuenta que la interacción usuario-web no es la misma desde móvil que desde escritorio. Una se hace a través de la pantalla y la otra a través del ratón. Por eso mismo es importante analizar si necesitamos todos los menús, botones y otros elementos. Y en caso de necesitarlos tendremos que ver cómo será su disposición.

Formato horizontal o vertical

Es importante tener en cuenta que los usuarios de móvil tienden a preferir el formato vertical, aunque claro está, siempre hay alguna excepción. Mientras que los usuarios de escritorio o tablet prefieren el formato horizontal.

Tiempos de carga

Los tiempos de carga siempre son importantes, pero para un usuario móvil ni os cuento. Puede ser toda una odisea con final fatal el intentar acceder a una web desde un móvil y que no cargue.

Ventajas de una página web responsive:

  • Es práctico. Solo trabajamos sobre un sitio web, es decir, no se crea una página web exclusiva para el móvil, ya que esto se puede confundir muchas veces con el “mobile first”.
  • Mejora la experiencia de usuario, porque nuestro contenido será el mismo en los diferentes formatos (ordenador, móvil o tablet).
  • Aumenta nuestra viralidad. Con una web responsive se podrán compartir nuestros contenidos por igual desde cualquier dispositivo.
  • Le gusta a Google, y con esto lo hemos dicho todo, ¿verdad? Google tiene en cuenta que las páginas web sean responsive para su posicionamiento SEO.
  • Mejora la imagen de marca y con ello, la conversiones. Con ellas los usuarios pueden navegar con facilidad desde cualquier parte a través de nuestra página.
  • Estamos preparados para el futuro. Cada vez hay más dispositivos de diferentes tamaños y, no sé vosotros, pero yo quiero que mi página aparezca en una de estas superpantallas que hay en los centros comerciales, estadios de fútbol o naves espaciales, y más vale que se pueda ver bien.

¿Cómo saber si nuestra web es Resposive?

Como todo en la viña de Google, existen multitud de herramientas para poder dormir tranquilos sabiendo que nuestra web se ve igual desde ordenador que desde móvil. Aquí os dejo algunas de mis favoritas:

Resizer

Sin duda es la primera de la lista. Simplemente debemos introducir una URL en el buscador de Resizer y voilá.

resizer-ejemplo

Demonstrating Responsive Design

Con Demonstrating Responsive Design el usuario solo podrá ver cómo se visualiza su web en tres tamaños de pantalla (ordenador, tablet y móvil con pantallas estándar) pero a podrá elegir entre el formato vertical u horizontal.

demostrating-responsive-design-ejemplo

Am I Responsive?

Su nombre lo dice todo: “¿Soy responsive?”. Esta aplicación nos enseña cómo se visualiza nuestra web en cuatro dispositivos de diferentes resoluciones:

  • Escritorio: 1600×992 píxeles
  • Portátil: 1280×802 píxeles
  • Tablet: 768×1024 píxeles
  • Móvil: 320×480 píxeles

Es importante que introduzcáis la URL entera, porque sino os saldrá un error.

am-i-responsive-ejemplo

Conclusión

Espero que llegados a este punto no tengáis dudas sobre si deberíais o no tener una web responsive. Si sois de los rezagados que se ha animado a dar el paso, contactad con nosotros que estaremos encantados de acompañaros por el camino.

No hay comentarios

Añade tu comentario