Funcționalitatea de proiectare AMP: Ce altceva este posibil cu cadrul?

Deși a atins niveluri impresionante de complexitate a designului, totuși unii consideră AMP ca un cadru limitat. În apărarea lor, stilul AMP a început cu limitarea paginilor pentru a îmbunătăți viteza de încărcare. Și, deși viteza a rămas obiectivul său final, limitările de proiectare au devenit mult mai puține.

Designerii nu mai sunt limitați să publice conținut static cu AMP. Astăzi, este un cadru versatil care susține designul robust. Dacă l-ați anulat demult ca un cadru rigid și cu oase goale care nu merită timpul, această compilație vă poate obliga să vă regândiți poziția.

9 capacități de proiectare AMP pe care este posibil să nu le cunoașteți

(Pentru mai multe detalii despre posibilitățile oferite de AMP, alăturați-vă în viitorul webinar, pe măsură ce discutăm concepțiile greșite despre AMP. Obțineți răspuns la toate întrebările dvs. AMP de către un expert care conduce proiectul AMP.)

1. Creați o aplicație web progresivă (PWA)

Deși web-ul mobil a parcurs un drum lung, mai are încă un drum lung de parcurs. Rapoartele arată că, în timp ce primele 1.000 de site-uri mobile ajung la 4 ori mai multe persoane decât primele 1.000 de aplicații mobile, acestea implică utilizatorii cu 20 de minute mai puține. Site-urile mobile atrag vizitatori, dar nu pot oferi intuitivitatea unei aplicații native. Aici intervin aplicațiile web progresive.

Aplicațiile web progresive încearcă să rezolve problema de utilizare, oferind o experiență hibridă care îi atrage pe utilizatori pe un site mobil și îi solicită să descarce o pictogramă care trăiește pe ecranul de pornire ca o aplicație nativă. Când este deschisă, experiența este concepută să arate și să se comporte așa cum fac aplicațiile mobile native.

Combinate cu AMP, aceste PWA pot fi lovite cu viteză mare. Iată câteva moduri în care le puteți folosi împreună:

AMP ca PWA

Dacă aplicația dvs. web progresivă nu are nevoie de utilizarea completă a limbajelor de codare restricționate de AMP, cadrul poate oferi tot ce aveți nevoie pentru a vă crea propriul PWA. De fapt, „AMP prin exemplu” este o prezentare funcțională a combinației:

AMP în PWA

AMP și PWA nu sunt toate sau nimic. Nu este ca și cum nu ați putea utiliza un aspect AMP pentru unele dintre PWA, dar nu pentru toate. Dacă găsiți că aplicația dvs. web progresivă nu poate funcționa sub restricții de codare AMP CSS, puteți utiliza o formă a cadrului numită „Shadow AMP”. Acest lucru permite AMP să se cuibărească în alte secțiuni ale site-ului dvs. web, astfel încât să puteți AMP ceea ce doriți și nu ceea ce nu.

AMP la PWA

Chiar dacă nu credeți că PWA-ul dvs. poate funcționa sub restricțiile AMP, puteți folosi stilul AMP pentru a atrage utilizatorii către acesta. Odată cu creșterea vizibilității AMP în motoarele de căutare, face ca publicarea de știri și postări de bloguri cu cadrul să devină neînțeleasă. Când fac clic pe pagina dvs. AMP, vizitatorii vor fi rugați să descarce PWA.

2. Pentru a crea o pagină de plată

În timp ce AMP încă lucrează la activarea unei varietăți mai largi de tranzacții, acum puteți accepta plăți pe paginile proiectate de AMP. Cu formulare simple, colectați detalii necesare plății, cum ar fi numele, adresa, detaliile cardului de credit și chiar acceptați coduri promoționale:

Următoarea mare prioritate pentru echipa AMP va fi o componentă de plată „mai robustă” pentru utilizatori. În foaia de parcurs a produselor, ei scriu:

În prezent, AMP acceptă tranzacții doar în contexte limitate, cum ar fi prin amp-iframe cu API-ul de solicitare a plății - cu toate acestea, acest lucru omite multe cazuri de utilizare importante. Această activitate ar implementa o componentă de plată mai robustă în AMP, care ar putea include integrări cu procesoare de plăți terțe, widget-uri, portofele etc. (acestea ar trebui să fie acceptate cumva indiferent).

3. Pentru a crea o secțiune de comentarii

