Investir dans un site web mobile:

Transcription

1 Investir dans un site web mobile: luxe ou nécessité? Conférence Sonia Loubier 12 mai 2011

2 Objectifs de la présentation Pé Présenter les principaux i éléments à considérer lors du développement et l implantation d un site mobile Expliquer les différentes étapes de réalisation en utilisant l exemple du CAIJ Fournir les références aux outils et à la documentation de base pour la réalisation d un site mobile 2

3 Combien y a-t-il de téléphones cellulaires dans le monde? Source: List of countries by number of mobile phone in use. In Wikipedia. (Page consultée le 9 mai 2011) 3

4 Et au Québec? Source: Statistiques Canada. Les habitudes dépenses au Canada. (Page consultée le 9 mai 2011) 4

5 Combien dépense-t-on pour le cellulaire? Source: Statistiques Canada. Coup d œil sur le Canada (Page consultée le 9 mai 2011) 5

6 Les grands acteurs sur le marché Source: Gartner Says Worldwide Mobile Phone Sales Grew 35 Percent in Third Quarter 2010; Smartphone Sales Increased 96 Percent. (Page consultée le 9 mai 2011) 6

7 Les principaux p systèmes d exploitation Source: Gartner Says Worldwide Mobile Phone Sales Grew 35 Percent in Third Quarter 2010; Smartphone Sales Increased 96 Percent. (Page consultée le 9 mai 2011) 7

8 Sur les 500 milliards de téléphones, combien ont actuellement accès à Internet? 400 millions Quelles sont les prévisions pour 2015? 3,5 milliards Source: Morin, Martin La moitié de la planète sur Internet mobile d ici In Branchez-vous Techno ( 5 mai 2010) (Page consultée le 9 mai 2011) 8

9 Investir dans un site web mobile: luxe ou nécessité?

10 Services mobiles et bibliothèques Répondants: 483bibliothèques (291 académiques et 185 publiques) Source: Carlucci Thomas, Lisa. Gone mobile? (Mobile libraries survey 2010). In Library Journal (15 octobre 2010). (Page consultée le 9 mai 2011) 10

11 Centre d accès à l information juridique (CAIJ) Organisme associé au Barreau du Québec Corporation privée à but non lucratif créée en 2001 Mission Rendre l information juridique accessible aux membres du Barreau 600 juges du Québec S assurer que l accès soit le même quel que soit l emplacement géographique ou l environnement de travail Budget: 8 millions $ 11

12 12

13 13

14 Bibliothèque virtuelle 14

15 Suite JuriBistro 15

16 Service de recherche 16

17 Service de formation 17

18 Pourquoi un site mobile? Pour répondre aux besoins de nos clients qui: ont un horaire de travail chargé sont des utilisateurs assidus d appareils mobiles désirent un accès rapide à leurs outils de travail quotidiens lorsqu ils sont en déplacement 18

19 Le défi Outils traditionnels Outils mobiles 19

20 Fournisseur externe ou Développement à l interne? 20

21 Notre décision: Développement à l interne 21

22 Étapes de réalisation Revue de la documentation Semaines 1-4 Sélection du contenu Semaines 5-7 Spécifications Semaines 8-11 Design graphique Semaines Programmation et intégration graphique Semaines Tests et validation Semaines Intégration au site classique Semaines Documentation Semaines Formation du personnel Semaines Lancement du mobile Semaine 20 Promotion et marketing Semaines 21+

23 Participants au projet Équipes impliquées Équipe des TI (5) Équipe de la bibliothèque virtuelle (6) Service de formation (1) Expertise Bibliothécaires Avocats Programmeur analyste Techniciens 23

24 Revue de la documentation Documentation du W3C Mobile web initiative Mobile Web Best Practices CSS Mobile Profile Portails spécialisés et livres Sections pour «développeurs» des fournisseurs d appareils mobiles Blackberry Apple Sites mobiles 24

25 Avantages versus Très populaires Portatifs et compacts Toujours ouverts 25

26 Limites versus Taille de l écran Clavier Souris Défilement horizontal Bande passante et coûts Limitations (javascript, plug-ins, feuilles de style, etc.) Objectifs des clients (accès rapide et direct à l information) 26

27 Quand je pars en voyage Avec mon ordinateur de bureau Je recherche des vols d avion Je recherche des hôtels Je fais des réservations Avec mon mobile Je cherche des itinéraires Je consulte le statut des vols J effectue des confirmations Analogie tirée de la présentation de Jeff Wisniewski. Mobile usability (Page consultée le 9 mai 2011) 27

28 Quelques recommandations du W3C sur les pratiques d excellence Cohérence de contenu entre différents appareils Poids des pages Limiter le défilement à une seule direction Tester plusieurs navigateurs Navigation principale dans le haut de la page URL court pour la page d accueil Contenu principal d une page accessible sans défilement Contraste des couleurs Source: W3C. Mobile web best practices 1.0: basic guidelines (2008 July 29). (Page consultée le 9 mai 2011) 28

29 Sélection du contenu Séance de remue-méninges Décision de ne pas se limiter au catalogue de bibliothèques Identification des outils et services pouvant être adaptés à l interface linterface mobile et susceptibles d être dêtre utilisés par nos clients 29

30 Site classique vs mobile 30

31 31

32 JuriBistro BIBLIO Catalogue de bibliothèques 32

33 33

34 JuriBistro TOPO Banque de questions de recherche 34

35 JuriBistro THEMA Portail d information juridique 35

36 36

37 En résumé Identifier les outils ou services qui sont le plus susceptibles d être consultés sur un mobile Sélectionner les fonctionnalités les plus pertinentes t Limiter l affichage d informations 37

38 Spécifications Comparatif classique mobile Contenu pour chacun des outils En tête Partie principale Pied de page 38

39 Design graphique Firme de graphisme pour la page d accueil Équipe du CAIJ pour les autres pages et les outils de la suite JuriBistro 39

40 Classification selon la taille de l écran Largeur de l écran (pixels) Très petit: 84, 96, 101, 128, 130, 132 Petit: 160, 176 Médium: 208, 220, 240 Large: 320, 360, 480+ Source: Suda, Brian. Designing for the mobile web. (Page consultée le 9 mai 2011) 40

41 Classification selon les fonctionnalités offertes Supérieur Moyen De base iphones, Android, Palm Pre Blackberry, téléphones intelligents Nokia, Windows mobile, etc. Téléphones pliables avec accès Web Larges écrans tactiles, fonctionnalités web avancées Peuvent ne pas avoir d écran tactile et ne pas supporter les feuilles de style et les javascripts Petits écrans, fonctionnalités web limitées Traduction libre d un tableau tiré de Woodbury, David et Casde, Jason. Library in Your Pocket: Strategies and Techniques for Developing Successful Mobile Services. (20 janvier 2010) (Page consultée le 9 mai 2011) 41

42 Types d appareils mobiles 42

43 Défis de la programmation Rendre les textes intégraux disponibles Législation Jurisprudence Doctrine Adapter la navigation à l utilisation du mobile Adapter les principales i fonctionnalités Conserver un aspect familier pour les utilisateurs du site classique 43

44 Application native ou Site web mobile Notre choix: Site web mobile 44

45 Programmation et intégration graphique ASP. Net (XHTML, C#, base de données SQL) Feuilles de style minimales Élimination de sources potentielles de problèmes: Javascript Tableaux Graphiques PDF 45

46 Programmation et intégration graphique des produits Web2 (BIBLIO, THEMA et TOPO) Interface paramétrisé pour mobile Sélection des fonctionnalités HTML CSS JavaScript pour certaines fonctionnalités non essentielles 46

47 Programmation et intégration graphique des autres produits Concerto Nous joindre Publications du Barreau Fournisseur externe Programmation web (BD SQL) Programmation Web (pages html) 47

48 Configuration des noms de domaine et détection automatique m.caij.qc.ca mobile.caij.qc.ca Détection automatique des appareils mobiles 48

49 Tests Fureteurs Firefox: Web Developer Toolbar Simulateurs En ligne Simulateurs pour ordinateurs de bureau Appareils mobiles (employés du CAIJ) 49

50 Tests utilisateurs 8 clients Iphone, Ipod, blackberry Tâches à accomplir Commentaires et réflexions à voix haute 50

51 Validation Évaluation convivialité validation des balises conformité par rapport aux meilleurs pratiques Détermination ti de la performance sur un appareil mobile 51

52 Documentation Documentation (À propos du CAIJ mobile) Contenu du mobile Configuration requise Conditions d utilisation Politique de confidentialité 52

53 Formation du personnel Contenu du mobile Simulateurs FAQ 53

54 Promotion et marketing Lancement 1 er avril 2009 Activités promotionnelles Courriel publicitaire Annonce site web classique Journal du Barreau Blogues spécialisés Droit inc. Slaw 54

55 55

56 56

57 Raccourci CAIJ sur écran d accueil Site de Blackerry pour développeurs Téléchargement de l environnement de développement Java Publication d une dune application développée dans l environnement lenvironnement JDE doit être signée à l aide de clés obtenues auprès de BlackBerry. 57

58 Qu est-ce que nos clients consultent sur le mobile? 58

59 Quels sont les fureteurs les plus utilisés par nos clients? 59

60 Les principales questions à se poser avant de débuter Uniquement catalogue ou autres outils et services? Si autres outils et services, lesquels? Application ou site web, ou une combinaison des deux? Développement à l interne ou fournisseur externe? 60

61 Des idées originales NCSU libraries mobile Phonegap 61

62 Références Design et développement Android developers. (Page consultée le 9 mai 2011) Blackberry developer zone. (Page consultée le 9 mai 2011) DeviceAtlas: mobile device intelligence. (Page consultée le 9 mai 2011) Créer une application professionnelle pour iphone. In: Comment ça marche.net. (Page conultée le 9 mai 2011) Firefox Add-ons ons. org/en-us/firefox/addon/web-developer/ developer/ (Page consultée le 9 mai 2011) Fling, Brian Mobile design and development. O Reilly, 309 p. ios dev center. l /d t /i /i d ti (Page consultée le 9 mai 2011) Moll, Cameron Mobile web design: a web standards approach for delivering content to mobile devices. Lulu.com. 108 p. 62

63 Références Design et développement Phonegap: the only open source mobile framework that supports 6 platforms. (Page consultée le 9 mai 2011) Rieger, Bryan Jan 16. Effective design for multiple screen sizes. (Page consultée le 9 mai 2011) Suda, Brian. Designing for the mobile web. (Page consultée le 9 mai 2011) W3C mobile web initiative : the web and mobile devices. (Page consultée le 9 mai 2011) W3C. Mobile web best practices 1.0: basic guidelines (2008 July 29). w3 (Page consultée le 9 mai 2011) 63

64 Références Émulateurs/Simulateurs Blackberry device simulators. (Page consultée le 9 mai 2011) Firefox add-ons user agent switcher. (Page consultée le 9 mai 2011) Opera mini simulator. (Page consultée le 9 mai 2011) TestiPhone.com iphone simulator. (Page consultée le 9 mai 2011) Validation Bournique, Dennis. Validation is your friend Oct (Page consultée le 9 mai 2011) Ready.mobi. (Page consultée le 9 mai 2011) W3C. Markup validation service. (Page consultée le 9 mai 2011) W3C. W3C mobileok checker. Page consultée le 9 mai 2011) 64

65 Références Liste de sites mobiles de bibliothèques M-Libraries. (Page consultée le 9 mai 2011) Webinaire Woodbury, David et Casde, Jason. Library in Your Pocket: Strategies and Techniques for Developing Successful Mobile Services. (20 janvier 2010) (Page consultée le 9 mai 2011) Conférences The second international m-libraries Conference, Vancouver BC Canada, June i b / (Page consultée le 9 mai 2011) The Third International m-libraries Conference, Brisbane, May (Page consultée le 9 mai 2011) 65

66 Références Articles de blogues The Krafty librarian : Get Your Library Site Mobile Without a Mobile Budget.(1 février 2011) (Page consultée le 9 mai 2011) Librarian in black ; Internet librarian 2010 : designing a mobile experience (25 octobre 2010) (Page consultée le 9 mai 2011) Musings about librarianship: Libray mobile apps vs web apps Some analysis (5 septembre 2010). / (Page consultée le 10 mai 2011) Musings about librarianship: i Mobile options for libraries i & thoughtsht on usability (24 avril 2011). (Page consultée le 10 mai 2011) Musings about librarianship: What are mobile friendly sites offering: A survey (24 avril 2010). sites.html (Page consultée le 9 mai 2011) Tiffiniamnne s blog : Edupunk goes mobile: Mobile library sites with zero budget (22 janvier 2011). (Page consultée le 9 mai 2011) 66

67 Références Présentations Powerpoint Hinman Rachel. Mobile user experience : whatweb designers needto know. (Page consultée le 9 mai 2011) Wisniewski, Jeff. Mobile usability (Page consultée le 9 mai 2011) Sondage et statistiques Carlucci Thomas, Lisa. Gone mobile? (Mobile libraries survey 2010). In Library Journal (15 octobre 2010). (Page consultée le 9 mai 2011) Gartner Says Worldwide Mobile Phone Sales Grew 35 Percent in Third Quarter 2010; Smartphone Sales Increased 96 Percent. t /it/ (Page consultée le 9 mai 2011) List of countries by number of mobile phone in use. In Wikipedia. (Page consultée le 9 mai 2011) Mobithinking. Global mobile statistics 2011: all quality mobile marketing research, mobile Web stats, subscribers, ad revenue, usage, trends (Février 2011) (Page consultée le 9 mai 2011) 67

68 68

69 Questions? 69