Il Web mobile continua a crescere a un ritmo rapido.
Gli smartphone continuano a vendere con forza, con la sola previsione di Apple portare in $ 180 miliardi dai suoi smartphone entro il 2021. Ci sono oltre 224 milioni di utenti di smartphone negli Stati Uniti, rendendo il web mobile un obiettivo essenziale per qualsiasi proprietario del sito web.
La continua crescita degli utenti del web mobile rende importante per i progettisti e gli sviluppatori di front-end di comprendere la corretta progettazione per le pagine mobili accelerate.
La pratica di pagine mobili accelerate enfatizza le scelte di progettazione che si allineano con cosa i motori di ricerca percepiscono come amichevole , inclusi un pubblico definito, contenuti di alta qualità, formattazione corretta e compatibilità mobile perfetta. Noterai una varietà di pagine mobili accelerate durante la navigazione su Google nei dispositivi mobili con l'abbreviazione AMP nei risultati di ricerca .
Le pagine mobili accelerate utilizzano ancora l'HTML, sebbene incorporino elementi speciali che danno priorità alla velocità sui dispositivi mobili. I requisiti tecnici AMP sono stabiliti da il progetto AMP , con gli standard elaborati insieme a importanti influencer del traffico come Google. Il progetto è stato creato in risposta a goffe interfacce utente e tempi di caricamento lenti durante la navigazione di siti su un dispositivo mobile.
AMP enfatizza la velocità istantanea e un aspetto familiare, dando ai creatori la possibilità di personalizzare le loro pagine all'interno del framework AMP. Il design incentrato sulla maggior parte delle pagine AMP offre una sensazione simile di navigazione, nonostante le differenze nella presentazione dei contenuti e nelle combinazioni di colori.
Il risultato è un'esperienza di navigazione più veloce e più coesa che migliora i tassi di caduta, aumenta il coinvolgimento dei lettori e introduce la navigazione web mobile come punto di forza.
Con la potenza e il potenziale di AMP così evidenti, è pratico per i progettisti considerare i suggerimenti di seguito per ottimizzare l'esperienza di AMP, in modo che i loro clienti possano trarne beneficio in vari modi.
Fai un'impressione sulla pagina con la quale inizierà la maggior parte dei tuoi visitatori. I contenuti statici possono essere visualizzati su AMP per mostrare i prodotti disponibili, suscitare interesse per i siti di e-commerce e quelli che mostrano contenuti generali.
Il Funzione AMP-carosello consente ai designer di visualizzare più pezzi di contenuto simili su un asse orizzontale. Dopo aver importato il componente del carosello nell'intestazione, puoi utilizzare type = "carousel" per visualizzare un elenco di immagini, che appare come una striscia continua. È una funzionalità accattivante che è ideale per la prima pagina quando stai cercando di collegare i visitatori a vedere qualcosa oltre la home page.
Incoraggia i visitatori del sito a scavare in profondità nei tuoi contenuti. Puoi farlo mostrando un elenco di prodotti o post correlati a quello che stanno attualmente visualizzando. Puoi pubblicare staticamente un elenco di contenuti pertinenti, eseguendolo istantaneamente da utilizzando
Se i visitatori inseriscono una pagina di destinazione che non è in linea con le loro richieste, lasceranno il sito o guarda oltre per quello che stanno cercando . Il suggerimento di alternative di prodotto è un metodo eccellente per accogliere il processo di ricerca dell'utente, per lo meno attirandolo maggiormente nel sito. Anche se non trovano esattamente quello che stanno cercando, potrebbero trovare un'alternativa che funzioni altrettanto bene.
È importante per qualsiasi proprietario del sito Web sapere come i visitatori interagiscono con il contenuto. Il
È importante tenere a mente quando si analizzano le analisi che, con AMP, il caching intelligente è incorporato in modo naturale. Il risultato è che puoi visualizzare meno traffico del solito. Tieni a mente solo l'elemento di cache quando analizzi i tuoi numeri inizialmente.
Idealmente, i progettisti non avranno mai qualcosa di sbagliato, ma può accadere. Per garantire che tutto funzioni correttamente su una pagina, usa il validatore integrato di AMP aggiungendo # sviluppo = 1 alla fine dell'URL della pagina. Se apri gli strumenti di sviluppo di Chrome e vedi il messaggio "Convalida AMP completata," allora tutto funziona. In caso contrario, è possibile approfondire fino a quando il problema non si risolve. Puoi anche utilizzare gli strumenti di sviluppo di Chrome per verificare che tutte le risorse esterne, che vanno da immagini e video a caratteri e iframe personalizzati, siano caricate correttamente.
Inoltre, è possibile convalidare i metadati utilizzando Strumento di test dei dati strutturati di Google , recuperando un URL o inserendo uno snippet di codice. Questi strumenti possono aiutare a garantire che tutto sia convalidato, quindi la scansione dei motori di ricerca è abilitata. Sulla nota della scansione del motore di ricerca, controlla anche il file robots.txt, per verificare che "Disallow: / amp /" non sia presente in nessuna riga. Se è lì, i crawler non saranno in grado di accedere ai tuoi file AMP.
Un altro vantaggio di AMP è un framework preesistente per l'implementazione di annunci. Il componente annuncio-amp, o amp-embed, è un contenitore per la visualizzazione di un annuncio. Gli annunci vengono caricati insieme a tutte le altre risorse, con il
JavaScript non esiste nel documento AMP. Invece, AMP carica un iframe da una sandbox iframe. È possibile impostare i valori di larghezza e altezza all'interno
Puoi anche impostare un segnaposto o un'opzione per nessun annuncio disponibile, tramite l'attributo segnaposto. Gli annunci video sono anche possibili con supporto nativo, con supporto completo dei componenti multimediali .
Le pagine mobili accelerate aiutano ad aumentare la visibilità del motore di ricerca tra gli utenti mobili, specialmente ora che Google sta abbracciando le pagine AMP nei risultati di ricerca.
Inoltre, tempi di caricamento più rapidi, personalizzazione flessibile e componenti visivi che cercano di migliorare la frequenza di rimbalzo rendono l'esperienza utente mobile migliore che mai.
Le pagine mobili accelerate forniscono un quadro fantastico per la continua crescita degli utenti del web mobile.