Funcionalidade de design de AMP: o que mais é possível com a estrutura?

Embora tenha alcançado níveis impressionantes de complexidade de design, alguns veem o AMP como uma estrutura limitada. Em sua defesa, o estilo de AMP começou com o foco em limitar as páginas para melhorar a velocidade de carregamento. E, embora a velocidade tenha permanecido como seu objetivo final, as limitações de design tornaram-se muito menores.

Os designers não estão mais restritos a publicar conteúdo estático com AMP. Hoje, é uma estrutura versátil que oferece suporte a um design robusto. Se você o descartou há muito tempo como uma estrutura rígida e básica que não vale seu tempo, esta compilação pode obrigá-lo a repensar sua postura.

9 recursos de design de AMP que você talvez não conheça

(Para obter mais detalhes sobre as possibilidades com AMP, junte-se a nós no próximo seminário on-line enquanto discutimos equívocos comuns sobre AMP. Obtenha todas as suas perguntas sobre AMP respondidas por um especialista que está liderando o Projeto AMP.)

1. Crie um aplicativo da web progressivo (PWA)

Embora a web móvel tenha percorrido um longo caminho, ainda há um longo caminho a percorrer. Os relatórios mostram que, embora os 1.000 principais sites para celular alcancem 4 vezes mais pessoas do que os 1.000 principais aplicativos para celular, eles envolvem os usuários por 20 vezes menos minutos. Os sites para celular estão atraindo visitantes, mas não podem fornecer a usabilidade intuitiva de um aplicativo nativo. É aqui que entram os aplicativos da web progressivos.

Os aplicativos da web progressivos tentam resolver o problema de usabilidade, oferecendo uma experiência híbrida que leva os usuários a um site móvel e os solicita a baixar um ícone que fica em sua tela inicial como um aplicativo nativo. Quando aberta, a experiência é projetada para ter a aparência e o comportamento dos aplicativos móveis nativos.

Combinado com AMP, esses PWAs podem ser colocados em alta velocidade. Aqui estão algumas maneiras de usá-los juntos:

AMP como PWA

Se seu aplicativo da web progressivo não precisa do uso total de linguagens de codificação restritas por AMP, a estrutura pode fornecer tudo de que você precisa para criar seu próprio PWA. Na verdade, “AMP por exemplo” é uma demonstração de trabalho da combinação:

AMP em PWA

AMP e PWAs não são tudo ou nada. Não é como se você não pudesse usar um layout AMP para alguns de seus PWA, mas não todos. Se você descobrir que seu aplicativo da Web progressivo não funciona sob restrições de codificação AMP CSS, use uma forma da estrutura chamada “Shadow AMP”. Isso permite que o AMP seja aninhado em outras seções do seu site, para que você possa fazer o AMP do que deseja e não do que não deseja.

AMP para PWA

Mesmo que você não ache que seu PWA possa operar sob as restrições de AMP, você ainda pode usar o estilo de AMP para atrair usuários a ele. Com o aumento de visibilidade do AMP nos mecanismos de pesquisa, a publicação de notícias e postagens em blogs com a estrutura é muito simples. Quando eles clicarem em sua página AMP, os visitantes serão solicitados a fazer o download do seu PWA.

2. Para criar uma página de checkout

Embora a AMP ainda esteja trabalhando para permitir uma variedade maior de transações, agora você pode aceitar pagamentos em páginas projetadas para AMP. Com formulários simples, reúna os dados necessários para o pagamento, como nome, endereço, detalhes do cartão de crédito e até aceite códigos promocionais:

A próxima grande prioridade para a equipe de AMP será um componente de pagamento “mais robusto” para os usuários. Em seu roteiro de produto, eles escrevem:

Atualmente, o AMP oferece suporte a transações apenas em contextos limitados, como via amp-iframe com a API de solicitação de pagamento. No entanto, isso omite muitos casos de uso importantes. Esta atividade implementaria um componente de pagamento mais robusto em AMP, potencialmente incluindo integrações com processadores de pagamento de terceiros, widgets, carteiras, etc (estes devem ser suportados de alguma forma).

3. Para construir uma seção de comentários

