Le rôle du « responsive design » dans le

LIVRE BLANC
Le rôle du « responsive
design » dans le
développement de votre
site e-commerce
Conseils pratiques et astuces techniques
pour accélérer votre transition vers le
commerce multicanal
INTRODUCTION
La mobilité est devenue incontournable dans notre société actuelle. L’explosion des telephones
intelligents et des tablettes numériques signifie que désormais, vos clients, actuels ou potentiels, se
connectent à votre site e-commerce par leur téléphones mobiles, leur tablettes en plus de leurs
ordinateurs fixes ou encore portables.
Est-ce que votre e-boutique fait face à cette réalité? Devriez-vous revoir votre stratégie e-commerce ?
Bien souvent, envisager le « Responsive Design » dans un plan de développement de site web
permet de résoudre bien des casse-têtes. Par cette alternative, vous n’avez plus à créer une version
web dédié aux appareils mobiles en plus d’une version standard.
Avant toute chose, vous devez déterminer si le « Responsive Design » convient à votre stratégie de
site e-commerce. Est-ce qu’il répond aux habitudes d’achat et de recherche en ligne de vos clients?
TABLE DES MATIÈRES

Rendre votre site web compatible avec les appareils mobiles grâce au « Responsive Design »

Le « Responsive Design » : la définition

5 raisons d’inclure le « Responsive Design » rapidement dans votre stratégie

Partir de votre stratégie e-commerce actuelle et allez de l’avant

Il se peut que le « Responsive Design » ne soit pas, dans l’immédiat, le choix le plus judicieux

Conseils techniques pour un « Responsive Design » réussi

Prêt ? Commencez par trouver le bon partenaire

Résumé

Glossaire
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
Page 1
Rendre votre site web compatible avec les
appareils mobiles grâce au « Responsive Design »
Accros du mobile ou web-consommateurs, quel que soit le nom que vous leurs donnez, les
consommateurs d’aujourd’hui convergent de plus en plus vers les technologies mobiles, utilisant entre
autres les téléphones intelligents ou les tablettes numériques pour leurs recherches et leurs achats.
Voici quelques statistiques :

En 2012, 72.8 millions d’individus magasineront sur leurs appareils mobiles, 37.5 millions
d’entre eux effectueront des achats1

68.6 millions d’individus magasineront sur leurs téléphones intelligents en 2012, 36.4 millions
d’entre eux effectueront des achats

Il y aura 54.8 millions d’utilisateurs de tablettes numériques en 2012 soit 62.8% de plus
qu’en 20112

Plus d’un tiers de ces utilisateurs « mobiles » ont effectué un achat ou plus durant les six
derniers mois3

Un quart des utilisateurs de tablettes numériques a effectué six achats ou plus durant les six
derniers mois3

Ceux qui se connectent via une tablette passent 50% plus de temps par achat que ceux qui
utilisent les téléphones intelligents4

Les ventes de tablettes dépasseront celles des ordinateurs portables d’ici 20155

