¿Cómo optimizo mi página web para móvil?

Por: María Camila Niño Suárez
Ingeniera Multimedia Creante.lab

Alguna vez te has detenido a pensar ¿cómo eran las páginas web antes de que existieran los smartphones?.

Desde la Creación del primer sitio web a hasta hoy, los cambios son abismales, comenzando con la época oscura del diseño web, dónde sólo había un fondo negro con letras blancas, pasando por la era del Flash y la libertad del diseño la cual ofrecía la posibilidad de implementar efectos visuales en la web quebrando barreras que existían en el diseño web en ese momento hasta la actualidad, donde podemos encontrar el uso de plantillas, que facilitan la creación de páginas web, el uso gráficos 3D y lo más importante, el concepto de mobile first.

¿Qué es el mobile first?

Los smartphones son parte de nuestro día a día, los llevamos con nosotros prácticamente a cualquier lugar, por ello se ha vuelto nuestra primera fuente de consulta, entretenimiento y comunicación. Pero para que la experiencia en internet sea buena y confortable  es necesario que la navegación sea pensada para mobile.

Un sitio web hecho pensado primero para mobile hace que la información que se quiere presentar  se ajuste más fácilmente a su versión para computador ya que se elimina el contenido de poca importancia y asi ofrecer una mejor experiencia de usuario.

Existe diferentes desafíos para el diseño mobile por eso te mostramos diferentes  consejos para su diseño web mobile y su optimización.

Web 100% responsive

Lo ideal es que los visitantes de tu web puedan acceder a todo el contenido sin necesidad de desplazarse horizontalmente o acercarse y/o alejarse, la información no se debe cortar y todo debe ser armónico tomando en cuenta el tamaño horizontal reducido de las pantallas de los smartphones, así que los diseñadores toman opciones como el uso de carruseles, disminución del tamaño de imágenes de las galerías y ocultar ciertos objetos en mobile que rompan esa armonía un ejemplo de esto son los banners muy grandes.

Si tus potenciales clientes utilizan buscadores, querrás ocupar los primeros puestos en los resultados de búsqueda. En el 2015 Google anunció que empezaría a premiar a las web responsive como un incentivo para aumentar la compatibilidad con dispositivos mobile, desde entonces se ha convertido en el enfoque recomendado para el diseño de páginas web.

Únete al movimiento AMP

Páginas Móviles Aceleradas, se caracterizan por la rapidez, las AMP no sólo mejoran el rendimiento de una página, también deshabilita elementos que no encuentra válidos, asegurándose que recursos externos como, fotos y videos se carguen y no bloqueen el sitio.

Las AMP también influyen en tu posicionamiento en las búsquedas,  conocidas como SEO, ya que para tener un buen puntaje se necesita buena velocidad de carga y contenidos accesibles.

Algunas especificaciones técnicas para AMP:

• AMP HTML

• Una variante específica del HTML que elimina, restringe la utilización de ciertos elementos como: imágenes, formularios, iframes.
• Añade sus propias etiquetas especificas para sustituir la funcionalidad restringida ejemplo: <amp-img> en lugar de <img>

• AMP JS

• Administra la carga de recursos y proporciona a aquellos que quieran aplicar AMP todas las etiquetas personalizadas para optimizar correctamente la web.

• Google  AMP Cache

• Su proceso se basa en capturar las páginas AMP HTML, almacenarlas en caché y mejorar su rendimiento de forma automática. De esta manera, todos los archivos que componen la web se cargan desde el mismo origen y así se logra mayor velocidad.

Mejores prácticas de usabilidad

Adapta el diseño de tu web para que la información clave sea visible sin mucho desplazamiento o abundantes clics.

La herramienta principal de los usuarios para navegar por tu web serán sus dedos, así que procura mantener los botones, enlaces, etc. A una distancia definida entre sí.

Implementa menús desplegables como solución al problema de escribir en espacios pequeños como lo son los inputs.

¿ Está mi web optimizada para mobile ?

Google nos provee una herramienta muy útil para descubrirlo y además saber qué podemos mejorar mediante un informe de usabilidad de tu sitio web solo ingresando el link de tu página web. https://search.google.com/test/mobile-friendly?hl=es

Como hablamos anteriormente, tu objetivo es tener una web lo mejor posicionada y que tus clientes te encuentren las búsquedas realizadas  en google, por eso te traemos los mejores consejos de optimización SEO:

Optimización SEO para móviles

• Optimiza títulos y descripciones: 

Los títulos no deben aparecer entre cortados (que se muestre “… “ porque el título es muy largo ), deben incluir toda la información relevante, palabras clave por las que nos pueden encontrar en los navegadores.

• Mejora la velocidad de la carga

Para comprobar cómo de rápida es nuestra web, disponemos de Pagespeed, una magnífica herramienta de Google

Una vez introducimos el dominio de nuestra web, analizará una serie de factores que influyen en la velocidad de nuestro site y que debemos corregir, por lo general, los errores a corregir suelen tener relación con:

• Imágenes demasiado pesadas
• Códigos de JavaScript, CSS, o HTML sin minificar o innecesarios
• Lazy loading o caché desactivadas
• Demasiadas redirecciones innecesarias y errores en la web
• Contenido el pop-ups (ralentiza la carga y da una mala experiencia al usuario)

• Evita la tecnología que no funcione en dispositivos móviles

Ten cuidado sobre todo con javascripts, contenidos en formato flash, videos o     sliders. Pueden no verse bien en móviles y además de ralentizar la carga de la     web.