AMP’er op AMP-rammen

Af Konstantin Sokhan, Design Director & David Tapp, Client Partner, MetaLab

TL; DR - Vi rejste ind i AMPs verden og lærte nogle ting

Vi samarbejdede med Google for at fokusere på AMP-projektet og modtog en drømmeopgave: skab alt, hvad dit hjerte ønsker, så længe det hjælper med at skubbe grænserne for hvad der er muligt i AMPs codebase og komponentbibliotek. Når vi deler det, vi har bygget og lært undervejs, giver vi også vores overtagelse af AMP's betydning, hvem den er til, og hvor den skal hen.

Hvad er AMP?

AMP er en open source-ramme til opbygning af effektive websider med høj ydeevne. Det bruges i øjeblikket primært til redaktionelt indhold på mobil, men vokser ud over dette til bredere brug på tværs af forskellige markeder (og skærmstørrelser).

Ser begge sider

Inden vi går videre med vores egen erfaring, vil vi gerne erkende, at vi er godt opmærksomme på kritikken og ikke vil foregive, at AMP ikke følger med; det gør det. Vi tog simpelthen dette projekt som en mulighed for at kortlægge vores egen vej og gøre vores egne indtryk. Fra vores erfaring er der nogle misforståelser, vi gerne vil hjælpe med at rydde op.

AMP giver webstedets forfattere mulighed for at være vært for en statisk mobiloptimeret version af en hvilken som helst af deres webstedssider, som distributionsplatforme som Google cache og tjener til brugere. Meget af AMP-kritikken er rettet mod Googles tilgang til at cache de serverende AMP-sider fra google.com-domænet. Hvad der er værd at afklare er, at AMP-sidecachen og AMP HTML-mobiloptimeringsrammen er separate produkter. En side, der er bygget ved hjælp af AMP HTML, kan hostes privat på en hvilken som helst server, du kan drage fordel af alle rammefunktioner uden at Google er vært for dit indhold.

Lad ikke navnet narre dig

AMP står for “Accelerated Mobile Pages”. På den enkleste måde blokerer det de fleste af de elementer, der får internettet til at indlæse langsommere på mobilen, ligesom store mængder JavaScript, tredjeparts tracking-scripts og oppustet CSS. Det gør det muligt for indhold næsten øjeblikkeligt at indlæse. AMP var designet til cachelagrede sider, men det vokser nu til et bredere værktøjssæt til at løse det mobile web (da flertallet af brugere er mobile i dag, kan nogle webstedsbelastninger stadig tage minutter). Selvom M står for Mobile, kan AMP absolut hjælpe med at forbedre indlæsningshastigheder på enhver enhed eller browsertype.

Kort fortalt

I juli kom AMP Project-teamet til os for at skubbe grænserne for, hvad der er muligt inden for rammerne, vise dets muligheder og hjælpe indholdsskabere med at forstå, hvordan de bedre kunne bruge det til at bringe internettet ud i livet. Vi fik i det væsentlige fri regeringsperiode til at bruge alle de værktøjer, som AMP leverede til at kombinere og implementere dem, som vi så passende med målet om at skabe en helt ny oplevelse, som endnu ikke var bygget med rammen.

Hvad vi byggede & hvorfor

Selvom vi stadig måtte arbejde inden for strenge retningslinjer for at sikre, at koden var gyldig AMP, havde vi til formål at komme med de skøreste mulige begreber inden for de definerede grænser.

Efter lidt brainstorming landede vi på tanken om, at online kunstgallerier og museer typisk er sjove, abstrakte og ikke spiller efter reglerne, når det kommer til at følge konventionelle, gridede weblayouts. Med den idé i tankerne oprettede vi et kunstgalleri som et bevis på grundlag for at omdefinere, hvad der var muligt i AMP. Vi byggede et websted, der brugte det bedste af initiativet og byggede på dets fundament. Vores teams stolede på AMP's magt for at sikre, at webstedet var utroligt performant, mens de introducerede nye funktioner og komponenter i rammen, herunder brugerdefinerede parallax-oplevelser, hover-tilstande og mere. Vi havde endda lidt sjovt med muligheden for en fordybende VR-version udført i AMP til overvejelse. Prøv vores bevis på koncept i din telefon her.

Design til kunstgalleri AMP-sted

Dernæst tænkte vi på mere almindeligt anvendte oplevelser på nettet, der kunne drage fordel af AMPs muligheder. Vi endte med at udforske, hvad der var muligt i en rejsebestillingsapp, så brugerne kunne søge destinationer, filtrere efter aktiviteter og finde ting dynamisk; alt sammen med opretholdelse af hastigheden og ydeevnen AMP er almindeligt kendt for. Vi sveder detaljerne om denne i glæde - skubber AMP-rammen så langt vi kunne med mikro-animationer og hits af personlighed.

