Du responsive design…. par professeur Foldingue…

Actuellement tous les sites internet cherchent à être multi-supports… tablettes, téléphone etc… c’est une bonne chose on essaie de faciliter la vie à l’utilisateur. Le responsive design c’est quand même assez récent et je veux encore rappeler certaines choses à ce sujet.


Ma vision du moment
A mon sens le responsive design est actuellement la méthode la plus simple et rapide pour mettre en oeuvre un site ou boutique e-commerce qui puisse tourner sur tous les supports. En  terme de maintenance le tout est centralisé… on trouve des templates qui sont déjà responsives… c’est le pied. Mais je constate que le responsive design c’est pas si simple… comme on pourrait le croire… y’a énormément de travail à réaliser pour viser une compatibilité quasi parfaite.

Le cas d’un client
Sur la boutique Prestashop d’un client j’ai fait des tests sur son template qui est déjà nativement « responsive »… en plein écran pas de soucis ça se présente bien… Au fur et à mesure que je redimensionne ma fenêtre les éléments se chevauchent, parfois se positionnent mal… ou alors c’est mal agencé (genre un bloc situé à un endroit pas logique). On constate sur mobile que les marges sont pas au top… (textes débordants, mal centrés) l’interface n’est pas assez ergonomique même en responsive…

La boutique reste tout à fait utilisable, mais on sent bien que c’est « pour la forme »… quand on rentre dans le détail on le voit bien des éléments sont coupés… le contenu mériterait d’être mieux agencé… Du coup le client se trouve avec une boutique optimisée pour multi-support… c’est utilisable, mais  quand même perfectible.

L’intégration, un vrai métier…
J’ai regardé les règles CSS des fichiers de sa boutique et on retrouve une grosse quantité de supports à gérer… on trouve dans le cas présent environ 15 règles de tailles pour différents supports. Il faudrait donc tester la boutique 15 fois… multipliez cela par le nombre de pages de votre boutique à tester… + encore le multilingue, le chiffre devrait vous faire peur… Ah et bien sûr multipliez cela par le nombre de navigateurs + leurs différentes versions (vous êtes mort la gueule ouverte ? bon vous avez bien compris le message alors).

Il faut noter aussi qu’il faut bien connaître les navigateurs… bon personnellement je connais la base… mais je suis pas un expert des failles de IE7 et de la différenciation avec IE8… y’a trop de cas différents d’exceptions à gérer ce qui explique que le niveau de difficulté soit aussi élevé (il faut un très large panel de connaissances).

Parlons de Steg Computer
J’aime bien prendre cette entreprise suisse pour exemple… je vous invite à consulter leur boutique online… Ce ne sont pas des débutants dans le domaine informatique et ils brassent un max de cash (oui oui…) pourtant leur shop n’est pas responsive et il faut noter qu’ils l’ont fait y’a pas si longtemps (notez aussi qu’il n’y a pas d’interface mobile).


Leur boutique est pourtant très bien… on a même des trucs ultra-pratique comme le stock par magasin… mais si on veut pouvoir utiliser un jour leur site sur mobile… faudra certainement proposer une interface différente, l’interface tel quel ne sera pas pratique pour ce type de support (parfois le responsive design présente aussi ses limites).


Faire du responsive design c’est obligatoire ?
J’ai vraiment une théorie de vieux grigou… mais soyons clair… réaliser tous les tests… pour avoir une bonne compatibilité sur toutes les tailles… ça va coûter cher à mon sens (même si le thème est déjà responsive). Si on fait du responsive, je pense que ça doit être irréprochable, sinon autant ne pas en faire et proposer directement le site comme il s’affiche par défaut. En responsive design, le pire c’est que l’on ne peut pas switcher vers une interface « site classique », comme avec la version mobile… du coup l’utilisateur est limité et n’a aucune alternative possible.

Bilan

Il y’a énormément de grosses boutiques ou sites onlines qui font un gros chiffres d’affaire sans offrir d’interface multi-support. A mon avis il est plus sage de proposer un site « plein-écran » qui soit vraiment au top avec une présentation irréprochable, ça convertira toujours mieux en commande que ces interfaces responsives à moitié « bancales ».

Oui je sais c’est la mode… oui le mobile est partout… oui les tablettes dominent le marché… mais ma constatation est aussi que les utilisateurs ne sont pas forcément fan de ces interfaces, car pour eux leur point de repère c’est toujours le site de base. Je pense qu’il y a de quoi méditer là-dessus… parce que les interfaces et résolutions vont continuer de changer… faudra aussi suivre le mouvement si vous proposez la méthode responsive.

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (Soyez le premier à noter ce billet)
Loading...

8 commentaires sur “Du responsive design…. par professeur Foldingue…”

    1. A noter aussi que par exemple sous Firefox on peut faire un « CTRL+MAJ+M » qui donne accès à une liste déroulante des résolutions.

      Pour être honnête je suis assez sceptique concernant ce type de site, notamment au niveau de la capacité d’émuler correctement l’affichage.

      Il y’a passablement de sites qui proposent ce type de services… mais pour le moment je n’ai pas vu un vrai leader se dégager.

      Merci en tout cas pour le lien.

  1. « CTRL+MAJ+M » fonctionne bien pour tester sur firefox. Ce qu’on trouve dans les articles sur le responsive c’est plus de questionnement que de certitudes .
    C’est bien normal pour une technologie émergente.Ce que je constate dans les statistiques de ma boutique c’est qu’en moyenne 20 % des visiteurs sont sur smartphone et tablettes, ça va continuer à progresser en proportion sans doute.Un peu tôt pour avoir un retour en tous cas.

    1. La tendance du mobile et de la tablette sont confirmé… mais les standards sont encore un peu absents à mon sens… De mon côté j’imagine déjà le futur avec des support mobiles qui permettraient une meilleure résolution, du coup plus besoin d’intégrer d’interface sur mesure (oui oui je rêve un peu).

      Mais bon sur tablettes la plupart des sites restent accessibles, c’est surtout pour le mobile que la navigation est plus compliquée.

    1. Bonjour,

      Je pense que ça peut-être intéressant si on a une boutique non-responsive et qu’on ne veut pas installer par exemple un thème mobile.

      L’inconvénient c’est qu’on retrouve moins l’ambiance général du thème du shop avec une interface plus « neutre », contrairement au responsive qui conserve l’aspect graphique et aussi les adaptations spécifiques de l’interface.

      A voir aussi au niveau du prix… pour le moment je pense que le responsive reste un bon deal, surtout qu’on trouve passablement de thèmes déjà conçus « multi-plateformes ».

  2. bonjour

    superbe article comme d’habitude!!!

    firefox à effectivement une option en quelque cliques, c’est pas mal mais moins design que le site responsinator

    on peut même entrer l’url local est ça marche!

    j’ai un petit soucis avec la taille 240px je n’arrive pas à adapter mon thème il refuse…
    medial (max-width:240px) {mes règles}
    je vois pas ce que j’oublie…

    les autres formats marche impeccable sauf landscape je comprends pas comment l’activer…
    @media all and (max-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {}

    1. Hello,

      J’ai pas encore vraiment poussé à fond toutes les subtilités techniques du responsive design, il faut vraiment passer par des outils qui facilitent la présentation (et la gestion des bugs), comme par exemple avec Twitter Bootstrap.

      Pour les outils de debug je vois assez difficilement un outil faire ça bien… car il s’agit de système d’émulation… c’est pas parfait non plus… du coup sur le support original, il peut y avoir des différences.

Laisser un commentaire

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