
Sommaire de la série / Comprendre AMP et ses enjeux
- AMP : Comment ça marche ?
- AMP : Principes de design
- AMP : Et le Web ouvert dans tout ça ?
Après avoir expliquĂ© en quoi consistait AMP et comment le mettre en place, je vous propose une parenthèse design Ă notre sĂ©rie consacrĂ©e au projet AMP. Dans ce deuxième article, nous allons passer en revue ce qu’il faut savoir pour concevoir une page sous AMP, et quelles en sont les limitations.
Design + AMP = ❤ ou 💔 ?
AMP ayant Ă©tĂ© créé pour rĂ©soudre le problème des sites mobiles lents et mal foutus, on pourrait imaginer que les limites en terme de design sont importantes. HonnĂŞtement, en l’Ă©tat actuel des choses, je ne vois pas de contrainte insurmontable.
Quelques règles à connaître :
- Le CSS est limité à 50ko (pour comparaison, le fichier CSS minifié de Bootstrap v4.1 pèse 140ko)
- Certaines propriétés CSS interdites : !important, filter (traitement CSS sur les images)
- Les animations sont possibles, mais uniquement sur les propriĂ©tĂ©s transform et opacity (pas d’animation sur la taille d’un Ă©lĂ©ment par exemple)
- Les polices web sont autorisées, uniquement depuis certaines sources comme Google Fonts et fonts.com. Les fichiers des polices ne sont pas pris en compte pour la limite de 50ko.
Les contraintes du designer sont fortement liĂ©es aux contraintes du dĂ©veloppeur. Au lieu d’utiliser des balises HTML classiques et de crĂ©er ses composants en JS, le dĂ©veloppeur est obligĂ© d’utiliser les composants fournis par la bibliothèque AMP. Le style de ces composants est complètement surchargeable en CSS, par contre le fonctionnement et les interactions sont imposĂ©s.
Par exemple, un carousel version AMP permet de d’afficher des miniatures de photos en bas du carousel, mais pas de les animer. Impossible Ă©galement de contrĂ´ler le dĂ©filement du carousel par le scroll, ou par le clavier.

Template AMPStart.com

Template AMPStart.com
Autre exemple, les onglets. AMP ne propose pas de composant pour crĂ©er un contenu organisĂ© sous forme d’onglets. Et encore moins la possibilitĂ© d’ajouter des animations entre chaque onglet. L’agence Upperguard (très beau site au passage), en charge du design et du dĂ©veloppement du site ampproject.org, a Ă©tĂ© confrontĂ© Ă cette problĂ©matique. La seule solution qu’ils ont trouvĂ© : remplacer les onglets par des liens statiques. Je vous laisse visionner ce court extrait de leur passage Ă la confĂ©rence AMPConf 2017 pour en savoir plus (extrait Ă partir de 08:10) :
Pour finir, de manière générale, les évènements attachés au scroll de la page sont à bannir : apparition du contenu selon le scroll, changement de la taille du header selon le scroll, déclenchement du scroll vers un élément au clic sur un bouton, etc.
Quid des pubs ?
Google Ă©tant Ă la manoeuvre, vous pensez bien que les pubs sont belles et bien prĂ©sentes. Evidemment, tous les formats intrusifs (popups, overlays, scroll to play…) sont absents. Je n’ai vu que deux formats autorisĂ©s : la bannière classique de diffĂ©rentes dimensions, et la zone sticky en bas de page (max 100px de hauteur).

Compromis et coopération
Les composants fournis par AMP ne couvrent pas tous les cas d’usage. Par consĂ©quent, les designers doivent trouver des façons de contourner ces limitations, et surtout faire des compromis.
Encore plus que d’habitude, il est très important d’impliquer les dĂ©veloppeurs très tĂ´t dans la phase de conception. Ils pourront valider la faisabilitĂ© technique des propositions graphiques, et le cas Ă©chĂ©ant, discuter avec le designer pour trouver un compromis satisfaisant.
J’espère que cet article aura rĂ©pondu Ă certaines de vos interrogations. N’Ă©tant pas designer moi-mĂŞme, j’ai sans doute oubliĂ© pas mal de sujets qui peuvent poser soucis. Si c’est le cas n’hĂ©sitez pas Ă m’en faire part via les commentaires (ou Twitter/Instagram).
Sur ce, je vous dis à la semaine prochaine pour le dernier article de cette série consacrée au projet AMP. Dernier article certes, mais pas le moins interessant puisque nous répondrons à la question suivante : AMP est-il une menace pour le Web ouvert et indépendant ?