1. Créer un site
  2. Tutoriels
  3. Trucs et astuces pour débuter la création de site web
  4. Optimiser ses contenus pour un affichage responsive
 
Optimiser ses contenus pour un affichage responsive

Optimiser ses contenus pour un affichage responsive

Le design responsive permet de consulter de façon optimale le site sur tout type d'écran : Smartphone, Tablette, PC/Mac ou encore SmartTV. L'utilisation de certaines fonctionnalités proposées dans le manager ou insérées via des codes HTML peuvent générer des défauts d'affichage sur les petits écrans. 

Ce tutoriel liste quelques bonnes pratiques pour conserver un affichage responsive sur tout type d'équipement.

 

Images et titres et/ou légendes

Avec la création de page par blocs, il est tentant de placer des images d'illustration sur une ligne, via des widgets images, et leurs titres ou légendes sur une autre ligne placée au-dessus ou en-dessous. Ce type de disposition ne donnera pas le meilleur effet sur les petits équipements : cela est dû au sens de lecture de la page par le navigateur. 

L'affichage sur mobile sera : Ligne 1 avec les x colonnes des images puis dessous Ligne 2 avec les x colonnes des titres. Les contenus ne seront donc plus liés les uns sous les autres comme sur l'affichage standard (non mobile). 

Il est recommandé de placer le titre et l'image sur la même colonne en passant par un éditeur visuel. Le texte pourra être changé de simple paragraphe en titre 2, 3 ou 4 depuis l'éditeur visuel.

Image Coucher de soleil

Coucher de soleil

Image Petit ponton

Petit ponton

Image Cabanons sur la plage

Cabanons sur la plage

Centrer les images pour un meilleur rendu responsive

Les images, s'il n'y a pas de textes ajoutés à coté de celles-ci sont à centrer horizontalement. En effet, si les images ne sont pas centrées, elles pourraient apparaitre alignées à gauche sur les mobiles alors que l'affichage standard paraitra lui correct. En centrant les images, l'effet sur mobile ne sera que de meilleur qualité. 

La dernière image sur la ligne ci-dessus n'a pas été centrée volontairement, pour que la différence d'affichage soit visible. Sur certains équipements, l'image se colle à gauche de la page, laissant un vide important à droite. En centrant l'image, le rendu est plus harmonieux. 

La largeur des éléments

La largeur des tableaux sur un design reponsive

Pour les tableaux placés depuis un éditeur visuel, il faut utiliser une largeur avec une valeur en pourcentage. Par défaut utilisez 100% pour la largeur d'un tableau. Ainsi sur mobile il ne sortira pas de l'écran, obligeant le lecteur à utiliser un scroll horizontal désagréable.

Le pourcentage sera appliqué selon le conteneur de celui-ci. Ainsi, sur une colonne de 50% de la largeur de la page, définir une largeur d'un tableau à 100% permettra bien de faire apparaitre le tableau sur toute la largeur de la colonne (et non toute la largeur de la page). 

Vous pouvez utiliser un affichage de 80% si vous le souhaitez, il faudra alors ajouter un style pour que le tableau soit centré sur la page. 

Dans les paramètres avancés du tableau - Clic droit sur le tableau puis "Propriétés du tableau", ajoutez dans le champ Style :  margin-left:auto; margin-right:auto;

A B C
1 2 3
4 5 6

La largeur des éléments externes

Certaines plateformes externes proposent des contenus à intégrer sur les sites web. Si une mention en pixel (px) est indiquée, il faut bien tester le rendu sur mobile ou en redimensionnant la taille de la fenêtre du navigateur internet. Certains éléments comme les iframe qui peuvent être récupérés sur Google Maps ou YouTube par exemple, resteront à une largeur maximum de 100% sur mobile. D'autres contenus n'ont pas ce fonctionnement et pourraient générer des pages non mobile-friendly (non adaptées à la navigation mobile). 

Si l'intégration des éléments externes se fait en HTML, vous pourrez normalement éditer le code HTML pour renseigner une largeur de 100% ou une largeur personnalisée en pourcentage.