Clicky

Cinco maneras de diseño para páginas móviles aceleradas

Accelerated Mobile Pages - AMP

La web móvil sigue creciendo a un ritmo rápido

Los teléfonos inteligentes continúan vendiéndose con fuerza, y solo Apple prevé obtener ventas por $180 mil millones de sus teléfonos inteligentes para el 2021. Hay más de 224 millones de usuarios de teléfonos inteligentes en los Estados Unidos, lo que hace que la web móvil sea un foco esencial para cualquier propietario de un sitio web.

El crecimiento continuo de los usuarios de la web móvil hace que sea importante para los diseñadores y desarrolladores de aplicaciones que el usuario comprenda el diseño adecuado para las páginas móviles aceleradas (Accelerated Mobile Pages - AMP).

La práctica de las páginas móviles aceleradas enfatiza las opciones de diseño que se alinean con lo que los motores de búsqueda perciben como amigables, incluida una audiencia definida, contenido de alta calidad, formato adecuado y compatibilidad móvil sin inconvenientes. Observarás una variedad de páginas móviles aceleradas al navegar por Google en dispositivos móviles con la abreviatura AMP en los resultados de búsqueda.

Las páginas móviles aceleradas todavía usan HTML, aunque incorporan elementos especiales que priorizan la velocidad en los dispositivos móviles. Los requisitos técnicos de AMP son establecidos por el Proyecto AMP, con los estándares trabajados junto con los principales influenciadores del tráfico como Google. El proyecto se creó en respuesta a torpes interfaces de usuario y tiempos de carga lentos al navegar sitios en un dispositivo móvil.

AMP enfatiza la velocidad instantánea y una apariencia familiarizada, dando a los creadores la capacidad de diseñar sus páginas dentro del marco de AMP. El diseño centrado en la mayoría de las páginas de AMP proporciona una sensación similar a la navegación, a pesar de las diferencias en la presentación del contenido y los esquemas de color.

El resultado es una experiencia de navegación más rápida y cohesiva que mejora las tasas de abandono, aumenta la participación del lector y marca el comienzo de la navegación web móvil como un pilar.

Con el poder y el potencial de AMP tan evidente, es práctico para los diseñadores consideren los consejos a continuación para ayudar a optimizar la experiencia de AMP, para que sus clientes se beneficien de diversas maneras.

1. Considerar AMP-carrusel para la página principal

Haz una impresión en la página con la que comenzarán la mayoría de sus visitantes. El contenido estático se puede mostrar en AMP para visualizar los productos disponibles, despertando el interés de los sitios de comercio electrónico, así como aquellos que muestran contenido general.

La función AMP-carrusel permite a los diseñadores mostrar en un eje horizontal múltiples piezas similares de contenido. Después de importar el componente del carrusel en el encabezado, se puede utilizar type="carousel" para mostrar una lista de imágenes, que aparece como una franja continua. Es una función atractiva que es ideal para la página principal cuando se intenta atraer a los visitantes a ver algo más allá de la página de inicio.

2. Mostrar artículos y productos relacionados

Anima a los visitantes del sitio a profundizar en su contenido. Se puede lograr esto mostrando una lista de productos o publicaciones relacionadas a la que están viendo actualmente. Se puede publicar de forma estática una lista de contenido relevante, lográndolo instantáneamente utilizando , que rellena una solicitud CORS en una plantilla amp-mustache para generar una relevancia de contenido generado dinámicamente que puede personalizarse según tus preferencias específicas.

Si los visitantes ingresan a una página de destino que no se alinea con sus solicitudes, dejarán el sitio o buscarán más lo que están buscando. La sugerencia de alternativas de productos es un método excelente para acomodar el proceso de búsqueda del usuario, al menos para atraerlos más al sitio. Incluso si no encuentran exactamente lo que están buscando, es posible que encuentren una alternativa que haga el trabajo igual de bien.

3. Utilizar AMP-Analytics para encontrar áreas dónde mejorar

Es importante que el propietario de cualquier sitio web sepa cómo interactúan con el contenido los visitantes. El componente se puede usar directamente o integrado con una plataforma de análisis de terceros, que incluye Google Analytics. Dentro de la etiqueta , agrega el atributo "type" y establece el valor para tu proveedor de elección, del que hay muchas opciones. El componente ayudará a los propietarios de sitios web a tener una idea más clara de qué páginas y elementos de diseño están generando conversiones y qué componentes están experimentando una baja participación del usuario.

Es importante tener en cuenta al analizar analíticas que, con AMP, el almacenamiento en caché inteligente está integrado naturalmente. El resultado es que se puede ver menos tráfico de lo habitual. Solo ten en cuenta el elemento de almacenamiento en caché al analizar tus números inicialmente.

4. Utiliza el validador incorporado

Idealmente, los diseñadores nunca obtendrán algo mal, pero puede suceder. Para asegurarse de que todo funcione correctamente en una página, usa el validador incorporado de AMP al agregar #development=1 al final de la URL de la página. Si abres las herramientas de desarrollo de Chrome y ves el mensaje "La validación de AMP fue exitosa", entonces todo está funcionando. Si no, puedes profundizar más hasta que el problema se resuelva. También puedes usar las herramientas de desarrollo de Chrome para verificar que todos los recursos externos, que van desde imágenes y vídeos a fuentes e iframes personalizados, se carguen correctamente.

Además, puedes validar los metadatos utilizando la herramienta de prueba de datos estructurados de Google, ya sea recuperando una URL o insertando un fragmento de código. Estas herramientas pueden ayudar a garantizar que todo esté validado, por lo que el rastreo del motor de búsqueda está habilitado. En la nota del rastreo del motor de búsqueda, también verifica dos veces tu archivo robots.txt para comprobar que no esté presente en ninguna línea "Disallow: /amp/". Si está allí, los rastreadores no podrán acceder a tus archivos AMP.

5. Implementar anuncios dentro de AMP

Otro beneficio de AMP es un marco preexistente para la implementación de anuncios. El componente amp-ad, o amp-embed, es un contenedor para mostrar un anuncio. Los anuncios se cargan junto con todos los otros recursos, con el elemento personalizado .

JavaScript no existe en el documento de AMP. En cambio, AMP carga un iframe desde un sandbox de iframe. Puedes establecer valores de ancho y alto dentro de , con el argumento "type" que especifica la red publicitaria que se muestra. El atributo "src" carga una etiqueta de script para la red publicitaria especificada, con varios atributos de datos disponibles para acomodar una configuración adicional de las redes publicitarias.

También se puede establecer un marcador de posición u opción para ningún anuncio disponible, a través del atributo marcador de posición. Los anuncios de vídeo también son posibles con soporte nativo, con soporte completo de componentes de medios.

Las páginas móviles aceleradas ayudan a aumentar la visibilidad del motor de búsqueda entre los usuarios de dispositivos móviles, especialmente ahora que Google está adoptando las páginas de AMP en sus resultados de búsqueda.

Además, los tiempos de carga más rápidos, la personalización flexible y los componentes visuales que buscan mejorar la tasa de rebote contribuyen a una mejor experiencia para el usuario móvil que nunca.

Las páginas móviles aceleradas proporcionan un marco fantástico para el crecimiento continuo de los usuarios de la web móvil.

Jesus_Caceres