Quand est-ce que « plus petit » signifie « plus grand » ? Lorsque vos images deviennent plus petites pour s’adapter parfaitement à divers appareils, la satisfaction de vos utilisateurs, la couverture de l’audience, la vitesse du site et les bénéfices augmentent. Une belle formule, n’est-ce pas ? Cette capacité magique des images à s’adapter aux écrans est de savoir comment fonctionne le design web. Et cela fonctionne particulièrement bien dans la dernière version de Drupal, Drupal 8, qui prend en charge les images responsives. C’est ce dont nous allons discuter dans ce billet.
Que signifie le support natif de Drupal 8 pour les images responsives ? En utilisant Drupal, vous remarquerez que ses thèmes intégrés sont déjà totalement responsives et sont impeccables sur tous les appareils.
Tout autre thème peut être configuré de la même manière, puisque Drupal 8 propose des outils intégrés modernes et pratiques pour une configuration d’image responsive. Jetons un coup d’œil dessus.
A lire aussi: Drupal 8: Tout ce que vous devez savoir sur les nouvelles fonctionnalités
Ces outils incluent les modules d’image Breakpoint (des points de rupture) et Responsive qui font désormais partie du noyau de Drupal 8. Le module Breakpoint est même activé par défaut. L’image Responsive (anciennement connue sous le nom de module d’élément d’image) doit cependant être activée manuellement.
Ensemble, ils vous permettent de configurer la sortie responsive des images sur différents périphériques en fonction de la largeur d’écran. Les images peuvent être à la fois redimensionnées et élégamment recadrées. Oubliez une bannière lourde 2000px sur un écran mobile. Ces jours sont dépassés !
Les images responsives de tailles appropriées seront affichées en fonction des Breakponts (des points d’arrêt) que vous définissez. Définir des points d’arrêt signifie choisir des largeurs de fenêtre auxquelles votre taille d’image doit changer (par exemple, min-width: 600px). Regardons brièvement le processus.
A lire aussi: Comment rendre le Backoffice plus convivial
Dans certains cas, la capacité des images à s’agrandir est aussi importante que leur capacité à devenir plus petite. Un bon exemple sont les écrans HD / Retina qui ont une très haute résolution. Ici, c’est une bonne idée de fournir un style d’image plus grand que le double en utilisant un multiplicateur 2x dans les points d’arrêt. Et, bien sûr, la qualité de vos images originales devrait être impeccable.
A lire aussi: 5 bonnes raisons de rendre votre site web responsive design
Le responsive design fait partie des nombreuses améliorations de Drupal 8. Plus d’exemples détaillés, des nouvelles fonctionnalités plus intéressantes vous attendent dans nos prochains articles pour découvrir Drupal 8 ensemble !
Et si vous avez besoin d’aide pour configurer des images responsives dans Drupal 8, ou si vous envisagez de migrer vers la dernière version de Drupal, n’hésitez pas à contacter nos développeurs. Tout va être responsive!
A Lire aussi: Comment optimiser les images de votre site web
27 Avenue Taieb Mhiri
Immeuble Yasmina, bureau 17
2080 Ariana, Tunis, Tunisie
+216 22 774 450
Centre d'affaires TODA 2
Rue du Rhin Napoléon
67100 Strasbourg, France
+33 9 80 80 10 18
Rue du Port Franc, 2A
1003 Lausanne
Suisse
Avenue Mutsaard, 41
1020 Bruxelles
Belgique
+32 2 588 07 54