Aujourd’hui, rendre son site internet utilisable à tous ses utilisateurs ressemble parfois à un challenge !
En effet, on trouve tout type d’utilisateurs qui navigueront :
- sur Chrome
- sur Firefox
- Sur Internet Explorer
- sur Safari
- etc.
- Mais aussi :
- sur iPhone
- sur iPhone 5 (pas la même taille)
- sur Android
- sur BlackBerry
- sur Windows Phone
- etc.
- Mais aussi :
- sur iPad
- sur Galaxy tab
- sur Galaxy Note
- sur iPad Mini
- sur les tablettes Archos
- sur Kindle Fire
- Mais aussi :
- sur la télévision
- sur le frigo connecté
- sur l’Amstrad CPC de mamie zinzin.. 😀
De nombreux outils, de nombreux supports et des tailles qui ne cessent de changer ! C’est dans cette évolution que l’on parle de « responsive web design » et c’est aussi dans cette pensée que j’ai réalisé la fameuse Responsive Museum Week où j’invitais les utilisateurs, les développeurs, les designers à « hacker » les sites internet des musées.
Aujourd’hui, ce sont dix conseils pour le Responsive Web Design que l’agence Splio nous propose :
Merci pour ce post Geoffrey. Pour ceux que ça intéresse, je conseille notamment l’abonnement à la newsletter mensuelle rédigée par l’équipe de Zurb (inventeur de l’excellent framework Foundation) consacrée au responsive design –> http://dcteo.net/Uirb2s
Une des infographies les plus intéressantes que j’ai vue ces derneirs temps. J’ignorais la propriété box-sizing:border-box, je sens que ça va m’être très utile à l’avenir! Merci
Je commence à être de plus en plus sceptique quant à ce phénomène de responsive design.
À mon avis toutes les solutions proposées tendent vers une uniformisation du design des sites.
Car même si des contraintes naissent la créativité, dans le cadre du webdesign, on assite à une surmultiplication des formats qui nous oblige plus que tout à adopter une solution de design unique (dans le sens où elle reste la seule viable vue toutes les contraintes existantes).
J’en viens à me demander si, au final, c’est une solution pertinente d’adapter un design à toutes ces résolutions… Car on perd des notions d’ergonomie, d’identité, d’originalité, d’architecture…
Je sais que cette citation fait un peu scolaire, mais elle continue de raisonner dans le travail du designer «Medium is message». On va se concentrer sur un design et une mise en page qui est spécifique au propos. Chaque support à ses particularités et ses contraintes qui font émerger ses propres solutions en matières de design car elles servent le message. Et je pense, au final, qu’il en va de même pour le web.
On ne va ni présenter les mêmes informations, ni les hiérarchiser de la même manière que ce soit sur un ordinateur, sur un mobile ou sur une tablette. Ajoutons l’ergonomie et le design qui va dépendre du mode d’interaction que ces «devices» proposent : tactile, clavier, souris…
Aujourd’hui on fait de gros boutons pour que les tactiles puissent les attraper. C’est un des exemples de la contrainte que j’évoquais plus haut. Comment faire si le design, l’identité, et la pertinence de la mise en page, est contradictoire avec le fait d’avoir de grosses zones cliquables ?
J’étais très emballé à l’idée de réaliser mes premiers sites en responsive, mais très vite ce qui semblait être un challenge est devenu un vrai cauchemar. Aujourd’hui j’essaie de prendre du recul et de remettre en question tout ceci.
Après tout, un site composé en HTML et CSS, n’est-il pas lisible sur tablette et mobile ? D’accord son design ne s’adapte pas mais après-tout l’essentiel c’est de délivrer l’information ?
Oui mais on pourrait offrir une expérience aux utilisateurs mobile/tablette !
D’accord, alors envisageons des solutions dédiées pour véritablement offrir cette expériences à ces utilisateurs, en misant justement sur les spécificités techniques de ces «devices» : tactile, accéléromètre, etc.
Mais au final, c’est une belle idée le responsive design. C’est génial de voir ce design s’organiser de telle sorte. D’ailleurs, ça fonctionne très bien pour certains types de contenu ! Mais il reste des doutes…
Bref, est-ce que je suis le seul à me poser ces questions ?
@Jérémy: Ce que tu décris s’appelle le FLAT DESIGN. En effet chaque « tendance » formate la pensée et fait parfois tomber les créatifs dans des travers ou des facilités.
Pour faire face à cela, je répète sans cesse qu’il faut d’abord penser aux usages, aux utilisateurs, etc. et en découlera la forme. L’essentiel étant de délivrer une information mais aussi, pourquoi pas, une expérience, un plaisir, une émotion, etc. Pour ça, ni une technologie, ni le responsive, ni une feuille de style le permet c’est au travail du design qu’il en revient 🙂
En tous les cas tes questions sont très légitimes et je te rassure, tu n’es pas le seul à y penser ! 🙂
Merci Geoffrey pour cette publication 🙂
Jérémy> assez d’accord, l’approche RWD oblige les designers a mettre en arrière plan l’importance de l’architecture et de la cohérence graphique. C’est un peu le contrecoup du « content first », l’identité de la page en souffre logiquement et forcément.
@Rémi: merci & bravo 🙂
@Rémi, @Geoffrey Dorne : Merci ! …je me sens moins seul 😉
Un bon résumé, mais présenter un article sur le responsive web design sous la forme d’une infographie (longue image illisible sur mobile), sans possibilité de copier-coller, c’est du 2ème degré volontaire ?
Soph> HA! On a déjà eu quelques dizaines de fois ce commentaire cruel 😉
Il est certes justifié, mais nous avons deux raisons :
1. l’exercice de « l’infographic », traditionnellement un énorme jpeg, mais surtout
2. c’est au départ un fichier PDF http://www.splio.com/responsive/10_basic_tips_about_responsive_design_fr.pdf malheureusement plus difficile à faire circuler qu’une image 🙂
Effectivement c’est l’une des infographies les plus utiles ou intéressantes que j’ai eu à regarder jusque là. Dans le meilleur des mondes (pour les designers) tout le monde aurait une résolution sensiblement semblable, mais c’est contre-évolutif et tout bonnement impensable, et c’est pourquoi le responsive design me semble aujourd’hui plus que jamais (et ce n’est pas prêt de se minimiser) être une démarche nécessaire lors de nos conceptions.
Ok, donc qui va dire au client que la pub est non essentielle sur son site?
@Jérémy: le RWD, ce n’est pas une histoire de devices, mais de contenu ;).
Bonjour
Merci pour cet article. Un bon condensé d’information pour convaincre mes clients de prendre en compte certaines contraintes du web actuel !
Good job… comme toujours
Walter
Juste un truc (j’ai du retard dans mes lectures, pardon de faire un commentaire un mois après la bataille) : les points de rupture mentionnés dans l’infographie sont un peu n’importe quoi. Ils ne doivent pas être induits par la plateforme mais par le design : à quel endroit le design casse, et donc à quel endroit il faut l’adapter.
C’est là que sont les points de rupture, et pas aux hypothétiques résolutions-du-jour de telle ou telle plateforme (d’autant qu’elles ont tendance à fleurir comme des champignons, les résolutions exotiques, ces jours-ci).
Hello,
Je tombe sur cet article avec un peu (beaucoup) de retard.
Je le trouve vraiment bon et complet, mis à part trois points qui me semblent très contre-productifs :
1- les breakpoints sont effectivement à définir selon le design
2- imposer un width: 100% est une très mauvaise pratique car c’est le Mal (même si box-sizing sauve un peu la mise) : http://blog.goetter.fr/post/13556565063/width-100-tu-es-le-mal
3- une meta viewport en width=device-width n’est *pas* la bonne solution car elle réagit différemment sur iOS en paysage : http://blog.goetter.fr/post/32513655620/viewport-adieu-width-device-width
@Raphael Goetter: excellentes remarques, notamment pour la meta viewport 🙂 merci !
@Raphael Goetter: Merci pour ces remarques, effectivement très justes. Je vais tâcher de remanier le doc avec les nombreux retours que j’ai eu jusqu’ici 🙂
@noclat:
Bonjour
Sur le responsive
Je le vois pas dans vos fils de discussion…
Vous l’avez oublier,mais pour les autres…
http://mediaqueri.es/
🙂 So long…!
Un peu old mon commentaire, désolé 🙂
J’ai personnellement un peu de mal avec ce genre de publications qui proposent des solutions magiques à un problème qui est bien plus complexe que 3 media queries dans un document.
Surtout qu’ils prônent plus ou moins de baser les media queries sur des tailles d’appareils alors qu’on aura non seulement surement pas besoin justement de media queries à ces endroits là, et surtout qui sait de quels appareils l’avenir sera fait ?
Pareil pour le « supprimer l’essentiel » avec lequel j’ai de plus en plus de mal au fure et à mesure des projets et de mes lectures. Qui sommes nous pour décider arbitrairement de ce qui va intéresser l’utilisateur mobile ou non ? Surtout que bien souvent, techniquement ces « supprimer l’essentiel » se résument à un gros display:none qui va cacher aux yeux de l’utilisateur, mais au final charger les ressources quand même. En bref on charge des ressources qu’on considère inutile mais qu’on va pas lui montrer, c’est un poil déroutant. Au final, je préfère « cacher le non essentiel » à « supprimer ». Ne pas charger ces ressources, mais les laisser accessible via un lien par exemple pour les charger conditionnellement en ajax quand l’utilisateur en a besoin. La démo « mobile first » de Brad Frost est un excellent exemple : http://bradfrostweb.com/demo/mobile-first/
Pareil pour la meta-viewport et la réflexion de Raphael sur le sujet ^^
@Stéphanie: jamais old tes com’, merci bcp pr ton commentaire éclairé, en effet, ici tout est très résumé, simplifié et schématisé.
Article très intéressant, merci .
Le responsive design impose des contraintes qui ne sont pas toujours favorables pour le design de notre conception.