Si tu web no puede verse correctamente en un smartphone, una tablet o un pc, ya no vale. Ha quedado obsoleta debido a la entrada con fuerza de nuevos dispositivos. Es necesario adaptarla o en el peor de los casos, volver a diseñarla desde cero.

Empresas de diseño web… del siglo pasado.

Para muchos diseñadores web es como si el tiempo no pasara. Siguen ofreciendo productos obsoletos, excusándose en el desconocimiento de sus clientes, siguen vendiendo el mismo producto una y otra vez, aunque la forma de acceder a Internet haya dado un giro radical en los últimos 3-4 años.

Gráfica que muestra el rápido aumento del uso de samrtphones para navegar.

Estimación de uso de Internet entre smartphones y ordenadores.

Smartphones y tablets, los nuevos actores (entre otros)

Desde la puesta en el mercado de los iphone y ipad y a su vez de un sinfín de dispositivos android, diseñar una web se ha vuelto más complejo. Un buen diseñador debe asegurarse de salvar los siguientes retos:

  • El ancho de banda de un smartphone es limitado, las webs tardan más en cargarse.
  • Navegadores diferentes para cada dispositivo: Internet Explorer, Safari, Chrome y un largo etcétera.
  • Diferentes anchos de pantalla.
  • Mayores resoluciones, como la de los ipad con pantalla retina.
  • La entrada en escena de las nuevas televisiones inteligentes.
  • Incompativilidad de tecnologías obsoletas para el diseño web como Flash.

Diferentes técnicas de diseño:

Fixed design o diseño rígido: Es el estilo antiguo de diseñar. Pensado para verse en un ordenador de sobremesa o portátil. Para poder ver la web en un dispositivo más pequeño necesitamos hacer zoom y scroll horizontal, lo que entorpece mucho la usabilidad.

Fluid design o diseño fluido: Los tamaños de las columnas en las que se distribuye el contenido se calculan mediante porcentajes. Es una mejora respecto al diseño rígido pero no suele ser una buena solución para navegar con smartphones.

Adaptive design o diseño adaptativo: El diseño se adapta automáticamente a tamaños específicos de pantalla gracias a media queries.  Suele ser una buena solución para prácticamente cualquier tamaño de pantalla.

Responsive design o diseño responsivo: El diseño se adapta a cualquier tamaño de pantalla. Para ello utiliza un diseño a base de columnas fluidas y media queries. Es infalible con cualquier tamaño de pantalla conservando siempre bien las proporciones.

Mobile first o móvil primero: Una evolución del diseño responsive optimizada para smartphones. Primero se carga el diseño de móvil y si el tamaño de pantalla es más grande se carga el estilo correspondiente. Así se aligera el acceso desde smartphones.

Solución: Un diseño responsive

El diseño responsive es la solución ideal para cualquier web. Los temas de pago de WordPress y muchos gratuitos ya lo incorporan. Así que si de verdad quieres que los usuarios de tu web puedan acceder sin problemas desde cualquier dispositivo, exige esta característica.

ejemplo de responsive design

Tu web debe verse correctamente desde varios tipos de dispositivos y la navegación debe ser cómoda.

Si tu web ya está creada y no se ve bien en todos los dispositivos, o la navegación es incómoda, es complejo rehacerla. En este caso suele ser mejor rediseñarla desde cero.

Optimizar la web para smartphones

Además de tener una web responsive tenemos que asegurarnos que cumple con ciertos aspectos cuando se accede desde un teléfono móvil:

  • El tiempo de carga debe ser rápido, una buena optimización es imprescindible.
  • Especial atención a las imágenes, deben adaptarse al tamaño de la pantalla pero no deformarse.
  • En ocasiones es necesario ocultar parte del contenido, dejando solamente el más relevante.
  • Los textos deben ser cómodos de leer.
  • Navegación fácil, dando a los enlaces aspecto de botones si es necesario.

Para finalizar

En el proceso de creación de una web, es cada vez más importante dedicarle tiempo a este aspecto. Comprobar la correcta visualización de la web con todos los dispositivos que tengamos a mano. O utilizar herramientas online como esta: http://mattkersley.com/responsive/

Pero sobretodo decirle NO a los diseñadores del siglo pasado.