AMP : Principes de design

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.

Exemple de carousel AMP
Exemple de carousel AMP
Template AMPStart.com
Exemple de carousel AMP
Exemple de carousel AMP
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).

Exemples d'encarts pub dans des pages AMP
Exemples d’encarts pub dans des pages AMP

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 ?



Hello.
Mon nom est Vincent Ballut, je suis développeur web freelance basé à Paris. J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Dans la même série :<< AMP : Comment ça marche ?AMP : Et le Web ouvert dans tout ça ? >>

Ajouter un commentaire

Laisser un commentaire

Hello.
Je m'appelle Vincent Ballut,
développeur web
freelance.

Je publie des articles accessibles et pédagogiques sur tout ce qui touche au développement web et à ses problématiques.

Dans la vraie vie, je suis développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc).

J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Derniers articles