D’ici 2016, trois consommateurs sur cinq possèderont un téléphone intelligent6
Cela représente un important nombre de clients potentiel, prêt à utiliser
d’être
leurs mobiles pour effectuer un achat. Pourtant, en 2012, seulement 9%
Besoin
des sites sont compatibles avec les appareils mobiles, selon Mongoose
convaincus ?
Metrics, une firme d’analyses et de suivi du marché.
•
Les consommateurs sont
Votre site internet est-il prêt à faire face à cette demande en pleine
51% plus enclins à acheter
croissance ? Passez-vous à côté d’un marché en plein essor ?
auprès
S’il est temps de revoir votre stratégie e-commerce pour répondre à
l’utilisation des appareils mobiles, alors l’intégration du « Responsive
d’un
revendeur
disposant d’un site qui supporte
les mobiles ;
Design » à votre site web peut constituer une bonne solution. Cette
• 57% des consommateurs ne
alternative évite la création de deux versions de votre site e-commerce;
recommanderont
soit une version standard et une version web adaptée aux appareils
business dont le site “mobiles”
mobiles.
est médiocrement conçu ;
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
pas
Page 2
un
Le « Responsive Design » : la définition
Le « Responsive Design » est un outil de conception graphique. Grâce à cette technique, le design et
le développement d’un site web réagissent au comportement des clients et à leur appareils mobiles,
et s’adaptent en fonction de la taille de l’écran, de la plateforme et de l’orientation.
Bien qu’il ne s’agisse pas d’une nouvelle approche de design web, cette technique résout un grand
nombre de défis posés par la multitude d’appareils mobiles disponibles sur le marché. Le design web
s’adapte en s’agrandissant, se rapetissant ou en supprimant du contenu en fonction de la taille de
l’écran; qu’il s’agisse d’un téléphone intelligent, d’une tablette ou d’un ordinateur de bureau. Si, par
exemple, votre utilisateur choisit de consulter votre site via un téléphone intelligent, tout le contenu
du site sera restructuré de façon à tenir dans l’espace disponible.
Le « Responsive Design » est composé d’un savant mélange de grilles flexibles, de schémas, d’images
et d’une utilisation intelligente des (CSS) Cascading Style Sheets : feuilles de styles en cascades.
Quand l’utilisateur bascule d’un ordinateur portable à une tablette, votre site e-commerce s’adapte
automatiquement aux nouvelles résolutions, taille d’image et scripts. En d’autres termes, votre site
possède la technologie permettant de répondre automatiquement aux préférences de chacun des
utilisateurs.
Votre site web détecte la taille d’écran du visiteur et son orientation et y ajuste la mise en page. Ainsi,
vous n’avez plus besoin d’un design ou d’un développement spécifique pour chaque nouvel appareil
qui arrive sur le marché.7 Vous concevez votre site une seule fois en le formatant d’avance pour les
différents appareils disponibles. Par conséquent, vous n’avez plus besoin de créer et de maintenir à
jour un grand nombre de solutions adaptées pour chaque catégorie d’appareils. Vous gagnez ainsi du
temps et vous réduisez les coûts de développement pour ajouter une nouvelle application mobile.
Consultez le glossaire ci-joint pour la définition du vocabulaire relatif au Responsive Design)
5 raisons d’inclure le « Responsive Design »
rapidement dans votre stratégie.
Les habitudes d’achat ont bien changées. L’achat à partir d’un appareil mobile n’est plus perçu
comme étant risqué. Au contraire, 64% des propriétaires de téléphones intelligents utilisent
maintenant leurs appareils pour faire leurs achats.8 En 2012, les achats mondiaux via les appareils
mobiles dépasseront les 171.5 milliards, soit 62% plus qu’en 2011.9 Ajouter le « Responsive Design »
à votre site web vous permettra de toucher de façon efficace une plus grande audience qui passera
plus de temps sur votre site pour faire des achats.
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
Page 3
Imaginez le scénario suivant : un client visite votre magasin physique, repère ce qu’il désire mais,
pour une quelconque raison (manque de liquidité, souhaite une livraison à domicile, etc), il opte de
faire son achat via son appareil mobile. La facilité d’utilisation de votre site sur son appareil mobile
l’encouragera à s’en servir pour passer sa commande. Nous retenons avec cet exemple que plus
l’expérience d’achat est facile sur les appareils mobiles, plus les clients sont enclins à acheter sur le
champ.
Si, l’expérience d’achat client vous importe et que vous souhaitez revoir votre stratégie e-commerce,
demandez-vous si vous voulez :

Gagner du temps et réduire vos couts : le « Responsive Design » vous évite de créer et
de maintenir deux sites distincts, un traditionnel et l’autre pour mobiles. Il en résultera des
économies considérables de temps et d’argent.

Améliorer votre efficacité opérationnelle : avec un site unique pour supporter tous les
appareils disponibles sur le marché, vous réduisez la charge de travail requise pour le
développement et en simplifiez la maintenance. De plus, vous pouvez créer des rapports
d’analyse intégrés, basés sur une norme unique d’indicateurs clés de performance (KPI ; Key
Performance Indicators), et ce, pour tous les types d’appareils. Vous améliorez ainsi
l’efficacité de votre site tout en ayant un meilleur aperçu de votre rendement multicanal.

Créer une expérience utilisateur cohérente : la cohérence de votre site sur les différents
appareils aide le consommateur à naviguer plus aisément sur votre site. Vous verrez ainsi un
impact positif sur vos ventes. De plus, des URL cohérentes ont une influence positive sur
votre référencement naturel, un atout supplémentaire.

