El año pasado ya nos quedó claro que pasamos más tiempo delante de nuestros teléfonos móviles (51%) que de la pantalla del ordenador (42%) . No fue una sorpresa, como tampoco lo son estas otras estadísticas:
- 80 por ciento de los usuarios de Internet tienen teléfono móvil.
- 67 por ciento de los consumidores están dispuestos a comprar productos o usar servicios en una página “mobile-friendly“, esto es, con una navegación adaptada a los móviles.
- 89 por ciento de las personas admite buscar negocios en sus teléfonos al menos una vez a la semana y un 58% lo hace a diario.
- 40 por ciento de esas personas que buscan se irán a otra página si la que encuentran no es mobile friendly.
Si esas estadísticas no fueran suficiente, recuerda que Google prefiere las páginas que se adaptan a todos los dispositivos o, lo que es lo mismo: que tienen responsive web design. Tanto es así que incluso penaliza a aquellas páginas que no tienen este diseño y las coloca en posiciones menos avanzadas en los resultados del buscador. Es una pena que, después de todo el trabajo que uno hace para tener un buen diseño, una página web completa y una buena estrategia de marketing digital, Google nos castigue mandándonos a la… última posición por no tener un diseño ‘responsivo’. Habrá que solucionarlo, ¿no? En Business.com hemos encontrado estos consejos:
Planifica tu RWD (Responsive Web Design)
Antes de que comiences a diseñar, es recomendable que tenga en cuenta las diferentes pantallas que utilizan tus usuarios. Normalmente:
- Smartphones, tanto horizontal como vertical (menos de 480px)
- Tablets, horizontal y vertical (menos de 768px)
- Ordenadores de mesa y portátiles (más de 768px)
Una vez que determines esto, puedes diseñar algunos bocetos para ver cómo quedarán en los tamaños elegidos para comenzar con tu responsive web design. De esta forma podrás determinar mejor dónde quieres que vayan los diferentes elementos de la página y cómo se comportarán cuando la pantalla aumente o se contraiga: por ejemplo, verás tres columnas en una pantalla de ordenador, dos en una tablet y una en un teléfono móvil. ¿Te gusta el resultado? Entonces, adelante.
Diseña una página flexible
Para que tu página web sea flexible, necesitas tener una plantilla, pero en vez de que ésta se base en un tamaño concreto de píxeles, los elementos deben estar diseñados con tamaños proporcionales que se ajusten a cada dispositivo de manera que los cambios resulten fluidos (antes se usaban plantillas con un número concreto de columnas que se iban ensanchando o ampliando, pero esto no es adecuado para todo tipo de dispositivos).
Cuida especialmente las proporciones de tus imágenes e incluye un código para asegurarte que los dispositivos de tus visitantes no le ofrecen una versión ampliada (con zoom) de tu página web.
Haz que tu página sea Mobile Friendly
En esto puede haber confusiones porque que tu página tenga un diseño responsivo no significa que automáticamente sea mobile friendly. Puede que tu web se adapte a diferentes tamaños, pero eso no significa que tenga una navegación cómoda. Si quieres comprobar si tu página lo es, Google te ofrece la posibilidad de comprobarlo con este enlace. Sólo tienes que introducir la dirección de tu web y Google la analizará por ti.
Uno de los elementos clave en el diseño web responsivo es que el tamaño mínimo que diseñes no debe tener más de una columna de ancho. Recuerda que el tamaño medio que se necesita para clicar en la pantalla de un móvil es de 44px. Es más fácil si utilizas una sola página, larga, y que el usuario navegue bajando por ella que intentar meter muchos botones y enlaces en un espacio que quizás quede demasiado reducido y, por tanto, poco práctico.
Un consejo que, seguro por la práctica ya conoces, es reducir al máximo los contenidos que quieres mostrar en los teléfonos móviles. Prescinde de todo lo que no sea necesario y facilita al máximo la navegación. Tus usuarios te lo agradecerán.
Prueba y prueba y prueba
Es algo básico. Probablemente, después de finalizar tu diseño lo has probado y comprobado mil veces hasta que has visto que funciona. Eso, sin embargo, no es suficiente. Utiliza todas las opciones que tengas a tu alcance, todos los dispositivos móviles de los que dispongas y recurre a las herramientas que muchos editores ofrecen. Y, si tienes dudas. Ya sabes: llámanos o escríbenos. Estaremos encantados de ayudarte.