Quando bem feita, uma seção de comentários pode ser a fonte de discussões produtivas, ideias de conteúdo e até leads. E agora, com AMP, os designers podem criar uma seção de comentários onde os usuários podem se envolver nessa discussão e até mesmo exigir login, o que permite que os usuários discutam de uma maneira mais pessoal:

4. Histórias AMP

Se você já viu histórias do Snapchat, Instagram ou Facebook, as histórias de AMP serão muito familiares. De acordo com Rudy Galfi, gerente de produto de AMP do Google, as histórias oferecem aos editores “um formato voltado para dispositivos móveis para fornecer notícias e informações como histórias visualmente ricas e fáceis de usar:”

De acordo com Galfi, editoras como CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media e The Washington Post estiveram envolvidas no desenvolvimento inicial do formato. Agora, está disponível para todos os usuários e, no que diz respeito à descoberta, você pode encontrar histórias AMP em Imagens do Google, Discover, Search e News.

Aqui está um exemplo de como pode ser visto um:

5. Obtenha visibilidade adicional no Bing

Em uma postagem recente no blog, Fabrice Canel, gerente de programa principal do Bing, anunciou um novo recurso para o mecanismo de busca da empresa:

Em 2016, o Bing aderiu ao esforço de código aberto das Accelerated Mobile Pages (AMP, para abreviar) para ajudá-lo a “encontrar” e “fazer” pesquisas mais rapidamente, independentemente de onde você esteja e em qualquer dispositivo quando estiver procurando informações. Hoje, temos o prazer de anunciar o lançamento do visualizador de AMP do Bing e do Cache de AMP do Bing, permitindo que as páginas da web habilitadas para AMP funcionem diretamente dos resultados da pesquisa móvel do Bing, permitindo que o Bing forneça experiências móveis mais rápidas aos usuários do Bing.

Este visualizador é semelhante ao do Google - um carrossel com imagens com raios para indicar conteúdo habilitado para AMP:

Agora, além do tráfego do mecanismo de pesquisa do Google, os usuários de AMP podem esperar imóveis prioritários nas páginas de resultados do mecanismo de pesquisa do Bing.

6. Crie efeitos de rolagem

Muitas vezes, os efeitos vinculados à rolagem atrapalham a experiência do usuário. Eles são envolventes, mas não da maneira que você gostaria que fossem. Eles desviam a atenção do conteúdo principal da página e podem adicionar muito peso à página, dependendo da implementação do efeito.

Às vezes, porém, o conteúdo da meta de uma página (o que você absolutamente deseja que seu visitante consuma) são as imagens às quais você está adicionando efeitos. Pegue o portfólio online de um freelancer, por exemplo, ou o site de uma agência de desenvolvimento da web. Nesse caso, os efeitos demonstram a habilidade do designer.

No entanto, se esse design não for implementado corretamente, ele pode aumentar o peso da página, o que torna o carregamento mais lento e menos provável que um cliente em potencial permaneça por perto. Para resolver esse problema, você pode combinar amp-position-observer com amp-animation para criar uma série de efeitos envolventes, mas de carregamento rápido:

Animação com rolagem

A animação com rolagem pode dar vida às imagens conforme o usuário rola a página. Veja este girador de agitação construído com AMP, por exemplo, que gira conforme o usuário rola.

Transições de esmaecimento e deslizamento

Com as transições de esmaecimento e slide, você pode combinar efeitos vinculados ao tempo e de rolagem para transições sensíveis ao tempo. Por exemplo, você pode criar um efeito no qual o texto desliza para uma imagem quando essa imagem está no modo de exibição total do usuário. E com o efeito de esmaecimento, você pode esmaecer essa imagem conforme o usuário se aproxima, e esmaecer conforme o usuário rola a tela. Veja em ação aqui.

Carrossel

Um efeito de transição também pode ser usado com carrossel AMP:

No exemplo acima, a imagem do rio está parcialmente oculta. Mas, com um efeito de rolagem adicionado, ele se moverá para a esquerda em visualização completa quando o usuário rolar até ele, sugerindo que é rolável horizontalmente.

Janelas paralaxe

Ao definir uma janela de quebra menor que a imagem, você pode criar um efeito de paralaxe:

Esta janela é menor do que a imagem e, conforme o usuário rola, a janela se move para baixo, revelando o resto do elefante na imagem.

7. AMPlify seu e-mail

Você sabe sobre como acelerar páginas da web, mas e o e-mail? O AMP para e-mail busca trazer a mesma velocidade e usabilidade das páginas AMP para o Gmail. Permitindo que os desenvolvedores enviem e-mails como documentos AMP, o potencial do AMP para e-mail é sua capacidade de criar uma experiência rica para os usuários.

Aakash Sahney, gerente de produto do Gmail e Chat, afirma que o novo AMP para especificações de e-mail será “uma maneira poderosa para os desenvolvedores criarem experiências de e-mail mais envolventes, interativas e acionáveis”. Com ele, os usuários podem concluir tarefas por meio do Gmail, como RSVP para um evento, marcar uma consulta ou preencher um questionário, para citar alguns.

Pinterest, Booking.com e Doodle estão entre os primeiros a testar o AMP para especificações de e-mail:

A AMP para especificações de e-mail está disponível hoje, mas apenas com acesso de visualização do desenvolvedor por meio da inscrição aqui.

8. Para criar facilmente páginas de destino pós-clique de alta velocidade

Quando se trata de aumentar as taxas de conversão, otimizar a página de destino pós-clique deve ser uma prioridade. Mas, criar uma página de destino pós-clique para cada promoção, AMP ou não, pode drenar rapidamente os recursos de uma equipe. É por isso que criamos a funcionalidade AMP no construtor Instapage:

Agora você pode criar páginas de destino AMP pós-clique na velocidade da luz, que carregam na velocidade da luz. Simplesmente arraste e solte os elementos, clique para editar e salve qualquer elemento para adicionar às páginas futuras.

Conforme você cria, você será notificado se chegar a ultrapassar o limite de peso da página AMP de 75 KB. Quando você atinge 80% do limite, este indicador de aviso aparece perto da parte inferior da tela:

Do contrário, você pode publicar no WordPress ou em seu próprio domínio personalizado:

9. Para otimizar suas páginas de destino pós-clique

Criar uma ótima página de destino AMP pós-clique é uma coisa, mas aprimorá- la é algo totalmente diferente. Quando se trata de descobrir maneiras de aumentar a taxa de conversão de sua página de destino AMP pós-clique, um ótimo lugar para começar é com o teste A / B.

O teste A / B envolve o teste de uma página original, chamada de controle, em relação a uma página alternativa, chamada de variação. Em termos muito básicos, o vencedor depois que o tráfego igual é direcionado para cada um é a página melhor (para uma explicação mais detalhada, consulte o guia de teste A / B da Instapage).
Parece fácil em teoria, mas certamente não é. É necessário conhecimento de design de teste, ameaças de validade, software e muito mais. E o que é especialmente difícil é que, a cada teste executado, você precisa criar pelo menos uma página totalmente nova para ela.

Felizmente, o Instapage permite que você duplique sua página de destino AMP pós-clique com um clique:

Basta selecionar “Criar Teste A / B” e “Nova Variação” e você duplicará sua página e editará a partir daí, ou reiniciará completamente e importará blocos de texto salvos, blocos de imagem, widgets e muito mais usando os “Instablocks” recurso. Em seguida, execute seu teste e implemente o design vencedor.

Obtenha mais no webinar do Google AMP

A adoção de AMP só está crescendo. Agora, mais de 31 milhões de domínios criaram mais de 5 bilhões de páginas AMP. E de acordo com um estudo intercontinental da WPengine, 99% dos usuários veem os benefícios do uso de AMP em suas organizações.

AMP não é mais uma estrutura básica restrita. Hoje, é capaz de construir sites inteiros que carregam instantaneamente. E, com planos no horizonte para criar um sistema de pagamento mais robusto, efeitos adicionais e uma integração com o Google Play, ele está se tornando cada vez mais poderoso.

Acha que conhece AMP? Saiba mais sobre os mitos da estrutura com Instapage e criador, Google, em nosso webinar exclusivo. Em seguida, obtenha uma demonstração de AMP personalizada aqui e veja como é fácil criar páginas AMP ultrarrápidas.