Cum să vă garantați că paginile dvs. de destinație respectă AMP

Când a început proiectul Accelerated Mobile Pages (AMP), acesta era limitat mai ales la conținut static. Cadrul bare-bones a ajutat în mare parte editorii, permițându-le o modalitate de a construi o experiență de descoperire și consum mai rapidă și fără probleme pentru cititori.

Ani mai târziu, însă, s-au schimbat multe. Începuturile unidimensionale ale AMP sunt înlocuite de un set de instrumente dezvoltat capabil să construiască site-uri web întregi. Când vine vorba de lansarea acestor experiențe versatile, cu încărcare rapidă, obiectivul principal al AMP a rămas același: a face webul mobil mai rapid.

Dar modul în care se realizează este diferit. Cu soluții alternative și tehnici avansate, designerii au găsit modalități de a îndeplini constrângerile AMP în timp ce creează pagini care, pentru utilizatorul obișnuit, nu arată sau se simt deloc constrânse.

Cu actualizări și tactici de design în continuă schimbare, la ce ar trebui să se aștepte un designer, astăzi, atunci când încearcă să îndeplinească standardele de conformitate AMP?

7 Principiile de proiectare ale paginilor compatibile AMP

Deși o mare parte din ceea ce poate face AMP s-a schimbat, principiile de proiectare care îi ghidează pe dezvoltatori nu s-au schimbat. Conform site-ului web AMP, pentru a crea pagini compatibile AMP, va trebui să urmați acești șapte piloni atunci când proiectați în cadrul:

1. Experiență utilizator> Experiență dezvoltator> Ușurința implementării

În timp ce AMP este un proiect open-source, acesta a fost inițiat de Google. Și, ca toate lucrurile Google, experiența utilizatorului este prioritatea. „Când aveți dubii”, spun creatorii AMP, „faceți ceea ce este mai bun pentru experiența utilizatorului final, chiar dacă aceasta înseamnă că este mai greu pentru creatorul paginii de construit sau pentru dezvoltatorul bibliotecii de implementat.”

2. Faceți lucrurile numai dacă pot fi făcute rapid

Ca proiect open-source, designerii pot face AMP proprii. Dar, scopul final al paginilor mobile accelerate este accelerarea. Personalizarea este un joc corect și așteptat, dar numai în numele vitezei. Creatorii AMP avertizează: „Nu introduceți componente sau caracteristici în AMP care nu pot rula în mod fiabil la 60 fps sau nu împiedică experiența de încărcare instantanee pe cele mai comune dispozitive mobile de astăzi.”

3. Nu proiectați pentru un viitor viitor ipotetic mai rapid

Creatorilor AMP le place cadrul lor așa cum le place utilizatorilor web paginile lor: acum. Platforma a fost făcută să funcționeze pe web-ul mobil de astăzi, nu pe cel de mâine. Așadar, designerii ar trebui să construiască având în vedere acest lucru, nu un browser ipotetic care funcționează la viteze mach.

În același timp, dezvoltatorii de astăzi modelează viitorul AMP. Așadar, doar pentru că nu poți face ca ceva să funcționeze acum nu înseamnă că nu vei mai dori cândva. De aceea, este important, spun creatorii AMP, ca dezvoltatorii AMP să „participe la dezvoltarea standardelor” pentru a obține optimizări disponibile pentru AMP în viitor.

4. Nu rupeți internetul

Asigurarea unei experiențe de utilizare excelente în orice moment înseamnă pregătirea pentru cele mai nefavorabile scenarii. În cazul AMP, acest lucru ar putea apărea sub forma căderii memoriei cache AMP sau a eșuării API-urilor. În cazul în care se întâmplă ceva, consumul de conținut ar trebui să se „degradeze cu grație”. Dacă conținutul dvs. funcționează cu un cache AMP, ar trebui să funcționeze și fără acesta.

5. Dați prioritate lucrurilor care îmbunătățesc experiența utilizatorului - dar faceți compromisuri atunci când este necesar

