Mobilbanan fortsätter växa i snabb takt.
Smartphones fortsätter att sälja starkt, med Apple endast prognoser för ta med 180 miljarder dollar från dess smartphones 2021. Det finns över 224 miljoner smartphone-användare i USA, vilket gör mobilwebben ett viktigt fokus för någon webbplatsägare.
Den fortsatta tillväxten av mobila webanvändare gör det viktigt för designers och front-end-utvecklare att få tag i riktig design för accelererade mobilsidor.
Utövandet av accelererade mobilsidor betonar designalternativ som ligger i linje med vad sökmotorer uppfattar som vänliga , inklusive en definierad publik, högkvalitativt innehåll, korrekt formatering och sömlös mobilkompatibilitet. Du kommer att märka en mängd olika accelererade mobilsidor när du surfar på Google i mobilen med förkortningen AMP i sökresultaten .
Accelererade mobilsidor använder fortfarande HTML, även om de innehåller särskilda element som prioriterar hastigheten på mobila enheter. AMP tekniska krav fastställs av AMP-projektet , med standarderna arbetade tillsammans med stora trafikpåverkare som Google. Projektet skapades som svar på klara användargränssnitt och långsamma belastningstider när du surfar på en mobilenhet.
AMP betonar snabb hastighet och ett bekant utseende, vilket ger upphovsmännen möjlighet att ställa in sina sidor inom ramen för AMP. Den panna-centrerade designen på de flesta AMP-sidor ger en liknande känsla av navigering, trots skillnader i innehållspresentation och färgscheman.
Resultatet är en snabbare och mer sammanhängande webbläsarupplevelse som förbättrar dropphastigheter, ökar läsarnas engagemang och användare i mobilwebbläsning som huvudstöd.
Med kraften och potentialen i AMP så uppenbart är det praktiskt för designers att se tipsen nedan för att optimera AMP-upplevelsen, så att deras kunder kommer att gynnas på olika sätt.
Gör ett intryck på sidan de flesta av dina besökare börjar med. Statiskt innehåll kan visas på AMP för att visa tillgängliga produkter, pikande intresse för e-handelswebbplatser samt de som visar allmänt innehåll.
De AMP-karusellfunktion gör det möjligt för konstruktörer att visa flera liknande innehållsdelar på en horisontell axel. Efter att du har importerat karusellkomponenten i rubriken kan du använda typ = "karusell" för att visa en lista med bilder som visas som en kontinuerlig remsa. Det är en iögonfallande funktion som är perfekt för framsidan när du försöker få besökare att se något utöver hemsidan.
Uppmuntra besökare att gräva djupt i ditt innehåll. Du kan uppnå detta genom att visa en lista över relaterade produkter eller inlägg till den som de ser på. Du kan statiskt publicera en lista med relevant innehåll, genom att göra det direkt av använder sig av
Om besökare anger en målsida som inte stämmer överens med deras förfrågningar, lämnar de antingen webbplatsen eller se vidare för vad de söker . Förslaget på produktalternativ är en utmärkt metod för att tillgodose användarens sökprocess, åtminstone dra dem mer in i webbplatsen. Även om de inte hittar vad de letar efter exakt, kan de hitta ett alternativ som gör jobbet lika bra.
Det är viktigt för en webbplatsägare att veta hur besökarna interagerar med innehållet. De
Det är viktigt att komma ihåg när man analyserar analyser som med AMP är smart caching naturligt inbäddad. Resultatet är att du får se mindre trafik än vanligt. Håll alltid kakningselementet i åtanke när du analyserar dina nummer i början.
Ideellt kommer designers aldrig att få något fel, men det kan hända. För att säkerställa att allt fungerar korrekt på en sida, använd AMPs inbyggda validator genom att lägga till # development = 1 till slutet av sidadressen. Om du öppnar Chrome Dev-verktyg och ser meddelandet "AMP-validering framgångsrikt", fungerar allt. Om inte kan du gräva djupare tills problemet löser sig. Du kan också använda Chrome Dev-Tools för att verifiera att alla externa resurser, allt från bilder och videoklipp till anpassade teckensnitt och iframes, laddas korrekt.
Dessutom kan du validera metadata genom att använda Googles strukturerade datatestverktyg , antingen genom att hämta en URL eller infoga en kodbit. Dessa verktyg kan hjälpa till att säkerställa att allt är validerat, så att sökrobot är aktiverat. I anteckningen av sökmotorens krypning dubbelkontrollerar du också din robots.txt-fil för att verifiera att "Disallow: / amp /" inte finns i någon rad. Om det finns där kan sökrobotar inte få tillgång till dina AMP-filer.
En annan fördel med AMP är en redan existerande ram för implementering av annonser. Amp-ad, eller amp-embed, komponent är en behållare för att visa en annons. Annonserna laddas tillsammans med alla andra resurser, med
JavaScript är obefintligt inom AMP-dokumentet. Istället laddar AMP en iframe från en iframe-sandlåda. Du kan ställa in bredd och höjdvärden inom
Du kan också ställa in en platshållare eller ett alternativ för ingen tillgänglig annons via platshållarattributet. Videoannonser är också möjliga med inbyggt stöd, med grundligt stöd av mediekomponenter .
Snabba mobilsidor bidrar till att öka sökmotorns synlighet bland mobila användare, särskilt nu när Google omfattar AMP-sidor i sökresultaten.
Dessutom ger snabbare laddningstider, flexibel anpassning och visuella komponenter som syftar till att förbättra studsfrekvensen, göra en bättre mobilanvändarupplevelse än någonsin.
Accelererande mobila sidor ger en fantastisk ram för den fortsatta tillväxten av mobila webanvändare.