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

Los teléfonos inteligentes continúan vendiéndose con fuerza, y solo Apple pronostica traer $ 180 mil millones desde sus teléfonos inteligentes para el 2021. Hay más de 224 millones de usuarios de teléfonos inteligentes en los Estados Unidos, haciendo 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 para el usuario comprender el diseño adecuado para las páginas móviles aceleradas.

La práctica de páginas móviles aceleradas enfatiza las elecciones de diseño que se alinean con los motores de búsqueda perciben como amigable , incluyendo una audiencia definida, contenido de alta calidad, formato adecuado y compatibilidad móvil sin inconvenientes. Notará 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 se establecen 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 interfaces de usuario torpes 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 considerar los consejos a continuación para ayudar a optimizar la experiencia de AMP, para que sus clientes se beneficien de diversas maneras.

1. Considere AMP-Carousel para la página de inicio

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

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

2. Mostrar publicaciones y productos relacionados

Anime a los visitantes del sitio a profundizar en su contenido. Puede lograr esto al mostrar una lista de productos o publicaciones relacionadas a la que están viendo actualmente. Puede publicar de forma estática una lista de contenido relevante, lográndolo instantáneamente mediante utilizando , que rellena una solicitud CORS en un plantilla amp-bigote para generar una relevancia de contenido generada dinámicamente, puede personalizar según sus 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 busca más lejos 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. Utilice AMP-Analytics para encontrar áreas para mejorar

Es importante que el propietario de cualquier sitio web sepa cómo los visitantes interactúan con el contenido. los componente se puede usar directamente o integrado con una plataforma de análisis de terceros, incluido Google Analytics. Dentro de etiqueta, agregue el atributo "tipo" y establezca el valor para su proveedor de elección , de los cuales hay muchas opciones. los El componente ayudará a los propietarios de los sitios web a tener una idea más clara de qué páginas y elementos de diseño generan 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á naturalmente integrado. El resultado es que puede ver menos tráfico de lo habitual. Solo tenga en cuenta el elemento de almacenamiento en caché al analizar sus números inicialmente.

4. Use 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, use el validador incorporado de AMP agregando # desarrollo = 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 puede usar las herramientas de desarrollo de Chrome para verificar que todos los recursos externos, que van desde imágenes y videos a fuentes e iframes personalizados, se carguen correctamente.

Además, puede validar los metadatos mediante el uso de Herramienta de prueba de datos estructurados de Google , ya sea obteniendo 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 verifique dos veces su archivo robots.txt para verificar que "No permitir : / amp /" no esté presente en ninguna línea. 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 demás recursos, con el elemento personalizado

JavaScript no existe en el documento de AMP. En cambio, AMP carga un iframe desde un sandbox de iframe. Puede establecer valores de ancho y alto dentro de , con el argumento "tipo" 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 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 video 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.