SlideShare une entreprise Scribd logo
INTERNET MOBILE
opportunités & moyens



dans le cadre des déjeuners Web Chambé-Carnet
par Jean-Baptiste DAVID

Internet Mobile, opportunités & moyens de Internet Mobile CC est mis à disposition selon les termes de la licence Creative Commons Attribution
- Pas d’Utilisation Commerciale - Pas de Modification 3.0 France.
PRESENTATION


depuis 2002 - gérant de
                              agence web, mobile & more




avant 2002 - chef de projet   et webmaster
SOMMAIRE

Etat de l’art et réflexion stratégique
         Application mobile
        Responsive webdesign
     Site mobile ou application?
                 FAQ
ETAT DE L’ART
ETAT DE L’ART : LES INTERNAUTES


• 40      millions d’internautes en France (+6% sur un an)

• 19,6%           depuis un smartphone (+23% en un an)
SOURCE : IMEDIAMETRIE HOTSPOTS - MARS 2012




                                                   ordinateurs   smartphones   tablettes

           supports utilisés
 (parmi les connectés à Internet ces 30 derniers     74 %           34 %         5 %
                jours en France)

SOURCE : IPSOS PROFILING 2011
ETAT DE L’ART : USER PROFILE




Homme & femme                    Homme          Homme
           40 ans                 33 ans         35 ans
                                  Urbain         CSP+
                                E-influencer      Geek
                                Heavy User    Early adopter
SOURCE : IPSOS PROFILING 2011
ETAT DE L’ART : TABLETTES

Prévisions DELOITTE en 2010 :
 5
                                                   Estim. Basse
                                                   Estim. Haute
 4


 3


 1


 0
       2010      2011      2012      2013

Il s’est finalement vendu   435 000 tablettes en 2010
Il s’est finalement vendu 1 450 000 tablettes en 2011
EN BREF


 • Leweb mobile et le nomadisme ont le vent en poupe
  (grâce au hotspots wifi essentiellement et à la 3G)

 • Les   réseaux «4G» vont encourager ce développement

 • On  ne peut pas envisager une stratégie digitale en omettant
  les supports mobiles
RÉFLEXION STRATÉGIQUE
Il faut considérer une application mobile ou une version
mobile de son site comme une part de sa stratégie de
communication et se fixer des objectifs:
   • développer    son image de marque
   • recruter   des prospects / des clients
   • vendre

   • communiquer/promouvoir       des services (V.A)
   • fidéliser   sa clientèle

   • ...
APPLICATION MOBILE
UNE APPLICATION «EVOLUÉE»
Fondation FACIM   •   la première app touristique de Savoie
                  •   objectif attendu : développement notoriété

                  •   techniquement :

                      •   conception de composant
                      •   skin de composant
                      •   fonctions shaker
                      •   google Map + géolocalisation
                      •   recherche «à proximité»

 e-tourisme       •   data : via bases de données
UNE APPLICATION «ACCESSIBLE»
OT de Morestel   •   la première app touristique d’OT en Isère
                 •   développement notoriété
                 •   techniquement :
                     •   réutilisation de composant
                     •   exploitation data Sitra + html (via le site)
                     •   appel de page html dans l’App
                     •   Google Map + Géolocalisation
                 •   data : via bases de données

 e-tourisme
COMMENT ÇA MARCHE?


         URL - SERVEUR WEB     FICHIER PHP     BASE DE DONNEES




                               FICHIER XML



     intérêt : mises à jour en temps réél
     limite : pas de offline possible (si perte Wifi ou 3G)
APPLICATION & CONTRAINTES

Versioning des appareils
Fonctionnalités non accessibles à certaines versions
Différents OS
Apprentissage des langages JAVA ou Objective C
Processus de soumission :

1. Réalisation    2. Soumission au Store   3. Evaluation   4. Publication
ADOBE AIR: UNE SOLUTION?

• AIR*permet de développer des applications multiplateformes
 (Android, iOS, Windows Phone)

• Le  principe : le code de l’application est encapsulé (lu dans un
 player - invisible). AIR peut être compilé dans Flash Builder,
 dans le format iPhone, sans développer dans le langage natif
 (Objective C). Android et Windows Phone nécessitent
 l’installation de AIR avant d’installer l’application


 *Le moteur d'exécution Adobe® AIR® permet aux développeurs de déployer des applications autonomes créées
 avec HTML, JavaScript, ActionScript®, Flex, Adobe Flash® Professional et Adobe Flash Builder® pour l'ensemble
 des équipements et plates-formes, y compris les terminaux Android™, BlackBerry® et iOS, les ordinateurs
 personnels et les téléviseurs.
