INTERNET MOBILEopportunités & moyens

dans le cadre des déjeuners Web Chambé-Carnetpar 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.

depuis 2002 - gérant de

PRESENTATION

avant 2002 - chef de projet et webmaster

agence web, mobile & more

SOMMAIRE

Etat de l’art et réflexion stratégiqueApplication mobile

Responsive webdesignSite 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 : IPSOS PROFILING 2011

ordinateurs smartphones tablettes

supports utilisés(parmi les connectés à Internet ces 30 derniers

jours en France) 74 % 34 % 5 %

SOURCE : IMEDIAMETRIE HOTSPOTS - MARS 2012

SOURCE : IPSOS PROFILING 2011

Homme & femme

40 ans

Homme

33 ans

Urbain

E-influencer

Heavy User

Homme

35 ans

CSP+

Geek

Early adopter

ETAT DE L’ART : USER PROFILE

Il s’est finalement vendu 435 000 tablettes en 2010

0

1

3

4

5

2010 2011 2012 2013

Estim. BasseEstim. Haute

Il s’est finalement vendu 1 450 000 tablettes en 2011

Prévisions DELOITTE en 2010 :

ETAT DE L’ART : TABLETTES

• Le web 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

EN BREF

• développer son image de marque

• recruter des prospects / des clients

• vendre

• communiquer/promouvoir des services (V.A)

• fidéliser sa clientèle

• ...

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:

APPLICATION MOBILE

e-tourisme

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é»

• data : via bases de données

UNE APPLICATION «EVOLUÉE»

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?

intérêt : mises à jour en temps réél

limite : pas de offline possible (si perte Wifi ou 3G)

URL - SERVEUR WEB FICHIER PHP BASE DE DONNEES

FICHIER XML

1. Réalisation 2. Soumission au Store 4. Publication3. Evaluation

APPLICATION & CONTRAINTES

Versioning des appareils

Fonctionnalités non accessibles à certaines versions

Différents OS

Apprentissage des langages JAVA ou Objective C

Processus de soumission :

• 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

ADOBE AIR: UNE SOLUTION?

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

• 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

RENDRE SON SITE LISIBLE?

• Ce qui 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’usage de 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)...

RW POUR ALLER PLUS LOIN

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 téléchargement (store)

Meilleure visibilité d’usage (desk) fonctionnalités natives, fonctionne

aussi déconnecté

Accès Search ou URL Stores + Desk

Développement 1 CSS spécifique, mais code html identique au site

1 langage par OS (Objective C, Java 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

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

Exemple : Société Générale

le site web classique

MULTISUPPORTMYTHE 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

• 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

FAQ

MERCI DE VOTRE ATTENTION

Mars 2012

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