iPhone, iPad, PC et Marmiton
Vous aussi vous imprimiez comme moi, la recette de la tarte au sucre ou du houmous sur trois pages A4 volantes qui finissaient au fond d’un tiroir avec le tire-bouchon et le coquetier ?
Avec Marmiton, c’est fini tout ça !
Référence en matière de site de recettes de cuisine, Marmiton décline aujourd’hui son offre en une application mobile.
En dehors de l’intérêt de ces 55.000 recettes de cuisine gratuites à l’approche du réveillon, mon propos est d’analyser la qualité des interfaces.
“Responsive design” ?
J’ai été un peu vite, au démarrage de cet article, en écrivant que Marmiton faisait une belle démonstration de “responsive design”. En réalité, le véritable “responsive design”, c’est de faire un site unique qui va réagir automatiquement en fonction de la dimension de la fenêtre et proposer une interface adaptée. Par exemple ce site-ci que je trouve génial dans sa réactivité (réduisez les dimensions de la fenêtre de votre navigateur et dégustez le spectacle). Le site de Marmiton n’est pas “responsive” à proprement parler. Simplement, ses applications iPhone et iPad proposent d’autres mises en scène.
Ce que je trouve très intéressant, c’est le fait de décliner non seulement la mise en page, mais également les fonctionnalités.
En version iPhone :
- 1 seule colonne
- 1 recherche immédiate et simplifiée
- Des photos de taille réduite
- Des zones de clic confortables
En version iPad :
- 2 colonnes
- 1 formulaire de recherche enrichi
- Des effets de “slider” pour calibrer le niveau de difficulté de la recette
- Des photos plus grandes, de haute qualité
“Mobile First”
Ce slogan a beaucoup circulé dans le monde du Web mobile : “Mobile First” signifie que l’interface prioritaire, dans certains univers comme ici la cuisine, est l’interface mobile et non le site web classique !
Le site “desktop” de Marmiton s’apparente à un puzzle d’informations dont vous ne voyez ici qu’une moitié ! A la sauce “portail” 😉
Remarquez comme les versions mobiles iPhone et iPad sont faiblement valorisées, très bas dans la colonne latérale droite, bien en-dessous de la ligne de flottaison.
En vérité, je vous le dis, les meilleures applications mobiles enverront bientôt les interfaces classiques aux oubliettes.
Le peu de pixels octroyés par les mobiles est une superbe opportunité de simplifier les interfaces.
Vous désirez en discuter davantage ? Découvrez notre formation “Du Web vers le mobile” !
Commentaires des lecteurs
Comment by Mathieu — 18 December 2012
Le site marmiton n’est pas du tout responsive. Quand j’ouvre le site marmiton sur le navigateur web de mon mobile le design ne s’adapte pas, je suis redirigé vers m.marmiton.org.
Le responsive web design, c’est un seul site développé pour tous les devices (un site qui s’adapte à toutes les hauteurs, toutes les largeurs; au mode de saisie clavier, touch; etc.).
Chez marmiton, ils ont 2 sites le www. et le m. et dans ton posts, tu parles de leurs applications natives ios qui ne sont pas des sites webs.
Un site web responsive remplace les 2 sites et les x applications natives (ios, android, blackberry, …) par 1 seul et unique site web.
Comment by Jean-Marc Hardy — 18 December 2012
@ Mathieu : Exact ! J’ai été beaucoup trop vite en besogne, confondant le véritable “responsive design” et la simple adaptation d’une interface à différents supports. Je vais, de ce pas, modifier un bout de l’article, pour ne pas galvauder le concept en effet. Ce qui est important, à mes yeux, c’est la réflexion sur l’interface en fonction des pixels, mais il est évident qu’il vaut mieux faire du vrai “responsive” à partir de ce moment-là.
Comment by Gilles — 18 December 2012
+1 avec Mathieu.
En plus j’ai l’impression que les copies d’écran iphone et ipad correspondent aux applis Marmiton, donc on est loin du responsive.
Comment by Jean-Marc Hardy — 18 December 2012
Voilà, j’ai modifié la partie de cet article qui risquait de galvauder le concept de “responsive design”, en confondant la conception d’interfaces adaptées aux supports avec la véritable souplesse que peut avoir un site “responsive” unique et réactif. C’est d’autant plus maladroit de ma part que le public lambda se perdra entre le site web et les applications mobiles, qui demandent à être installées bien évidemment. Merci pour l’alerte plus que pertinente, Mathieu. Retenez le centre de mon propos : l’adaptation des interfaces n’est pas seulement esthétique, mais aussi fonctionnelle.
Comment by Mathieu — 18 December 2012
Oui, c’était juste une alerte. Je suis rassuré 😉
On commence à faire des sites en responsive design à la RTBF ; et il y a beaucoup de boulot, il faut vraiment sensibiliser les intervenants des projets à l’ergonomie, la simplification des interfaces, le mobile-first, l’accessibilité…
Notre premier essai : http://www.rtbf.be/video/
Comment by Claude MICHEL — 16 February 2020
Bonjour
Marmiton s’affiche en mode iPhone sur mon PC.
Je ne peux pas lire ,donc pas l’utiliser.
Cordialement
Made et M° MICHEL Cl.