RESPONSIVE WEBDESIGN (RW)
RESPONSIVE WEBDESIGN : PRINCIPES




http://mediaqueri.es/

http://www.responsinator.com/
RENDRE SON SITE LISIBLE?

• Les   prérequis : navigateur récent avec javascript activé

• Les   langages : css / javascript (html / php)

• Les plus : aller plus loin (grâce à js et PHP, renvoyer que
 certains champs, optimiser les requêtes au support, donc gain
 de perf) - Penser connexion Edge /3G/ Wifi...on ne maitrise
 pas.

• Les   limites : si javascript désactivé
RENDRE SON SITE LISIBLE?


• Approche      différente si on a déjà un site ou si on en créé un?

• Le   design doit s’adapter au différentes résolutions & supports

• Repenser      l’UI (déterminer ce qui doit s’afficher, prioriser)

• Utiliser   des technologies légères, peu gourmandes (html/css)

• Penser     confort utilisateur
RW POUR ALLER PLUS LOIN

• Cequi est nouveau «MEDIA QUERIES» en CSS3, panel de
 possibilités beaucoup plus vaste que CSS2

• Exemple  une Media Query permet de tester l’orientation de
 l’iPad (Portrait ou Paysage) et d’appeler une CSS en fonction

• L’usagede javascript permet des conditions plus poussées
 (type user agent)

• Ex:javascript permet de remplacer des images à la volée
 selon le terminal (PC ou iPhone)...
APPLICATION VS SITE MOBILE
APPLICATION VS SITE MOBILE

                     Site Internet mobile                          Application
Objectifs           Adapter le message au support              Proposer un service, une
                                                                 expérience différente
Apports marketing    Accès direct, à l’initiative, sans     Meilleure visibilité d’usage (desk)
                       téléchargement (store)              fonctionnalités natives, fonctionne
                                                                    aussi déconnecté
Accès                        Search ou URL                           Stores + Desk

Développement       1 CSS spécifique, mais code html       1 langage par OS (Objective C, Java
                           identique au site                             etc)

Mises à jour          Suivent celles du site (CMS)             nouveau DEV, sauf BDD
Validation tierce                  Non                              Oui par le store

Push                            MMS/SMS                                  Gratuit
APPLICATION VS SITE MOBILE
Exemple : Société Générale




le site web classique        Une orientation du site spécifique smartphone

                             2 accès majeurs : Mes comptes / Pratique

                             Information utile : en cas d’urgence

                             Relais vers l’Application mobile
MULTISUPPORT
MYTHE OU RÉALITÉ?
MULTISUPPORT : MYTHE OU RÉALITÉ?
• Un   seul site mobile pour plusieurs plateformes:
• Borne     interactive
• Vitrine   tactile
• Smartphone

• Tablette

• Navigateur     PC/Mac




                               www.ardecheverte-tourisme.fr
MULTISUPPORT : MYTHE OU RÉALITÉ?

• HTML5     est en phase de développement

• Nouvelles   balises pour la conception

• Des API   pour des fonctionnalités poussées

• Permet parfois de substituer à des fonctionnalités
 natives d’un support (ex. géolocalisation)
FAQ
FAQ



• Quid   des mises à jour pour une App mobile?



• Vidéo   et mobile quelles sont les limites?
FAQ


• Coûts   de développement

• Application   seule ou Application & site mobile

• SEO   et mobile?
FAQ

• Comment     rediriger l’internaute vers un site mobile?

 • en détectant le user agent, cela permet d’appliquer des
   conditions et d’envoyer l’internaute sur une autre page ou
   autre URL.

• Quelle   url utiliser pour un site mobile?

 • m.mondomaine.com
 • mondomaine.mobi
 • mondomaine.com/mobile
MERCI DE VOTRE
          ATTENTION
                   Mars 2012

Jean-Baptiste DAVID - jbdavid@noe-interactive.com

Contenu connexe

