Recuerda la presente: ‘un usuario que visita tu sitio web desde su móvil quiere lo que buscan de una forma: fácil, rápida y a su manera». Es decir, los usuarios móviles dan prioridad a los objetivos.
Hay que tener en cuenta que estos usuarios mayormente se encuentran en un ‘entorno’ único y unas condiciones especiales; cuentan con poco tiempo, la conexión puede ser lenta o deficiente, las pantallas son pequeñas, se realizan varias tareas simultáneas, etc.
El diseño web para móviles debe tener presente estas situaciones especiales y diferenciadoras que el profesional debe solucionar para conseguir una experiencia satisfactoria de los usuarios, que alcancen sus objetivos y finalmente se produzcan conversiones.
Vamos a ver algunos puntos clave para mejorar el diseño de los mSites y la experiencia de usuarios móviles.
¿Se ve bien tu página en un móvil?
Debes hacer que tu web se vea perfectamente en pantallas pequeñas.
Hay varios desarrollos o métodos para hacer posible esto, pero en Xtrared apostamos por el diseño web adaptable o ‘responsive web design’, que es también el método recomendado por Google.
Básicamente lo que se realiza con este método es publicar el mismo contenido (o código HTML) en la misma URL, independientemente del dispositivo que la visite. Para que este mismo contenido se visualice correctamente en todas las pantallas utilizamos una tecnología que se encargará de detectar el tipo o tamaño de pantalla del dispositivo conectado para modificar el diseño en consecuencia. Una de las tecnologías más extendida son las Media Queries, hablando a nivel de CSS.
Conseguir que tu página se vea correctamente en móviles es vital y debe ser lo primero a tener en cuenta, ya que el algoritmo Mobile-first de Google puede literalmente expulsar tu sitio de su buscador.
Prueba si tu página se ve correctamente en móviles.
La página de inicio o homepage.
La página de inicio puede tener varios propósitos pero en la versión móvil debes ser directo, resalta y facilita el acceso a lo que realmente busca el usuario.
Navegación
Simplifica el menú en el caso de que tengas diversas secciones/categorías y sobre todo si tu menú tiene navegación multinivel. Codifica una versión reducida del ‘Main Menu’ y no hagas que el usuario se pierda en una larga lista de enlaces.
Generalmente en la versión móvil, el menú suele plegarse en forma de icono, esto puede conseguirse mediante CSS o JS, o puedes localizar algún recurso si buscas “responsive main menu”
Una tarea tan simple como hacer que el logotipo de tu web vincule a la homepage, hará que aumente la experiencia de usuario y facilite la navegación ya que la gran mayoría esperan este comportamiento.
Facilita la búsqueda.
Haz que el usuario encuentre lo que busca de forma inmediata. Habilitar un formulario de búsqueda simple puede ser la mejor opción y más aun si se trata de un comercio electrónico.
Atiende a la fácil visualización de este recurso, ubícalo en la zona superior.
Es una buena idea aprovechar la página de resultados de búsqueda para mantener al usuario en nuestra web en el caso de que la búsqueda no sea satisfactoria, por ejemplo mostrando una promoción.
No pongas obstáculo.
Facilita la conversión en cualquier caso. Los usuarios móviles no disponen de mucho tiempo y la usabilidad es reducida. Evita que rellenen formularios excesivamente extensos y solicita los datos que realmente hagan falta. En una tienda online, por ejemplo, permite la compra sin necesidad registro o como invitado.
El peso es crucial.
Comprueba cuanto tiempo tarda en cargar por completo tu página de inicio, que no exceda de 2 segundos es importante, de lo contrario puede verse seriamente en peligro el posicionamiento de tu página.
¿Cuánto tiempo tarda mi página en cargar? Utiliza PageSpeed Insights para averiguarlo.
Detectar que recursos están provocando una carga lenta en tu web puede ser complejo, por lo que te recomendamos el uso DevTools para averiguarlo. Puedes acceder a él mediante ‘Inspeccionar’ de Chrome, dirígete a Network y recarga la página. Se listarán uno a uno los recursos en uso y el tiempo que tardan en estar totalmente disponibles.
Chrome DevTools
Son diversos los recursos que pueden estar ralentizando la carga o bloqueando la ‘ruta de renderizado’. Te indicamos algunos puntos generalmente habituales y a los que debes prestar atención:
Imágenes.
Vigila el peso de estas, optimízalas y no utilices un tamaño mayor del necesario. Utiliza formatos de compresión: jpg, png o svg.
Tipografías.
Si utilizas alguna Web Font como Fontsquirrel o Google Fonts ¡No incluyas toda la familia de una tipo! Usa sólo las que hayas definido en la fase de diseño: regular, bold o italic suelen ser suficientes. Tampoco es necesario utilizar mil tipografías.
Carga en asíncrono.
El navegador va procesando el código HTML y se detiene cuando detecta un recurso externo (JS o CSS principalmente) una vez procesa este recurso continúa con el HTML de la página. Si realizamos las cargas en asíncrono indicamos al navegador que las realice de forma paralela, conseguimos mostrar la información inmediatamente y no bloqueamos la ruta de renderizado.
Minimiza.
CSS y JavaScript, es muy probable que estos dos recursos incrementen el tiempo de procesamiento. La técnica, básicamente, se trata de eliminar espacios innecesarios en código o aplicar ‘shorthand’. En WordPress puedes usar los plugings ‘WP Super Minify’ o ‘W3 Total Cache’
Almacena en cache.
Almacenar datos en cache para mostrarlos de forma inmediata en una segunda visita es esencial para un buen rendimiento, puedes obtener más información en Web Fundamentals. En Wordpress puedes usar el pluging ‘WP Super Cache.
No queremos cerrar este artículo sin recomendarte Test My Site.
Es otra herramienta de testeo web que analiza múltiples aspectos en tu sitio: analiza las cargas, compara tu sitio con similares del sector, te ofrece recomendaciones de optimización,…
Estos son los puntos que en Xtrared consideramos esenciales a la hora de diseñar y optimizar un sitio web para móviles.
Si quieres optimizar tu web para móviles, en Xtrared podemos ayudarte a “ser más en internet”.
