20

Salon Use IT Lyon

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Salon Use IT Lyon
Page 2: Salon Use IT Lyon

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 !

Page 3: Salon Use IT Lyon

Fabien ANTONI

Morgan FERRIER

Evolution des technologies

Expertise des nouvelles technologies

Nombreuses années d’expérience

Page 4: Salon Use IT Lyon

Les nouvelles technologies & le marché du

e-commerce

Page 5: Salon Use IT Lyon

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

Page 6: Salon Use IT Lyon

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

Page 7: Salon Use IT Lyon

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

Page 8: Salon Use IT Lyon

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

Page 9: Salon Use IT Lyon

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

Page 10: Salon Use IT Lyon

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

Page 11: Salon Use IT Lyon

La Technologie Responsive (RWD)

Responsive Web Design

Le WEB devient mobile

Inventé par Ethan Marcotte

Page 12: Salon Use IT Lyon

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

Page 13: Salon Use IT Lyon

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

Page 14: Salon Use IT Lyon

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

Page 15: Salon Use IT Lyon

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

Page 16: Salon Use IT Lyon

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

Page 17: Salon Use IT Lyon

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

Page 18: Salon Use IT Lyon

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

Page 19: Salon Use IT Lyon

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

[email protected]

Synthèse

Page 20: Salon Use IT Lyon

www.intuitiv-interactive.com

Pour une étude personnalisée prenez contact avec nous :

Morgan FERRIER(+33)6.48.37.88.84

[email protected]

Fabien ANTONI(+33)[email protected]