Augmenter le taux de conversion : faciliter la navigation sur les différents appareils
mobiles permet aux clients de naviguer et d’acheter où, quand et comme ils le veulent. Ceci
les rend plus susceptibles de a) conclure un achat, b) acheter plus d’un article et c) revenir
plusieurs fois sur votre site.

Être tourné vers l’avenir : les technologies clés du « Responsive Design », dont « HTML5
» et « CSS3 Media Queries », sont des normes qui peuvent servir de base pour vos
applications web futures. Par conséquent, votre site est prêt pour la prochaine génération
d’appareils mobiles, assurant ainsi un flot ininterrompu de clients sur votre site.
Partez de votre stratégie e-commerce actuelle et
allez de l’avant !
On nous pose fréquemment la question suivante : « Comment devons-nous procéder pour intégrer le
« Responsive Design » ? Nous recommandons de commencer là ou vous en êtes aujourd’hui.
Analysez les habitudes d’achat de vos clients. Identifiez les appareils dont ils se servent pour accéder
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
Page 4
à votre site. Évaluer l’investissement requis pour intégrer le « Responsive Design » : temps,
ressources, budget et puis débutez votre planification.
Vous avez déjà une stratégie « mobile » en place ? Si vous avez déjà un design ou une
application mobile en place, il est alors probable que vous maintenez deux versions de votre site ecommerce : une pour les ordinateurs de bureau, l’autre pour les appareils mobiles. Une option
consisterait à intégrer les techniques du « Responsive Design » pour fusionner ces versions.
Vous débutez la mise en place d’une stratégie « mobile » ? Si votre stratégie n’est pas encore
en place, c’est le moment idéal pour envisager le « Responsive Design ». Vous pouvez utiliser les
éléments graphiques de votre site e-commerce existant ou encore, concevoir un nouveau design qui
répond à tous les types de connexions (ordinateur de bureau, ordinateur portable,
téléphone
intelligent ou tablette).
Il arrive que le « Responsive Design » ne soit pas,
dans l’immédiat, le choix le plus judicieux.
Bien sûr, le « Responsive Design » n’est pas la solution universelle pour tous les sites e-commerce et
les sites mobiles. Au préalable, il faut soigneusement évaluer vos options et se méfier des « oui-dires
». Le « Responsive Design » n’est peut-être pas la meilleure approche pour vous si:

Votre site web est très détaillé ou trop compliqué

Votre menu de navigation est complexe

Votre site utilise beaucoup d’images et peu de texte

Les utilisateurs ont besoin d’un accès à la globalité de votre site en tout temps
Bien que le « Responsive Design » puisse répondre à ces caractéristiques, les couts seront plus élevés
et la planification et la mise en oeuvre s’avèreront plus longues.
Conseils techniques pour un « Responsive Design
» réussi
L’objectif est simple : vous voulez faciliter l’accès à votre site en ligne, quel que soit l’appareil utilisé,
et ce, rapidement et à moindre cout.
Le « Responsive Design » vous permet d’évoluer dans cette direction. Et si les meilleures pratiques ne
sont pas encore établies, les efforts constants d’une communauté de développeurs web passionnés
commencent à porter fruit.
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
Page 5
En tenant compte des points suivants, vous saurez éviter certains pièges :

Ergonomie et design : certaines caractéristiques présentes sur votre site web peuvent être
éliminées sur votre site mobile afin d’en faciliter l’utilisation. En vous basant sur des critères
de simplicité et de facilité d’utilisation, choisissez les éléments qui ne sont pas indispensables
afin de les exclure de votre site pour mobile. Tout ce qui n’est pas nécessaire au processus
d’achat n’est probablement pas essentiel. Assurez-vous cependant que les éléments clés de
votre site, tels le menu principal de navigation, le logo, le panier d’achat et l’information
relative à la confidentialité soient bien visibles dans toutes les versions de votre site.

Vidéos et FLASH : nous vous déconseillons l’ajout d’éléments « Flash » à votre «
Responsive Design ». Les iPhone et iPad ne supportent pas cette technologie. De plus,
technologie « Flash » pour mobiles a été discontinuée et les appareils qui la supportent ne
sont pas nécessairement bien optimisés.

Politique de confidentialité et de protection des données : assurez-vous que vos
données et celles de vos clients sont protégées et sécurisées.

