Diseño Web Responsive

Todo lo que necesitas saber para poder decidir

Por qué debería importarte el Diseño Web Responsive

1. El 90% de las interacciones online son multipantalla

Nuestro cliente accede a nuestra web y a nuestros contenidos indistintamente desde PC, laptop, tablet y móvil. Y además, cambia de dispositivo según su conveniencia: empieza con su Smartphone camino del trabajo, sigue en el PC de la oficina, continúa en el sofá con la tablet, y termina la transacción desde el portátil de casa.

Interacciones multipantalla

Nuestra web debe estar preparada para todo este tráfico.

  • El 65% de las actividades online empiezan en un Smartphone
  • El 25% en un PC o laptop
  • El 11% empieza en una Tablet

2. La mayoría de consumidores tiene un Smartphone

  • • El 77% ha buscado un producto o servicio desde el móvil
  • • El 83% de los usuarios que hacen búsquedas desde móvil, quieren realizar la compra en menos de un día

3. Más del 50% de emails se leen en un móvil o tablet

Quien visite nuestra web a partir de un enlace en un email, la verá desde el móvil.

4. Los usuarios de móvil ya no quieren ver páginas que no estén optimizadas

Son páginas incómodas vistas desde móvil, y muchos prefieren cerrarlas antes que verlas mal.

5. Google penaliza las webs que no están optimizadas

Desde el «Movilegedón» de Google, el 21 de abril de 2015, las webs que no están optimizadas han perdido claramente posicionamiento en las búsquedas desde móviles. Dado que el 65% de las transacciones se inician desde un móvil*, es un problema serio.

Mobilegeddon de Google

* Datos según Google

El problema con las webs no adaptadas

1. La pantalla es mucho más pequeña

En un PC son comunes las pantallas de 1600 píxeles de ancho. En un laptop, raramente bajan de 1200.

Un móvil puede tener una pantalla de 320 píxeles de ancho – esto es el 20% de la pantalla de PC.

Y pasa lo mismo con la altura. El resultado: la pantalla visible en un móvil puede ser de 1/20 con respecto a la del PC.

La solución habitual de los fabricantes de móviles es mostrar la página completa pero reducida al ancho de la pantalla, y permitir al cliente “pellizcar” la página para ampliar o reducir. Esto le lleva a estar constantemente ampliando y reduciendo para poder leer el contenido y moverse por la página.

Es algo incómodo, y los usuarios son cada vez menos tolerantes con estos inconvenientes.

2. En móviles no hay ratón

En móvil no hay ratón, todo se hace con el dedo, y la acción de pasar el ratón sobre un elemento no tiene equivalente en el móvil. No es posible disparar una animación, mostrar contenidos (como un menú desplegable) o hacer cualquier otra cosa al pasar el ratón por encima (efectos mouse-over o roll-over).

Tampoco se puede hacer clic con el botón derecho del ratón.

3. Los dedos son menos precisos

Con un ratón, hay un puntero que está señalando el píxel exacto sobre el que se hará clic. Si se señala con el dedo, se está marcando un área de unos 20×20 píxeles – si hay elementos clicables muy juntos (como los enlaces en un menú), es posible que se active uno al querer activar un vecino.

4. El ancho de banda puede estar limitado

La velocidad de acceso a Internet y de descarga de datos puede ser mucho más lenta en un móvil, con una conexión variable, que en un PC con conexión permanente y de banda ancha. Páginas que se ven bien y se descargan rápidamente en un PC, pueden ser inviables en un móvil.

5. Flash no funciona en móviles

Las webs y las animaciones hechas en Flash, que habían sido tan populares, directamente no funcionan en dispositivos IOS y Android. Si tu web está basada en Flash, o si contiene elementos importantes en Flash, no va a funcionar bien.

¿Qué alternativas hay?

Desde el inicio de los Smartphones se han utilizado varias estrategias para resolver estos problemas. Estas son las más importantes, en orden de novedad.

1. Una sola web para todos los dispositivos: Diseño Web Responsive

Es la estrategia que más se usa actualmente. Se crea una sola web que detecta y se adapta al dispositivo desde el que se accede. Se muestra el mismo diseño y el mismo contenido, con adaptaciones según cómo se esté visualizando la página.
Esta es la opción que recomendamos, y la que explicaremos en el resto de este documento.

Dispositivos web

2. Una única web con dos diseños

En este modelo hay una sola web, pero muestra una página u otra, con un diseño distinto, y posiblemente contenidos distintos, dependiendo de si el dispositivo es fijo o móvil.

Inconvenientes:

  • Hay que actualizar periódicamente el código que detecta el dispositivo.
  • La web móvil suele tener menos contenido que la web “normal” – los usuarios claramente quieren poder acceder al mismo contenido desde cualquier dispositivo.

3. Web separada para móviles

Se trata de mantener dos webs a la vez: una para dispositivos de pantalla grande, y otra para móviles y tablets.

Además de los anteriores, presenta estos inconvenientes:

  • Hay que mantener dos webs separadas – doble trabajo.
  • Hay conflictos de SEO y de sesiones entre ambas versiones de la web.

4. Web sin optimizar

Esta es la no-solución más habitual: la web se creó originalmente para PC (porque no había móviles), con un diseño fijo, y no se ha adaptado.

Qué es el Diseño Web Responsive

Una web, un diseño, cualquier dispositivo

