Vendredi 23 juin 2017
NASDAQ : 6236.6851 2.7324   nasdaq0.04 %
RECHERCHE
OK
 
NEWSLETTER
newsletter
Abonnez-vous gratuitement
à notre newsletter
hebdomadaire - Cliquez ICI
Indexel
  • DOSSIERS
  • PRATIQUE
pub Publicité
 

SUR LE TERRAIN

Le responsive design : une approche multi-device (presque) universelle

Imprimer Envoyer à un ami Contacter la rédaction
Par Thierry Lévy-Abégnoli le 10/04/2013 - indexel.net
 
Responsive-design

Pour répondre à la variété croissante des terminaux, le responsive design adapte intelligemment l’interface web à la résolution de l'écran. Une alternative aux apps et aux interfaces web pour mobiles.

 

Les appareils mobiles sont de plus en plus nombreux et variés, au point que l'approche traditionnelle, qui consiste à détecter le type d'équipement connecté et à lui envoyer des pages spécifiques, devient caduque. Le responsive design est une méthode de construction de l'interface utilisateur qui apporte une nouvelle réponse à cette problématique. "Le responsive design permet, pour une même page web, d'avoir un contenu qui s'adapte dynamiquement en fonction du nombre de pixels de l'écran", explique Nicolas Grué, consultant senior e-business et Web 2.0 chez GFI Informatique.

Une interface web à géométrie variable

Chaque objet est ainsi redimensionné ou ré-agencé avec une certaine intelligence. Tous les types d'objets sont potentiellement concernés : colonnes, boutons, champs de saisie ou menus. Par exemple, sur un mobile, un encart avec des news sera affiché en colonne plutôt qu'en ligne. De plus, certains éléments seront masqués. "La mise en œuvre de cette idée a été grandement facilitée depuis deux ans par les feuilles de style CSS 3, qui apportent un certain niveau de paramétrage pris en compte de façon dynamique selon la taille de l'écran" précise Cédric Belmont, responsable avant-vente et consultant NTIC chez Hardis.

Des avantages en termes de coût et de cohérence

Nicolas GruéLe principal intérêt, c'est d'avoir un unique site web qui centralise tous les contenus. "La gestion du site web est alors rationnalisée grâce à la réduction des coûts de développement et surtout de maintenance. En particulier, une seule équipe gèrera une version unique du contenu", argumente Nicolas Grué (photo). En corolaire : pour une page donnée, il n'y a plus qu'une URL, ce qui est un avantage pour le référencement Google ou la maintenance d'un portail interne. "Ce n'est pas anodin car les sites dédiés aux mobiles tombent parfois en désuétude, faute d'avoir été maintenus et de bénéficier de redirections d'URL à jour", constate Nicolas Grué.

Des contraintes liées au réseau et aux navigateurs

Le principal défaut du responsive design, c'est le poids des données envoyées vers le navigateur, par rapport à des pages conçues pour les mobiles. Car la totalité de chaque page est chargée par le terminal, même si certains objets sont finalement masqués. "La problématique du débit n'est donc pas traitée mais avec la 3G et la 4G, c'est de moins en moins important", estime François Fossati, directeur artistique de l'agence Indexel. Autre contrainte, le navigateur internet doit être récent, ce qui est le cas sur les smartphones modernes. Pour les vieux navigateurs, il faut être vigilant sur les règles CSS utilisées. On peut aussi mixer détection de device et responsive design. "Un navigateur IE6 ou IE7 sera alors identifié par le serveur, qui lui délivrera une CSS spécifique. Mais cette méthode est coûteuse et sort de l'esprit du responsive design", prévient Nicolas Grué.

Certains sites justifient une approche hybride

Cédric Belmont Certains sites peuvent toutefois justifier une entorse à cet esprit. "C'est le cas pour un site dont le frontal est riche et complexe, avec un périmètre restreint pour les mobiles", explique Cédric Belmont (photo). Il est alors plus simple de développer une vue spécifique aux mobiles. On peut aussi mettre en œuvre une approche hybride qui consiste à opter pour le responsive design, tout en détectant le type de terminal, afin de ne lui envoyer que les contenus affichés. Mais là encore, on ajoute de la complexité. De même, si la prise en compte du mode tactile doit être très forte, il vaut mieux développer une application native. À moins d'opter pour une autre solution hybride consistant à encapsuler le site en responsive design, dans une application native, grâce à une technologie comme PhoneGap.

Développement et migration : un effort accru sur l'ergonomie

Il n'est généralement pas simple de faire évoluer une application ou un site existant vers le responsive design. "L'effort est raisonnable s'il est aisé d'identifier les différentes zones d'écrans et si leur pertinence en mode mobile est facile à arbitrer", estime Nicolas Grué. Le volet développement peut passer par le codage direct en CSS 3 mais il est plus simple d'utiliser des librairies comme JQuery. Pour un site réalisé avec un CMS, l'effort sera réduit par l'adoption d'un template ou d'un thème en responsive design. Enfin, dans le cas d'un progiciel (CRM, ERP...), il faudra attendre que l'éditeur réalise lui-même l'adaptation.

François FossatiLa problématique technique s'accompagne en outre de la mise en œuvre de nouvelles règles d'ergonomie. Ainsi, en dessous d'une certaine taille d'écran, on grossira les boutons et on changera le type de menus. Une réflexion sur le contenu sera également nécessaire. "Les utilisateurs de mobiles cherchent souvent le plan d'accès, qu'il faudra donc rendre plus lisible et plus accessible", donne en exemple François Fossati (photo). "Plus que jamais, les problématiques d'ergonomie et d'accessibilité doivent être au centre de toute création responsive" conclut le directeur artistique.

LIRE AUSSI
 
Partager :
LIRE AUSSI
 
pub Publicité

CloudStack by IkoulaCloudStack by Ikoula

Cloud Computing : Atouts et freins, acteurs du marché, conseils et témoignages