Accueil » Blog » iPhone, iPad, PC et Marmiton

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

L'application iPhone de Marmiton

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é

Application iPad de Marmiton

“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” 😉

Le site web de Marmiton

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.

  • Jean-Marc Hardy

    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.

  • Jean-Marc Hardy

    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.

Votre commentaire

Your email address will not be published. Required fields are marked *

Je suis un humain*

This site uses Akismet to reduce spam. Learn how your comment data is processed.