Como garantir que suas páginas de destino sejam compatíveis com AMP

Quando o projeto Accelerated Mobile Pages (AMP) começou, ele estava restrito principalmente a conteúdo estático. A estrutura básica ajudou principalmente os editores, permitindo-lhes criar uma experiência de descoberta e consumo mais rápida e contínua para os leitores.

Anos depois, porém, muita coisa mudou. O início unidimensional do AMP é substituído por um conjunto de ferramentas evoluído, capaz de construir sites inteiros. Quando se trata de lançar essas experiências versáteis e de carregamento rápido, o principal objetivo do AMP permanece o mesmo: tornar a web móvel mais rápida.

Mas, a forma como isso é alcançado é diferente. Com soluções alternativas e técnicas avançadas, os designers encontraram maneiras de atender às restrições de AMPs enquanto criam páginas que, para o usuário casual, não parecem nem parecem restritas.

Com as atualizações e as táticas de design em constante mudança, o que um designer, hoje, deve esperar ao tentar atender aos padrões de conformidade de AMP?

7 princípios de design de páginas compatíveis com AMP

Embora muito do que AMP pode fazer tenha mudado, os princípios de design que orientam seus desenvolvedores não. De acordo com o site AMP, para criar páginas compatíveis com AMP, você terá que seguir estes sete pilares ao projetar dentro da estrutura:

1. Experiência do usuário> Experiência do desenvolvedor> Facilidade de implementação

Embora o AMP seja um projeto de código aberto, ele foi iniciado pelo Google. E, como todas as coisas do Google, a experiência do usuário é a prioridade. “Em caso de dúvida”, dizem os criadores de AMP, “faça o que é melhor para a experiência do usuário final, mesmo que isso signifique que seja mais difícil para o criador da página construir ou para o desenvolvedor da biblioteca implementar”.

2. Só faça as coisas se puderem ser feitas rapidamente

Como um projeto de código aberto, os designers podem fazer suas próprias AMP. Mas, o objetivo final das páginas móveis aceleradas é a aceleração. A personalização é um jogo justo e esperado, mas apenas em nome da velocidade. Os criadores de AMP avisam: “Não introduza componentes ou recursos de AMP que não possam ser executados de maneira confiável a 60 fps ou atrapalhem a experiência de carregamento instantâneo nos dispositivos móveis mais comuns de hoje.”

3. Não projete para um futuro navegador hipotético mais rápido

Os criadores de AMP gostam de sua estrutura da mesma forma que os usuários da Web gostam de suas páginas: agora. A plataforma foi feita para funcionar na web móvel de hoje, não na web de amanhã. Portanto, os designers devem construir com isso em mente, não um navegador hipotético que funcione em velocidades mach.

Ao mesmo tempo, os desenvolvedores de hoje moldam o futuro do AMP. Então, só porque você não pode fazer algo funcionar agora, não significa que você não vai querer algum dia. É por isso que é importante, dizem os criadores de AMP, que os desenvolvedores de AMP “participem do desenvolvimento de padrões” para obter otimizações disponíveis para AMP no futuro.

4. Não quebre a web

Garantir uma ótima experiência do usuário em todos os momentos significa se preparar para os piores cenários. No caso de AMP, isso pode vir na forma de cache de AMP caindo ou falha de APIs. Caso isso aconteça, o consumo de seu conteúdo deve apenas "degradar-se normalmente". Se o seu conteúdo funciona com um cache de AMP, também deve funcionar sem ele.

5. Priorize coisas que melhorem a experiência do usuário - mas comprometa quando necessário

Embora, na maioria dos casos, um carregamento mais rápido da página signifique uma melhor experiência do usuário, nem sempre isso acontece. E fazer algo AMP não deve inibir o usuário. Há um equilíbrio e a experiência do usuário sempre vence. De acordo com o site da AMP: “Faça concessões apenas quando a falta de suporte para algo impedir que o AMP seja amplamente usado e implantado.”

6. Resolva problemas na camada certa

Resolver um problema com AMP não é o que é mais fácil para o desenvolvedor implementar, mas o que é melhor para o usuário final. Infelizmente, esses dois nem sempre coincidem. Por exemplo, se algo é mais fácil de integrar no lado do cliente, não implemente simplesmente se o usuário se beneficiar de uma integração do lado do servidor. Com ênfase na UX, os problemas devem ser resolvidos na camada certa.

7. Sem listas de permissões

A estrutura não oferece suporte à lista de permissões. Portanto, se você estiver procurando por um tratamento especial, não o encontrará nas AMP de nenhum site, domínio ou origem, com uma exceção, digamos, os criadores:
quando é “necessário por motivos de segurança ou desempenho”.

Como verificar a conformidade com AMP

Você pode pensar que o maior ponto forte das páginas AMP é a velocidade. Não é assim, dizem seus criadores. Não é apenas a velocidade que torna o AMP tão atraente, mas sua capacidade de ser validado. Dessa forma, terceiros, como as redes sociais, podem se sentir confortáveis ​​enviando usuários para lá com o conhecimento de que eles obterão uma página de destino pós-clique rápida e perfeita.

Para responder à pergunta “As minhas páginas são compatíveis com AMP?”, Existem quatro métodos. Três são oferecidos pelo Google com base em aprovação / reprovação usando seu validador. O validador de AMP ajudará você a descobrir quaisquer problemas com suas páginas antes do lançamento. No final das contas, passar é o que lhes dá conformidade com AMP, sinalizando para terceiros que eles podem esperar uma experiência do usuário rápida em sua página.