Tendances

Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobile
Ludovic Tant
 
Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010Ecobiz 37
 
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
FrenchWeb.fr
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
Plateformes de développement d’applications mobiles
Plateformes de développement d’applications mobilesPlateformes de développement d’applications mobiles
Plateformes de développement d’applications mobiles
Eric Toguem
 
Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?
in-Tact
 
Développement d'applications mobiles
Développement d'applications mobilesDéveloppement d'applications mobiles
Développement d'applications mobiles
Matelli
 
M3 enterprise fr 1.4
M3 enterprise fr 1.4M3 enterprise fr 1.4
M3 enterprise fr 1.4AppQuartz
 
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 ?
NiceToMeetYou
 
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
Kseo Conseil
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
Microsoft
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
MBA Multimedia
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
neuros
 
Pixmobi - Guide agences
Pixmobi - Guide agencesPixmobi - Guide agences
Pixmobi - Guide agences
COWEMO
 
Plus d’efficacité & de flexibilité grâce à Sugar Mobile
Plus d’efficacité & de flexibilité grâce à Sugar MobilePlus d’efficacité & de flexibilité grâce à Sugar Mobile
Plus d’efficacité & de flexibilité grâce à Sugar Mobile
SugarCRM
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
FullSIX Group
 
Cours information communication : Site web, Native App, Progressive Web App
Cours information communication : Site web, Native App, Progressive Web AppCours information communication : Site web, Native App, Progressive Web App
Cours information communication : Site web, Native App, Progressive Web App
Adrien Quenette
 
Mobilite : Quelles solutions face à la multiplicité des plateformes ?
Mobilite : Quelles solutions face à la multiplicité des plateformes ?Mobilite : Quelles solutions face à la multiplicité des plateformes ?
Mobilite : Quelles solutions face à la multiplicité des plateformes ?
Wax Interactive
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutter
Julien Saumande
 
Studio Interactif WE_ARE - Présentation de l'offre de service
Studio Interactif WE_ARE - Présentation de l'offre de serviceStudio Interactif WE_ARE - Présentation de l'offre de service
Studio Interactif WE_ARE - Présentation de l'offre de service
Studio Interactif WE_ARE
 

Tendances (20)

Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobile
 
Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010
 
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
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Plateformes de développement d’applications mobiles
Plateformes de développement d’applications mobilesPlateformes de développement d’applications mobiles
Plateformes de développement d’applications mobiles
 
Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?
 
Développement d'applications mobiles
Développement d'applications mobilesDéveloppement d'applications mobiles
Développement d'applications mobiles
 
M3 enterprise fr 1.4
M3 enterprise fr 1.4M3 enterprise fr 1.4
M3 enterprise fr 1.4
 
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 ?
 
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
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
 
Pixmobi - Guide agences
Pixmobi - Guide agencesPixmobi - Guide agences
Pixmobi - Guide agences
 
Plus d’efficacité & de flexibilité grâce à Sugar Mobile
Plus d’efficacité & de flexibilité grâce à Sugar MobilePlus d’efficacité & de flexibilité grâce à Sugar Mobile
Plus d’efficacité & de flexibilité grâce à Sugar Mobile
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Cours information communication : Site web, Native App, Progressive Web App
Cours information communication : Site web, Native App, Progressive Web AppCours information communication : Site web, Native App, Progressive Web App
Cours information communication : Site web, Native App, Progressive Web App
 
Mobilite : Quelles solutions face à la multiplicité des plateformes ?
Mobilite : Quelles solutions face à la multiplicité des plateformes ?Mobilite : Quelles solutions face à la multiplicité des plateformes ?
Mobilite : Quelles solutions face à la multiplicité des plateformes ?
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutter
 
Studio Interactif WE_ARE - Présentation de l'offre de service
Studio Interactif WE_ARE - Présentation de l'offre de serviceStudio Interactif WE_ARE - Présentation de l'offre de service
Studio Interactif WE_ARE - Présentation de l'offre de service
 

En vedette

Nouvel Environnement Fiscal: comment adapter votre patrimoine ?
Nouvel Environnement Fiscal: comment adapter votre patrimoine ?Nouvel Environnement Fiscal: comment adapter votre patrimoine ?
Nouvel Environnement Fiscal: comment adapter votre patrimoine ?
pyrenees.gascogne
 
Gaspares Restaurant Menu
Gaspares Restaurant MenuGaspares Restaurant Menu
Gaspares Restaurant Menuguest3e0ef1c
 
