Site Web

Le responsive design expliqué

Un site qui a subit une simple adaptation n’est pas réellement un site responsive. Les gifs, créés par Froont et présentés ci-dessous, expliquent tout à fait le fonctionnement du responsive design.

Responsive design, définition

Le commun des mortels comprent vaguement qu’il s’agit de sites internet qui s’adaptent aussi bien à la taille des écrans d’ordinateurs comme à celle des smartphones. Malgré la confusion répandue, le responsive design représente davantage d’éléments de définition. Les principes du responsive design ne sont pas si compliqués à comprendre ! Passez quelques minutes avec ces gifs, et les sites en responsive design n’auront plus de secrets pour vous !

Responsive design VS adaptive design

Le responsive design s’adapte de manière fluide, tandis que les designs adaptatifs s’étendent à la manière d’une fenêtre d’un navigateur par exemple.

responsive_design

 

 

Les éléments

En positionnant vos éléments avec l’utilisation de pixels, vous obtiendrez un site conçu pour un écran spécifique et qui paraîtra assez déformé sur un autre. Un conseil : utilisez plutôt des éléments variables, qui s’adaptent au pourcentage de l’écran, à la place des éléments statiques, comme des pixels.

responsive_design

 

 

Le Flux

Alors que les tailles d’écran deviennent plus petites, le contenu commence à prendre l’espace de manière verticale et les éléments se trouvant en dessous sera déformé. Ce phénomène s’appelle le flux.

 

responsive_design

 

 

Les points de contrôle

Les points de contrôle permettent de disposer et de changer les points prédéfinis. C’est-à-dire que trois colonnes sur un ordinateur se transformera en seulement une colonne sur un dispositif mobile.

 

responsive_design

 

 

Si vous utilisez des éléments qui s’emboîtent, ils s’adapteront aussi bien à un petit et à un grand écran.

 

Largeur de l’écran

Parfois, le fait que le contenu prenne la largeur entière d’un écran, comme sur un dispositif mobile, peut s’avéré très utile. En revanche, le même contenu s’étirant à la largeur entière de votre écran de TV a souvent moins de sens.

 

responsive_design

 

Le commencement

Techniquement, il n’y a pas de grande différence si un projet est commencé d’un écran plus petit pour être ensuite adapté à un écran plus grand (le portable d’abord) ou vice versa (l’ordinateur d’abord). Pourtant, si vous commencez par le portable, cela ajoute des limitations supplémentaires et vous aide à prendre des décisions.

reponsive_design

 

Bitmap

Si votre icône est constituée de plusieurs détails et effets fantaisistes, il peut être pertinent d’utiliser un bitmap. Lors de l’utilisation d’une image vectorielle, il est important de l’adapter correctement en fonctions des différentes résolutions.

responsive_design

 

Sources : GraphismFastcodesign

WCAG : Web Content Accessibility Guidelines – Définition

Formation réseaux sociaux : créez une avalanche de leads avec vos réseaux

Formation ActiveCampaign en 1h top chrono