Adaptez votre site sur tous les périphériques ou les enjeux du responsive design

publié le 24 janvier 2012

dans la catégorie Business, Digital

On ne « consomme » plus internet comme avant depuis l’utilisation massive du smartphone comme relai de communication mobile. Que l’on soit au bureau, chez soi, dans la rue ou dans le train… les consommateurs vont sur internet. Et quand ils souhaitent aller sur leurs sites préférés, ils doivent se munir d’une loupe ou de patience pour lire le contenu de la page.

D’où le boom incroyable des applications mobiles pour lire un contenu adapté. Mais pour nous l’applicatif mobile est une rupture dans la chaine de consommation web. Elle dépend d’un fabriquant, elle n’est donc pas universelle. De plus les principes de navigation sont souvent assez différents, bref c’est une perte de repère sauf évidemment cas exceptionnel où l’on souhaite créer une application spécifique… Mais ce n’est pas le sujet !

Les agences, annonceurs, designers et développeurs se sont vite penchés sur le sujet (depuis deux ans) en créant des sites alternatifs.

Nous allons vous expliquer pourquoi et comment le Responsive Design est LA solution.

Tout d’abord deux questions se posent:

Pourquoi adapter son contenu sur tous les supports ?
Comment adapter son site sur tous les écrans ?

Pourquoi adapter son site sur tous les supports ?

Cette question peut paraitre incongrue ou dénué de sens, mais dans la pratique on nous pose très réguliérement cette question.

Quelques chiffres

Les statistiques de navigation depuis un périphérique mobile (téléphone, tablette) font apparaitre un trafic oscillant entre 2% et 15% du trafic total d’un site internet.
59% des utilisateurs français se connectent tous les jours au web par leurs mobiles (Ipsos).
Selon une étude Ipsos, le taux de pénétration d’internet mobile en France atteint les 27%. Avec 35% de parts de marché pour Apple, suivie d’Android avec 24% et de Blackberry avec 11% de parts
Comscore qui révèle qu’en avril 2011, 689 annonceurs US ont utilisés le mobile pour des campagnes publicitaires d’affichage pour atteindre les consommateurs, une hausse de 128 % en deux ans.
Le m-commerce, ou commerce sur téléphone mobile, devrait dépasser les 13 milliards d’euros de chiffre d’affaires en France en 2015, contre 500 millions d’euros en 2010, selon une étude publiée par le cabinet conseil Xerfi. Soit une croissance annuelle de 90% par an.

Les usages changent

Dans sa dernière keynote (snif), Steve Jobs annonçait que l’ensemble de ses terminaux iOS (iPhone et iPad) devenait autonome vis à vis du PC (Personnal Computer). En effet, avec la sortie d’iOS 5 et avec Androïd ces appareils mobiles n’ont plus besoin d’un ordinateur pour se sauvegarder ou se mettre à jour etc. Cette petite innovation peut paraitre insignifiante mais elle bouleverse radicalement les usages des internautes. Vous pouvez maintenant acheter une tablette qui fera office d’ordinateur familial. Et c’est bien cette révolution qui va bouleverser les usages des internautes.

« Les appareils iOS déclarent l’indépendance.
Avec iOS 5, plus besoin d’ordinateur pour posséder un iPad, iPhone ou iPod touch. Activez et configurez votre appareil sans fil, dès la sortie de l’emballage. Téléchargez les mises à jour logicielles iOS directement sur votre appareil. Faites-en davantage avec vos apps : retouchez vos photos ou créez de nouveaux dossiers pour vos e-mails, sur votre appareil, sans qu’il soit besoin d’un Mac ou d’un PC. Enfin, sauvegardez et restaurez votre appareil automatiquement à l’aide d’iCloud. (Source Apple.com) »

Comment faire ?

Nous testons depuis des mois la possibilité de vous proposer de créer un site web qui s’adapte sur tous les écrans (version téléphone ou tablette de votre site), cette solution c’est le responsive design.

Le responsive design c’est donc la possibilité d’adapter automatiquement votre contenu à votre équipement.

Quelques bonnes pratiques à suivre :

L’utilisation de cette technologie doit être réalisée dès la phase de conception de votre site internet. Un zoning propre à chacune des interfaces doit être modélisé.
Analysez votre contenu et adaptez celui que vous allez présenter en priorité en fonction de vos différentes cibles (mobile, tablette, ordinateur individuel)
Une attention toute particulière doit être faite sur les temps de chargement. N’oubliez jamais que la vitesse de chargement varie en fonction de la connexion (Edge / 3G / Wifi).
Adaptez l’ergonomie de votre site pour qu’elle soit optimale sur l’ensemble des supports.
Pensez au tactile

Quelques exemples … à tester sur votre poste de travail, une tablette et un téléphone mobile

http://foodsense.is/

www.worldskillslondon2011.com

Version poste de travail

Version Ipad

Version Iphone

En conclusion …

… et vous l’aurez bien compris, plus personne ne peut passer à côté de l’adaptation de son site en fonction des différents équipements.

En fonction de la typologie de votre site internet et que se soit un site institutionnel ou un site marchand, vous ne pourrez pas échapper à cette adaptation. Les enjeux sont les mêmes à savoir le maintien de l’audience (temps de visite), le nombre de pages vues et le taux de transformation (nombre de leads par visiteur, nombre de ventes par visiteur, nombre de téléchargement de livre blancs par visiteur etc.). Si vous souhaitez maintenir vos grands agrégats au même niveau en fonction des différents équipements, vous serez nécessairement obligés d’adapter votre site.

Quelques statistiques complémentaires