How the public is responding to charitable causes in the current climate mi...
How the public is responding to charitable causes in the current climate   mi...How the public is responding to charitable causes in the current climate   mi...
How the public is responding to charitable causes in the current climate mi...
iof_events
 
Le Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovations
Le Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovationsLe Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovations
Le Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovations
pyrenees.gascogne
 
Animez votre communauté sur les réseaux sociaux
Animez votre communauté sur les réseaux sociauxAnimez votre communauté sur les réseaux sociaux
Animez votre communauté sur les réseaux sociaux
Chambé-Carnet
 

En vedette (6)

Mon 1er prêt immobilier
Mon 1er prêt immobilierMon 1er prêt immobilier
Mon 1er prêt immobilier
 
Nouvel Environnement Fiscal: comment adapter votre patrimoine ?
Nouvel Environnement Fiscal: comment adapter votre patrimoine ?Nouvel Environnement Fiscal: comment adapter votre patrimoine ?
Nouvel Environnement Fiscal: comment adapter votre patrimoine ?
 
Gaspares Restaurant Menu
Gaspares Restaurant MenuGaspares Restaurant Menu
Gaspares Restaurant Menu
 
How the public is responding to charitable causes in the current climate mi...
How the public is responding to charitable causes in the current climate   mi...How the public is responding to charitable causes in the current climate   mi...
How the public is responding to charitable causes in the current climate mi...
 
Le Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovations
Le Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovationsLe Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovations
Le Crédit Agricole Mutuel Pyrénées Gascogne : une banque d'innovations
 
Animez votre communauté sur les réseaux sociaux
Animez votre communauté sur les réseaux sociauxAnimez votre communauté sur les réseaux sociaux
Animez votre communauté sur les réseaux sociaux
 

