Le responsive, vous le savez, c’est la mise en place d’une charte graphique élastique, qui s’adapte à la taille de l’écran.
Exemple avec Relay.com, sur un grand écran :
Le même site sur un écran de type smartphone :
C’est sympa…
Mais je ne suis pas convaincu que ça soit très réaliste. Entre un smartphone et un écran de bureau, il y a trop d’écart pour que l’adaptation soit juste graphique.
Une solution plus raisonnable, il me semble, est de faire du « responsive limité » par famille de terminaux : une grille pour les ordinateurs (800 à 1200 par exemple), qui pourrait éventuellement marcher pour les tablettes, et une grille pour les smartphones.
Salut François,
chez 42stores nous venons de passer tous les templates en responsive.
Plus de 4 mois de boulot ! surtout pour faire les tests pour savoir si il fallait du tout fluide, du grid etc..
Et je te confirme qu’en e-commerce, le fluide adaptatif c’est pas simple.
Il y a tellement d’info nécessaires à conserver à l’affichage : navigation, panier, options produits etc..
Nous avons opté pour un mix. avec des seuils de largeur qui déclenchent les adaptations, tout en conservant du proportionnel pour les images, les sliders etc..
Voir une démo ici : http://responsive-design.42stores.com
Jouez avec la largeur du navigateur, et testez le sur smartphone et tablette. C’est assez efficace..
Cette question me taraude pas mal ces temps, je me demande aussi à qui elle s’adresse, pour les nouveaux qui se lancent sur le web il serait pas mal de penser « responsive ».
Par contre, pour ceux qui existent déjà, penser une refonte en « responsive » avec le même contenu, la même pertinence d’interface… ça me semble pas une mince affaire. Dans un premier temps le compléter avec une interface mobile est déjà un bon pas en avant.
Pas certain d’être d’accord avec toi sur ce coup-ci. Le responsive design « bien fait » consiste à faire du « mobile first », c’est à dire designer sa page pour un mobile (320px de large) et ensuite trouver les bons « sauts » quand on a suffisamment de place pour mettre les infos de façon différente.
Le fait de faire du responsive design a le mérite de commencer par designer l’écran le plus petit, ce qui oblige le business à se concentrer sur ce qu’ils veulent montrer le plus – ie: éviter le superflu. La tendance inverse (commencer à designer pour 1600px de large) a tendance à faire de la page un « foure tout ». L’écran a beau être plus grand, nos capacités cognitives restent les mêmes. Franchement, sur pas mal de sites e-commerce on commence a avoir du mal à trouver les infos de base (caractéristiques par exemple) des produits tellement il y a de trucs fourrés au chausse pieds dans les fiches produit.
D’autre part, designer deux sites différents aura tendance a te faire supprimer des choses sur le site mobile, ce qui est une hérésie à mon sens. Les gens qui viennent sur ton site (par un iPhone ou un PC en 2560×1440) on tous les mêmes attentes. Ils méritent le même traitement. Bien souvent, un utilisateur verra ton site en premier sur son mobile. S’il ne trouve pas ce qu’il cherche là, c’est mal barré pour le revoir sur desktop après.
En d’autre termes, faire du responsive design (comme Benjamin avec 42stores) a le mérite de te faire poser les bonnes questions – et ce sont des questions difficiles qu’on a tendance à passer sous le tapis quand on designe un site mobile spécialement pour mobile. « Bah, les gens dans le métro ne sont pas intéressés par ça !!! »
De plus, il ne faut pas oublier par exemple qu’une tablette Windows (mais aussi Android comme le Galaxy Note 1&2) peut voir son écran se splitter en deux verticalement pour faire jouer deux apps en parallèle sur l’écran. Du coup, tu auras chargé la grille « desktop » étant sur une tablette et soudain, tu vas passer de 1024 à 320px de large, sans rechargement, et là ton site ne va plus marcher du tout…
Bref, pour moi, il faut d’abord être clair sur ce qu’on veut présenter au client. Après, tous les clients doivent avoir accès à ça. Et là, on est bien sur une problématique d’adaptation graphique.
L’approche me semble effectivement judicieuse. Partir de l’essentiel. C’est même un exercice salvateur… Quel est vraiment le premier message de ma boutique ou de mon site ?
Aujourd’hui 10% du trafic de nos clients se fait sur tablettes ou smartphone. Ils n’étaient que 5% au début 2012.
Qui peut se permettre de faire une croix sur 10% de son trafic ? Je ne vois pas beaucoup de doigts se lever !…
Au delà des méthodes on comprend que c’est de l’énergie supplémentaire qu’il va falloir déployer et que le ticket d’entrée d’une boutique eCommerce en secteur concurrentiel monte d’un cran supplémentaire !
Je suis bien d’accord avec toi. Un exemple de design pour une fiche produit fictive: http://bradfrostweb.com/demo/mobile-first/article.html
(et la démo de ladite page: http://bradfrostweb.com/demo/mobile-first )
Ce qui est certain, c’est que c’est plus compliqué qu’avant puisqu’on a désormais plusieurs choses à considérer: tailles d’écran, interactions « touch », bande passante hétéroclite, etc… C’était mieux avant 😉 Un bon bloc de 1000px de large et c’était joué. Mais bon, je pense que c’est pour le mieux.
J’ai déjà travaillé chez un acteur important du e-Commerce et le nombre de fois où on a dû changer l’ordre des « blocs » sur la fiche produit était vraiment troublant. Et pénible. Evidemment, chacun voulait voir son « bloc » le plus haut possible. Infos diverses, crédit, assurance, garantie, services divers, accessoires, avis clients, caractéristiques, description, produits recommandés….. Lesquels mettre en haut?
Le point c’est que tout cela ne sert à rien ou presque. Et les effets négatifs de charger 200ko de texte à chaque clic sont bien plus élevés que le 0.000001% de taux de conversion de ces zones va apporter.
Les sites modernes ressemblent plus a des applications qu’à des « pages web » d’antan. Il est temps de factoriser cette complexité dans une « application » et plus une bête fiche produit. Tout fourrer dans une page de 1Mo ne marche plus. Notes que ça ne marchait pas avant non-plus, mais techniquement ça passait.
Interessante ton approche pieroxy de commencer le design par l’écran le plus petit. J’ai recemment mis en ligne un site que j’ai voulu rendre responsive mais j’avais que la maquette pour du 1280px et plus. Du coup réfléchir a l’envers n’a pas été facile pour réorganiser la page. Et je me suis effectivement posée la question de ce que je voulais présenter en priorité. Ca reste une démarche assez lourde je trouve. Cela dit elle est justifiée compte tenu des nouvelles habitudes des internautes… d’ailleurs j’écris depuis mon smartphone ! 😉
Dans tous lez cas,
Salut François,
merci pour cet article qui parle d’une de nos réalisation.
Tu as raison , parfois, il faut aller plus loin que la simple retouche graphique. Avec le responsive, on peut aller plus loin et proposer une ergonomie réellement différente si on considère qu’il y a un réel écart de comportement entre le desktop et les autres devices.
Tu peux aller voir le site de skimium également, qui va un peu plus loin (www.skimium.fr).
Pour l’instant, les e-commerçants n’ont pas assez de recul pour faire ce constat : jusqu’à l’avénement du responsive , les devices mobiles étaient très peu adressés et donc analysés.
Je pense que le responsive va nous permettre de commencer à vraiment comprendre les différences de comportement et donc d’aller plus loin que les considérations subjectives que nous pouvons avoir aujourd’hui.
A ta dispo pour en discuter.
Le responsive design est tout à fait indiqué. Il a pour gros avantage de limiter l’adaptation multi-devices à la seule vue (template), et évite d’avoir à faire d’importants développements spécifiques.
Tous les autres modes (application, web app dédiée,…) nécessitent d’autres développements (au niveau du modèle et/ou du controlleur).
Si l’on souhaite avoir une vue adaptée en fonction des différents devices, le responsive est donc tout à fait indiqué.
Si l’on souhaite des fonctionnalités plus poussées et qui prennent compte de toutes les capacités de tel ou tel téléphone, on peut faire une appli dédiée. Mais il faut bien savoir que même en web mobile, on peut capturer grâce à certains frameworks des actions telles que le multi touch http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Quant à savoir si on veut le faire le faire par famille de résolution ou par device, tout dépend ensuite des moyens qu’on veut y allouer, en fonction de son public (on ne met pas les mêmes moyens si on a 5% ou 25% de son public sur mobile…)
Bonjour, j’ai bossé sur le projet Relay. Cette refonte a été passionnante car, justement, elle a fait l’objet d’un process design très méthodique. Le graphisme a été une suite logique des études métier et client. Et, le plus important, c’est que les résultats sont là depuis la mise en ligne.
Responsive oui, mais tout dépend de vos objectifs, cibles et business.
Pour certains sites, un simple template responsive suffira, pour d’autres, par contre, une version spécifique (sous forme d’application ou pas) sera nécessaire.
Tout dépend de ce que le user veut trouver comme information quand il navigue sur votre site via un smartphone ou une tablette.
A la rigueur, le responsive est une bonne solution pour passer de l’ordi à la tablette, car les modes de navigation et les attentes sont assez similaires, mais pour le reste, il faut vraiment se poser la question.
Je trouve toujours dommage que la faisabilité technique dirige la conception. Chaque device aujourd’hui mérite une conception spécifique si nécessaire.
Plusieurs points par rapport à ta réponse:
1. Est-ce que tu sous-entend que un user peut avoir des attentes différentes s’il vient voir ton site d’un PC ou d’un Smartphone? Est-ce que tu as des données / surveys / autre pour etayer ça?
2. La faisabilité technique va évidemment orienter la conception et à moins que ton budget ne soit illimité, il n’y a pas vraiment d’alternative. La technologie peut être un ami quand on va dans son sens ou un ennemi quand on essaye de la prendre à rebrousse-poil – et là, il vaut mieux avoir du pognon et c’est sans garantie. Les constructeurs automobiles se basent bien sur l’état des routes pour designer leurs voitures! La techno decide bien de la faisabilité.
1. oui bien-sur un user pour certains types de site peut avoir des attentes (actions) différentes en fonction du device avec lequel il est connecté.
Par exemple, pour un site e-commerce, l’audience de l’espace client (suivi de mes commandes) a une part plus importante sur smartphone que sur PC (cas avéré pour un certains nombre de sites que j’ai pu suivre en analytics).
Pour des sites de contenus (portail médias), j’ai pu participer à des »focus groupes », des « tests utilisateurs » ainsi que suivre des web-analytics, et les navigations et attentes sont différentes entre smartphone et PC : sur smartphone, le visiteur veut avant tout les dernières infos : top 10 du flux de brèves (articles cours), et ne veux pas d’une navigation par catégorie… Sur un PC, le visiteur veut le top 10 aussi, mais avec du contenu associé, transversal et une segmentation de l’information par catégorie….
Sur tablette, je n’ai pas de data pour argumenter, mais je pense que la navigation (les attentes) via une tablette (grand format) est similaire à celle du PC, en tout cas, pour de l’info et du e-commerce.
2. Bien sur la faisabilité technique oriente la conception, ça fait partie des éléments pris en compte par le concepteur, au même titre que les besoins fonctionnels et ergonomiques pour atteindre les objectifs du site tout en respectant le budget.
Par contre, je pense que la techno est suffisamment mûre aujourd’hui pour ne pas être prépondérante. Elle doit être au service de la conception et pas l’inverse.
C’est ce qui me gêne un peu avec les « templates responsive », car on oriente la conception en partant d’une possibilité technique, et parfois (mais pas toujours), on en oublie les besoins de l’utilisateur.
Finalement mon point de vue rejoint celui de François, avec une « responsive limité » par famille de terminaux, afin de bien adapté nos interfaces aux besoins de nos users.