En 2013 : site web mobile ou responsive design ?

Vous le savez maintenant, vous en êtes certain, en 2013, si vous ne l’avez pas déjà fait, il va vous falloir un site mobile. Mais la question que vous pourriez vous poser, c’est en « Responsive Design » ou pas ? Vaut-il mieux investir dans un site mobile ? Avec mon site en responsive, est-ce que je pourrais intégrer toutes mes fonctionnalités sur mon site mobile ? Et mon site s’adaptera-t-il bien à toutes les tailles d’écran ? Qu’est-ce qui coûte le plus cher : le responsive ou le site mobile ?

Autant de questions qui vous laisseront dans l’incertitude absolue et ne vous avanceront pas plus dans votre réflexion (mais vous aurez peut-être quelques réponses ici)

Voici selon moi quelques recommandations quand au choix de l’une ou l’autre solution.

Responsive :

Les + :

– Facilité et rapidité à mettre en oeuvre

– Maintenance facile, puisque un seul site

Les  – :

– Contenus webs pas forcément adaptés pour le mobile

– Poids des éléments visuels

– Pas de possibilité d’intégrer des fonctionnalités spécifiques

 

Site mobile :

Les + :

– Site totalement différent du site web, donc possibilité de créer des pages, des contenus, des fonctionnalités spécifiques

– Interconnexion possible avec certaines fonctionnalités natives du téléphone

Les – :

– Maintenance séparée, risque de non concordance des contenus avec ceux du site web

– Coût plus élevé que le responsive et temps de développement plus long

Pour moi, si vous n’avez pas encore fait de version mobile de votre site, commencez par le responsive qui vous aidera à vous familiariser avec les problématiques du mobile. En revanche, si vous avez déjà pris goût au responsive et appris de ses défauts, alors vous pouvez commencer à envisager une version mobile de votre site.

Et vous, quel est votre avis ?

