Télécharger en tant que PDF, PPTX
Téléchargé parChambé-Carnet
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
Le document traite des opportunités offertes par l'internet mobile et l'importance d'intégrer des applications mobiles ou des versions mobiles de sites dans une stratégie digitale. Il présente des données sur l'utilisation croissante des smartphones et des tablettes, ainsi que des conseils sur le responsive webdesign. Enfin, il aborde les différences entre applications et sites mobiles, en mettant en lumière les défis techniques et les meilleures pratiques pour optimiser l'expérience utilisateur.
Contenu connexe
Similaire à [Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
![[Chambé-Carnet] Impression 3D : Décodage d'une révolution industrielle](https://cdn.slidesharecdn.com/ss_thumbnails/20151203chambecarnetimpression3d-160216090032-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] Les limites de google : proposition d'une alternative innovan...](https://cdn.slidesharecdn.com/ss_thumbnails/slides-121209032954-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] Mobile W.A.R : Web mobile, Applications et Responsive Design](https://cdn.slidesharecdn.com/ss_thumbnails/mobile-war-120607071822-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] Méthodes avancées de référencement naturel](https://cdn.slidesharecdn.com/ss_thumbnails/chambe-carnet-kevin-richard-seo-blackhat-120207045601-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] Analyser les performances de son référencement naturel](https://cdn.slidesharecdn.com/ss_thumbnails/performance-referencement-naturel-chambe-carnet-01-12-2011-111208080200-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] L'accessibilité au service du référencement naturel](https://cdn.slidesharecdn.com/ss_thumbnails/laccessibilitauservicedurfrencementnaturel-110308015030-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] Référencement](https://cdn.slidesharecdn.com/ss_thumbnails/1ere-position-chambe-carnet-2008-101121082931-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] Photo numérique, quel avenir sur le web ?](https://cdn.slidesharecdn.com/ss_thumbnails/photonumrique-quelavenirsurlatoile-091213162000-phpapp01-101121082303-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Chambé-Carnet] - Tout Savoir Sur Les Blog](https://cdn.slidesharecdn.com/ss_thumbnails/toutsavoirsurlesblog-090615072754-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
[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’artet réflexion stratégique Application mobile Responsive webdesign Site mobile ou application? FAQ
- 4.
- 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 fautconsidé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.
- 11. UNE APPLICATION «EVOLUÉE» FondationFACIM • 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» OTde 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 Versioningdes 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: UNESOLUTION? • 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.
- 17. RESPONSIVE WEBDESIGN :PRINCIPES http://mediaqueri.es/ http://www.responsinator.com/
- 18. RENDRE SON SITELISIBLE? • 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 SITELISIBLE? • 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 ALLERPLUS 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 SITEMOBILE
- 22. APPLICATION VS SITEMOBILE 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 SITEMOBILE 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.
- 25. MULTISUPPORT : MYTHEOU RÉALITÉ? • Un seul site mobile pour plusieurs plateformes: • Borne interactive • Vitrine tactile • Smartphone • Tablette • Navigateur PC/Mac www.ardecheverte-tourisme.fr
- 26. MULTISUPPORT : MYTHEOU 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.
- 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 - [email protected]