Responsive web design desktop


Responsive web design desktop


Responsive est dans toutes les bouches quand il s’agit de site web, en promettant d’offrir une expérience utilisateur adéquate sur desktop comme sur mobile. Mais certains sites ou applications web sont exclusivement destinés à un usage desktop, notamment lorsque l’usage mobile est déjà couvert par une application native (iOS ou Android).

Mais cette restriction ne suffit pas à rendre les choses simples, le responsive web design desktop entre en action !

Des résolutions d’écran diverses

Même en se cantonnant au micro ordinateurs (desktop et laptop), les tailles d’écrans sont très variées, de l’ultraportable 11” à l’écran 27” et les résolutions sont à l’avenant.

On trouve assez facilement des statistiques d’audience par taille d’écran sur internet. Par exemple celles de statcounter :

10 résolutions desktop les plus fréquentes en avril 2014 : 1° : 1366x768

Ce graphique présente la répartition des 10 résolutions d’écran les plus fréquentes sur les 6 derniers mois.

Largeurs

On remarque trois groupes :

  • 1200 : 60% (entre 1280px et 1440px de large),
  • >> 1200 : 20% (au delà de 1600 px de large),
  • <1200 : 15% (notamment 1024px).

Hauteurs

  • 768 : 55%  (entre 768px et 800px),
  • > 1000 : 20%,
  • < 750 : 5%.

Définition d’écran et Viewport

Cependant, l’écran n’est pas entièrement disponible pour l’appli web. Bien que la tendance soit au minimalisme, le navigateur empile encore au minimum une barre d’onglet et une barre d’adresse. Et le système d’exploitation, un encadrement des fenêtres et un dock. Donc, pour la largeur, prévoyez plutôt que 1280px, 1200px de large. Et pour la hauteur, plutôt que 768px, tablez sur 600px avant le premier scroll.

Et attention au ascenseurs. 1 petit pixel manquant peut suffire à les faire apparaitre, et ce sont une vingtaine de pixels perdu d’un coup dans l’autre dimension !

 

D’autre part, les fenêtre sont re-dimensionnables. Toutes les configurations sont possibles, mais par exemple partager en deux son écran est plutôt pratique pour de nombreuses tâches donc les petites largeurs de 960px à 480px auront peut-être un vif succès !

Solution

Comme on vient de le rappeler, les tailles d’écran sont variées, et la surface disponible fait partie des paramètres fondamentaux lors de la conception d’une interface. Sans une vue précise sur ce paramètre, espérer créer une interface lisible, ergonomique, voire harmonieuse est présomptueux.

Mais penser un design pour chacune des tailles d’écran représente beaucoup de travail, même si on regroupe les tailles comme on a commencé à le faire ci-dessus. À moins que vous ayez des ressources humaines à profusion, il est plus sage de restreindre au maximum le nombre de tailles d’écrans sur lesquelles vous allez penser et organiser votre interface.

Votre application Web est déjà en ligne…

Pour effectuer ce choix l’idéal est de consulter votre audience, via votre système de traces d’usages. Par exemple, avec google analytics, il suffit de se rendre dans la rubrique Audience → Technologie → Navigateur et système d’exploitation

; puis de choisir la variable principale “résolution d’écran”, pour faire votre choix.

Attention, il s’agit de la taille de l’écran, et non de la taille du viewport (ie de la zone d’affichage disponible).

 

Vous n’avez pas encore d’utilisateurs…

Alors allez au plus efficace ! Pensez votre interface pour un espace de 1200px X 600px . Elle sera parfaite pour 60% des visiteurs. Les 20% qui disposent d’écran plus grands auront des marges plus importantes. Pour les petites tailles, veillez à ce que cela soit encore utilisable (même si c’est un peu moche) jusqu’à 480px de large.

Avec cette stratégie, vous vous concentrez sur une seule interface, sans pour autant frustrer vos futures utilisateurs atypiques.

 

POP (Prototype On Paper)

 

Comme évoqué précédemment, il est indispensable d’avoir en tête la surface disponible pour votre interface même dans les premières étapes de maquettage.

Cette étape peut être judicieusement réalisée sur papier : très propice au travail collaboratif, voir au brainstorm, c’est facile à se procurer à configurer et à prendre en main. De plus, cela rend très tangible la surface réellement disponible, la lisibilité, les proportions… Plus de détails sur cette technique sur Wikipédia).

Pour notre taille standard 1200px X 600px, prenez une feuille A4 en paysage, et tracez deux marges de 2,5 cm ou 3 cm de large (ou de la largeur de votre pouce), en haut et en bas. La surface ainsi délimitée en quelques instants correspond assez précisément à la surface utiles disponible sur un écran d’environ 13’, et vous pourrez glisser des annotations dans les marges.

Conclusion

La fragmentation implique souvent beaucoup de travail ; d’autant plus si elle n’a pas été anticipé.

Dans le cas présent du responsive web design desktop, il s’agit de ne pas se disperser, car il suffit de vous concentrez sur une taille pour satisfaire le plus grand nombre, puis de faire des aménagements à minima pour contenter les autres. Ce ne sera pas possible pour un design responsive pour appareil mobile, où le nombre de pixel est loin d’être la seul différence et la seule difficulté, mais ce sera l’objet d’un autre billet.

En attendant, à vos crayons !