Design til rejse-reservation AMP-sted

Hvem er AMP til?

I dag er AMP rettet mod folk, der er på farten, der er tunge med redaktionelt stilindhold (nyheder og blogs på deres telefoner) og e-handel. Hvor vi forestiller os, at stærk vedtagelse vil finde sted, er med websteder, der stræber efter at være ud over performante eller har en bred vifte af internationale målgrupper. I øjeblikket tager det gennemsnitlige mobilwebside på en 3G-forbindelse ca. 19 sekunder at indlæse, og næsten halvdelen af ​​verden kører stadig på det - dette skal naturligvis forbedres, og AMP kan hjælpe. Idet nettet fortsætter med at læne sig overvejende mobilt, er det både logisk og væsentligt at skabe effektiviteter her. AMP kan potentielt tilbyde en plan for forbedring af adgangen til information i udviklingslandene.

Lever vi i fremtiden?

Ikke helt, men gør fremskridt dagligt! AMP-websteder, der findes online i dag, er stadig primært medie-, nyheds- og redaktionelt indhold (for nu). Fordelene er indlysende, da det bygger på AMP giver en seriøs ydeevne og opdagelsesevne. Er AMP og dets ambitioner fremtid for al web? Måske. Måske ikke. En ting er helt sikkert, læring og bedste praksis, som rammen er med til at etablere, er bestemt her for at blive. AMP bygger også på toppen af ​​det nyeste og bedste på nettet i realtid med udrulning af dets funktioner. Dets udviklingssamfund bestræber sig konstant på at holde sig ajour med nye tendenser; proaktivt at trække i nettets kommende funktionalitet og give dig det i dag.

Udviklingsundervisning baseret på vores erfaringer fra AMP

Da det vedrører udvikling inden for AMP, lærte vi nogle ting undervejs, som vi troede ville være værdifulde at dele. Bemærkelsesværdige indsigter nedenfor:

  1. AMP forbyder tilpasset JavaScript uden for en iframe, hvilket tvinger dig til at stole på dets bibliotek med optimeret kode. Dette gøres for at sikre, at ingen dårligt optimeret eller unødvendig kode har mulighed for at hindre brugeroplevelsen. Vi bemærker, at mange, ellers velbyggede websteder, kan blive langsomme fra inkluderingen af ​​megabyte med reklame- og trackingskripts. Betydningen af ​​optimering og omhyggelig vetting af enhver JavaScript-kode, der er inkluderet på dit websted, er en meget vigtig afhentning fra AMP.
  2. AMP prioriterer det indhold, der er synligt for brugeren. Den ved, hvilket indhold der er under folden og forsvarer indlæsning eller gengivelse, indtil det er nødvendigt. Besøgende på AMP-sider behøver aldrig at vente, da alle indlæser billeder og annoncer blokerer deres adgang til siden. Hvis en besøgende desuden aldrig beslutter at rulle ned, spildes ingen af ​​deres mobildata med indlæsning af indhold, der aldrig ville blive set.
  3. AMP har løst “loading jank.” På en AMP-side skal hvert element have en deterministisk kendt højde, hvad enten det drejer sig om en annonce, et billede eller en video eller et stykke tekst. Du vil aldrig opleve indholdsforskyvning på din skærm som elementer over indlæses.
  4. Annonceydelse: AMP sætter den nye bjælke til annonceintegration på websteder. Annoncer skal opføre sig korrekt på siden og skal være i overensstemmelse med den optimale brugeroplevelse. Farvel overtagelse på fuld skærm og andet modbydeligt indhold, du ikke ønsker på siden. AMP håndhæver, at annoncer opfører sig som gode borgere.

I lukning

Denne mulighed var udfordrende, sjov og gav et nyt perspektiv. Vi fik en masse fleksibilitet, mens vi samtidig måtte finde utraditionelle måder at overholde de fastsatte betingelser inden for AMP-rammen. Vi lærte meget mere end hvad vi troede, vi vidste, at vi skulle gå ind om AMP og afslørede nogle tidligere misforståelser. Da vi arbejdede inden for rammerne, kom vi væk med en endnu stærkere forståelse af, hvor nettet går, og hvordan det kan lære af AMP. Hvis du er interesseret i at opbygge dit næste websted inden for det, skal du sørge for at tjekke vores skabeloner, som er helt open source, gratis at bruge og downloades på ampstart.com.