Perdu ? Vous êtes ici :

13

nov

Le Responsive Webdesign 1/2

visu-alaune

Il y a une dizaine de jours, nous avons assisté à une présentation à la CCI de Strasbourg sur ce thème récurrent, qui ne cesse de faire parler de lui. La conférence était tenue par Olivier Kubler, directeur général de l'agence Advisa.

La conférence nous a donné envie de vous donner l'envie du responsive webdesign.

Nous n'entrerons pas dans l'aspect technique dans cette série d'articles (c'est long), mais aborderons les généralités et les problématiques que cette nouvelle tendance soulève.

RWD : Origins

Qu'est-ce que le Responsive Web Design, ou Conception de Sites Web Adaptatifs ? Because we are in France, we speak french, ok ?

Le principe est très simple : optimiser son site Internet de façon à ce qu'il soit le plus lisible, mais aussi le plus accessible, sur les nombreux supports qui existent aujourd'hui. Encore plus simplement : optimiser son site à toutes les résolutions d'écran.

En effet, il y a quelques années, nous utilisions Internet en majorité sur nos ordinateurs. Depuis l'apparition des smartphones et l'utilisation croissante des tablettes, nous sommes tout autant aptes à consulter tel ou tel site à partir du bureau, de notre canap', notre lit, la rue, la file d'attente du ciné, l'ascenseur de l'agence My Client is Rich (quand ça capte...), etc.

Les supports et leurs usages se sont diversifiés au cours des dernières années.

Cette évolution dans nos habitudes a fait naître la problématique suivante : comment offrir à l'internaute un contenu agréable, une expérience utilisateur adaptée, peu importe le support qu'il utilise, de la manière la plus confortable et la plus ergonomique possible ?

RWD : La logique

Nous retenons aujourd'hui 3 supports majeurs dans la consultations de sites Internet :

  • l'ordinateur (fixe ou portable)
  • la tablette (iPad...)
  • le smartphone (iPhone, Samsung, HTC, Blackberry...)

Parlons tout d'abord en terme d'espace :

Sur l'écran d'un ordinateur, il est fréquent d'aligner plusieurs colonnes de contenus les unes à côté des autres, d'avoir de grandes images, des vidéos plein pot, etc. Alors que sur smartphone, il est évident qu'une colonne suffit amplement à une meilleure lisibilité. Les images et autres médias prendront une place secondaire, la priorité étant souvent donnée au texte.

Si l'on parle en terme d'interaction : 

Sur smartphone comme sur tablette, on ne clique pas aussi précisément que sur ordinateur, le doigt étant plus épais que le curseur. Il faut donc penser aux boutons qui doivent garder une taille respectable. En effet, qui n'a jamais lutté en dézoomant et rezoomant une page web sur son téléphone pour réussir à cliquer sur le bouton « lire la suite »...

C'est ainsi qu'il est nécessaire de réfléchir à une réorganisation du contenu suivant la taille du support. D'où la nécessité de réfléchir au préalable à une grille qui s'adapte à la résolution et qui tient compte des besoins de l'utilisateur : pouvoir lire, naviguer, agir et cliquer sans problème.

La grille se réorganise selon les supports.

On choisit pour cela ce qu'on appelle des « points de ruptures », c'est-à-dire la définition de largeurs d'écran où le contenu se ré-adapte. Cette dernière étant à chaque fois optimisée à un terminal (par exemple 800 pixels pour ordinateur portable, 320 pixels pour smartphone, etc).

Ainsi, pour l'ordinateur, la tablette format paysage, la tablette format portrait, le smartphone format paysage et le smartphone format portrait, on a déjà 5 points de rupture.

Pour tester sur ordinateur, si un site est responsive ou pas, il suffit de jouer avec la taille de la fenêtre du navigateur, et d'observer les changements, s'il y en a.

Nous vous invitons, à titre d'exemple, à consulter le site de « The Boston Globe » et à changer la taille de la fenêtre de votre navigateur.

Article à suivre jeudi !

  • http://twitter.com/jonathanpath Jonathan Path

    Haha, il est trop fort Chabal! VIve les sites adaptifs

  • http://www.facebook.com/stephanie.walter.3950 Stéphanie Walter

    Belle introduction au RWD :)

    “On choisit pour cela ce qu’on appelle des « points de ruptures », c’est-à-dire la définition de largeurs d’écran où le contenu se ré-adapte. Cette dernière étant à chaque fois optimisée à un terminal (par exemple 800 pixels pour ordinateur portable, 320 pixels pour smartphone, etc).”

    Si je puis me permettre, il vaut mieux ne pas se focaliser sur des points de rupture en fonction des tailles d’écran ou appareil, mais plutôt voir quand le design “casse” et les placer à ces endroits là. La première raison à cela est la constante évolution du marché de la tablette et du mobile : si l’ont veut avoir un design qui dur et à l’épreuve de cette évolution, il vaut mieux se libérer le plus rapidement possible des tailles d’écran trouvées sur le marché.
    La seconde raison et plus une raison logique : pour mette le contenu en avant, il vaut mieux placer les points de rupture aux endroits où il devient illisible, pour lui rendre sa lisibilité.
    Plus sur le sujet ici http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/

  • http://www.facebook.com/jungben Ben Jung

    Merci Stéphanie pour ces remarques pertinentes !

  • Pingback: E-commerce et responsive design : l'état des lieux | My Client is Rich