El Diseño Web Responsive permite ver la misma web, con más o menos el mismo diseño y el mismo contenido, desde cualquier dispositivo, sea un móvil o tablet, un Smart TV, un laptop o un gran PC. Se evitan prácticas concretas que pueden ser problemáticas (como contenidos en Flash, o enlaces demasiado juntos), y se muestran algunos contenidos de manera diferente, según el dispositivo.

Con el tiempo se ha desarrollado una serie de técnicas que funcionan muy bien para mostrar la misma web en cualquier dispositivo. Estas son algunas de las adaptaciones más usadas.

1. Diseño fluido

En un diseño Responsive, el contenido se ajusta al ancho de página disponible: ocupa el 100% de la pantalla, tanto en pantallas de 320, 380, 480, 720 o 1600 píxeles. En el diseño se decide cuáles son los anchos máximo y mínimo, y entre medio se ajusta dinámicamente.

Tamaños de pantalla responsive

2. Reorganización de columnas

En una pantalla ancha, es frecuente disponer el contenido en columnas: el contenido empieza más arriba, con lo que el visitante ve antes lo que hay, y es más fácil leer texto en columnas estrechas.

Pero en un dispositivo con una pantalla estrecha, la estructura en columnas no funciona, simplemente no hay espacio para repartir.

La solución: las columnas se reorganizan de manera dinámica en una sola columna. Durante el diseño se decide qué elementos aparecen arriba y cuáles debajo.

Reorganización de columnas responsive

3. Sin efectos mouse-over

El pase del ratón sobre un elemento de la página se ha usado para muchas cosas: para mostrar menús desplegables, para mostrar contenidos alternativos, para indicar elementos clicables con un cambio de color…

Todo esto no es posible desde un móvil, hay que buscar alternativas, este efecto puede ser decorativo pero no debe ser necesario para el funcionamiento de la web..

4. Menús mínimos

Hay una tendencia en el diseño web a los mega-menús: grandes áreas de la página dedicadas a la navegación por la web. Esto no es posible en un móvil, ni que sean menús desplegables.

La solución es reconvertir esos menús en elementos mucho más simples, normalmente una lista desplegable, sin demasiados elementos gráficos.

Menú responsive

Tecnologías implicadas

HTML5 y CSS3

Son los nuevos estándares que han permitido el desarrollo del diseño Web Responsive, gracias especialmente a los “media queries”. Se trata de instrucciones de estilo que se aplican solamente en determinados casos, por ejemplo si es una página de menos de 480 píxeles. Esto permite al diseñador especificar exactamente cómo se ve la web en cada ancho posible.

HTML 5 y CSS 3

Mobile First

Lo habitual es diseñar para PC y luego adaptar la pantalla para móvil. Hay otra posibilidad, que es lo que se llama metodología “Mobile First”: en lugar de adaptar un diseño complejo a una pantalla pequeña, se diseña primero para el móvil y luego se amplía el diseño a dispositivos con una pantalla mayor. Esto lleva a diseños muy diferentes, minimalistas, mucho más fáciles de usar, donde se ha realizado un esfuerzo por potenciar lo realmente importante y eliminar lo superfluo (que es muy fácil de añadir cuando se tiene una gran pantalla con montones de espacio).

Es una tendencia cada vez más habitual en las webs de nuevo diseño.

Mobile first design

Cómo hacer tu web Responsive

De menor a mayor complejidad, podemos usar las siguientes estrategias.

1. Modificar el diseño actual

Según cómo se haya implementado el diseño originalmente, es posible hacerlo responsive modificando principalmente el código CSS. Para ello es necesario que la web esté codificada con HTML moderno, basado en CSS y no en tablas.

Usando este enfoque, se modifica la web con cambios mínimos en diseño y en código, es el método menos intrusivo.

2. Reimplementar el diseño

Si la base no es adecuada pero el diseño que se hizo en su momento era profesional y sigue vigente, se puede recodificar el diseño para modernizarlo y que sea responsive, pero sin tener que hacer un rediseño en profundidad.

3. Rediseñar la web

Se conserva el contenido, la estructura de la web y la funcionalidad, pero se hace nuevo el diseño, toda la parte gráfica.

Se utiliza ese método cuando el contenido es el adecuado, pero se ha montado sobre una base que no lo es, porque es Flash, o basada en tablas, y además no se  quiere conservar especialmente el mismo diseño.

4. Reimplementar la web completamente

No se conserva nada de la web actual, se aprovecha la necesidad de adaptar la web a móviles para hacer una renovación completa: diseño, contenidos, funcionalidad…

Todo esto es trabajo manual

Es importante destacar que todas estas estrategias son el resultado de un trabajo de análisis, diseño y codificación manual del diseño en HTML y CSS.

Normalmente es un proceso complejo, que requiere de profesionales especializados. No hay soluciones automáticas para convertir una web en responsive.

Tamaños de pantalla

¿Tienes que adaptar tu web a móviles? ¡Te ayudamos!

Consúltanos tus necesidades.

Si quieres conocer en detalle tus opciones, habla con nosotros, estudiaremos tus necesidades y te diremos:

  • Cuál es la mejor opción para adaptar tu web
  • De qué manera puedes mejorarla para llegar mejor a tus objetivos
  • Cuánto te puede costar

Pide presupuesto

Haremos el cambio de la manera menos intrusiva posible, conservando al máximo el contenido y el diseño actuales (si quieres).