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

4.
ETAT DE L’ART

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

10.
APPLICATION MOBILE

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.

16.
RESPONSIVE WEBDESIGN (RW)

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

21.
APPLICATION VS SITE MOBILE

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

24.
MULTISUPPORT
MYTHE OU RÉALITÉ?

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