Deși, în majoritatea cazurilor, o încărcare mai rapidă a paginii înseamnă o experiență mai bună a utilizatorului, nu întotdeauna. Și ceva AMP-ing nu ar trebui să inhibe utilizatorul. Există un echilibru, iar experiența utilizatorului câștigă întotdeauna. Potrivit site-ului web al AMP: „Doar compromisuri atunci când lipsa de sprijin pentru ceva ar împiedica utilizarea și implementarea pe scară largă a AMP”.

6. Rezolvați problemele de pe stratul potrivit

Rezolvarea unei probleme cu AMP nu se referă la ce este mai ușor de implementat pentru dezvoltator, ci la ce este mai bun pentru utilizatorul final. Din păcate, aceste două nu coincid întotdeauna. De exemplu, dacă ceva este mai ușor integrat pe partea clientului, nu implementați pur și simplu dacă utilizatorul va beneficia de o integrare pe partea serverului. Cu accent pe UX, problemele ar trebui rezolvate în stratul potrivit.

7. Fără liste albe

Cadrul nu acceptă lista albă. Deci, dacă sunteți în căutarea unui tratament special, nu îl veți găsi în AMP pentru niciun site, domeniu sau origine, cu o singură excepție, spun creatorii:
când este „necesar din motive de securitate sau de performanță”.

Cum să verificați conformitatea AMP

S-ar putea să credeți că cea mai mare forță a paginilor AMP este viteza lor. Nu este așa, spun creatorii săi. Nu doar viteza face ca AMP să fie atât de atrăgător, ci și capacitatea sa de a fi validat. În acest fel, terțe părți, cum ar fi rețelele sociale, se pot simți confortabil să trimită utilizatorii acolo cu știința că vor obține o pagină de destinație rapidă și uniformă după clic.

Pentru a răspunde la întrebarea „Sunt compatibile paginile mele AMP?”, Există patru metode. Trei sunt oferite de Google pe bază de trecere / eșec, utilizând validatorul său. Validatorul AMP vă va ajuta să descoperiți orice probleme legate de paginile dvs. înainte de lansare. În cele din urmă, transmiterea este ceea ce le oferă conformitatea AMP, semnalând terților că se pot aștepta la o experiență rapidă a utilizatorului de pe pagina dvs.

Browser Developer Console

Pentru a descoperi problemele legate de paginile dvs. AMP folosind Browser Developer Console, urmați acești trei pași:

1. Deschideți pagina AMP în browserul dvs. web
2. Adăugați „# development = 1” la sfârșitul adresei URL
3. Deschideți consola de dezvoltator a browserului pentru a verifica erorile de validare

Orice eroare care împiedică conformitatea AMP a paginii dvs. va arăta similar cu aceasta:

Interfață web

Utilizarea interfeței web pentru a determina conformitatea AMP este ușoară. Mai întâi navigați la interfață. Apoi, trebuie doar să introduceți codul sursă în câmpul său „URL” și, în cele din urmă, faceți clic pe butonul de validare.

Erorile găsite cu această metodă vor arăta puțin diferit. După cum se arată mai jos, acestea vor apărea lângă sursa HTML a paginii:

Extensie browser

Cel mai simplu dintre toate trei, acest validator se află chiar în bara de instrumente sub forma unei extensii Chrome inteligente. Fără efort din partea dvs., extensia validează orice pagină AMP pe care vă aflați. Iar starea sa se va indica cu una din cele trei pictograme colorate.

• O pictogramă albastră înseamnă că pagina pe care vă aflați nu este AMP, ci că există o versiune AMP a acesteia. Dacă faceți clic pe pictogramă, browserul vă va duce la versiunea mobilă accelerată.
• O pictogramă roșie înseamnă că există o eroare pe această pagină și un număr va apărea lângă pictograma respectivă, indicând exact câte sunt.
• O pictogramă verde înseamnă că nu există erori pe pagina AMP curentă. Cu toate acestea, pot exista avertismente. Dacă există, va apărea un număr lângă pictograma respectivă care detaliază exact câte.