Când se face corect, o secțiune de comentarii poate fi sursa discuțiilor productive, a ideilor de conținut și chiar a clienților potențiali. Și acum, cu AMP, designerii pot crea o secțiune de comentarii în care utilizatorii pot participa la acea discuție și chiar pot solicita conectarea, care le permite utilizatorilor să discute într-un mod mai personal:

4. Povești AMP

Dacă ați văzut povești Snapchat, Instagram sau Facebook, poveștile AMP vor părea foarte familiare. Potrivit lui Rudy Galfi, Manager de produs pentru AMP la Google, poveștile oferă editorilor „un format orientat pe dispozitive mobile pentru difuzarea de știri și informații ca povești bogate din punct de vedere vizual, accesibile:”

Potrivit lui Galfi, editorii precum CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media și The Washington Post au fost implicați în dezvoltarea timpurie a formatului. Acum, este disponibil pentru toți utilizatorii și, în ceea ce privește descoperirea, puteți găsi povești AMP în Google Images, Discover, Search și News.

Iată un exemplu despre cum ar putea vedea cineva:

5. Obțineți vizibilitate suplimentară în Bing

Într-o postare recentă pe blog, Fabrice Canel, director principal de programe la Bing, a anunțat o nouă funcție pentru motorul de căutare al companiei:

În 2016, Bing s-a alăturat efortului open-source Accelerated Mobile Pages (AMP pe scurt) pentru a vă ajuta să „găsiți” și să „faceți” căutări mai repede, indiferent de locul în care vă aflați și de pe orice dispozitiv atunci când căutați informații. Astăzi, suntem încântați să anunțăm lansarea Bing AMP viewer și Bing AMP Cache care permit paginilor web compatibile AMP să funcționeze direct din rezultatele căutării mobile ale Bing, permițând Bing să ofere experiențe mobile mai rapide utilizatorilor Bing.

Acest vizualizator arată similar cu Google - un carusel care conține imagini cu fulgere pentru a indica conținutul compatibil AMP:

Acum, pe lângă traficul motoarelor de căutare de la Google, utilizatorii AMP se pot aștepta la proprietăți imobiliare prioritare pe paginile cu rezultatele motorului de căutare Bing.

6. Creați efecte legate de derulare

De multe ori, efectele legate de derulare împiedică experiența utilizatorului. Se angajează, dar nu așa cum vrei tu să fie. Ei distrag atenția de la conținutul principal al unei pagini și pot adăuga o mulțime de greutate a paginii în funcție de implementarea efectului.

Uneori, totuși, conținutul obiectivului unei pagini (ceea ce doriți în mod absolut ca vizitatorul dvs. să consume) este imaginea la care adăugați efecte. Luați portofoliul online al unui freelancer, de exemplu, sau site-ul web al unei agenții de dezvoltare web. În acest caz, efectele demonstrează abilitatea proiectantului.

Cu toate acestea, în cazul în care acest proiect nu este implementat în mod adecvat, se poate adăuga la greutatea paginii, ceea ce face ca încărcarea să fie mai lentă și mai puțin probabil să rămână un potențial. Pentru a rezolva această problemă, puteți combina amplificator-poziție-observator cu amplificator-animație pentru a crea o serie de efecte captivante, dar cu încărcare rapidă:

Animație derulată

Animația cu derulare poate da viață imaginilor pe măsură ce un utilizator parcurge pagina dvs. Luați acest spinner fidget construit cu AMP, de exemplu, care se învârte în timp ce utilizatorul derulează.

Tranziții de estompare și glisare

Cu tranzițiile de decolorare și glisare, puteți combina efectele legate de timp și de derulare pentru tranziții sensibile la timp. De exemplu, puteți crea un efect în care textul să alunece pe o imagine atunci când acea imagine se află în vizualizarea completă a utilizatorului. Și cu efectul de estompare, puteți estompa acea imagine în timp ce utilizatorul se apropie de ea și o poate estompa pe măsură ce utilizatorul se deplasează. Vedeți-o în acțiune aici.

Carusel

Un efect de tranziție poate fi utilizat și cu caruselul AMP:

În exemplul de mai sus, imaginea râului este parțial ascunsă. Dar, cu un efect de derulare adăugat, se va fixa la stânga în vizualizare completă atunci când utilizatorul derulează către el, sugerând că acesta poate fi derulat pe orizontală.

Ferestre paralele

Definind o fereastră de pauză care este mai mică decât imaginea, puteți crea efect de paralaxă:

