Faites participer Graphism.fr à vos projets !
Graphisme & interactivité blog de design par Geoffrey Dorne » 10 petits conseils pour le Responsive Web Design !

10 petits conseils pour le Responsive Web Design !

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.. icon biggrin 10 petits conseils pour le Responsive Web Design !

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 :

responsive 10 petits conseils pour le Responsive Web Design !

source | source

Ces articles peuvent aussi vous intéresser:

22 personnes ont laissé un commentaire... et vous ?

  1. Mathieu, le 7 décembre 2012 à 11 h 03 min

    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

    RépondreRépondre
  2. Gianni, le 7 décembre 2012 à 11 h 14 min

    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

    RépondreRépondre
  3. Jérémy, le 7 décembre 2012 à 11 h 27 min

    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 ?

    RépondreRépondre
  4. Geoffrey Dorne, le 7 décembre 2012 à 12 h 52 min

    @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 ! :-)

    RépondreRépondre
  5. Rémi, le 7 décembre 2012 à 13 h 41 min

    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épondreRépondre
  6. Geoffrey Dorne, le 7 décembre 2012 à 13 h 51 min

    @Rémi: merci & bravo :)

    RépondreRépondre
  7. Jérémy, le 7 décembre 2012 à 14 h 02 min

    @Rémi, @Geoffrey Dorne : Merci ! …je me sens moins seul ;)

    RépondreRépondre
  8. soph, le 7 décembre 2012 à 15 h 35 min

    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 ?

    RépondreRépondre
  9. Rémi, le 7 décembre 2012 à 15 h 49 min

    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 :)

    RépondreRépondre
  10. PsykedeliZ, le 7 décembre 2012 à 20 h 32 min

    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.

    RépondreRépondre
  11. john, le 7 décembre 2012 à 22 h 40 min

    Ok, donc qui va dire au client que la pub est non essentielle sur son site?

    RépondreRépondre
  12. noclat, le 8 décembre 2012 à 13 h 07 min

    @Jérémy: le RWD, ce n’est pas une histoire de devices, mais de contenu ;).

    RépondreRépondre
  13. walter, le 10 décembre 2012 à 11 h 21 min

    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

    RépondreRépondre
  14. Stéphane Deschamps, le 3 janvier 2013 à 15 h 02 min

    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).

    RépondreRépondre
  15. Raphael Goetter, le 26 janvier 2013 à 9 h 52 min

    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

    RépondreRépondre
  16. Geoffrey Dorne, le 26 janvier 2013 à 15 h 12 min

    @Raphael Goetter: excellentes remarques, notamment pour la meta viewport :) merci !

    RépondreRépondre
  17. Rémi, le 28 janvier 2013 à 17 h 06 min

    @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 :)

    RépondreRépondre
  18. Bakhounine_43, le 13 février 2013 à 9 h 46 min

    @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…!

    RépondreRépondre
  19. Stéphanie, le 12 mars 2013 à 0 h 29 min

    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 ^^

    RépondreRépondre
  20. Geoffrey Dorne, le 12 mars 2013 à 0 h 31 min

    @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é.

    RépondreRépondre
  21. Médium Montauban, le 5 novembre 2013 à 11 h 27 min

    Article très intéressant, merci .

    RépondreRépondre

Écrivez un commentaire