Publié le 13 décembre 2016

Comment fonctionne le responsive design ?

Intéressant cet article ?

[Total : 2    Moyenne : 3.5/5]

Face à la progression de l’équipement en écrans mobiles (smartphone, tablette) qui démultiplient les possibilités d’accès à internet, notre façon de consommer le web a énormément changé en peu de temps.
En février 2016, nous étions 50,7 % de Français à utiliser chaque jour notre smartphone pour accéder à Internet.

Pourquoi passer au responsive design ?

Mais comment répondre à cette demande croissante de mobilité ? On vous voit venir : « pourquoi ne pas créer un site pour ordinateur et un site adapté aux mobiles ? Ce serait la solution idéale ! ». Bien que dans l’absolu, ce ne soit pas complètement faux (il existe encore beaucoup de sites dans ce cas de figure), ce choix pose plusieurs problèmes :

  • Qui dit 2 sites dit 2 fois plus de maintenance
  • Aujourd’hui, la frontière entre smartphone / tablette / notebook / PC est beaucoup trop complexe pour être réduite à la gestion des petits écrans. Il suffit de voir le nombre incalculable de formats d’écran qui existent sur le marché (aussi bien pour les smartphones que pour les tablettes), l’apparition sur ordinateur de certaines technologies, autrefois réservées aux smartphones & tablettes (vous avez dit tactile ?), et de PC hybrides, qui peuvent aussi bien s’utiliser comme une station de travail que comme une tablette en détachant l’écran… Bref, tout cela mis bout à bout, vous vous rendez vite compte qu’on ne peut pas répondre à toutes ces problématiques en se contentant de 2 sites.

C’est quoi exactement le responsive design ?

Alors, c’est quoi le responsive webdesign ? Pour faire simple, c’est un ensemble de techniques et d’outils qui sont utilisés pour que le contenu affiché sur votre écran, peu importe ses caractéristiques, s’affiche correctement. De ce fait, fini l’idée de créer puis de gérer plusieurs sites. Avec cette approche, on ne crée qu’un site, adapté à tous les formats d’écran.

A noter également que ces techniques ne se limitent pas à l’adaptation aux écrans. Elles peuvent aussi, et surtout, répondre à différents supports d’affichage, tel que les imprimantes, les lecteurs de braille, les TV, les projecteurs, etc.

illustration-responsive-webdesign_blog-agence-jetpulp

Source : Premiumwp

Comment ça fonctionne techniquement ?

Bon l’idée okay, mais qu’est ce qui se cache, techniquement, derrière tout ça ? La réponse tient en 2 mots : media queries. Ce sont des directives CSS qui permettent au navigateur d’afficher vos pages en fonction du format d’écran utilisé. Puisqu’un exemple est toujours plus parlant, en voici un basé sur le principe du mobile-first.

Imaginons un bloc simple correspondant à votre version mobile. Appelons-le sobrement  ‘.mon-bloc’ et donnons-lui les propriétés CSS suivantes :

exemple-code-responsive-design_blog-agence-jetpulp

À ce moment, tous les formats d’écran afficheront un bloc rouge, de largeur et hauteur de 50 pixels.

Supposons maintenant que, sur écrans moyens, nous souhaitions changer la couleur, ajouter une bordure, et l’élargir. C’est à ce moment que les media queries entrent en jeu :

exemple2-code-responsive-design_blog-agence-jetpulp

Nous venons donc, avec cette règle, de demander au navigateur d’afficher le même bloc, à partir d’une résolution de 700 pixels minimum (min-width), de façon totalement différente.

Il est bien évidemment possible, d’utiliser une limite ‘max-width’, ce qui aurait comme résultat de n’activer ces propriétés QUE jusqu’à une résolution de 700 pixels.

Cet exemple illustre l’utilisation des media queries, principal outil CSS pour gérer un site responsive, mais il existe également des outils en Javascript (enquire.js), qui fonctionnent sur le même principe de détection de largeur d’écran pour lancer différentes opérations sur la page.

Autres avantages du reponsive design

Pour conclure, l’enjeu du responsive design est de s’adapter à tout type d’appareil sans que l’utilisateur ait besoin d’intervenir.

Ses autres principaux avantages sont :

  • Des coûts et des délais généralement inférieurs aux anciennes techniques (sites mobiles dédiés par exemple)
  • Une maintenance du site plus simple (le design, le code HTML & CSS ne se gèrent qu’à un seul endroit
  • Les évolutions sont de ce fait multiplateformes

Il faut également savoir que Google met en avant dans ses résultats de recherche les sites ayant une version responsive, ce qui n’est pas négligeable pour votre référencement !

Voici des ressources complémentaires sur le sujet :

N’hésitez pas à nous poser vos questions en commentaires !

Laurent

comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
comment-fonctionne-responsive-webdesign_blog-agence-jetpulp
0 Commentaires
Répondre
Se joindre à la discussion ?
Vous êtes libre de contribuer !
Laisser un commentaire

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