Această fereastră este mai mică decât imaginea și, pe măsură ce utilizatorul derulează, fereastra se deplasează în jos, dezvăluind restul elefantului din imagine.

7. AMPlify dvs. de e-mail

Știți despre accelerarea paginilor web, dar ce puteți spune despre e-mail? AMP pentru e-mail pare să aducă aceeași viteză și utilizare a paginilor AMP în Gmail. Permițând dezvoltatorilor să trimită e-mailuri ca documente AMP, potențialul AMP pentru e-mail este capacitatea sa de a crea o experiență bogată pentru utilizatori.

Aakash Sahney, manager de produs la Gmail și Chat, spune că noua specificație AMP pentru e-mail va fi „o modalitate puternică pentru dezvoltatori de a crea experiențe de e-mail mai atractive, interactive și mai accesibile”. Cu acesta, utilizatorii pot finaliza sarcini prin Gmail, cum ar fi RSVP la un eveniment, pot rezerva o întâlnire sau pot completa un chestionar, pentru a numi doar câteva.

Pinterest, Booking.com și Doodle sunt printre primele care testează AMP pentru specificațiile de e-mail:

Specificațiile AMP pentru e-mail sunt disponibile astăzi, dar numai cu acces la previzualizarea dezvoltatorului prin înscriere aici.

8. Pentru a crea cu ușurință pagini de destinație post-clic de mare viteză

Când vine vorba de creșterea ratelor de conversie, optimizarea paginii de destinație după clic ar trebui să fie o prioritate. Dar, crearea unei pagini de destinație după clic pentru fiecare promoție, AMP sau nu, poate scurge rapid resursele unei echipe. De aceea am creat funcționalitatea AMP în Instapage Builder:

Acum puteți crea pagini de destinație AMP după clic la viteza fulgerului care se încarcă la viteza fulgerului. Pur și simplu trageți și fixați elemente, faceți clic pentru a edita și salvați orice element pe care să îl adăugați la paginile viitoare.

Pe măsură ce construiți, veți fi notificat dacă vă apropiați de limita de greutate a paginii AMP de 75kb. Când atingeți 80% din limită, acest indicator de avertizare apare în partea de jos a ecranului:

Dacă nu, este clar să publicați pe WordPress sau propriul domeniu personalizat:

9. Pentru a vă optimiza paginile de destinație după clic

Crearea unei pagini de destinație AMP grozave după clic este un lucru, dar îmbunătățirea acesteia este cu totul diferită. Când vine vorba de a descoperi modalități de a crește rata de conversie a paginii dvs. de destinație AMP după clic, un loc minunat pentru a începe este testarea A / B.

Testarea A / B implică testarea unei pagini originale, numită control, pe o pagină alternativă, numită variație. În termeni foarte simpli, câștigătorul după un trafic egal este condus către fiecare este pagina mai bună (pentru o explicație mai detaliată, consultați ghidul de testare Instapage A / B).
Pare ușor în teorie, dar cu siguranță nu este. Este nevoie de cunoștințe despre proiectarea testelor, amenințările de validitate, software și multe altele. Și ceea ce este deosebit de dificil este că pentru fiecare test pe care îl executați, trebuie să creați cel puțin o pagină complet nouă pentru.

Din fericire, Instapage vă permite să copiați pagina de destinație AMP după clic cu un clic:

Pur și simplu selectați „Creați test A / B”, apoi „Variație nouă” și veți duplica pagina și o veți edita de acolo, sau veți relua complet și importa blocuri de text salvate, blocuri de imagini, widgeturi și multe altele folosind „Instablocks” caracteristică. Apoi, rulați testul și implementați designul câștigător.

Obțineți mai multe din seminarul web Google AMP

Adopția AMP crește doar. Acum, peste 31 de milioane de domenii au creat peste 5 miliarde de pagini AMP. Și potrivit unui studiu intercontinental realizat de WPengine, 99% dintre utilizatori văd beneficiile utilizării AMP pentru organizația lor.

AMP nu mai este un cadru restrâns cu oase goale. Astăzi, este capabil să construiască site-uri web întregi care se încarcă instantaneu. Și, cu planuri la orizont pentru a crea un sistem de plăți mai robust, efecte suplimentare și o integrare Google Play, devine doar mai puternic.

Crezi că știi AMP? Aflați mai multe despre miturile cadrului cu Instapage și creatorul, Google, în cadrul nostru webinar exclusiv. Apoi, obțineți aici o demonstrație AMP personalizată și vedeți cât de ușor este să creați pagini AMP rapide.