Le
responsive design est la procédure qui consiste à faire un site qui s'adapte à la largeur de l'écran d'un site. C'est une méthode très simple et bon marché pour qu'un site puisse être visible correctement sur tablette et smartphone. Néanmoins, la technologie est sous-exploitée vis-à-vis du potentiel possible.
Comprendre le responsive design
D'un point de vue technique, le responsive design consiste à utiliser les media-queries dans une feuille de style CSS. La méthode simple consiste à vérifier si la largeur est inférieur à 600 pixels (par exemple) et à adapter des règles CSS spécifiques dans ce cas de figure. Voici l'exemple concret avec le bout de code concerné :
@media (max-width: 600px) {
body{
color:red;
}
a{
text-decoration:underline;
}
}
Ici, le texte va s'afficher en rouge et les liens seront soulignés si la largeur de l'écran est inférieur ou égale à 600 pixels.
Performances mal prises en compte
La technique est simple à comprendre mais l'idéal est de prendre en compte les performances des mobiles pour adapter également le poids des images et des scripts. Ceci est encore plus important que pour un ordinateur de bureau étant donné que les appareils connectés ont des connexion internet moins performantes et que leur processeur n'est pas aussi puissant que celui d'un ordinateur.
Responsive horizontal et vertical
La création d'une maquette responsive se contente généralement d'adapter les éléments graphiques en fonction de la largeur de l'écran. Une véritable adaptation doit aussi gérer les adaptations selon la hauteur de l'écran. La
ligne de flottaison étant beaucoup plus haute sur un petit écran, les call-to-action doivent être retravaillé sur les petits supports.
Adapter le design au nouveau support
Enfin, le dernier point mal exploité est le design d'une manière générale. Une adaptation très basique consiste à supprimer des éléments inutiles (exemple : publicités trop grosses) ou à remplacer des éléments de la page (big footer remplacé par petit pied de page). Mais tout n'est pas optimisé pour ces supports de lectures. Par exemple, un mobinaute peut accéder au site depuis un transport en commun. Il ne lira pas les mêmes choses que lorsqu'il est à son bureau. Par ailleurs, il aura besoin de gros boutons pour naviguer facilement sur le site avec ses gros doigts.
En savoir plus
Il y a encore beaucoup de
méthodes permettant d'optimiser le responsive design. L'un des axes important d'amélioration consiste à prendre en compte l'expérience utilisateur. Le simple fait d'améliorer les performances et le design ne suffit pas à rendre un utilisateur totalement content par l'application.
Dans tous les cas, si vous êtes intéressé par un tel design n'hésitez pas à prendre contact avec des entreprises capables de
réaliser des interfaces en design responsives. Cela permettra à votre site d'être visible par un plus grand nombre d'utilisateur et dans de plus grand nombre de situation (depuis un transport en commun, dans une salle de réunion ...).
