Cómo garantizar que sus páginas de destino cumplan con AMP

Cuando comenzó el proyecto Accelerated Mobile Pages (AMP), estaba restringido principalmente al contenido estático. El marco básico ayudó principalmente a los editores, lo que les permitió crear una experiencia de descubrimiento y consumo más rápida y fluida para los lectores.

Años después, sin embargo, muchas cosas han cambiado. Los comienzos unidimensionales de AMP son reemplazados por un conjunto de herramientas evolucionado capaz de construir sitios web completos. Cuando se trata de lanzar estas experiencias versátiles y de carga rápida, el objetivo principal de AMP sigue siendo el mismo: hacer que la web móvil sea más rápida.

Pero, la forma en que se logra es diferente. Con soluciones alternativas y técnicas avanzadas, los diseñadores han encontrado formas de cumplir con las limitaciones de AMP al crear páginas que, para el usuario ocasional, no se ven ni se sienten limitadas en absoluto.

Con las actualizaciones y las tácticas de diseño en constante cambio, ¿qué debería esperar hoy un diseñador al intentar cumplir con los estándares de cumplimiento de AMP?

7 principios de diseño de páginas compatibles con AMP

Si bien gran parte de lo que puede hacer AMP ha cambiado, los principios de diseño que guían a sus desarrolladores no lo han hecho. Según el sitio web de AMP, para crear páginas compatibles con AMP, deberá seguir estos siete pilares al diseñar dentro del marco:

1. Experiencia de usuario> Experiencia de desarrollador> Facilidad de implementación

Si bien AMP es un proyecto de código abierto, fue iniciado por Google. Y, como todo lo relacionado con Google, la experiencia del usuario es la prioridad. "En caso de duda", dicen los creadores de AMP, "haga lo mejor para la experiencia del usuario final, incluso si eso significa que es más difícil para el creador de la página crear o para el desarrollador de la biblioteca de implementar".

2. Haz las cosas solo si se pueden hacer rápido

Como proyecto de código abierto, los diseñadores pueden hacer suyo AMP. Pero el objetivo final de las páginas móviles aceleradas es la aceleración. La personalización es un juego justo y esperado, pero solo en nombre de la velocidad. Los creadores de AMP advierten: "No introduzca componentes o funciones en AMP que no puedan ejecutarse de manera confiable a 60 fps o que obstaculicen la experiencia de carga instantánea en los dispositivos móviles más comunes de la actualidad".

3. No diseñe para un futuro navegador hipotético más rápido

A los creadores de AMP les gusta su marco de la forma en que a los usuarios web les gustan sus páginas: ahora. La plataforma se creó para funcionar en la web móvil de hoy, no en la del mañana. Por lo tanto, los diseñadores deben construir con eso en mente, no con un navegador hipotético que funcione a velocidades de máquina.

Al mismo tiempo, los desarrolladores de hoy dan forma al futuro de AMP. Por lo tanto, el hecho de que no pueda hacer que algo funcione ahora no significa que no quiera hacerlo algún día. Por eso es importante, dicen los creadores de AMP, que los desarrolladores de AMP "participen en el desarrollo de estándares" para obtener optimizaciones disponibles para AMP en el futuro.

4. No rompas la web

Asegurar una excelente experiencia de usuario en todo momento significa prepararse para los peores escenarios. En el caso de AMP, eso podría ocurrir en forma de caída de la caché de AMP o fallas de las API. En caso de que ocurra algo de esto, el consumo de su contenido solo debería "degradarse con gracia". Si su contenido funciona con una caché AMP, también debería funcionar sin ella.

5. Priorice las cosas que mejoran la experiencia del usuario, pero haga concesiones cuando sea necesario

Si bien, en la mayoría de los casos, una carga de página más rápida significa una mejor experiencia del usuario, no siempre es así. Y AMP-ing algo no debería inhibir al usuario. Hay un equilibrio y la experiencia del usuario siempre gana. Según el sitio web de AMP: "Solo hay que comprometerse cuando la falta de soporte para algo impida que AMP sea ampliamente utilizado e implementado".

6. Resuelve problemas en la capa correcta.

Resolver un problema con AMP no se trata de lo que es más fácil de implementar para el desarrollador, sino de lo que es mejor para el usuario final. Desafortunadamente, estos dos no siempre coinciden. Por ejemplo, si algo es más fácil de integrar en el lado del cliente, no lo implemente simplemente si el usuario se beneficiará de una integración del lado del servidor. Con énfasis en UX, los problemas deben resolverse en el nivel correcto.

7. Sin listas blancas

El marco no admite listas blancas. Por lo tanto, si está buscando un tratamiento especial, no lo encontrará en AMP para ningún sitio, dominio u origen, con una excepción, digamos los creadores:
cuando es "necesario por motivos de seguridad o rendimiento".

Cómo verificar el cumplimiento de AMP

Podría pensar que la mayor fortaleza de las páginas AMP es su velocidad. No es así, dicen sus creadores. No es solo la velocidad lo que hace que AMP sea tan atractivo, sino también su capacidad de validación. De esa manera, los terceros, como las redes sociales, pueden sentirse cómodos enviando a los usuarios allí con la certeza de que obtendrán una página de destino post-clic rápida y sin problemas.

Para responder a la pregunta "¿Mis páginas son compatibles con AMP?", Existen cuatro métodos. Google ofrece tres sobre una base de aprobado / reprobado utilizando su validador. El validador de AMP lo ayudará a descubrir cualquier problema con sus páginas antes del lanzamiento. Al final, aprobar es lo que les da cumplimiento de AMP, lo que les indica a terceros que pueden esperar una experiencia de usuario rápida de su página.

Consola de desarrollador del navegador

Para descubrir problemas con sus páginas AMP utilizando la Consola para desarrolladores del navegador, siga estos tres pasos:

1. Abra su página AMP en su navegador web
2. Agrega "# desarrollo = 1" al final de la URL.
3. Abra la consola de desarrollo de su navegador para verificar si hay errores de validación

Cualquier error que impida que su página cumpla con AMP se verá similar a esto:

interfaz web

Usar la interfaz web para determinar el cumplimiento de AMP es fácil. Primero navegue hasta la interfaz. Luego, simplemente ingrese su código fuente en su campo "URL" y, por último, haga clic en el botón validar.

Los errores encontrados con este método se verán un poco diferentes. Como se muestra a continuación, aparecerán junto a la fuente HTML de la página:

Extensión del navegador

El más fácil de los tres, este validador se encuentra justo en su barra de herramientas en forma de una ingeniosa extensión de Chrome. Sin esfuerzo de su parte, la extensión valida cualquier página AMP en la que se encuentre. Y su estado se indicará con uno de los tres iconos de colores.

• Un icono azul significa que la página en la que se encuentra no es AMP, pero que hay una versión AMP. Si hace clic en el icono, el navegador lo llevará a la versión móvil acelerada.
• Un ícono rojo significa que hay un error en esta página, y se mostrará un número al lado de ese ícono, indicando exactamente cuántos hay.
• Un icono verde significa que no hay errores en la página AMP actual. Sin embargo, puede haber advertencias. Si los hay, aparecerá un número junto a ese icono detallando exactamente cuántos.

Los tres facilitan la detección de errores en las páginas AMP antes de la publicación. La cuarta opción no la ofrece Google, sino Instapage, para los creadores que intentan crear una página de destino rápida después del clic. A continuación, le indicamos cómo utilizarlo al crear una página de destino post-clic de AMP:

Cómo crear una página de destino post-clic de AMP con Instapage

Al leer esos estándares de cumplimiento, es posible que se estremezca de confusión. Afortunadamente, con Instapage, crear una página de destino post-clic de AMP es simple. Los usuarios pueden simplemente seguir estos pasos:

1: crea una nueva página

Cuando comience a crear su nueva página, haga clic en "Página AMP" cuando se le solicite:

Para los usuarios, el siguiente paso puede parecerles desconocido porque, normalmente, el constructor pregunta qué plantilla le gustaría usar. Si bien Instapage ofrece cientos de plantillas de conversión probada para páginas que no son de AMP, las páginas de AMP se crean desde cero. Como tal, las opciones de plantilla no existen actualmente para las páginas AMP.

Paso 2: agrega elementos a la página

Si eres un usuario habitual de Instapage, también notarás que los widgets Timer y HTML no están en la barra de herramientas. Sin embargo, todos los demás íconos y sus capacidades estarán disponibles para que usted cree su página:

Además, dado que AMP restringe CSS y JavaScript, estas opciones habituales no se muestran al constructor. Lo que verá en su lugar es lo siguiente:

Ajusta el fondo, las fuentes, el SEO y todo lo que ves arriba. Hágalo usted mismo o colabore con su equipo utilizando la solución de colaboración Instapage. Luego, incluso guarde los componentes de su página como Instablocks ™ para insertarlos en otras páginas. (Nota: si bien Instablocks y la solución de colaboración funcionan con el generador de AMP, los bloques globales y los mapas de calor no lo hacen actualmente).

A medida que agregue widgets, notará que el peso de la página aumenta. Cada página de destino post-clic de AMP tiene un límite de peso de 75 KB, y el validador AMP de Instapage garantiza que no lo exceda. Cuando haya alcanzado el 80% de su límite de diseño, aparecerá una advertencia, como esta, en la parte inferior de la pantalla:

Paso 3: validar la página

Si continúa construyendo más allá del límite de peso de AMP, aparecerá una ventana de advertencia nuevamente para informarle. Le pedirá que valide la página para confirmar:

Si su página está por debajo del límite de peso y pasa la validación, estas notificaciones aparecerán en su pantalla:

Paso 4: publicar

Una vez que su página esté diseñada y lista para publicarse, simplemente haga clic en "Publicar". Si todavía está por encima del límite de peso, aparecerá esta advertencia:

Regrese a su página e intente reducirla eliminando contenido. Recuerde que los mayores contribuyentes al peso, según ha demostrado la investigación, suelen ser las imágenes. Cuando esté listo, presione publicar nuevamente. Obviamente, si vuelve a ver el mensaje, deberá reducir más la página.

Si no ve ese mensaje, está listo para publicar su página y se le pedirá que ingrese su subdominio y dominio después de presionar el botón "publicar".

La página en vivo se verá así en su tablero, con el logotipo de AMP del rayo junto a su nombre:

Haga clic en él en cualquier momento para volver a él, donde puede editar, ejecutar una prueba A / B, recopilar informes y más.

Empiece a crear páginas de destino post-clic compatibles con AMP

Más que solo velocidad, es el cumplimiento lo que hace que las páginas de destino post-clic de AMP sean tan poderosas. Al adherirse a los principios de diseño del marco, se asegura de que terceros puedan contar con una experiencia móvil optimizada a la que dirigir el tráfico.

¿Está listo para crear una página de destino post-clic de AMP rápida y compatible? Obtenga una demostración de AMP personalizada aquí.