44 commentaires

  1. Hello Capitaine,

    Merci pour cet article.
    Pour ma part, j’utilise les techniques suivantes :
    – RESS (c’est un mixte entre le RWD et les techniques côté serveur), cela permet de fournir des images légères pour les mobiles par exemple
    – Modernizr : en fonction des capacités du navigateur (touch, géolocalisation), j’active certaines fonctionnalités
    – Yepnop avec Modernizr : en fonction de la taille de l’écran, je charge ou non certains scripts ou feuilles de style afin d’obtenir un site léger

    ++
    @prestarocket

      1. Je vais essayer…

        Le principale défaut du responsive web design (RWD) est le poids du site.
        En effet, le même contenu, caché ou non (textes, images), est proposé aux internautes.
        Pour palier à ce problème et proposer des images à la bonne taille par exemple, j’utilise la même technique côté serveur que celle utilisée par les sites mobile (basé sur le user agent).
        J’ai donc un mixte entre la technique du Responsive Web Design et le site mobile.

        Aussi, avec le RWD, tout mes scripts et feuilles de style sont chargées même si il ne sont pas utilisés. Pour ne charger uniquement les scripts et feuilles de style nécessaires, j’utilise Modernizr.
        Modernizr est un script qui permet de faire du chargement conditionnel côté client, exemple : si le navigateur permet de faire de la géolocalisation, alors je charge un script qui me permettra d’utiliser la géolocalisation du terminal.

        Pour les défauts des sites mobile, j’ajouterais :
        – Les sites mobiles utilisent des techniques côté serveur (basées sur le user agent) pour détecter le système d’exploitation, mais elles ne sont pas fiables à 100% (cf cet excellent article : http://letrainde13h37.fr/28/les-user-agents-cest-le-mal/)
        – attention au SEO : cela demande une charge de travail plus importante pour s’assurer que le site mobile ne génère pas de duplicate content
        – partage social : il m’est souvent arrivé de suivre des liens sur twitter et d’arriver sur une version mobile d’un site

        Le RWD est sans doute la technique la plus simple pour débuter sur mobile et tablette.
        J’espère avoir été assez clair..
        ++
        @prestarocket

  2. Hello,

    Personnellement je trouve le RWD plus coûteux que le site mobile, l’approche est très différente puisqu’il y aura généralement les fonctionnalités plus importantes, moins de pages. Il est possible de mettre en place un site mobile très rapidement avec jquery mobile par exemple.

    Un site en vrai RWD avec toutes les dimensions en em et calibré pour toutes les résolutions multipliera bien le temps d’intégration par 3 ou 4, le coût sera relativement élevé. Aujourd’hui beaucoup utilisent des templates de cms responsive pensant que c’est simple à mettre en place, si on met le nez dedans 2 minutes, on se rend compte tout de suite que certaines résos ne sont pas prises en compte, que sur la tablette ça fonctionne en portrait mais pas en paysage etc…
    Je suis adepte du RWD, d’ailleurs les clients ne demandent plus que ça aujourd’hui, mais je trouve que ce n’est pas simple à mettre en place, il faut bien sûr avoir une approche mobile first pour ne pas se retrouver avec des contenus inadaptés.

  3. Hello,

    Prenons le cas de Prestashop par exemple, on trouve sur le marché des templates responsives et il existe de plus une interface/template dédiée aux mobiles.

    A mon sens je pense que le meilleurs compromis pour des PME, c’est :
    Ordinateurs / IPAD : interface web standard
    Smartphones : interface mobile

    Pour moi ce qui est important c’est surtout l’interface mobile, les tablettes peuvent tout à fait afficher un site classique non-optimisé.

    Mais après c’est une question de choix, il faut voir aussi le client final si c’est : un gros groupe ou une PME, voir un indépendant… les exigences peuvent être vue à la baisse.

    Personnellement je préfère atteindre les 80% de rentabilité avec 20% d’efforts que les 100% de rentabilité avec 100% d’efforts.

    1. Assez d’accord avec toi. Ensuite, il est aussi possible d’optimiser son site classique pour iPad, en agrandissant les zones de clics, par exemple, et en supprimant les effets de rollover ou en les palliants. Ca peut peut-être coûter moins cher que d’investir dans une version iPad.

  4. Bonjour,

    sujet très pertinent et pas sans conséquence pour un site ecommerce.

    Je me permets de témoigner car chez 42stores, nous venons de supprimer tous nos templates classiques (avec template dédié smartphone), et les nous avons remplacé par des templates Responsives.

    Et si au premier abord cela nous semblait assez simple, il y a beaucoup de questions à traiter pour transformer un thème en responsive.

    Et finalement, ce qui devait être rapide, a été un très gros boulot !
    Donc avant de se lancer dans la transfo d’un template en responsive, il faut bien réfléchir.

    Par exemple : rendre les slider flexibles, comment maintenir des infos importantes qui sont dans une colonne qui disparait, transformer un menu en liste etc..

    Du coup, face à l’ampleur de la tache, tant que l’on y était, on en a profité pour passer les CSS en LESS.

    J’ai monté rapidos un site d’exemple sur le template de base de 42stores, sans aucune personnalisation :

    à voir ici : http://exemplegolf.42stores.com

    Et à l’usage, je préfère largement le Responsive par rapport au site mobile. Notamment pour une plateforme, on y gagne énormément en maintenance..

      1. Bonjour Capitaine,

        le principe du LESS c’est de mettre de l’intelligence dans les CSS.

        Ainsi, on crée des fichiers LESS qui sont ensuite compilés en CSS
        (optimisés et compressés en une seule feuille de style).

        En LESS, on peut utiliser des variables, des fonctions (pratique pour les radius ou les shadows) et du code CSS imbriqué pour une meilleure lecture et maintenance du CSS).

        Ca donne ça :
        par exemple on définit une variable pour une couleur : @text-color:#555555;
        et on peut ainsi la récupéré n’importe ou dans le code :
        body {
        color: @text-color;
        }
        L’intéret, c’est que toutes les propriétés qui utilisent cette variable seront changées simplement en changeant la valeur de la variable. Plus besoin de chercher dans les css ou cette couleur est utilisée.

        Pareil pour les fonctions, par exemple pour les ombres sur le texte on créer une fonction et on lui passe des paramètres :

        .textshadow(@width:0px, @height:0px, @blur:0px, @color:#000000){
        text-shadow: @width @height @blur @color;
        }

        Bref, on apporte un peu de logique logiciel dans les CSS…

      2. Le LESS est un peu plus technique, mais hyper puissant.
        Sur la plateforme, on laisse le choix :
        – interface utilisateur qui modifie les css sans rien y connaitre
        – accès aux fichiers LESS
        – ou surcharge classique en CSS

        comme ça chacun en fonction de son niveau y trouve son compte.

        Mais le sujet dévie, pour en revenir au responsive, cela ne dépend pas du less. On fait du responsive en CSS classiques.

  5. Un point sur le SEO : il me semble qu’il y a un impact de simplification. Avec le RWD, un seul site, donc pas de duplicate content et un seul investissement pour le référencement.

    Néanmoins, il y a quand même une question majeure qui est de l’usage. L’arbitrage devra se faire avant tout sur ce point à mon sens.
    Le RWD n’est adapté que si l’usage du site mobile est sensiblement le même que le site principal. L’objectif, par exemple, d’un retailer serait sur mobile d’indiquer le magasin le plus proche (geolocalisation, presentation du magasin, des moyens de paiement, des services offerts), tandis qu’il serait de faire du e-commerce sur le site principal

  6. Je viens de remplacer mon application web mobile (pour iphone ipad androphone /tablette ) par une version mobile de mon site sans flash et sans menus déroulants…au final l’inverse des recommandations mais les stats sont là, le temps sur le site (version mobile) augmente de façon importante car une grande partie des utilisateurs de smartphone et encore plus de tablettes souhaitent retrouver la même ergonomie typée « site classique » sur leurs smartphone que sur leurs PC ou MAC …quitte à ZOOMER!!!

  7. Article dans l’air du temps !

    Nous avons fait pour notre part le choix du développement d’un site mobile dédié et nous nous en félicitons :
    – le responsive design, d’après tous ce que nous avons pu entendre ou lire est finalement très complexe à mettre en place, et pas si facile que çà à maintenir
    – à contrario un site mobile est d’une simplicité étonnante à développer
    – nous avons pluggé le site mobile sur la même base de données que le site web : pas de souci de données différentes entre les 2
    – un site mobile c’est plus qu’une adaptation à l’écran : ce sont des nouveaux services dédiés, des éléments en plus ou en moins (adaptation des moyens de paiement par exemple). Bref le design ne fait pas tout, la mobilité est plus complexe comme approche qu’une simple adaptation de design

    Pour les tablettes, nous notons un taux de transformation identique à celui du site Web. Nous nous posons donc encore la question d’un site dédié aux tablettes… A voir en fonction des premiers retour du site mobile.

  8. Bonjour,
    Un peu de lecture (en anglais, sorry) http://experiencedelivers.adobe.com/cemblog/en/experiencedelivers/2012/11/pragmatic_responsivedesign.html

    Egalement, pour ceux qui ne connaissent pas, je vous invite à découvrir Adobe Scene7 pour adresser les probléme d’optimisation et de synchronisation de contenu.
    En action chez Burberry.com entre autre : surfer le site depuis PC, iPad, iPhone et autres Android pour voir comment cela se comporte.

    N’hésitez pas à prendre contact, Michael Chaize notamment se fera un plaisir de participer à la discussion.

    1. Bonjour Benjamin,
      curieux, j’ai essayé avec le site burberry.com depuis Chrome et FFox, mais ça ne semble pas fonctionner. L’affichage restitué par le site ne correspond pas à celui constaté sur les devices….?

  9. Le gros problème des sites mobiles c’est qu’en général il y a une grosse perte de fonctionnalités. On suppose que si on est sur mobile c’est pour faire du lèche vitrine, éventuellement passer une commande mais pas plus.

    Je ne compte plus le nombre de sites où par exemple je reçois un email m’invitant à effectuer une opération via clic sur le lien. Je clique sur le lien depuis mon mobile et pouf on me renvoie vers la version mobile du site qui ne dispose pas des fonctions adaptées.

    Ex récent sur un site de covoiturage (blablacar) : email d’info « une personne vous pose une question sur votre offre de covoiturage, cliquez ici pour lui répondre ». Pas de fonctionnalité prévue pour répondre sur la version mobile. Fail. Il faut reswitcher (quand c’est possible) sur la version normale pour utiliser les fonctionnalités.

    Ex fréquents de fonctionnalités vitales manquantes :
    – pas de tri de produits
    – pas de filtres de critères
    – affichage des images en riquiqui point barre (pas de zoom possible)
    – pas de gestion de compte client
    – …

    La grosse difficulté est bien en effet de définir « mobile ». On n’a pas encore de détéction de débit super fiable mais un sanmsung note en wifi c’est pas vraiment comparable à un vieil iphone en itinérance 3G chez Free/Orange… pourtant on a tendance à les regrouper.

    Bref je vote « site bien pensé » avant tout. Responsive mais croisé avec des tests pour fournir des contenus optimisés, par exemple la taille/compression des images par ex en fonction des résolutions d’écran pour les mobiles (user agent, ip, …). Abandonner le flash dans tous les cas, ça résoud l’un des pb récurrents du besoin de site mobile.

    … bref il y a encore beaucoup à faire 🙂

  10. Bonjour,

    pour ma part je suis entrain de (re)faire mon site en responsive je m’amuse comme un petit fou mais effectivement c’est du taf a mettre en place.

    Pour Prestashop j’utilise également un thème neutre en responsive pour ma base puis je le charte pour mon client. et google aime ça on dirait car sans optimiser de nouveau les sites ceux-ci ont pris un meilleur positionnement.
    Donc pour moi y a pas photo je continue a explorer le responsive afin de le proposer a tous mes clients.

    même en site vitrine maintenant le responsive vaut le coup de le mettre en place car la gestion des CSS plus la compression permette d’alleger la charge cotés client

  11. Pour ma part je penses qu’il faut voir au cas par cas.
    Responsive si le but est de créer une version compatible mais plutôt simplifiée.
    Version mobile s’il y a une vrai part de marché et des fonctionnalités spécifiques à développer (dans le cas de la version mobile le switch automatique ne me paraît jamais judicieux, il est préférable de laisser le choix à l’utilisateur).
    Enfin, la création d’une application dédiée peut être parfois la solution idéale si on veut pouvoir utiliser les fonctionnalités spécifiques aux mobiles.

  12. Totalement d’accord, le plus ergonomique reste encore d’utiliser la version mobile de Prestashop pour les smartphones et de rester sur un template responsive pour les écrans de bureau et les tablettes. Après faut toujours se méfier des popups (lightbox etc) et des mouseover effects à repenser pour tout ce qui est tactile.

  13. Etant actuellement en pleine migration de mon site, je me pose évidemment cette question.
    J’ai pratiqué le responsive design pour voir ce que cela donnait, et je pense que je vais finalement opter pour un site mobile à part entière.
    Comme tu le dis si bien, j’ai appris les défauts du responsive !

  14. « Maintenance séparée, risque de non concordance des contenus avec ceux du site web » : pas forcément, la solution AppYourself permet justement de gérer son site web et son site web mobile depuis une même interface pour éviter la multiplication des outils de gestion de site/application. Avec une gestion centralisée des contenus cela permet également de publier un même contenu sur plusieurs canaux différents !

  15. Pour des sites Corporate, le responsive s’impose comme une évidence.

    Par contre si on est une web app, ou même si on a des fonctionnalités avancés d’interaction comme des formulaires complexes, je pense que la version alternative est à privilégier. C’est un véritable casse tête sinon de faire une version responsive. Finalement les coûts peuvent être plus faibles à développer une version mobile alternative car c’est très simple d’intégrer des maquettes mobiles (beaucoup plus simple que d’avoir un site responsive qui soit clean en version mobile)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.