1081-image1-fr1343634121.jpg

Responsive Design

Le Responsive design est une nouvelle manière de concevoir un site Internet. Sa philosophie consiste à créer un site Internet adaptable aux différentes tailles d’écran existantes : PC, Mac, smartphones, tablettes tactiles, etc.
 
 

Multiplication des supports

 
Le Responsive design perse dans la conception de sites Internet. Cette nouvelle philosophie émerge avec l’explosion des différentes résolutions d’écrans existantes.
 
Les supports pour consulter un site Internet se sont multipliés. Difficile alors d’adapter son site à tous les supports existants : ordinateurs, mobiles, smartphones, tablettes, etc.
 
Pour s’adapter à ces nouvelles contraintes techniques, les développeurs choisissent de concevoir plusieurs versions d’un site. Mais cette approche reste lourde à gérer. Les modifications doivent se faire sur les différentes versions du site Internet. Et il est impossible de créer une version pour chaque type de support.
 
Certains sites n’ont qu’une seule version dédiée à l’ordinateur. Lorsque les utilisateurs consultent le site sur un autre support avec une taille d’écran plus petite, ils sont parfois désorientés. Le contenu n’est pas affiché entièrement. Il est pénible alors pour l’utilisateur d’atteindre les informations qu’il recherche (exemple, le catalogue d’une boutique en ligne).
 
Avec le Responsive design, le design d’un site Internet prend en compte les nouveaux usages mobiles et les différents supports. L’utilisateur peut consulter un site Internet sur plusieurs terminaux. La taille du site et son contenu s’adaptent au support utilisé.
 
 
 

Le responsive design, une nouvelle philosophie

 
Avant de se lancer dans le responsive design, il est nécessaire de se poser en amont les bonnes questions. Tous les sites Internet ne peuvent pas s’approprier la technologie du responsive design. Les concepteurs doivent réaliser un travail de réflexion qui répond à une stratégie précise : quels sont les profils des utilisateurs à cibler, quels sont les terminaux prioritaires, etc.
 
Les comportements des utilisateurs changent en fonction du support utilisé. Chaque terminal a ses propres contraintes d’utilisabilité : tactile, débit Internet lent, écran sans couleur etc.
Sur un mobile, les utilisateurs réagissent différemment que sur un écran d’ordinateur. La navigation d’un site doit d’adapter aux différents comportements. Sur un petit support l’information essentielle doit être mise en avant. 
 
Parfois il est donc plus judicieux de développer des versions différentes du site plutôt que de créer un site orienté vers le responsive design. L’expérience utilisateur doit être privilégiée.
Les sites qui proposent une interaction riche sont difficilement adaptables au responsive design. Il en va de même lorsque l’usage d’un service diffère selon le support comme la géolocalisation ou l’utilisation de l’appareil photo.
 
Par exemple, Google a préféré créer deux versions différentes pour les mobiles et les ordinateurs. Sur les téléphones mobiles, Google a privilégié la recherche locale (restaurants, cafés, etc.)
Le responsive design s’adapte plus facilement aux sites informatifs.
 
 
Les concepteurs doivent donc identifier les supports visés et connaître leurs résolutions d’écrans. Souvent un site orienté vers le responsive design est développé pour un ordinateur, un smartphone et une tablette tactile. Pour les smartphones et tablettes, les tailles peuvent variés selon les marques.
 
Lors de la conception de la maquette, il est nécessaire de commencer par le support le plus petit. Le contenu essentiel doit-être mis en avant. A l’inverse, le design est d’abord pensé pour les résolutions les plus grandes. Pour une version destinée aux mobiles ou tablette, le design du site s’adapte en éliminant certains contenus comme les images.
 
 

Le principe du responsive design

 
Le responsive design repose sur un système de grilles flexibles constitué de colonnes qui permet aux sites de s’adapter à la résolution des différents supports visés.
 
Les contenus sont placés dans des blocs. Le nombre de colonnes diminue au fur et à mesure que la largeur de l’écran se réduit. Un mobile n’affichera qu’une colonne alors qu’avec un écran d’ordinateur, 14 colonnes peuvent être affectées.
 
La mise en page est rendue flexible grâce au css et notamment aux medias queries du css3. La balise des médias permet de modifier certaines règles et de poser des conditions plus poussées : attribuer des largeurs et hauteurs maximales, l’orientation en mode portrait ou paysage, la flexibilité des images et des caractères, rendre visible ou non un bloc de contenu en fonction du support etc.
 
 
 
 
 
 

responsive design : tutoriel

 
 

Auteur : Hélène Guérin

Hélène Guérin
Rédactrice, j'aime m'amuser avec les mots. C'est sûrement dû à ma dyslexie. Pourquoi écrire pour le Web ? Je baigne dedans au quotidien (webdesigner - ergonome) alors je veille sur les dernières technologies.

Commentaires Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *