Diseño Web Móvil

Diseño Web Móvil ADAPTABILIDAD TODO EN UNO

Más del 80% de los usuarios utilizan dispositivos móviles para navegar por Internet con tamaños de pantallas y resoluciones diferentes y más del 67% de las compras se realizan a través de ellos.

 

Los ordenadores (sobremesa y/o portátiles) tienen mil opciones en monitores: cuadrados o panorámicos, habitualmente de 15 a 27 pulgadas, cada uno con un tipo de resolución diferente. Las tabletas también tienen diferentes medidas: 7, 10, 12 pulgadas. Ya se empieza a navegar desde televisores o smart-tv: de 42, 56, 60 pulgadas. Y sobre todo, cada vez más personas navegan desde el móvil.

Con este panorama, se genera la necesidad de asegurar que nuestra web se visualice correctamente desde cualquier dispositivo.

El problema, en realidad, aparece conforme se va reduciendo el espacio. Si la pantalla es grande, se diseña para un mínimo estándar. En función del tamaño de la pantalla, ocupará más o menos porcentaje de la pantalla. Pero cuando la pantalla es más pequeña, si la web no se adapta a distintos tamaños deja de verse correctamente.

¿Qué es “Responsive web”?

Son sitios web que incorporan un diseño fluido para adaptarse de forma automática a cualquier dispositivo y tamaño de pantalla: ordenador de sobremesa, portátiles, tabletas y smartphones.

A la hora de navegar con dispositivos móviles, diferenciamos tres tipos de web:

  • Web no adaptada Son las páginas web que se pueden abrir con el móvil porque están programadas en html, pero en las que se ve todo muy pequeño o bien hay que hacer zoom para poder leer el texto y desplazarse incómodamente por la página porque nos aparece scroll tanto vertical como horizontal, los enlaces de texto normales son muy pequeños y pulsamos sobre el de encima o el de abajo al no estar pensado para ser pulsado por un dedo, si no por un ratón.
  • Versión móvil de la web Es una versión de la web con un diseño adaptado al tamaño de pantalla de los móviles. No es exactamente el mismo sitio web, sino otra web diferente con un contenido similar diseñado para móvil.
  • Responsive web Este tipo de página es la última evolución en diseño web. Incorpora un sistema de diseño que adapta la página web automáticamente al formato de la pantalla en la que se visualiza el sitio, manteniendo siempre el diseño y contenido, haciendo las imágenes más pequeñas o más grandes, desplazando párrafos para no tener scroll horizontal, cambiando el menú dependiendo del ancho de la vista, etc.

También existen sitios web muy antiguos, desarrollados íntegramente en flash. Estos ni siquiera se pueden abrir con iPad o iPhone.

¿Por qué lo necesito?

Sencillamente: porque si la experiencia que tienen los usuarios al visitar nuestro sitio no es agradable, no volverán a conectarse desde ese medio, perdiendo un tipo de visitas que crecen a velocidad de tres dígitos porcentuales de año en año. Si además, la experiencia que tienen con la web de nuestra competencia sí que lo es, habremos perdido un posible cliente.

Todas las empresas deberán ir adaptando su web al móvil a medio o corto plazo, pero YAdeberían haberlo hecho:

  • Empresas de ocio y turismo: restaurantes, locales de ocio, hoteles, etc.: porque son actividades que se consultan principalmente durante el tiempo libre.
  • Si queremos hacer campañas de marketing para el móvil: de nada sirve invertir en atraer una visita si la experiencia que va a recibir no es óptima.
  • Empresas relacionadas con las tecnologías: para transmitir una imagen de empresa puntera que está al tanto con la evolución de su sector.
  • En general, todas las empresas que no quieran quedarse atrás con respecto a su competencia.
¿Y si tengo web y ahora mismo no quiero cambiarla?

Si hace poco que hiciste un restyling de tu web y no te interesa desarrollar un nuevo diseño para que sea del tipo Responsive, puedes crear una versión para móviles de tu web actual. El navegador redireccionará automáticamente a esta versión a los usuarios que están navegando con el smartphone o tablet.

Un par de comentarios al respecto de estas versiones móviles:
  • Como no es exactamente la misma web, sino una versión adaptada a móvil, el diseño es diferente.
  • Esta segunda web necesita un hosting propio, así que el mantenimiento anual se eleva un poco.

Por eso, esta es una solución temporal. A medio plazo, es más rentable cambiar a un diseño de tipo Responsive.

¿Qué precisa la navegación desde smartphones?

En líneas generales, la navegación móvil tiene una única necesidad: que sea cómoda para el usuario.

Esto se consigue a partir de una serie de parámetros:
  • Velocidad de carga
  • No incluir contenido en flash
  • Diseño optimizado para navegar con los pulgares
  • Navegación simplificada
  • Texto cómodo de leer
  • Formularios breves
  • Preferencia por casillas de datos con desplegables
¿Con qué tipo de web se puede hacer?

Se puede adaptar cualquier tipo de web para que su navegación esté adaptada a móviles: páginas web presenciales, motores de reservas, tiendas on line, etc.