Toate cele trei simplifică erorile de captare în paginile AMP înainte de publicare. A patra opțiune nu este oferită de Google, ci de Instapage, pentru creatorii care încearcă să construiască o pagină de destinație rapidă după clic. Iată cum să îl utilizați atunci când creați o pagină de destinație AMP după clic:

Cum se creează o pagină de destinație AMP după clic cu Instapage

Citind aceste standarde de conformitate, s-ar putea să vă tremurați de confuzie. Din fericire, cu Instapage, crearea unei pagini de destinație AMP după clic este simplă. Utilizatorii pot urma pur și simplu acești pași:

1: Creați o pagină nouă

Când începeți să creați noua dvs. pagină, faceți clic pe „Pagina AMP” când vi se solicită:

Pentru utilizatori, pasul următor poate părea necunoscut, deoarece, în mod normal, constructorul întreabă ce șablon doriți să utilizați. În timp ce Instapage oferă sute de șabloane dovedite pentru conversie pentru pagini non-AMP, paginile AMP sunt create de la zero. Ca atare, opțiunile șablonului nu există în prezent pentru paginile AMP.

Pasul 2: Adăugați elemente la pagină

Dacă sunteți un utilizator Instapage obișnuit, veți observa, de asemenea, că widgeturile Timer și HTML nu se află în bara de instrumente. Toate celelalte pictograme și capacitățile acestora vor fi disponibile pentru a vă construi pagina, totuși:

În plus, deoarece AMP restricționează CSS și JavaScript, aceste opțiuni obișnuite sunt reținute de la constructor. Ceea ce veți vedea în schimb este următorul:

Ajustați fundalul, fonturile, SEO și tot ce vedeți mai sus. Faceți-o singur sau colaborați cu echipa dvs. utilizând soluția de colaborare Instapage. Apoi, salvați chiar și componentele paginii dvs. ca Instablocks ™ pentru a le insera în alte pagini. (Notă: În timp ce Instablocks și Soluția de colaborare funcționează cu constructorul AMP, blocurile globale și mapele de căldură nu funcționează în prezent.)

Pe măsură ce adăugați widgeturi, veți observa creșterea greutății paginii. Fiecare pagină de destinație AMP după clic are o limită de greutate de 75 KB, iar validatorul Instapage AMP vă asigură că nu o depășiți. Când ați atins 80% din limita de proiectare, va apărea un avertisment, astfel, în partea de jos a ecranului:

Pasul 3: Validați pagina

Dacă continuați să construiți dincolo de limita de greutate AMP, va apărea din nou o fereastră de avertizare pentru a vă informa. Vă va solicita să validați pagina pentru a confirma:

Dacă pagina dvs. intră sub limita de greutate, trecând validarea, aceste notificări vor apărea pe ecran:

Pasul 4: publicați

După ce pagina dvs. este proiectată și gata de publicare, trebuie doar să faceți clic pe „Publicați”. Dacă ați depășit încă limita de greutate, va apărea acest avertisment:

Reveniți la pagina dvs. și încercați să o reduceți prin eliminarea conținutului. Amintiți-vă că cercetătorii au arătat că cei mai mari contribuabili la greutate sunt de obicei imagini. Când sunteți gata, apăsați din nou pe publicație. Evident, dacă vedeți din nou mesajul, va trebui să vă reduceți pagina în continuare.

Dacă nu vedeți acel mesaj, sunteți gata să vă publicați pagina și vi se va solicita să introduceți subdomeniul și domeniul după ce apăsați butonul „publicați”.

Pagina live va arăta astfel în tabloul de bord, cu logo-ul fulger AMP lângă numele său:

Faceți clic pe el în orice moment pentru a reveni la el, unde puteți edita, rula un test A / B, aduna rapoarte și multe altele.

Începeți să creați pagini de destinație după clic conform AMP

Mai mult decât viteza, conformitatea face ca paginile de destinație AMP după clic să fie atât de puternice. Respectând principiile de proiectare ale cadrului, vă asigurați că terții pot conta pe o experiență mobilă optimizată pentru a direcționa traficul către.

Sunteți gata să construiți o pagină de destinație AMP rapidă și conformă post-clic? Obțineți aici o demonstrație AMP personalizată.