« Ce que client veut » : les clients s’attendent à ce que leurs expériences d’achat via
mobiles se déroulent aussi rapidement, sinon plus vite que via leur ordinateur. Assurez-vous
que le « Responsive Design » ne nuit pas à la rapidité de votre site.
Prêt ? Commencez par trouver le bon partenaire
La majorité des entreprises sont d’accord pour intégrer le « Responsive Design » dès le début de leur
stratégie e-commerce. Cette solution est habituellement plus abordable et plus rapide.
Vous aurez toutefois peut-être besoin d’assistance. Afin de bien choisir votre partenaire de
développement, nous vous conseillons de porter une attention particulière à son niveau d’expérience.
Vous ne souhaitez certainement pas servir de cobaye pour un novice qui cherche à acquérir une
expérience en « Responsive Design ». Choisissez un partenaire qui soit bien au fait des dernières
tendances et technologies. Ensuite, vous pouvez aller de l’avant. Par cette stratégie, votre entreprise
bénéficiera d’économies considérables en temps et en argent. Vos clients, de leur côté (pour qui le
mode de connexion indiffère, du moment que cela fonctionne), seront plus enclins à revenir sur votre
site grâce à une expérience d’achat agréable et conviviale.
Résumé
Il est important de bien étudier votre projet avant de prendre une décision finale. Examinez les pours
et les contres, les avantages, les inconvénients ainsi que les exigences techniques qui accompagnent
le « Responsive Design ». Mis en oeuvre correctement, cette technologie se verra être un atout pour
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
Page 6
votre site. Mais souvenez-vous qu’il ne convient pas à toutes les situations. Ainsi, n’hésitez pas à
planifier, à analyser et à consulter afin de prendre une décision éclairée. Enfin, n’oubliez pas de
considérer les habitudes d’achat de vos clients.
Vous avez maintenant les outils qui vous aideront à évaluer si le « Responsive Design » correspond à
vos besoins et ceux de vos clients. Rappelez-vous; pour maximiser le retour sur votre investissement,
il est important de choisir un partenaire technologique expérimenté qui saura intégrer le « Responsive
Design » à votre site web.
Glossaire : le vocabulaire du Responsive Design
Feuilles de style en cascade - Cascading style sheet (CSS) : utilisé pour définir l’apparence et
le ressenti d’un site web en dehors de son cadre HTML. En formatant et aménageant les sites web
avec l’approche du « Responsive web Design », les CSS ont comme rôle de remplacer les tables et les
autres méthodes basées sur le HTML. Le principal avantage de cette utilisation est la simplification
des fichiers HTML du site (améliorant aussi le classement naturel sur les moteurs de recherche). Un
autre atout de cette fonction est la capacité de changer le style d’un site en ne modifiant qu’un seul
fichier, sans avoir à en changer le contenu.
CSS Framework : c’est une collection de fichiers CSS servants de point de départ pour construire
des sites XHTML et CSS de façon rapide et facile. Il contient en général des styles CSS pour la
typographie et le formatage.
Hypertext Markup Language (HTML) : il s’agit du principal langage utilisé pour écrire des pages
web. Il a été conçu pour pouvoir fournir du contenu sur les sites web (avec le CSS qui se charge du
format et des options stylistiques). Il peut également être utilisé pour déterminer de quelle manière
un contenu peut être affiché.
HTML5 : conçu pour permettre le développement avancé de pages web sans avoir recours à des
ajouts provenant de parties tierces telles Java et Flash. HTML5 supporte les graphiques 2D, l’édition
de documents, le glisser – déposer, la gestion de l’historique des consultations, la visualisation de
vidéos, et la gestion du stockage local. HTML5 formalise et consolide des méthodes existantes de
codification ; par exemple il n’autorise plus certains marqueurs de format au sein d’une page : ils
doivent être définis dans une page CSS.
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
Page 7
1
25 Eye-Popping Internet Marketing Statistics for 2012; HubSpot Blog; January 2012
2
Local and the e-tailing group, 2012
3
Local and the e-tailing group, 2012
4
Adobe, “The Impact of Tablet Visitors on Retail Websites”
5
Forrester
6
eMarketer, 2012
7
Responsive Web Design: What It Is and How To Use It; smashingmagazine.com; January 2012
8
eDigitalResearch and Portaltech Reply, 2012
9
Source: Gartner, 2012
www.osf-global.com
© 2015 par OSF Global Services. Tous droits réservés
Page 8