SlideShare une entreprise Scribd logo
1  sur  20
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 !
 Evolution des technologies
                  Expertise des nouvelles technologies
                  Nombreuses années d’expérience




Fabien ANTONI

Morgan FERRIER
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
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
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
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
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




                                             1    1    2    3 3
                                             2    7    4    2 2
                                             8    6    0    0 0




               128
               176
               240
               320

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

Contenu connexe

Tendances

Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobile
Bastien Serafin
 
Marketing Mobile
Marketing MobileMarketing Mobile
Marketing Mobile
Jean Eric
 
Principes de référence pour l’offre publicitaire dans les applications i phon...
Principes de référence pour l’offre publicitaire dans les applications i phon...Principes de référence pour l’offre publicitaire dans les applications i phon...
Principes de référence pour l’offre publicitaire dans les applications i phon...
Romain Fonnier
 
Information google apps
Information google appsInformation google apps
Information google apps
inovallee
 

Tendances (19)

abonobo - your business on mobile
abonobo - your business on mobileabonobo - your business on mobile
abonobo - your business on mobile
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobile
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Le Marketing Mobile face aux idées reçues
Le Marketing Mobile face aux idées reçuesLe Marketing Mobile face aux idées reçues
Le Marketing Mobile face aux idées reçues
 
Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobile
 
Marketing Mobile
Marketing MobileMarketing Mobile
Marketing Mobile
 
Principes de référence pour l’offre publicitaire dans les applications i phon...
Principes de référence pour l’offre publicitaire dans les applications i phon...Principes de référence pour l’offre publicitaire dans les applications i phon...
Principes de référence pour l’offre publicitaire dans les applications i phon...
 
Présentation atelier mobile frenchweb ad4 screen
Présentation atelier mobile frenchweb ad4 screenPrésentation atelier mobile frenchweb ad4 screen
Présentation atelier mobile frenchweb ad4 screen
 
RDV TIC en partenariat avec Google
RDV TIC en partenariat avec GoogleRDV TIC en partenariat avec Google
RDV TIC en partenariat avec Google
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
 
Marketing mobile
Marketing mobileMarketing mobile
Marketing mobile
 
Competitic - internet mobile - numerique en entreprise
Competitic - internet mobile - numerique en entrepriseCompetitic - internet mobile - numerique en entreprise
Competitic - internet mobile - numerique en entreprise
 
Marketing mobile
Marketing mobileMarketing mobile
Marketing mobile
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de Google
 
Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012Atelier ENP - 28 nov 2012
Atelier ENP - 28 nov 2012
 
Information google apps
Information google appsInformation google apps
Information google apps
 
Baromètre "Annonceurs mobile SRI-Harris Interactive" (Juin 2014)
Baromètre "Annonceurs mobile SRI-Harris Interactive" (Juin 2014)Baromètre "Annonceurs mobile SRI-Harris Interactive" (Juin 2014)
Baromètre "Annonceurs mobile SRI-Harris Interactive" (Juin 2014)
 
Mettez votre entreprise dans le téléphone de vos clients!
Mettez votre entreprise dans le téléphone de vos clients!Mettez votre entreprise dans le téléphone de vos clients!
Mettez votre entreprise dans le téléphone de vos clients!
 

En vedette

Communist party line fbi file series in 25 parts - vol. (2)
Communist party line   fbi file series in 25 parts - vol. (2)Communist party line   fbi file series in 25 parts - vol. (2)
Communist party line fbi file series in 25 parts - vol. (2)
RareBooksnRecords
 
Scénario webdocumentaire - Graffiti
Scénario webdocumentaire - GraffitiScénario webdocumentaire - Graffiti
Scénario webdocumentaire - Graffiti
Cha Chou
 
Sma soc fr-2679297
Sma soc fr-2679297Sma soc fr-2679297
Sma soc fr-2679297
ASMNM
 
Nextdata - Cas client Display (Go Voyages)
Nextdata - Cas client Display (Go Voyages)Nextdata - Cas client Display (Go Voyages)
Nextdata - Cas client Display (Go Voyages)
Nextdata
 

En vedette (20)

Que sont le quotient conjugal et le quotient familial ?
Que sont le quotient conjugal et le quotient familial ?Que sont le quotient conjugal et le quotient familial ?
Que sont le quotient conjugal et le quotient familial ?
 
Véhicules électriques
Véhicules électriquesVéhicules électriques
Véhicules électriques
 
Lavadora BOSCH WIA20001EE
Lavadora BOSCH WIA20001EE Lavadora BOSCH WIA20001EE
Lavadora BOSCH WIA20001EE
 
Nevera Electrolux EUT1105AW2
Nevera  Electrolux EUT1105AW2Nevera  Electrolux EUT1105AW2
Nevera Electrolux EUT1105AW2
 
Communist party line fbi file series in 25 parts - vol. (2)
Communist party line   fbi file series in 25 parts - vol. (2)Communist party line   fbi file series in 25 parts - vol. (2)
Communist party line fbi file series in 25 parts - vol. (2)
 
machine a parpaing
machine a parpaingmachine a parpaing
machine a parpaing
 
53174 velour
53174 velour53174 velour
53174 velour
 
Expose reseau socieaux
Expose reseau socieauxExpose reseau socieaux
Expose reseau socieaux
 
Duchess France Women in Tech
Duchess France Women in TechDuchess France Women in Tech
Duchess France Women in Tech
 
Scénario webdocumentaire - Graffiti
Scénario webdocumentaire - GraffitiScénario webdocumentaire - Graffiti
Scénario webdocumentaire - Graffiti
 
Sma soc fr-2679297
Sma soc fr-2679297Sma soc fr-2679297
Sma soc fr-2679297
 
Horno Siemens HB675G3S1
Horno Siemens HB675G3S1 Horno Siemens HB675G3S1
Horno Siemens HB675G3S1
 
machine a parpaing
machine a parpaingmachine a parpaing
machine a parpaing
 
Ag 2013 def
Ag 2013   defAg 2013   def
Ag 2013 def
 
Le plus b
Le plus bLe plus b
Le plus b
 
Présentation acf
Présentation acfPrésentation acf
Présentation acf
 
Nevera smeg FAB50BS
Nevera smeg FAB50BSNevera smeg FAB50BS
Nevera smeg FAB50BS
 
Le printemps du cohabitat
Le printemps du cohabitatLe printemps du cohabitat
Le printemps du cohabitat
 
Nextdata - Cas client Display (Go Voyages)
Nextdata - Cas client Display (Go Voyages)Nextdata - Cas client Display (Go Voyages)
Nextdata - Cas client Display (Go Voyages)
 
Tarea TICS
Tarea TICSTarea TICS
Tarea TICS
 

Similaire à Salon Use IT Lyon

Similaire à Salon Use IT Lyon (20)

Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
 
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
WUD 2009 Paris : Utilisabilité et m-commerce
WUD 2009 Paris : Utilisabilité et m-commerceWUD 2009 Paris : Utilisabilité et m-commerce
WUD 2009 Paris : Utilisabilité et m-commerce
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 
Eurelis - Présentation multi-écrans
Eurelis - Présentation multi-écransEurelis - Présentation multi-écrans
Eurelis - Présentation multi-écrans
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
Développement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practicesDéveloppement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practices
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
 
Conférence Web Mobile - CCI Avignon
Conférence Web Mobile - CCI AvignonConférence Web Mobile - CCI Avignon
Conférence Web Mobile - CCI Avignon
 
Be api - Web Mobile
Be api - Web MobileBe api - Web Mobile
Be api - Web Mobile
 
Webinar Eenox Compario 17 avril 2013
Webinar Eenox Compario 17 avril 2013Webinar Eenox Compario 17 avril 2013
Webinar Eenox Compario 17 avril 2013
 
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
 

Salon Use IT Lyon

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