Tel: +503.70398489

Responsive design y la importancia del Mobile First

Responsive design y la importancia del Mobile First

Hasta hace poco cuando diseñábamos un sitio web luego teníamos que hacer diferentes versiones de este sitio según su resolución para poder adaptarse a los diversos dispositivos (ordenador y móvil básicamente). Con el Responsive Design esto se ha acabado (además Google valora este tipo de usabilidad en contenidos).

Este concepto significa crear un solo sitio web que se adapte automáticamente a todas las resoluciones y dispositivos reorganizando la distribución de todos sus elementos.

diferentes dispositivos web

¿Por qué es importante diseñar primero para móviles?

Todos sabemos que cada vez aumenta más el número de visitas a las webs a través de dispositivos móviles o tablets, y por lo que parece seguirá en aumento (se prevé que en 2015 el tráfico móvil supere el tráfico web. Fuente: Google Engage)

A partir de esta filosofía surge Mobile First, que significa diseñar (para responsive design webs) primero para móviles, obligando así a centrarse únicamente en los elementos y las acciones más importantes de un sitio web, creando una experiencia y una buena usabilidad para el usuario. Es mucho más fácil rellenar que limpiar. Eso sí, cuidado con el Mobile First, no hay que olvidar que la mayor parte de usuarios de móviles y tablets también pasan gran parte de sus horas delante de un PC o portátil y que estos dispositivos todavía no han abandonado nuestras vidas.

esquema diseño web

Con todo esto ha aparecido un nuevo concepto de web, haciendo referencia al diseño, que se aleja totalmente de a lo que estamos acostumbrados; en general utilizan todo el ancho de pantalla, aumento del scroll, colores pasteles, movimiento…  y, sobre todo, mucha originalidad, aunque hay de todo. Navegar por Internet se está convirtiendo en una experiencia visual y ésta es la que puede atraer a muchos de tus clientes, porque la primera imagen es la que cuenta .

Para ayudaros con ellos Style Tiles es una herramienta que os puede ser muy útil para dejar de hacer diferentes versiones y modificaciones en los diseños ahorrando mucho tiempo.

¿Es tu página Mobile Friendly?

Pero Mobile First no significa tener una web que se vea bien en un smartphone y ya está.

Tenemos que tener en cuenta una serie de pasos para saber si realmente tenemos una web adaptada a móviles.

No solo por Google y el SEO, si no porque si la experiencia que ofrecemos en un dispositivo reducido no es la correcta, el usuario se irá de nuestra página.

Una de las primeras herramientas que Google nos ofrece es la Mobile Friendly Test. Introduciendo la URL de nuestra web o la que queramos comprobar, vemos si cumple las características.

¿Afecta la velocidad de carga a nuestra web?

Por supuesto que afecta, también no solo al SEO y al algoritmo de búsqueda de Google, si no también a la experiencia.

Si una web te tarda varios segundos en cargar ¿Cuanto tiempo tardas en marcharte de ella?

Tenemos que cuidar el peso de las imágenes, las peticiones HTTP, los scripts bloqueantes, etc..

Para saber si tienes algo que está retardando la carga de la página, Google tiene otra herramienta: Google Pagespeed Insights.

En resumen

Si quieres que tu web sea lo más mobile first friendly posible, aplica los siguientes consejos y recomendaciones, que yo mismo he seguido para mi blog:

  • Haz un diseño adaptable a móviles, el pixel perfect hace tiempo que murió.
  • Ten cuidado con las imágenes. Reduce su peso.
  • Minifica tu código CSS y si es posible, colócalo inline en el HTML
  • Minfica tu código JS. Si es poco ponlo inline, y siempre al final de la página.
  • Si no es vital, colócale el atributo async: <script async src=”…”></script>
  • No hagas redirecciones innecesarias.
  • Envía los recursos con compresión GZIP desde tu servidor.
  • Minifica tu HTML
  • Establece parámetros de caché para los recursos.

Poco a poco tu web irá ganando velocidad y eso lo comprobarás en tus analíticas con el tiempo.

Deja un comentario

Instagram

Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.