Astuces pour Responsive Design

by Elixir Consultant

• 0
• 3K
• Uncategorized

Astuces pour Responsive Design

introduction

Avec les nouveaux appareils tels que les téléphones intelligents, les iPad, les tablettes qui constituent les principaux appareils utilisés actuellement par les consommateurs, le concept de responsive design s’intensifie parmi les propriétaires de sites Web, quelle que soit leur forme. Dans un proche avenir, une conception Web adaptative constituerait le moyen privilégié d’atteindre les consommateurs avec tout type de périphérique, quelle que soit la taille de l’écran.

Mise en page réactive
La création de mises en page réactives est une nouvelle méthode de conception de sites Web. Il existe quelques astuces CSS utiles pour créer et déployer rapidement un design réactif qui s’ajuste automatiquement en fonction de la taille de l’écran utilisé pour afficher le contenu du site.

Largeur minimale et Hauteur maximale pour les images
L’un des plus grands défis que rencontrent la plupart des concepteurs lorsqu’ils conçoivent une mise en page réactive est que les images posent un problème sérieux lors du redimensionnement du contenu afin de répondre aux besoins de toutes les tailles d’écran. C’est parce que les images sont souvent dimensionnées en pixels absolus plutôt qu’en valeurs relatives. La clé de la réactivité réside naturellement dans la transformation des définitions absolues de largeur et de hauteur en valeurs relatives adaptées aux ordinateurs de bureau, ordinateurs portables, tablettes et téléphones intelligents.

Effectuer cette opération avec une image est en fait facile, mais la plupart des développeurs ne savent tout simplement pas quelle construction CSS utiliser pour définir une image dans une feuille de style. Au lieu d’utiliser une hauteur et une largeur en pixels, une «largeur maximale» et une «hauteur maximale» peuvent être utilisées pour ajuster plus facilement l’image en fonction de la taille de l’écran utilisé.

L’énoncé ci-dessus indique que la taille de l’image est contrôlée par un élément appelé «largeur maximale». Comme son nom l’indique, cela empêche l’image de devenir plus volumineuse que ce que la conception appelle. L’objectif de max-width est d’empêcher l’image de dépasser la largeur des colonnes du site, ce qui obligera les utilisateurs à faire défiler l’écran dans deux directions différentes.

D’autre part, min-width garantit que le contenu ne sera pas trop petit pour être utile. Les concepteurs peuvent appliquer «min-width» à des éléments tels que des titres, des blocs de contenu ou des éléments de la barre latérale, pour éviter qu’ils ne se réduisent un peu trop. Les deux éléments peuvent être utilisés ensemble pour contrôler plus facilement la taille exacte et la mise à l’échelle de tout élément de la page.

Style de police
Les valeurs relatives forment la conception. La police ainsi que la taille de l’écran sont redimensionnées, ce qui la rend facilement lisible et naturelle sur un périphérique de toute taille.

Les conceptions réactives utilisent une série de colonnes de largeur relative pour réduire le contenu lorsque la taille de l’écran d’un périphérique dépasse un ou plusieurs «points de rupture». Toutefois, ces valeurs relatives ne peuvent fonctionner que si elles sont associées à des marges et à des marges intérieures relatives. Au lieu de spécifier 5 pixels de remplissage, essayez de spécifier l’élément comme 1% de la largeur ou de la hauteur de la page. C’est aussi simple que de remplacer le «px» par un symbole de pourcentage et d’aider le site à s’agrandir ou réduire beaucoup plus efficacement.

Gestion des URL
Le problème avec les très longues URL est qu’elles contiennent beaucoup de caractères, pas d’espace et la possibilité de gâcher de façon spectaculaire l’attrait d’un design réactif sur un périphérique plus petit. Ce problème est facile à éliminer en créant une classe spéciale qui entourera les URL longues lorsqu’elles apparaissent dans le contenu d’un site Web. En utilisant l’élément «word-wrap», CSS peut en fait diviser l’URL en plusieurs parties qui correspondent à la largeur définie de la zone de contenu.

Le mot se brisera sur une deuxième ligne, ou autant de lignes que nécessaire, dès qu’il atteindra le bord de la zone de contenu. Le défilement vertical sera éliminé facilement.

Conclusion
Avec quelques astuces CSS simples, il est très facile de concevoir un site Web à la taille voulue pour répondre aux besoins des smartphones et des tablettes.

Associés à un design réactif basé sur des colonnes, ces astuces constitueront la dernière pièce du puzzle pour les concepteurs déterminés.