Tablettes tactiles et Smartphone à l’heure due-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 !
Fabien ANTONI
Morgan FERRIER
Evolution des technologies
Expertise des nouvelles technologies
Nombreuses années d’expérience
Les nouvelles technologies & le marché du
e-commerce
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
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
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
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
Le M-commerce
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
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
La Technologie Responsive (RWD)
Responsive Web Design
Le WEB devient mobile
Inventé par Ethan Marcotte
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
Le constat
Qu’est-ce que le responsive ? Réponse en image !
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
3
2
0
3
2
0
2
4
0
1
7
6
1
2
8
320
320
240
176
128
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 pageC’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
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... */ }
Les avantagesFacilité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
EconomiqueConcevoir 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-plateformeIl permet aux entreprises de pouvoir se faire voir sur d'autre outils qu'un ordinateurAide 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 uniqueUn seul et même site à gérer sur l’ensemble des canaux
Le tempsLe 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...
ChargementLes 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.
Les limites
Pour résumer la technologie responsive…
Présence On-line obligatoireLes 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
Synthèse
www.intuitiv-interactive.com
Pour une étude personnalisée prenez contact avec nous :
Morgan FERRIER(+33)6.48.37.88.84
Fabien ANTONI(+33)[email protected]