Mobilbanen fortsetter å vokse i et raskt tempo.
Smartphones fortsetter å selge sterkt, med Apple alene prognoser for ta inn 180 milliarder dollar fra smarttelefonene innen 2021. Det er over 224 millioner smarttelefonbrukere i USA, gjør mobilnettverket et viktig fokus for enhver nettsideeier.
Den fortsatte veksten av mobilnettbrukere gjør det viktig for designere og front-end-utviklere å forstå riktig design for akselererte mobilsider.
Øvelsen av akselererte mobile sider understreker designvalg som stemmer overens med hva søkemotorer oppfatter som vennlig , inkludert et bestemt målgruppe, innhold av høy kvalitet, riktig formatering og sømløs mobilkompatibilitet. Du vil legge merke til en rekke akselererte mobilsider når du surfer på Google i mobil ved forkortelsen AMP i søkeresultatene .
Fremskynde mobile sider bruker fortsatt HTML, selv om de inneholder spesielle elementer som prioriterer fart på mobile enheter. AMP tekniske krav er etablert av AMP-prosjektet , med standardene jobbet sammen med store trafikkinnflytende som Google. Prosjektet ble opprettet som svar på klare brukergrensesnitt og sakte belastningstider når du surfer på en mobilenhet.
AMP legger vekt på øyeblikkelig hastighet og et kjent utseende, og gir skapere muligheten til å style sine sider innenfor AMP-rammen. Den sentrale designen på de fleste AMP-sidene gir en lignende følelse av navigasjon, til tross for forskjeller i innholdsformidling og fargevalg.
Resultatet er en raskere, mer sammenhengende nettleseropplevelse som forbedrer dråpehastighetene, øker leserengasjementet og brukerne i mobilnettlesing som hovedstøtte.
Med kraften og potensialet i AMP så tydelig, er det praktisk for designere å vurdere tipsene nedenfor for å optimalisere AMP-opplevelsen, slik at deres kunder vil ha fordeler på en rekke måter.
Gjør et inntrykk på siden de fleste av dine besøkende begynner med. Statisk innhold kan vises på AMP for å vise frem tilgjengelige produkter, pikende interesse for e-handelsnettsteder, samt de som viser generelt innhold.
De AMP-karusellfunksjon gjør det mulig for designere å vise flere like deler av innhold på en horisontal akse. Etter at du har importert karusellkomponenten i overskriften, kan du bruke type = "karusell" for å vise en liste med bilder som vises som en kontinuerlig stripe. Det er en iøynefallende funksjon som er ideell for forsiden når du prøver å hekte besøkende til å se noe utover hjemmesiden.
Oppfordre besøkende til å grave dypt inn i innholdet ditt. Du kan oppnå dette ved å vise en liste over relaterte produkter eller innlegg til den de ser på. Du kan statisk publisere en liste over relevant innhold, gjennomføre det øyeblikkelig av ved hjelp av
Hvis besøkende angir en destinasjonsside som ikke samsvarer med deres forespørsler, vil de enten forlate nettstedet eller se nærmere på hva de søker . Forslaget til produktalternativer er en utmerket metode for å imøtekomme brukerens søkeprosess, i det minste tegne dem mer inn på nettstedet. Selv om de ikke finner det de søker etter akkurat, kan de finne et alternativ som gjør jobben like bra.
Det er viktig for enhver nettsideeier å vite hvordan besøkende samhandler med innholdet. De
Det er viktig å huske på analyse av analyser som med AMP, er smart caching naturlig innebygd. Resultatet er at du kan se mindre trafikk enn vanlig. Bare hold cache-elementet i tankene når du analyserer tallene dine først.
Ideelt sett vil designere aldri få noe galt, men det kan skje. For å sikre at alt fungerer riktig på en side, bruk AMPs innebygde validator ved å legge til # development = 1 til slutten av siden URL. Hvis du åpner Chrome Dev-verktøy og ser meldingen "AMP validering vellykket", fungerer alt. Hvis ikke, kan du grave i dypere til problemet løser. Du kan også bruke Chrome Dev-verktøy for å bekrefte at alle eksterne ressurser, alt fra bilder og videoer til egendefinerte fonter og iframes, er lastet riktig.
I tillegg kan du validere metadata ved å bruke Googles strukturert datatestverktøy , enten ved å hente en nettadresse eller sette inn en kodestykke. Disse verktøyene kan bidra til at alt er validert, så søkemotor gjennomgang er aktivert. På notatet av søkemotor-kryptering, dobbeltsjekker du også robots.txt-filen din for å bekrefte at "Disallow: / amp /" er ikke til stede i en hvilken som helst linje. Hvis det er der, vil ikke robotsøkeprogrammer få tilgang til dine AMP-filer.
En annen fordel med AMP er et tidligere eksisterende rammeverk for implementering av annonser. Amp-annonsen, eller amp-embed, komponenten er en beholder for å vise en annonse. Annonsene lastes sammen med alle de andre ressursene, med
JavaScript er ikke-eksisterende inne i AMP-dokumentet. I stedet laster AMP en iframe fra en iframe sandkasse. Du kan angi bredde- og høydeverdier innenfor
Du kan også angi en plassholder eller et alternativ for ingen tilgjengelig annonse via stedholderattributtet. Videoannonser er også mulige med opprinnelig støtte, med grundig støtte for mediekomponenter .
Akselererte mobile sider bidrar til å øke søkemotorenes synlighet blant mobilbrukere, spesielt nå som Google tar imot AMP-sider i søkeresultatene.
I tillegg gir raskere lastetider, fleksibel tilpassing og visuelle komponenter som søker å forbedre studsekvaliteten, en bedre mobilbrukeropplevelse enn noensinne.
Akselererte mobile sider gir et fantastisk rammeverk for den fortsatte veksten av mobilnettbrukere.