Console do navegador para desenvolvedores

Para descobrir problemas com suas páginas AMP usando o Console do desenvolvedor do navegador, siga estas três etapas:

1. Abra sua página AMP no navegador da Web
2. Adicione “# development = 1” ao final do URL
3. Abra o console do desenvolvedor do seu navegador para verificar se há erros de validação

Qualquer erro que impeça sua página de conformidade com AMP será semelhante a este:

interface web

Usar a interface da web para determinar a conformidade com AMP é fácil. Primeiro, navegue até a interface. Em seguida, basta inserir seu código-fonte no campo “URL” e, por último, clicar no botão validar.

Os erros encontrados com este método serão um pouco diferentes. Conforme mostrado abaixo, eles aparecerão ao lado do código-fonte HTML da página:

Extensão do navegador

O mais fácil de todos os três, este validador fica bem na sua barra de ferramentas na forma de uma extensão do Chrome bacana. Sem esforço da sua parte, a extensão valida qualquer página AMP em que você esteja. E seu status será indicado com um dos três ícones coloridos.

• Um ícone azul significa que a página em que você está não é AMP, mas sim uma versão AMP dela. Se você clicar no ícone, o navegador o levará para a versão móvel acelerada.
• Um ícone vermelho significa que há um erro nesta página e um número aparecerá ao lado desse ícone, indicando exatamente quantos existem.
• Um ícone verde significa que não há erros na página AMP atual. No entanto, pode haver avisos. Se houver, um número aparecerá próximo a esse ícone detalhando exatamente quantos.

Todos os três facilitam a detecção de erros nas páginas AMP antes da publicação. A quarta opção não é oferecida pelo Google, mas pela Instapage, para criadores que tentam construir uma página de destino pós-clique rápida. Veja como usá-lo ao criar uma página de destino AMP pós-clique:

Como criar uma página de destino AMP pós-clique com Instapage

Ao ler esses padrões de conformidade, você pode estremecer de confusão. Felizmente, com o Instapage, criar uma página de destino AMP pós-clique é simples. Os usuários podem simplesmente seguir estas etapas:

1: Crie uma nova página

Quando você começar a criar sua nova página, clique em “Página AMP” quando solicitado:

Para os usuários, a próxima etapa pode parecer desconhecida, porque, normalmente, o construtor pergunta qual modelo você gostaria de usar. Embora a Instapage ofereça centenas de modelos comprovados de conversão para páginas não AMP, as páginas AMP são criadas do zero. Como tal, atualmente não existem opções de modelo para páginas AMP.

Etapa 2: adicionar elementos à página

Se você for um usuário regular do Instapage, também notará que os widgets Timer e HTML não estão na barra de ferramentas. Todos os outros ícones e seus recursos estarão disponíveis para você construir sua página, embora:

Além disso, como o AMP restringe CSS e JavaScript, essas opções usuais são negadas ao construtor. O que você verá em vez disso é o seguinte:

Ajuste o plano de fundo, as fontes, o SEO e tudo o que você vê acima. Faça você mesmo ou colabore com sua equipe usando a Solução de Colaboração Instapage. Em seguida, salve até mesmo os componentes da página como Instablocks ™ para inserir em outras páginas. (Observação: embora o Instablocks e a solução de colaboração funcionem com o construtor de AMP, os blocos globais e os mapas de calor não funcionam atualmente.)

Conforme você adiciona widgets, você notará o peso da página aumentando. Cada página de destino AMP pós-clique tem um limite de peso de 75 KB, e o validador Instapage AMP garante que você não o exceda. Quando você atingir 80% do seu limite de design, um aviso aparecerá, assim, na parte inferior da tela:

Etapa 3: validar a página

Se você continuar construindo além do limite de peso de AMP, uma janela de aviso aparecerá novamente para informá-lo. Ele solicitará que você valide a página para confirmar:

Se sua página estiver abaixo do limite de peso, passando na validação, estas notificações aparecerão em sua tela:

Etapa 4: publicar

Assim que sua página estiver projetada e pronta para publicação, basta clicar em “Publicar”. Se você ainda estiver acima do limite de peso, este aviso aparecerá:

Volte para sua página e tente reduzi-la removendo conteúdo. Lembre-se de que os maiores contribuintes para o peso, a pesquisa mostrou, geralmente são as imagens. Quando estiver pronto, clique em publicar novamente. Obviamente, se você vir a mensagem novamente, precisará cortar ainda mais sua página.

Se não vir essa mensagem, você está pronto para publicar sua página e será solicitado a inserir seu subdomínio e domínio depois de clicar no botão "publicar".

A página ativa terá a seguinte aparência em seu painel, com o logotipo AMP do relâmpago ao lado do nome:

Clique nele a qualquer momento para voltar a ele, onde você pode editar, executar um teste A / B, reunir relatórios e muito mais.

Comece a criar páginas de destino pós-clique em conformidade com AMP

Mais do que velocidade, é a conformidade que torna as páginas de destino pós-clique de AMP tão poderosas. Ao aderir aos princípios de design da estrutura, você garante que terceiros possam contar com uma experiência móvel otimizada para direcionar o tráfego.

Pronto para criar uma página de destino pós-clique de AMP rápida e compatível? Obtenha uma demonstração de AMP personalizada aqui.