1.
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 etSmartphone … et faite de la technologies Responsive unvéritable atout !

2.
 Evolution des technologies  Expertise des nouvelles technologies  Nombreuses années d’expérienceFabien ANTONIMorgan FERRIER

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

4.
 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ésLe marché français : 2 milliards d’internautes / 43,2 millions en France 33,6 millions de cyberacheteurs en France 97% satisfaits de leurs achats

5.
 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

6.
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

7.
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

8.
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

9.
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

10.
La Technologie Responsive (RWD) Responsive Web Design Le WEB devient mobileInventé par Ethan Marcotte

11.
Le constatIl 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

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

13.
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

14.
Le RWD : la solution multi-plateforme !RWD : ensemble d’outils et de techniques qui permettent d’adapter l’affichage d’un siteinternet 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

15.
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... */ }

16.
Les avantagesFacilitéPlus besoin de version mobile, un seul site web est conçu mais le web design est repensé afind’être compatible avec le maximum de terminaux différentsEconomiqueConcevoir un site avec un Responsive Web Design coûte moins cher que de concevoir un siteweb traditionnel et une version mobile et une version tablette…Multi-plateformeIl permet aux entreprises de pouvoir se faire voir sur dautre outils quun ordinateurAide aussi au référencementCréativitéIl permet au designer davoir plus de possibilité de création sur le design qu’une applicationmobileContenu uniqueUn seul et même site à gérer sur l’ensemble des canaux

17.
Les limitesLe tempsLe temps de conception est plus long que sur un design classiqueCompatibilitéLes Médias Queries sont compatibles avec les derniers navigateurs uniquement :IE9, Firefox 4, Chrome 11, Opera 11...ChargementLes contenus sont identiques. On peut en cacher sur certaines plateformes, mais ils seronttout de même chargés et causer quelques lenteurs sur des sites à fort contenus.

18.
SynthèsePour résumer la technologie responsive…Présence On-line obligatoireLes sites doivent être compatibles sur l’ensemble des technologiesLogique de businessIl est beaucoup plus « logique » et moins onéreux (environ + 20% de +) d’ajouter les outilset 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 votretechnologie (CMS etc.) de moderniser votre site et d’ajouter cettetechnologie à votre code mais pour cela :Envoyez nous des détails de votre projet et nous vous indiquerons le %de faisabilité « Responsive ». Objet mail : AuditResponsiveGenèveresponsive@intuitiv.fr

19.
www.intuitiv-interactive.comPour 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