AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
AMP
JOOST De WebMaker
alias van
Joost van Meeteren
HET WEB BETER MAKEN MET DE 3 V's
Vindbaar(der) maken, Veilig(er) maken en Verduurzamen
Opmerkingen
De naam AMP (= Accelerated Mobile Pages) zegt het al: dit Framework is in eerste instantie gericht op mobiele webpagina's maar kan ook op laptops en pc's worden gebruikt.
Het idee achter AMP is dat alle data van een pagina op één server verzameld worden zodat zo'n webpagina sneller laadt.
Stel dat er Youtube filmpjes op de pagina ge-included staan, dan worden die externe gegevens samen met de data van de pagina zelf op één plek geplaatst vanwaar alle data gelijktijdig worden geladen.
Het voordeel is dat je geen tijd verliest bij het verzamelen van data van meerdere servers: HTML, data van Instagram enzovoorts.
Een AMP-pagina werkt alleen als de code is gevalideerd. En de voorwaarden zijn strikt. Een extern CSS-bestand wordt niet toegestaan, net zo min standaard JS (JavaScript). Anders zou de laadsnelheid van de pagina ernstig belemmerd kunnen worden.
Voorbeeld van AMP HTML met een responsive afbeelding.
Voorbeeld van AMP Stories met meerdere afbeeldingen.
AMP Email: [ hier heb ik geen werkend voorbeeld van ]
Voorbeeld van AMP Ads met een bewegend logo.
Validatie 1. Valideer AMP HTML online door de url in te voegen: 'AMP-pagina is geldig'.
Validatie 2. Valideer AMP HTML online door de broncode te plaatsen: 'Validation Status: PASS'.
Validatie 3. Of valideer een AMP-pagina met Chrome DevTools Console via Ctrl+Shift+i.
Zie voor instructie Validate AMP Pages.
Laad bijvoorbeeld https://joostvanmeeteren.info/amp_html/#development=1 in Chrome en kies Console: 'AMP validation successful.'
Voorwaarden. Een AMP-pagina moet aan strikte regels voldoen om alle data vanaf één webserver te laden.
- De CSS-code staat verplicht inline in de webpagina.
- De doctype declaration is verplicht in kleine letters (<!doctype html> in tegenstelling tot <!DOCTYPE html> of <!doctype html> in standaard HTML5).
- De HTML-tag bevat het kenmerkende AMP-teken: <html ⚡ lang="nl">.
- Een afbeelding wordt met een afwijkend element ge-inserted: amp-img.
- De declaratie '!important' in CSS is niet toegestaan. Een voorbeeld is style="color: gold!Important;".
- Validering is cruciaal om de AMP-pagina werkzaam en toegelaten te krijgen op de Google-webserver.
Combi met andere Frameworks.
Bootstrap is niet geheel te implementeren in AMP HTML.
BS maakt namelijk gebruik van eigen Javascript- en CSS-bestanden die in gevalideerd AMP niet worden toegestaan. Zodra je het JS verwijdert werken allerlei functies niet meer.
Met het verwijderen van alle JS-links kom je wel dichterbij bij een AMP-validatie.
Maar dan zit je nog met het CSS-bestand. De oplossing zou zijn om de inhoud van 'bootstrap.min.css' inline te maken. De omvang van de CSS-code uit dit bestand is echter te groot voor AMP.
Daar is een oplossing voor door in de tool UnCSS Online! | Simply UnCSS your styles online! de Bootstrap-CSS-code te reduceren tot de relevante code en die inline te implementeren in AMP HTML.
Ga naar 'Bootstrap in AMP HTML' naar het voorbeeld van mijn homepage.
W3.CSS kan daarentegen wel helemaal in AMP geïmplementeerd worden. W3.CSS maakt geen gebruik van JS en de inhoud van het CSS-bestand is van een omvang die AMP inline accepteert. Belangrijk is wel dat de zogenaamde '!important' declarations net als bij BS uit de CSS worden verwijderd.
Zie het voorbeeld 'Architect Template'.
Overzicht. Hier vind je een overzicht met mogelijkheden en voorbeelden in AMP, geschreven in AMP HTML.
Opmerking. Aangezien ik geen Social Media meer gebruik, laat ik hier geen eigen voorbeelden van Instagram, Twitter, Facebook en Pinterest in AMP HTML zien.
Voor ingevoegde berichten van Insta, X (Twitter), FB en Pinterest is AMP HTML heel geschikt, omdat de AMP-pagina dergelijke ge-inserte berichten niet meer van aparte servers hoeft in te laden. Alle data worden gezamenlijk vanaf één Google-server geladen = gedownloaded naar de gegevensdrager om vervolgens te worden gecompiled in de browser. Dan pas wordt de AMP-pagina zichtbaar.
AMP
Nadeel
'Afhankelijker van Google: Met de opslag van AMP op Googleservers, word je afhankelijker van de zoekmachine.' 14 mrt 2020
AMP
Bron: Wikipedia
'Accelerated Mobile Pages (AMP) zijn
webpagina's met statische content,
geoptimaliseerd voor browsen op mobiele apparaten.'
AMP
Bron: TEAM F&J
'Wat Is AMP HTML?
HTML pagina's zodanig gedesigned, zo ‘licht’ en ‘uitgekleed’ dat ze bijna direct geladen zijn.'