Webmarketing
Web design : comment créer une page compatible AMP ?
Les pages AMP (Accelerated Mobile Pages) sont utilisées sur mobile pour accélérer le temps de chargement et améliorer...
Toutes les catégories
Voir les derniers articles
Graphisme
La signification de 10 pochettes d’albums célèbres
Nous avons tous déjà chanté – de façon plus ou moins juste – sur un tube des Beatles, de Michael Jackson ou même...
Webmarketing
Les médias diffuseront-ils de fausses informations lors du 1er avril ?
L’année écoulée fut marquée par la diffusion de nombreuses fake news sur le web et les réseaux sociaux. Cette tendance...
Webmarketing
Étude SEO Camp 2019 : portrait robot, emploi, salaire et formation des référenceurs en France
Découvrez tous les résultats de l’étude SEO Camp 2019. The post Étude SEO Camp 2019 : portrait robot, emploi, salaire et...
Webmarketing
Changer de nom de domaine en limitant l’impact SEO : le retour d’expérience de Rakuten (PriceMinister)
Changer de nom de domaine est un challenge pour les professionnels du SEO. L’an dernier, PriceMinister est devenu Rakuten, il s’agit d’un cas...
Webmarketing
Comment s’intègrent le mécénat et le sponsoring sportif dans une stratégie de communication
Comment déployer efficacement une stratégie de sponsoring sportif ? Thierry Bouvard, Directeur du Sponsoring et du Mécénat...
Webmarketing
Facebook annonce de nouvelles mesures pour plus de transparence dans les publicités diffusées par les annonceurs
Après les différents scandales d’achat publicitaire massif par des organisations politiques, Facebook a mis l’accent sur la...
Webmarketing
Une liste de 250 ressources gratuites dédiées à la gestion de projet
Les développeurs de fyi ont conçu un site gratuit qui fournit des templates et ressources très pratiques pour ceux qui évoluent...
Webmarketing
L’Olympique de Marseille présente sa stratégie social media
Le community management d’un club de football en détail : l’OM présente sa stratégie social media, ses contenus...
Webmarketing
Twitter : le vrai mode nuit est disponible, voici comment l’activer automatiquement
Twitter déploie enfin son vrai dark mode sur mobile. Voici comment activer le mode nuit sur votre smartphone. The post Twitter : le vrai mode nuit...
Web design : comment créer une page compatible AMP ?
Les pages AMP (Accelerated Mobile Pages) sont utilisées sur mobile pour accélérer le temps de chargement et améliorer l’expérience de...
Les pages AMP (Accelerated Mobile Pages) sont utilisées sur mobile pour accélérer le temps de chargement et améliorer l’expérience de navigation des mobinautes.
Ce format open source lancé par Google demande toutefois une conception spécifique en HTML. Il convient donc de respecter certaines règles si vous voulez que votre contenu se charge en un temps record sur mobile.
À titre d’exemple, les scripts tiers ne sont pas autorisés, tout comme les éléments de formulaire. Quant au CSS, le code est assez restreint.
Pour créer une page web compatible avec le format AMP, voici les 4 critères les plus importants que vous devez respecter.
1. L’expérience utilisateur est une priorité
L’objectif premier d’une page AMP étant de charger le contenu rapidement sur mobile, Google place l’expérience utilisateur au centre des préoccupations.
Si vous avez un doute sur la façon de disposer un élément ou de construire votre page, faites toujours ce qui est le mieux pour l’utilisateur final, et ce, même si le développement de votre page AMP est plus complexe.
2. Les éléments doivent être rapides à charger
Ce critère à respecter n’est pas vraiment une surprise, mais il est important de le rappeler.
Si le visuel de votre page AMP doit être attirant vous ne devez pas pour autant développer un design au détriment de la vitesse de chargement.
Vous devez donc limiter et minimiser les requêtes HTTP pour optimiser l’affichage de votre page AMP. De plus, les images et les publicités ne doivent être chargées que si elles sont susceptibles d’être vues par l’utilisateur.
Enfin, évitez d’ajouter trop d’animations. Tout d’abord parce qu’elles ne sont pas forcément toutes compatibles avec le format AMP, parce que le rendu sur mobile risque d’être différent que sur un ordinateur, mais aussi parce que vous allez altérer le temps de chargement de votre page.
Certaines balises sont indispensables dans votre <head>
Rentrons un peu plus dans la technique. Une page AMP est créée en HTML AMP.
Si le code en lui-même est quelque peu similaire, certaines balises doivent obligatoirement apparaître dans l’en-tête de votre page :
- Les balises
< !doctype html>et<meta charset=« utf-8 »>sont obligatoires - La balise
<html ⚡>contient un éclair. Vous pouvez sinon la remplacer par<html amp> - La balise
<link rel=« canonical= href=« $URL »>doit contenir l’url de la version HTML de la page, ou l’url de la page AMP en question si la version HTML n’existe pas - Le script
<script async src=« https ://cdn.ampproject.org/v0.js"></script>doit être inséré dans la balise<head> - La balise
meta <meta name="viewport" content=« width=device-width">doit aussi être ajoutée et il est même recommandé d’insérerminimum-scale=1etinitial-scale=1
Notez enfin que vous devez insérer une balise style[amp-boilerplate]. Pour obtenir le contenu intégral de cette balise rendez-vous la documentation officielle du format AMP.
Certains balises sont interdites
À l’inverse, certaines balises HTML sont interdites dans le format AMP, voici lesquelles :
-
Base -
Frame -
Frameset -
Object -
Param -
Applet -
Embed
La création d’une page AMP est parfois complexe si vous passez directement par le code HTML, car bien d’autres règles doivent être respectées à ce niveau. Vous pouvez donc faire appel à un développeur expérimenté ou utiliser une plugin spécifique si vous êtes sous CMS.
Ces quatre points évoqués dans l’article sont les plus importants à prendre en compte lors de la création de votre page AMP. En revanche, comme je vous le disais, d’autres règles doivent être respectées, n’hésitez donc pas à vous référer à la documentation officielle.
Lorsque vous aurez terminé de développer votre page AMP n’oubliez pas de vérifier si votre code est correct. Vous pouvez utiliser la console de votre navigateur, mais encore une fois, en cas de difficultés n’hésitez pas à chercher de l’aide auprès d’un freelance sur Codeur.com.
Newsletter WebActus
Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.
Nous ne partagerons pas votre adresse e-mail.