Similaire à [Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?

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...
Salon e-tourisme #VeM
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
defimedia
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
SCALA
 
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
Vincent Vandevelde
 
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
Rencontres Nationales du etourisme institutionnel
 
Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014
webassoc .fr
 
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 ?
altima°
 
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
Club des Community Managers de Lyon
 
Internet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applicationsInternet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applications
Jean David Olekhnovitch
 
Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir
Medialibs
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
Intuitiv Technology
 
Présentation développement application Android
Présentation développement application AndroidPrésentation développement application Android
Présentation développement application Androidambin_fr
 
Des sites...aux applications
Des sites...aux applicationsDes sites...aux applications
Des sites...aux applications
maulaura
 
Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.
DocDoku
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Benjamin LUPU
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
BEIJAFLORE
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
Smile I.T is open
 
Chp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileChp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement Mobile
Lilia Sfaxi
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
Abdoulaye Dieng
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
ambin_fr
 

Similaire à [Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ? (20)

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...
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
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
 
Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014
 
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 ?
 
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
 
Internet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applicationsInternet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applications
 
Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Présentation développement application Android
Présentation développement application AndroidPrésentation développement application Android
Présentation développement application Android
 
Des sites...aux applications
Des sites...aux applicationsDes sites...aux applications
Des sites...aux applications
 
Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
 
Chp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileChp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement Mobile
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 

Plus de Chambé-Carnet

Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?
Chambé-Carnet
 
L'agilité, vecteur de bien être et levier de performances
L'agilité, vecteur de bien être et levier de performances L'agilité, vecteur de bien être et levier de performances
L'agilité, vecteur de bien être et levier de performances
Chambé-Carnet
 
Travailler autrement, se planter autrement
Travailler autrement, se planter autrementTravailler autrement, se planter autrement
Travailler autrement, se planter autrement
Chambé-Carnet
 
Travailller autrement, prendre des risques, réussir ou rebondir
Travailller autrement, prendre des risques, réussir ou rebondirTravailller autrement, prendre des risques, réussir ou rebondir
Travailller autrement, prendre des risques, réussir ou rebondir
Chambé-Carnet
 
[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle
[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle
[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle
Chambé-Carnet
 
Bitcoin, initiation à l’argent P2P et opportunités
Bitcoin, initiation à l’argent P2P et opportunitésBitcoin, initiation à l’argent P2P et opportunités
Bitcoin, initiation à l’argent P2P et opportunités
Chambé-Carnet
 
Marketing Automation : Comprendre ses prospects pour mieux les convertir
Marketing Automation : Comprendre ses prospects pour mieux les convertirMarketing Automation : Comprendre ses prospects pour mieux les convertir
Marketing Automation : Comprendre ses prospects pour mieux les convertir
Chambé-Carnet
 
Déjeuner Web : Les réseaux sociaux d'entreprise
Déjeuner Web : Les réseaux sociaux d'entrepriseDéjeuner Web : Les réseaux sociaux d'entreprise
Déjeuner Web : Les réseaux sociaux d'entreprise
Chambé-Carnet
 
[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...
[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...
[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...
Chambé-Carnet
 
[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design
[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design
[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design
Chambé-Carnet
 
[Chambé-Carnet] Méthodes avancées de référencement naturel
[Chambé-Carnet] Méthodes avancées de référencement naturel[Chambé-Carnet] Méthodes avancées de référencement naturel
[Chambé-Carnet] Méthodes avancées de référencement naturel
Chambé-Carnet
 
[Chambé-Carnet] Analyser les performances de son référencement naturel
[Chambé-Carnet] Analyser les performances de son référencement naturel[Chambé-Carnet] Analyser les performances de son référencement naturel
[Chambé-Carnet] Analyser les performances de son référencement naturelChambé-Carnet
 
[Chambé-Carnet] L'accessibilité au service du référencement naturel
[Chambé-Carnet] L'accessibilité au service du référencement naturel[Chambé-Carnet] L'accessibilité au service du référencement naturel
[Chambé-Carnet] L'accessibilité au service du référencement naturelChambé-Carnet
 
[Chambé-Carnet] Référencement
[Chambé-Carnet] Référencement[Chambé-Carnet] Référencement
[Chambé-Carnet] Référencement
Chambé-Carnet
 
[Chambé-Carnet] Photo numérique, quel avenir sur le web ?
[Chambé-Carnet] Photo numérique, quel avenir sur le web ?[Chambé-Carnet] Photo numérique, quel avenir sur le web ?
[Chambé-Carnet] Photo numérique, quel avenir sur le web ?
Chambé-Carnet
 
[Chambé-Carnet] - Tout Savoir Sur Les Blog
[Chambé-Carnet] - Tout Savoir Sur Les Blog[Chambé-Carnet] - Tout Savoir Sur Les Blog
[Chambé-Carnet] - Tout Savoir Sur Les Blog
Chambé-Carnet
 

Plus de Chambé-Carnet (16)

Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?Peut-on vivre sans Internet ?
Peut-on vivre sans Internet ?
 
L'agilité, vecteur de bien être et levier de performances
L'agilité, vecteur de bien être et levier de performances L'agilité, vecteur de bien être et levier de performances
L'agilité, vecteur de bien être et levier de performances
 
Travailler autrement, se planter autrement
Travailler autrement, se planter autrementTravailler autrement, se planter autrement
Travailler autrement, se planter autrement
 
Travailller autrement, prendre des risques, réussir ou rebondir
Travailller autrement, prendre des risques, réussir ou rebondirTravailller autrement, prendre des risques, réussir ou rebondir
Travailller autrement, prendre des risques, réussir ou rebondir
 
[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle
[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle
[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle
 
Bitcoin, initiation à l’argent P2P et opportunités
Bitcoin, initiation à l’argent P2P et opportunitésBitcoin, initiation à l’argent P2P et opportunités
Bitcoin, initiation à l’argent P2P et opportunités
 
Marketing Automation : Comprendre ses prospects pour mieux les convertir
Marketing Automation : Comprendre ses prospects pour mieux les convertirMarketing Automation : Comprendre ses prospects pour mieux les convertir
Marketing Automation : Comprendre ses prospects pour mieux les convertir
 
Déjeuner Web : Les réseaux sociaux d'entreprise
Déjeuner Web : Les réseaux sociaux d'entrepriseDéjeuner Web : Les réseaux sociaux d'entreprise
Déjeuner Web : Les réseaux sociaux d'entreprise
 
[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...
[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...
[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...
 
[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design
[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design
[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design
 
[Chambé-Carnet] Méthodes avancées de référencement naturel
[Chambé-Carnet] Méthodes avancées de référencement naturel[Chambé-Carnet] Méthodes avancées de référencement naturel
[Chambé-Carnet] Méthodes avancées de référencement naturel
 
[Chambé-Carnet] Analyser les performances de son référencement naturel
[Chambé-Carnet] Analyser les performances de son référencement naturel[Chambé-Carnet] Analyser les performances de son référencement naturel
[Chambé-Carnet] Analyser les performances de son référencement naturel
 
[Chambé-Carnet] L'accessibilité au service du référencement naturel
[Chambé-Carnet] L'accessibilité au service du référencement naturel[Chambé-Carnet] L'accessibilité au service du référencement naturel
[Chambé-Carnet] L'accessibilité au service du référencement naturel
 
[Chambé-Carnet] Référencement
[Chambé-Carnet] Référencement[Chambé-Carnet] Référencement
[Chambé-Carnet] Référencement
 
[Chambé-Carnet] Photo numérique, quel avenir sur le web ?
[Chambé-Carnet] Photo numérique, quel avenir sur le web ?[Chambé-Carnet] Photo numérique, quel avenir sur le web ?
[Chambé-Carnet] Photo numérique, quel avenir sur le web ?
 
[Chambé-Carnet] - Tout Savoir Sur Les Blog
[Chambé-Carnet] - Tout Savoir Sur Les Blog[Chambé-Carnet] - Tout Savoir Sur Les Blog
[Chambé-Carnet] - Tout Savoir Sur Les Blog
 

[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?

  • 1. INTERNET MOBILE opportunités & moyens dans le cadre des déjeuners Web Chambé-Carnet par Jean-Baptiste DAVID Internet Mobile, opportunités & moyens de Internet Mobile CC est mis à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 France.
  • 2. PRESENTATION depuis 2002 - gérant de agence web, mobile & more avant 2002 - chef de projet et webmaster
  • 3. SOMMAIRE Etat de l’art et réflexion stratégique Application mobile Responsive webdesign Site mobile ou application? FAQ
  • 5. ETAT DE L’ART : LES INTERNAUTES • 40 millions d’internautes en France (+6% sur un an) • 19,6% depuis un smartphone (+23% en un an) SOURCE : IMEDIAMETRIE HOTSPOTS - MARS 2012 ordinateurs smartphones tablettes supports utilisés (parmi les connectés à Internet ces 30 derniers 74 % 34 % 5 % jours en France) SOURCE : IPSOS PROFILING 2011
  • 6. ETAT DE L’ART : USER PROFILE Homme & femme Homme Homme 40 ans 33 ans 35 ans Urbain CSP+ E-influencer Geek Heavy User Early adopter SOURCE : IPSOS PROFILING 2011
  • 7. ETAT DE L’ART : TABLETTES Prévisions DELOITTE en 2010 : 5 Estim. Basse Estim. Haute 4 3 1 0 2010 2011 2012 2013 Il s’est finalement vendu 435 000 tablettes en 2010 Il s’est finalement vendu 1 450 000 tablettes en 2011
  • 8. EN BREF • Leweb mobile et le nomadisme ont le vent en poupe (grâce au hotspots wifi essentiellement et à la 3G) • Les réseaux «4G» vont encourager ce développement • On ne peut pas envisager une stratégie digitale en omettant les supports mobiles
  • 9. RÉFLEXION STRATÉGIQUE Il faut considérer une application mobile ou une version mobile de son site comme une part de sa stratégie de communication et se fixer des objectifs: • développer son image de marque • recruter des prospects / des clients • vendre • communiquer/promouvoir des services (V.A) • fidéliser sa clientèle • ...
  • 11. UNE APPLICATION «EVOLUÉE» Fondation FACIM • la première app touristique de Savoie • objectif attendu : développement notoriété • techniquement : • conception de composant • skin de composant • fonctions shaker • google Map + géolocalisation • recherche «à proximité» e-tourisme • data : via bases de données
  • 12. UNE APPLICATION «ACCESSIBLE» OT de Morestel • la première app touristique d’OT en Isère • développement notoriété • techniquement : • réutilisation de composant • exploitation data Sitra + html (via le site) • appel de page html dans l’App • Google Map + Géolocalisation • data : via bases de données e-tourisme
  • 13. COMMENT ÇA MARCHE? URL - SERVEUR WEB FICHIER PHP BASE DE DONNEES FICHIER XML intérêt : mises à jour en temps réél limite : pas de offline possible (si perte Wifi ou 3G)
  • 14. APPLICATION & CONTRAINTES Versioning des appareils Fonctionnalités non accessibles à certaines versions Différents OS Apprentissage des langages JAVA ou Objective C Processus de soumission : 1. Réalisation 2. Soumission au Store 3. Evaluation 4. Publication
  • 15. ADOBE AIR: UNE SOLUTION? • AIR*permet de développer des applications multiplateformes (Android, iOS, Windows Phone) • Le principe : le code de l’application est encapsulé (lu dans un player - invisible). AIR peut être compilé dans Flash Builder, dans le format iPhone, sans développer dans le langage natif (Objective C). Android et Windows Phone nécessitent l’installation de AIR avant d’installer l’application *Le moteur d'exécution Adobe® AIR® permet aux développeurs de déployer des applications autonomes créées avec HTML, JavaScript, ActionScript®, Flex, Adobe Flash® Professional et Adobe Flash Builder® pour l'ensemble des équipements et plates-formes, y compris les terminaux Android™, BlackBerry® et iOS, les ordinateurs personnels et les téléviseurs.
  • 17. RESPONSIVE WEBDESIGN : PRINCIPES http://mediaqueri.es/ http://www.responsinator.com/
  • 18. RENDRE SON SITE LISIBLE? • Les prérequis : navigateur récent avec javascript activé • Les langages : css / javascript (html / php) • Les plus : aller plus loin (grâce à js et PHP, renvoyer que certains champs, optimiser les requêtes au support, donc gain de perf) - Penser connexion Edge /3G/ Wifi...on ne maitrise pas. • Les limites : si javascript désactivé
  • 19. RENDRE SON SITE LISIBLE? • Approche différente si on a déjà un site ou si on en créé un? • Le design doit s’adapter au différentes résolutions & supports • Repenser l’UI (déterminer ce qui doit s’afficher, prioriser) • Utiliser des technologies légères, peu gourmandes (html/css) • Penser confort utilisateur
  • 20. RW POUR ALLER PLUS LOIN • Cequi est nouveau «MEDIA QUERIES» en CSS3, panel de possibilités beaucoup plus vaste que CSS2 • Exemple une Media Query permet de tester l’orientation de l’iPad (Portrait ou Paysage) et d’appeler une CSS en fonction • L’usagede javascript permet des conditions plus poussées (type user agent) • Ex:javascript permet de remplacer des images à la volée selon le terminal (PC ou iPhone)...
  • 22. APPLICATION VS SITE MOBILE Site Internet mobile Application Objectifs Adapter le message au support Proposer un service, une expérience différente Apports marketing Accès direct, à l’initiative, sans Meilleure visibilité d’usage (desk) téléchargement (store) fonctionnalités natives, fonctionne aussi déconnecté Accès Search ou URL Stores + Desk Développement 1 CSS spécifique, mais code html 1 langage par OS (Objective C, Java identique au site etc) Mises à jour Suivent celles du site (CMS) nouveau DEV, sauf BDD Validation tierce Non Oui par le store Push MMS/SMS Gratuit
  • 23. APPLICATION VS SITE MOBILE Exemple : Société Générale le site web classique Une orientation du site spécifique smartphone 2 accès majeurs : Mes comptes / Pratique Information utile : en cas d’urgence Relais vers l’Application mobile
  • 25. MULTISUPPORT : MYTHE OU RÉALITÉ? • Un seul site mobile pour plusieurs plateformes: • Borne interactive • Vitrine tactile • Smartphone • Tablette • Navigateur PC/Mac www.ardecheverte-tourisme.fr
  • 26. MULTISUPPORT : MYTHE OU RÉALITÉ? • HTML5 est en phase de développement • Nouvelles balises pour la conception • Des API pour des fonctionnalités poussées • Permet parfois de substituer à des fonctionnalités natives d’un support (ex. géolocalisation)
  • 27. FAQ
  • 28. FAQ • Quid des mises à jour pour une App mobile? • Vidéo et mobile quelles sont les limites?
  • 29. FAQ • Coûts de développement • Application seule ou Application & site mobile • SEO et mobile?
  • 30. FAQ • Comment rediriger l’internaute vers un site mobile? • en détectant le user agent, cela permet d’appliquer des conditions et d’envoyer l’internaute sur une autre page ou autre URL. • Quelle url utiliser pour un site mobile? • m.mondomaine.com • mondomaine.mobi • mondomaine.com/mobile
  • 31. MERCI DE VOTRE ATTENTION Mars 2012 Jean-Baptiste DAVID - jbdavid@noe-interactive.com