Cette conférence donnée lors du Salon Use IT de Lyon présente les avantages de la technologie responsive : nouvelle technologie sur le secteur des IT. Retrouvez la vidéo du salon sur notre chaine you tube : Intuitiv technology www.intuitiv-interactive.com

2. Tablettes tactiles et
Smartphone à l’heure du
e-commerce : optimisez votre
M-Business grâce à la
technologie responsive !
Découvrez l’évolution du e-comme avec les tablettes tactiles et
Smartphone … et faite de la technologies Responsive un
véritable atout !

3.  Evolution des technologies
 Expertise des nouvelles technologies
 Nombreuses années d’expérience
Fabien ANTONI
Morgan FERRIER

4. Les nouvelles technologies
& le marché du
e-commerce

5.  39,7 milliards € en 2011 ( + 22% comparé à 2010)
 + 23% de sites marchands actifs en 2011
 Augmentation des ventes
 Concurrence
 Prévision de saturation
› Avoir une véritable stratégie
› Saisir les nouvelles opportunités
Le marché français :
 2 milliards d’internautes / 43,2 millions en France
 33,6 millions de cyberacheteurs en France
 97% satisfaits de leurs achats

6.  4,01 milliards de francs dépensés en 2009
 57% de la population achète des biens sur Internet et 15% effectue des ventes
 Augmentation régulière des achats sur Internet depuis 2006
 Les 3 domaines privilégiés :
› Transport par avion
› Equipements informatiques et multimédia
› Vacances et hébergement
 2010 : 47% de la population adulte (16-74 ans) a utilisé Internet pour acheter
un bien ou un service durant les 3 derniers mois
 Pays en 7ème position en utilisation d’Internet pour l’achat de bien ou services
en 2010 (devant la France et au dessus de la moyenne de l’UE avec 31%)
*Etude réalisée par l’Office Fédérale de la Statistique OFS en 2010

7. Un site e-commerce… oui ! Mais pas seulement …
D’autres canaux à exploiter pour une véritable stratégie !
Canal mobile - M-commerce
Réseaux sociaux – « Social commerce » via Facebook,
Twitter, Google +, Ebay…
Ventes privées et groupées – pour créer un sentiment
de privilégié et de force

8. Le M-commerce
 Ne remplace pas les canaux de vente actuels.
 Utilisé pour les ventes de produits dématérialisés : musique, film, sonneries de
téléphone, transport, hôtel, location, etc.
 Outil incontournable de vente : géolocalisation, réalité augmentée, vidéo, etc.
 Mise en place importante d’interactivité et d’innovation.
 Moyens de paiement aussi sécurisé qu’un site e-commerce.
 Technologies NFC opérationnelles et en test en France pour payer sur Internet sans carte
bancaire.
 Couplé aux outils du web 2.0, le m-commerce permet d’augmenter ses revenus grâce à une
communication intelligente et dynamique avec les clients

9. Comment l’utiliser ?
Choisir la manière dont on veut vendre sur le canal mobile.
 Application mobile native
 Rapide
 Intégration des services et interface spécialisée
 Téléchargement depuis les stores
 Développement pour chaque plateforme
 Application web
 Rendre compatible le site Internet pour les plateformes mobiles
 Développement des templates
 Certains CMS proposent des applications mobiles intégrés au back
office

10. E-commerce + M-commerce = $uccès !
Pour cela, 3 choix s’offrent à vous :
- j’ai d’énormes budgets -> je fais un webdesign optimisé desktop, une appli
iPhone, une appli Android (sans compter les Windows Phone, Samsung
Bada…) mais aussi une appli iPad…etc
- je génère un fichier CSS différent selon la plateforme qui charge le contenu, ce
qui me donne au final des fichiers du style mobile.css, tablette.css et screen.css
- je me sers du responsive -> je créé un seul fichier CSS qui s’adapte aux
différentes tailles d’écran, donc à des résolutions différentes, afin de garantir
que mon site soit ok sur toutes les plateformes

11. La Technologie
Responsive (RWD)
Responsive Web Design
Le WEB devient mobile
Inventé par Ethan Marcotte

12. Le constat
Il existe de nombreux supports pour accéder au web :
• Téléphone mobile ;
• Tablette ;
• Mini pc ;
• Ordinateurs portables ;
• Pc fixe avec grand écran…
Problème  Les sites internet ne sont pas adaptés au format de
chaque nouvel outil
Mai 2011, 3 000 000 d’utilisateurs ont déjà acheté sur mobile

13. Qu’est-ce que le responsive ?
Réponse en image !

14. Comment ça marche ?
L’éventail des résolutions possibles s’étend de 128 à 320 pixels pour les mobiles.
Possibilité d’affichage du contenu verticalement et horizontalement
1 1 2 3 3
2 7 4 2 2
8 6 0 0 0
128
176
240
320
320

15. Le RWD : la solution multi-plateforme !
RWD : ensemble d’outils et de techniques qui permettent d’adapter l’affichage d’un site
internet aux différents supports qui s’y connectent.
Le site Internet doit être flexible :
 La mise en page
C’est grâce à une base CSS 3 que le design est rendu adaptable
 Les images
Elles doivent pouvoir s’adapter aux différentes résolutions (rétrécir, croper, déplacer ou
cacher)
 La typographie
Privilégier les % et em pour assigner des tailles au typographie et qu’elles soient
proportionnelle au support
 La couche JavaScript
Bien décider en amont les fonctionnalités pour le code soit assez flexible pour s’adapter aux
différentes résolutions

16. Techniquement, comment ça marche ?
Outils et techniques à respecter :
• Grilles fluides (adaptation automatique en largeur)
• Images adaptables
• max-width:100%
• Meta viewport (echelle initiale et suppression du zoom…)
• <meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1.0">
• Media queries (affichage différents en fonction des résolutions)
• @media screen and (max-width: 1024px) { /* les différents styles... */ }

17. Les avantages
Facilité
Plus besoin de version mobile, un seul site web est conçu mais le web design est repensé afin
d’être compatible avec le maximum de terminaux différents
Economique
Concevoir un site avec un Responsive Web Design coûte moins cher que de concevoir un site
web traditionnel et une version mobile et une version tablette…
Multi-plateforme
Il permet aux entreprises de pouvoir se faire voir sur d'autre outils qu'un ordinateur
Aide aussi au référencement
Créativité
Il permet au designer d'avoir plus de possibilité de création sur le design qu’une application
mobile
Contenu unique
Un seul et même site à gérer sur l’ensemble des canaux

18. Les limites
Le temps
Le temps de conception est plus long que sur un design classique
Compatibilité
Les Médias Queries sont compatibles avec les derniers navigateurs uniquement :
IE9, Firefox 4, Chrome 11, Opera 11...
Chargement
Les contenus sont identiques. On peut en cacher sur certaines plateformes, mais ils seront
tout de même chargés et causer quelques lenteurs sur des sites à fort contenus.

19. Synthèse
Pour résumer la technologie responsive…
Présence On-line obligatoire
Les sites doivent être compatibles sur l’ensemble des technologies
Logique de business
Il est beaucoup plus « logique » et moins onéreux (environ + 20% de +) d’ajouter les outils
et techniques à la base de votre projet web plutôt que de développer un site compatible
à chaque terminal…
Si vous disposez déjà d’un site web, il est possible en fonction de votre
technologie (CMS etc.) de moderniser votre site et d’ajouter cette
technologie à votre code mais pour cela :
Envoyez nous des détails de votre projet et nous vous indiquerons le %
de faisabilité « Responsive ». Objet mail : AuditResponsiveGenève
responsive@intuitiv.fr

20. www.intuitiv-interactive.com
Pour une étude personnalisée prenez contact avec nous :
Morgan FERRIER Fabien ANTONI
(+33)6.48.37.88.84 (+33)4.37.57.78.87
mferrier@intuitiv.fr fantoni@intuitiv.fr