LB_Smile_Guide du chef de projet Mobile

Préambule 

D'abord considéré comme un simple support de communication, le mobile est devenu en 5 

ans un canal d’accès privilégié au web, contenus et services. A ce titre, les enjeux du mobile 

ont considérablement augmenté et font maintenant partie intégrante des stratégies des 

entreprises. 

Néanmoins, si l’importance du mobile est un fait globalement partagé, le sujet reste 

complexe à aborder pour la plupart des entreprises car il demeure nouveau, mouvant et à 

la croisée du web, du marketing et de la technique. 

Smile, spécialiste du web et de l’intégration de solutions open source a donc réalisé ce 

guide afin de vous éclairer dans votre démarche et de vous accompagner dans la définition 

puis la gestion d’un projet mobile.

SOMMAIRE 

1. Paysage actuel 

1. Chiffres clés et tendances 

2. Fragmentation toujours élevée 

3. Synthèse 

2. Démarche: pourquoi et quoi faire ? 

3. Démarche: comment faire ? 

4. Le "cross-platform » 

5. L’approche de Smile 

Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation 3


1. 1. Chiffres clés et tendances

CHIFFRES CLÉS ET TENDANCES 

Le mobile a déjà 30 ans et est devenu au file des années un canal incontournable. Voici quelques 

terminaux qui ont marqué l'histoire : 

Motorola 

DynaTAC 

8000x 

(1983) 

Bi-Bop 

(1990) 

Nokia 3210 

et 3310 

(1999) 

Blackberry 

5790 

(2000) 

Motorola 

Razr V3 

(2005) 

Apple 

iPhone 1 

(2007) 

Ce canal sera bientôt dominant, en nombre de connexion dans le monde… 

Dès maintenant “[…] 4 consommateurs sur 5 peuvent accéder à Internet et au commerce en ligne via leur mobile, 

contre 1 consommateur sur 5 via son ordinateur. " 

(source: TNS Sofres) 2012 

Dans le monde, en 2014, Internet sera majoritairement mobile en nombre de connexion 

(Source: Etude Morgan Stanley 2011) 

"All people in the world are going to get a smartphone, and for most of them it will be their first computer." 

(Larry Page, CEO Google 2012) 



Croissance du parc et intensification des usages en France 

En forte croissance (34% en 2011) et avec un parc de 20 millions de smartphones en France à fin 2011, on est loin 

de la technologie de pointe et réservée à quelques spécialistes que l’on a connu. Par ailleurs, l’aspect le plus 

marquant est son utilisation qui s’intensifie d’année en année (doublement du nombre d’utilisateurs quotidiens de 

l’internet mobile en un an). Les nouveaux utilisateurs, se servent de leur smartphone, et ce de plus en plus. 

+34% 

Mobinaute = utilisateur de smartphone allant 

sur Internet (via navigateur ou application) 

+100% 

Source: Médiamétrie 

D’après Google/Ipsos, on compterait 55% 

de mobinautes quotidiens 



Partout et tout le temps 

• > 90% des utilisateurs gardent leur smartphone sur eux 24h/24h 

• Majoritairement utilisé à la maison… 

• Devant la télévision 

• Au lit 

• Dans la salle de bain ou aux toilettes 

• … et ensuite en « mobilité » : 

• Durant une attente 

• En transport 

• En réunion / en cours 

• En faisant les courses 

• L’âge moyen du premier mobile : 

• 11 ans et demi ! 

Portrait du Mobinaute 

Données France 

• Près de 50% ont moins de 35 ans 

• 8/10 habitent hors agglomération 

parisienne (vs. 3/4 l’an dernier) 

• 43% sont des femmes (vs. 40% l’an 

dernier) 

(Source: Médiamétrie) 

Source : IPSOS et CETELEM 



Applications - Des utilisateurs qui téléchargent, testent, et zappent 

Le 5 mars 2012 - Apple a fêté ses 25 milliards d’applications 

téléchargées. Autre chiffre marquant, 26000 demandes 

d’applications à valider par semaine dont un tiers sera rejeté. 

Applications les plus téléchargées en 2011 (dans le monde tout OS 

confondus) 

• Angry Birds, Facebook, Skype, Angry Birds Rio, Google Maps, iBooks, Angry 

Birds season, Fruit Ninja, Talking Tom Cat, Twitter 

Plébiscitées pour les utilisateurs et 

présentes en très grand nombre 

• 1 million d’applications disponibles sur les stores (total 

des 4 principaux OS) 

• En 2011, 18 milliards d’applications ont été téléchargées 

• 83* applications téléchargées en moyenne par an sur 

iOS. 

*D’autres études parlent de 60 à 80 applications téléchargées 

par an/ par personne, 30 utilisées dont 10 régulièrement 

Source chiffres : ChangeWave Gartner 

Un phénomène de « Blockbusterisation » (concentration des 

usages) 

• Le top 10 des applications Android concentre 43 % de tout le temps passé 

Des applications considérées comme jetables ou Kleenex… 

• 26% des applications sont téléchargées, ouvertes une seule fois pour ne 

plus jamais être utilisées. 

• Seuls 26% sont utilisées plus de 10 fois 

…aux durées de vie très éphémères: 

• Après un mois d’utilisation, seulement 38% des utilisateurs (iOS comme 

Android) l’utilisent encore 

• Après 6 mois, seulement 14%, puis seulement 2% utiliseront après 12 

mois 

Source chiffres: Apple, Localytics, Flurry Analytics & Estimates 



Web mobile - des utilisateurs exigeants… Mais nombreux 

• De 2010 à 2011: la part des recherches sur mobile est passée de 2,95% à 

5,98% (chiffres monde) 

• En d’autres termes: les utilisateurs ont des besoins et souhaitent vous trouver… 

• Mais leur expérience actuelle est encore globalement déceptive (US) 

• Un utilisateur sur deux est globalement insatisfait de son expérience d’internet sur mobile. 

• 1/4 d’entre eux, ne reviendront pas 

– Pour 15% le site ne répond pas à leurs attentes ou est mal adapté au mobile 

– Pour 38% il est trop lent 

– Pour 18% le site ne fonctionne pas 

– Pour 13% le site mobile n’existe pas 

• L’étude montre néanmoins que la différence entre le web mobile et les 

applications téléchargées est perçue et les exigences de temps de réponse, 

d’ergonomie et de contenu restent moins élevées que sur le web. 

Source Chiffres : NetMarketShare 



1. 2. Fragmentation toujours élevée

FRAGMENTATION TOUJOURS ÉLEVÉE 

Un paysage très fragmenté mais homogénéisé grâce à Android 

Terminaux (sous Android) 

Cette représentation montre de manière visuelle le niveau de fragmentation des terminaux pour l’OS Android. 

Elle n’a pas vocation à apporter d’informations chiffrées 

Source : OpenSignalMaps 



Ecrans : des proportions similaires qui tendent diverger 

Si globalement tous les smartphones ont une proportion hauteur/largeur proche, celle-ci tend à diverger avec les modèles les plus 

récents. A titre d’information, elle est de 1,5 sur les iPhones 3 et 4, de 1,66 sur les Samsung Galaxy S1 et S2 et de 1,77 (16/9) pour 

l’iPhone 5. 

Ces écarts doivent être pris en compte dans le cadre des sites web mobiles mais aussi des applications en vue de mutualisation de 

certains coûts de développements (ergonomie, design, montage…) 

Source : OpenSignalMaps 



Terminaux, OS* et navigateurs : la problématique se déplace des terminaux vers les OS 

• Terminaux… du mieux ! 

*OS = operating system i.e. 

système d’exploitation 

• La montée en puissance d’Android ainsi que l’accord Nokia/Microsoft ont permis de réduire le nombre d’OS majeurs 

présents sur le marché grand public 

• Là où il fallait parfois viser une multitude de terminaux, on peut aujourd’hui par exemple considérer qu’une 

application développée pour Android 2.1 fonctionnera sur tout appareil qui tourne sous Android 2.1 

Problématique modèle 

et marque 

Problématique OS et 

navigateur 

• Pour autant les OS et navigateurs sont toujours trop hétérogènes: 

• Le nombre de ces OS majeurs bougent encore, de nombreux projets sont annoncés ou ont été lancés (ex: TIZEN, 

BADA). 

• Par ailleurs les OS eux mêmes évoluent très fréquemment, et les mises à jour des utilisateurs ne sont pas 

toujours automatiques 

• Chaque OS utilise son propre navigateur Web: 

• Tous sont sensés afficher du web « universel » mais dès que l’on touche aux spécificités mobiles ou tactiles, il 

n’y a plus de standard 

• On se retrouve parfois à l’époque de Netscape où il fallait adapter ses pages à chaque navigateur, les tester et 

optimiser à chaque évolution 



France – Des parts de marché variables qui imposent de viser large 

• Les parts de marché des OS mobiles vont rester instables: 

• Le parc augmente vite (13 millions de smartphones vendus en 2012), et la concurrence est telle qu’il est difficile 

d’anticiper vers quel OS les utilisateurs vont se porter 

• Malgré leur prix et la baisse globale du niveau de subventions des opérateurs (notamment Free), le rythme de 

renouvellement reste rapide 

• L’OS n’est pas ou plus un critère d’achat (excepté pour une part de « Fans » d’Apple) 

100% 

Parc France - 

Estimations Smile basées sur 

ComScore, GfK, IPSOS 

80% 

Autres (dont Bada) 

60% 

Windows 

40% 

20% 

Blackberry 

Symbian 

Android 

? 

0% 

Q4 

2009 

Q2 

2010 

Q4 

2010 

Q2 

2011 

Q4 

2011 

Q2 

2012 

iOS 

Les chiffres communiqués publiquement sont très variables selon le fait qu’il s’agisse de parts d’audience, de sondages déclaratifs, de chiffres de 

ventes ou de base installée. Ici, nous avons tenté de synthétiser l’ensemble pour donner une vision du parc des terminaux en circulation. 

Aujourd’hui, viser Symbian n’est plus prioritaire (l’OS n’étant plus soutenu) et la question se pose pour BlackBerry en perte de vitesse. Sauf 

exception, nous conseillons généralement de cibler iOS, Android et Windows Phone (sans forcément respecter les principes ergonomiques très 

spécifiques de ce dernier). 



1. 3. Synthèse

SYNTHÈSE 

Vos clients et utilisateurs vous attendent déjà… 

Le mobile (web mobile et applis) est un canal privilégié… 

• 24h/24h près de soi – 17h/24h allumé 

• Plus personnel et précieux qu’un porte-monnaie 

• Connecté en continu et utilisé n’importe où et n’importe quand 

…largement adopté 

• 20 millions d’utilisateurs actifs en France dont 35 à 50% de quotidiens 

et spécifique 

• Répondant à des besoins et usages différents du web classique 

Vos utilisateurs s’attendent déjà à retrouver vos services et vos informations 

déclinés spécifiquement pour leur mobile 


SOMMAIRE 



1. Définition des objectifs et stratégies 

2. Site Mobile ou Application ? 

3. Une solution intermédiaire : la WebApp 





2. Démarche: pourquoi et quoi 

faire ? 

2. 1. Définition des objectifs et stratégies

DÉFINITION DES OBJECTIFS ET STRATÉGIES 

Définition des objectifs business pour aller au delà d’une simple « présence » 

• Un investissement sur le mobile doit être traité comme un projet informatique et non plus 

comme un « budget de communication » (i.e. achat d’espace publicitaire) 

• Ses objectifs sont donc à définir en amont afin de permettre l’élaboration d’une réelle 

stratégie et d’en mesurer le succès 

• Des analyses de cas montrent que de nombreux objectifs peuvent être adressés par le 

mobile: 

• Acquérir des clients 

• Vendre d’avantage, plus cher ou à moindre coût 

• Générer du trafic (purs players) 

• Fidéliser ses clients 

• Réduire ses coûts 

• Créer, renforcer, modifier son image 

• Jouer son rôle sociétal (institutions, associations) 



Définition d’une stratégie… Pensons « situation d’usage » 

Une fois le ou les objectifs définis, la stratégie à adopter peut être définie en suivant les trois 

étapes suivantes 

• La cible : 

• Mes clients ? Ceux des concurrents ? Les visiteurs de mes points de ventes ? Les internautes ? Les 

mobinautes ? 

• Ses besoins : 

• De quoi mon client / prospect a-t-il besoin sur son mobile ? 

• Comment va-t-il exprimer ce besoin ? 

• Sa situation d’usage: 

• Quand a-t-il une attente ? Chez lui depuis son canapé ? Dans la rue ? Dans le métro ? 

• Son besoin est-il urgent ? Contextualisé ? Fréquent ? 

• Comment va-t-il me chercher ou me trouver ? Google ? App Store ? 

Vous avez tous un smartphone, vous téléchargez des applications et 

naviguez sur Internet avec, mettez vous à la place de vos utilisateurs 



Cas d’entreprise : BNP – Un dispositif complet et segmenté 

• BNP propose diverses applications ayant chacune une cible, un objectif et un 

contenu dédié : 

• BNP « Mes comptes » : 

– Objectifs: fidélisation, accroissement de l’autonomie, communication 

sur produits et upselling sur clients grand public 

– Cible: principalement les clients particuliers BNP, mais certaines 

fonctions sont ouvertes à tous 

– Contenu: accès à ses comptes, virements – pour tous: simulateur de 

prêts/épargne, numéros utiles 

• BNP « Les Bons comptes » : 

– Objectifs: image et communication sur la marque 

– Cible: principalement jeune / dynamique (« WE entre amis ») 

– Contenu: outil de calcul de remboursement pour événement ponctuel 

entre amis 



Cas d’entreprise : E. Leclerc - Qui est le moins cher ? Une application marketing 

• E. Leclerc propose une application « marketing » basée sur une promesse très 

« grande distrib’ »: 

• Objectifs: communication, et prise de position sur les terminaux des 

consommateurs « Nous sommes les moins chers et allons le prouver » 

• Dispositif: une campagne de pub associée au lancement de l’application 

L’application devient le support de communication et la justification du 

message 



Cas d’entreprise : VEOLIA – L'eau chez vous : entre le marketing, le service et la 

rationalisation des contacts 

• Une application avec plusieurs objectifs, et plusieurs cibles 

• Objectifs initiaux: Information, communication, fidélisation: 

• Cible client connu: relevé, visualisation facture, paiement 

• Cible client inconnu ou prospect: qualité, prix et travaux en cours 

• Objectif secondaire de potentielle réduction de coûts: une part importante des appels au call 

center effectuée pour un relevé d’index ou paiement ainsi évitée 

23 



faire ? 

2. 2. Site Mobile ou Application ?

SITE MOBILE OU APPLICATION ? 

Site mobile Application « native » 

Comment les 

utilisateurs vous 

trouvent 

Navigateur 

+ 

Moteur 

= = 

Logique d’annuaire 

Stores 

Logique de rayons 

Enjeux 

SEO 

Site Web / URL connue 

Réponse rapide 

Tops ! 

Cohérence 

Classification 

Notoriété marque 

Comment ils reviennent 

sur votre « service » 

Icône 

Favoris ou raccourci (icône standard ou personnalisée) 

Les fonctions 

Web, contenus, transactions, paiement par CB, 

géoloc, interface tactile (partiele), en partie mode 

déconnecté (HTML5) 

Idem + Look & feel premium, paiement in-app., 

accéléromètre, contacts, vibreur, caméra, flash, 

d’avantage de puissance, mode full déconnecté, full 

tactile 



A adapter selon les usages 

e-commerce 

« besoin d’info »… 

…contextualisées 

réseaux sociaux 



Idéalement… les deux ! 

• Un exemple : « Paris Bouge » qui propose une version mobile de son site et une application 

Site mobile Installation application Application 

Le site mobile fournit les informations ET invite à 

télécharger l’application via un lien vers le store (ici 

exemple Android) 

Un utilisateur à la recherche d’une information urgente ira plus naturellement sur Internet pour effectuer une recherche (exemple ici: 

« Meilleurs bars Paris ») que sur un store pour rechercher une application. 

Mais un utilisateur habitué au site web de Paris Bouge, pourra avoir le réflexe d’aller rechercher le nom sur les stores. 

Le dispositif est donc double, pour cibler à la fois les « prospects » et les « fidèles ». 

Objectif: conquête 

Adresser une demande précise et urgente 

Objectif: fidélisation 

Simplifier la vie et offrir le service dans les meilleures 

conditions 



faire ? 

2. 3. Une solution intermédiaire : la WebApp

UNE SOLUTION INTERMÉDIAIRE : LA WEBAPP 

Présentation de la WebApp 

• Une webapp est une application web: 

• Accessible via une url et installée presque automatiquement 

• Consultable par smartphone, tablette, PC… 

• Evolutive sans mise à jour à effectuer via les store 

• Elle est adaptée aux écrans mobiles 

• Construite en une seule page: 

• Afin de concentrer le temps de chargement au départ 

• Et d’offrir des transitions rapides sans chargement lorsque l’utilisateur change d’écran 

• Fonctionne hors connexion sur la base des données stockées localement 

• App « capable » (mise en marque page) 

• Icône d’application 

• Mode plein écran 

• Des balises audios, videos et autres nouveautés 

Exemple: www.openappmkt.com 

Ce site (qui est aussi une webapp) est un équivalent de store 

pour installer via le navigateur des webapp HTML5 


SYNTHÈSE DES TROIS APPROCHES 

L’ approche sélectionnée devra avant tout répondre au besoin identifié 

Application WebApp (HTML5) WebMobile 

+ 

• Visible sur les stores 

• Mode déconnecté 

• Fonctions natives 

• Accessible via l’URL 

actuelle 

• Mode déconnecté une fois 

installée 

• Flexible 

• Accessible via l’URL actuelle 

• Flexible 

• Plus économique 

- 

• Installation 

• Gestion des différents OS 

• Evolution via mise à jour 

• Nécessite terminaux 

récents 

• Fonctions limitées (pas 

d’accès aux fonctions 

natives du terminal) 

• Connexion indispensable 

(3G/Wifi) 

• Fonctions limitées (pas 

d’accès aux fonctions 

natives du terminal) 


SYNTHÈSE DES TROIS APPROCHES 

Possibilités fonctionnelles et techniques 

Appareil photo numérique, gyroscope, carnet de contacts, calendrier, vibreur, compas, 

état du réseau, push de notifications 

Applications Webapp HTML5 Web Mobile 

Oui Non Non 

Géolocalisation Oui Oui Oui 

Fonctionnement hors connexion Oui Oui Non 

Stockage de grande quantités de données (système de fichiers) Oui Non Non 

Accès aux applications natives (liées à l'OS comme par exemple la galerie de photo sur 

iPhone) 

Oui Non Non 

Interfaces natives (boutons, listes, etc…) Oui Oui Oui 

Performances et fluidité (dignes d’un jeu par exemple) Oui Non Non 

Animations, gaphismes avancés Oui Oui Oui 

Vidéo, son, images Oui Oui Oui 

Accès via URL Non Oui Oui 

Accès via stores Oui Non Non 

Chargment en une seule fois Oui Oui Non 

Mise à jours type web Non Oui Oui 

Mise à jour via les stores Oui Non Non 


SOMMAIRE 




1. Conception fonctionnelle, ergonomique et graphique 

2. Focus sur la conception fonctionnelle 

3. Focus sur la conception ergonomique 

4. Site mobile 

5. Zoom sur le responsive design 

6. Applications 

7. WebApp 





3. 1. Conception fonctionnelle, 

ergonomique et graphique

CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE 

Trois approches – Démarche projet 

Application WebApp (HTML5) Site Mobile 

Conception 

• Fonctionnelle 

• Ergonomique 

• Graphique 

Etapes clés du projet 

• Création des écrans 

• Développements spécifiques 

« mobiles » (potentiellement en 

cross-platform) 

• Intégration des webservices 



« mobiles » 

• Intégration au back office de 

gestion de contenus 




• Paramétrage du back office et 

déploiement 

• Packaging, et adaptation aux OS 


déploiement 

• Distribution sur les stores 


CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET 

GRAPHIQUE 

Prendre le sujet dans le bon sens 

Objectif 

Design 

Ergonomie 

Au service de l’ergonomie et des usages 

- Rendre l’ergonomie lisible 

- Donner envie d’utiliser l’application 

Au service des contenus 

- Augmenter l’utilisation 

- Rendre intuitif, simple, efficace l’accès aux services et informations prioritaires 

Contenu 

Au service des usages et des objectifs du projet 

Exemple: 

Contre-exemple: 

La manette de Playstation 3 est belle, mais est avant tout conçue 

pour une prise en main parfaitement adaptée à un usage continu 

pendant plusieurs heures sans douleur aux doigts 

Ces deux sites mobiles proposent d’effectuer un 

drag’n’drop pour pouvoir accéder à une rubrique… un 

simple tap/clic aurait été plus efficace, logique et 

ergonomique 



3. 2. Focus sur la conception fonctionnelle

FOCUS SUR LA CONCEPTION FONCTIONNELLE 

Typologie des usages en mobilité 

• Le choix des informations et fonctionnalités à mettre à disposition de l’utilisateur de smartphone est à déterminer en 

fonction de ses besoins. Ceux-ci sont pourront être catégorisés en 3 à 4 grands groupes, en répondant à la question: 

Pourquoi, quand, où et comment un utilisateur a-t-il besoin d’accéder à mon site / service ? 

• La typologie de Google … 

• « Urgent now », « repetitive now », « bored now » 

• … Que Luke Wroblewski (auteur de « Mobile first » chez Eyrolles) reprend en : 

• Consulter / Rechercher : 

« J’ai besoin d’une réponse maintenant - et ici » 

Exemple: Où est ce restaurant ? A quelle heure est la séance ? 

Enjeu : proposer des modalités de recherche rapide 

• Explorer / Jouer 

« J’ai du temps et je m’occupe / je m’amuse » 

Exemple : Y a-t-il de nouvelles images du robot de la NASA ? 

Enjeu : Être ludique / proposer des poursuites de lecture 

• Vérifier / Checker 

« Un contenu est continuellement actualisé et je veux être tenu au courant des changements » 

Exemple : Roger Federrer est-il en train de gagner son match ? 

Enjeu : alerter, montrer les contenus chauds tout de suite 

• Editer / Créer 

« Je dois faire quelque chose qui ne peut pas attendre » 

Exemple : J’ai oublié de réserver ma place de concert! 

Enjeu : faciliter la saisie, les choix (formulaires) 


FOCUS SUR LA CONCEPTION FONCTIONNELLE 

Exemple de site mobile dédié : Krys – Des fonctionnalités clés 

Le site web de Krys est très riche et présente notamment les collections. Lors de la conception du 

site mobile, seules trois rubriques ont été mises en avant, mais celle-ci répondent précisément à des 

besoins en situation de mobilité: 

- Mes commandes – Suivre ses commandes: 

« Je ne suis pas loin de la boutique Krys, je vais vérifier si mes lunettes sont arrivées avant 

de m’y rendre » 

-Informations – Informations pratiques: 

« Mon fils vient de casser ses lunettes, étaient-elles garanties ? » 

- Trouver un magasin – Store Locator: 

« En vacances, où est le magasin le plus proche dans lequel Krys me réparera ma monture » 



3. 3. Focus sur la conception ergonomique

FOCUS SUR LA CONCEPTION ERGONOMIQUE 

A garder en tête 

« L’utilisateur de smartphone est un pouce et 

un œil » 

Bruits, mouvements, ensoleillement… l’utilisateur en 

mobilité est souvent dérangé et ne dispose pas 

toujours de sa totale liberté de mouvement 

(paradigme de la double tache) 

DIFFICILE 

ACCEPTABLE 

FACILE 

Facilités d’accès aux zones de l’écran 

avec un smartphone tenu de la main 

droite en position portrait : 



Privilégier le contenu aux liens 1/3 

Les liens prennent trop de place. Laissez d’abord 

vos utilisateurs lire, regarder, écouter. 

Ils approfondiront s’ils le souhaitent. 

Pousser immédiatement les contenus chauds, 

et laisser les liens et options de navigation 

accessibles à la demande 

Ne pas obliger l’utilisateur à passer par un écran 

intermédiaire 




Evitez les barres de navigation sandwich 

car elles occupent un espace de visibilité 

précieux sans que leur utilité soit garantie 

Un accès à l’ensemble des catégories / 

rubriques depuis toutes les pages n’est pas 

utile 




Facilitez les poursuites de lecture là où elles sont 

pertinentes (dans leur contexte), via des liens 

intelligemment placés après le contenu 

Laisser toujours le choix à l’utilisateur de 

poursuivre ou d’interrompre sa lecture 



Concevoir une charte de navigation simple 1/4 

Les utilisateurs sur mobile sont peu conciliants, pressés, et attendent une 

navigation facile à appréhender en situation de double tache. 

Brancher les liens sur les contenus pour économiser de l’espace et associer 

sémantique et navigation. Attention toutefois à ne pas en faire trop en branchant 

un lien sur de (trop) gros blocs de texte. 

OUI 

NON 




Le bouton « Retour » (back de 

l’historique) est inutile sur les 

terminaux autres que iOS, en revanche, 

le bouton de retour à la page mère est 

pertinent (en indiquant quelle est cette 

page) 

(Sur iOS, un bouton est disponible au 

niveau de la barre d’adresse du 

navigateur Safari, et donc également 

inutile sur les sites web-mobile) 

NON 

OUI 




Cacher le menu de navigation afin qu’il soit 

accessible à tout moment, sans pour autant 

occuper continuellement l’espace 




Utiliser la barre fixe dans le cas 

d’applications : 

• En haut (Android) qui a déjà des 

boutons natifs en bas… 

• Ou en bas (iPhone) 

Même si cette règle n’est pas universelle, il 

faut garder en tête ces potentiels réflexes 

d’utilisation 



Assurer la lisibilité 

• Rendre les textes lisibles avec des tailles 

de caractères suffisamment grandes 

• Proposer des zones actives de taille 

suffisante pour un pouce d’homme adulte 

• Adopter une organisation unitaire en 

ligne par ligne afin que la lecture et la 

manipulation soit simple et ne conduise 

pas l’utilisateur à commettre des erreurs de 

« tap » 



Tactile - Choisir les bons gestes 

Les smartphones sont caractérisés par leurs interfaces tactiles. Cette manière d’interagir est certes très intuitive, mais elle reste nouvelle pour le grand 

public. De nombreux types de gestes existent et peuvent encore être inventés ; mais l’ergonomie ayant pour vocation de simplifier et fluidifier l’usage, il 

faut les utiliser à bon escient. 

Les utilisateurs d’aujourd’hui ne connaissent pas encore toutes les subtilités possibles et aucune norme universelle ne s’est encore installée comme par 

exemple: 

- Le clic droit de la souris pour accéder à des options avancées 

- La croix qui indique la fonction de fermeture d’une fenêtre 

Ainsi, dans la liste des principaux gestes ci-dessous (issue de « Touch Gesture Reference Guide » www.lukew.com) nous conseillons de n’utiliser que 

ceux encadrés : 



Tactile - comment utiliser les gestes 

Même parmi les gestes simples, certains ne sont pas totalement intuitifs, il faudra les rendre lisibles… 

• C’est pourquoi nous avons encore besoin de boutons affichés dans l’écran et explicitement visibles pour les utilisateurs 

• Mais cela ne doit pas nous empêcher d’utiliser les gestes pour l’activation de raccourcis ou d’actions avancées pour un usage expert, 

en doublon des boutons disponibles à l’écran 

• Les gestes avancés deviennent donc des raccourcis au même titre que les raccourcis claviers ont envahis nos applications de 

bureautique 

Exemple: 

Sur l’application mobile de Facebook, la seule manière de supprimer un 

« statut » est actuellement d’effectuer un Flick sur son statut. 

Peu d’utilisateur le savent, ce geste n’étant pas universellement associé à cette 

fonction (http://www.youtube.com/watch?v=DRbca-0D5pM) 



Tactile - gérer l’absence de pointeur 

Pas de pointeur = pas de survol (roll-over) 

Les interactions disponibles via le survol dans les sites classiques doivent être totalement repensées sur le 

smartphone et sur les tablettes: 

Point d’attention: Les tablettes tactiles sont très majoritairement utilisées (>90%) à domicile, en remplacement du PC portable et 

très souvent pour naviguer sur Internet. La taille des écrans, puissance des appareils et des navigateurs permettent de consulter 

la plupart des sites sans problème technique particulier. Néanmoins, les ergonomies bâties sur des roll-overs ne pouvant être 

rendues, les sites sont parfois totalement inutilisables à cause de ce point de détail. 

Quelques approches: 

• Afficher directement les contenus dans l’écran car ces contenus sont jugés bien trop importants pour l’utilisateur 

• Les insérer dans l’écran par un geste (tap, press, flick) permet de conserver leur affichage contextuel au coté des contenus de 

l’écran (le plus simple étant généralement d’autoriser un tap pour activer l’effet du roll-over) 

• Les afficher sur un écran séparé car la quantité de contenu est trop importante et ces contenus ne peuvent pas être tronqués 

• Ne rien faire car les contenus sont secondaires et que l’utilisateur peut aisément s’en passer 

En règle générale: sur un site grand-public, l’utilisateur doit pouvoir se passer de l’interaction de survol à moins de n’avoir 

développé une version dédiée aux tablettes. Cette remarque est d’autant plus importante pour les sites de e-commerce! 



Saisie sur mobile 

Malgré les innovations sur les claviers, la reconnaissance d’écriture ou 

autre technologie, la saisie sur Smartphone reste délicate et doit donc 

être simplifiée 

• Ne garder que ce qui est essentiel et supprimer le reste 

• Présentation en ligne par ligne avec le label au dessus - ou dans le champ 

de saisie 

• Pré-formater la saisie selon le type de donnée attendue (alphabétique, 

numérique, email, url, …) et le nombre de caractères (année, numéro de 

téléphone, …) fera gagner beaucoup de temps à vos utilisateurs. 

• Utiliser les claviers adaptés en donnant accès directement aux caractères 

utiles tels que @ 

• Utiliser des masques de saisie pour guider l’utilisateur sur les données 

attendues 

• Utiliser des valeurs par défaut lorsque cela a du sens et répond à la majorité 

des cas d’utilisation (ici, exemple pour une application de réservation d’hôtel 

booking.com) 

• Exploiter les capacités des smartphones : géolocalisation, caméra, 

microphone 



Sélection de données 

Autant que possible, remplacer la saisie d’une donnée par la 

sélection 

• Créer des contrôles spécifiques pour remplacer efficacement les 

contrôles standards : slider, boutons +/-, calendrier, … 

Plus facile de faire glisser son doigts, de taper rapidement au même endroit, 

ou de choisir directement une valeur que de taper une zone de saisie, puis 

taper sur son clavier 

… En plus des adaptations déjà prédéfinies par les plateformes 



3. 4. Site mobile

SITE MOBILE 

Les étapes de création d’un site mobile débutent par les écrans 

1 

Création des écrans 

Site Web 

Site 

Site 

Site Mobile 

Mobile 


La première étape de développement du 

site mobile sera la création des écrans 

Le site web mobile s’appuiera généralement sur le même 

back-office et de préférence les mêmes contenus que le 

site classique. 

Back-office de gestion de 

contenus 

(CMS, e-commerce, portail, …) 

… 


SITE MOBILE 

Création des écrans : options et contraintes 

• La méthode de création des écrans d’un site mobile dépend de l’outil utilisé pour gérer les contenus (CMS) du 

site web classique. Selon l’outil et ce qu’il propose, mais aussi selon l’ergonomie, les contenus et le design ciblés, 

on se portera plus ou moins vers des fonctionnalités standards de création voire de duplication du site web: 

• Thèmes / vues standards: 

– L’outil propose en standard une version mobile avec des gabarits ou vues utilisées 

pour le site web classique (implique un site web classique construit sur ces mêmes 

standards) 

– L’arborescence du site mobile sera donc identique à celle du site web classique 

– L’ergonomie et le design sont imposés par les thèmes 

• Gabarits dédiés: 

– On développe dans la logique de l’outil un nouveau jeu de « gabarits » 

– L’ arborescence du site mobile sera donc identique à celle du site web classique 

• Ecrans totalement spécifiques: 

– On construit les écrans de bout en bout et on peut donc sélectionner les contenus à 

mettre en avant ou non 

• Dans tous les cas, le montage des écrans devra idéalement se faire en 

« adaptatif », les écrans étant adapté en largeur à la taille de l’écran: 

• Toutes les tailles et proportions d’écrans différents 

• Les deux orientations (paysage / portrait) 

• Potentiellement les nouveaux et futurs appareils 


SITE MOBILE 

Création des écrans : problématique de compatibilité des navigateurs 

• Même si on parle de Web, et donc théoriquement de technologies universellement 

interprétées par les navigateurs, des écarts subsistent. 

• Interface tactile: 

• La détection des « événements » tactiles n’est pas homogène d’un navigateur à l’autre 

• Chaque navigateur (i.e. ~chaque OS) nécessitera donc un développement spécifique sur la partie 

IHM (Interface Homme Machine) tactile 

• Interprétation du code HTML5 / CSS3: 

• L’HTML5/CSS3 permet d’enrichir les rendus, de proposer des animations et des interfaces riches et 

esthétiques 

• La future norme n’étant pas encore validée, le niveau de compatibilité est variable d’un navigateur 

à l’autre 

• Des ajustements seront donc également nécessaires, notamment en vue d’éventuelles versions 

dégradées 

Retour à l’époque où il 

fallait gérer des 

navigateurs très 

différents… 


SITE MOBILE 

Intégration et déploiement 

1 


Site Web 

1 

Site 

Site 




2 

2’ 



• Intégration de contenus dédiés 

mobile 

2 

3 


déploiement 

Back-office de gestion de contenus 


2’ 

L’intégration au backoffice n’est pas spécifique au 

mobile et correspond au travail classique de 

dynamisation des contenus. 

Il peut parfois être obligatoire de créer des contenus 

spécifiques au mobile. 

3 

Le back-office et le serveur doivent être paramétrés 

pour détecter les « user-agent » et rediriger 

l’utilisateur vers le bon site. 



3. 5. Zoom sur le Responsive Design

ZOOM SUR LE RESPONSIVE DESIGN 

Principe du Responsive Design 

• Définition (wiki): la notion de Responsive Web Design regroupe différents principes et technologies permettant de 

concevoir un site pour qu’il s'adapte aux différentes tailles d'écran et aux différents terminaux 

• Il s’agit donc: 

• 1 page unique pour l’ensemble des terminaux (une seule contribution, administration, hébergement, URl, etc.) 

• 2 à 3 ergonomies différentes par page : [desktop-souris / tablette] / smartphone 

• Exemple www.sony.com: 

• Construit sur la base d’une image de fond, puis de 4 colonnes de contenus (dont une double), le site s’adapte 

passant à 3 colonnes puis 2 en fonction des versions 

• Le point intéressant étant ici les éléments de navigation qui se regroupent dans des menus déroulants de navigation 

Desktop Tablette Smartphone 

60 


ZOOM SUR LE RESPONSIVE DESIGN 

Création des écrans avec le Responsive Design 

Site Web.. tablette et mobile 

Dans le cas d’un développement complet de site (version classique 

desktop, tablette et mobile) le responsive design est une approche 

intéressante permettant d’éviter de devoir créer des écrans dédiés 

au mobile voire aux tablettes. 

Colonne 1 

Colonne 2 

Colonne 3 

Bloc 1 

Bloc 2 

1 

Site 

Site 




1 

Création des écrans 

Back-office de gestion de contenus 


A défaut de versions spécifiques en fonction de l’appareil 

visé, les contenus sont organisés sur les pages web afin 

qu’ils puissent s’arranger en fonction de la taille de l’écran 

cible. 

… 


FOCUS SUR LE RESPONSIVE DESIGN 

Le Responsive Design : avantages / inconvénients 

+ 

Mais 

Réflexion 360° 

• « Think mobile first » 

• Une démarche saine qui invite à des choix 

• Et débouche sur une vision éclairée 

Travaux de conception accrus 

• Ergonomie, design, montage plus longs = plus cher ! 

• Poids des pages potentiellement élevé (contournements 

potentiels) 

• Une seule arborescence, une seule page (pas de 

séparation ni de fusion) 

Accès multi-terminal 

• Ergonomie optimisée 

• Efficacité optimale 

• Image de modernité 

• Une seule adresse internet 

• Evolutif 

• Un seul back office 

Supporté uniquement par les navigateurs récents 

• Internet Explorer 9+ (version courante 9) 

• Chrome 4+ (version courante 21) 

• Firefox 3.5+ (version courante 15) 

• Opera 9.5+ (version courante 12) 

• iOS 3.2+ (version courante 6) 

• Android 2.1+ (version courante 4) 



3. 6. Applications

APPLICATIONS 

Les étapes de création d’une application débutent par les écrans 

1 Création des écrans 

Ecrans 

Site 

Site 

mobiles 




contenus 

(CMS, e-commerce, portail) 

La création d’une application débute également par les écrans. 

Néanmoins, dans le cadre d’une application, le champ des 

possibilités est plus large que pour les sites ou webapps d’un point 

de vue ergonomique, graphique mais aussi fonctionnel. 

SI Métier (CRM, ERP, BI, 

spécifique, etc.) 

Cette phase de création des écrans sera à précéder d’une phase de 

conception réellement poussée afin de permettre ensuite la création 

d’écrans totalement dédiés. 


APPLICATIONS 

Puis les développements et l’intégration 


Ecrans 

Site 

Site 

mobiles 



2 

3 


« mobiles » (cross-platform) 



contenus 


Webservices 

3 

Développements 

spécifiques mobiles 

2 



La partie développement est totalement spécifique au 

mobile. Plusieurs approches sont disponibles, dont le 

« cross-platform » que nous développons dans la partie 

suivante de ce guide. 

L’intégration, dynamisation des contenus et mise en place de 

fonctions transactionnelles passera dans une très grande 

majorité des cas par des webservices. 


APPLICATIONS 

Packaging et déploiement 


Ecrans 

Site 

Site 

mobiles 




« mobiles » (cross-platform) 



contenus 


Webservices 

Développements 

spécifiques mobiles 

4 

5 

• Packaging, et développements 

spécifiques par OS 

• Distribution sur les stores 



4 

5 


APPLICATIONS 

Conception : le fonctionnel avant tout 

• Une évidence parfois oubliée: 

• Une belle appli qui ne sert à rien ou ne fonctionne pas bien sera désinstallée… 

• Une appli utile mais moche sera critiquée mais utilisée… puis applaudie le jour de son lifting! 

• Votre application sera en concurrence avec 500 000 autres et les places sur la page de 

raccourcis de l’utilisateur sont chères, donc: 

• Pensez simple, efficace, intuitif 

• Préparez vous à la faire évoluer, à riposter… 

• Offrez des possibilités de personnalisation c’est-à-dire permettre d’adapter l’application aux usages individuels 

• N’utilisez une fonctionnalité que si elle apporte vraiment quelque chose (accéléromètre, facebook connect, son, 

caméra, géolocalisation…), l’époque des « gadgets » est révolue 

• Pensez aux situations d’usage et aux « objets / services » concurrents 

• Si vous ne rendez pas un service très spécifique voire unique, 

vous devrez faire mieux que les autres, notamment les acteurs couvrant un périmètre plus 

large: 

• Une application de news sera concurrencée par les agrégateurs de flux dont c’est le cœur de métier (ex: Pulse) 

• Une application donnant les séances de cinéma pour une enseigne ou une ville sera concurrencée par 

l’incontestable leader: Allociné 

• De même pour un agent immobilier avec SeLoger.com 


APPLICATIONS 

Développements : les spécificités du mobile 

• Multiplicité des OS: un développement par OS ou une solution cross-platform ? 

• A moins de vouloir faire un Angry Birds (jeu phare sur smartphone le plus vendu)… 

• … le cross-platform est une bonne idée (cf. partie suivante) 

• Nouvelles fonctionnalités dites « natives » à prendre en main: 

• APN, gyroscope, vibreur, GPS… 

• Type de connexion, mise en veille, tâche de fond, réveil, stockage local, synchronisation, consommation… 

• API externes (Google Maps, Facebook, etc.) 

• L’impact du réseau: 

• Toute application connectée sera dépendante du réseau mais devra être capable de fonctionner dans des conditions 

dégradées 

• La conception technique d’une application mobile implique de gérer une multitude de cas à la marge: 

– J’ai lancé une synchro, qui s’est arrêtée en route… 

– Pas de réseau et des infos non à jour, que dois-je afficher ? 

– Connexion en EDGE, comment optimiser l’expérience utilisateur… 

– Je dois afficher une carte, mais je ne capte pas le signal du GPS… 

– Le webservice ne répond pas… 

– Etc. 


APPLICATIONS 

Tests et recette : rester pragmatique 

• Développements sur simulateurs: 

• Les développements étant réalisés dans des simulateurs et le fonctionnel d’une appli mobile étant souvent découpé 

en écran/fonction, les premiers tests unitaires peuvent être menés tout au long du projet 

• Certains outils de développements (PhoneGap par exemple) sont ancrés dans une logique très web et permettent 

également de tester l’application comme une application web classique dans un navigateur, ce qui permet assez 

rapidement de multiplier les OS (IE -> Windows; Safari -> iOS; Chrome -> Android) 

• Mener une recette sur l’exhaustivité des terminaux est impossible: 

• Les émulateurs ne sont pas forcément une approche valable notamment de part l’absence des fonctionnalités 

natives, l’absence des aléas réseau et une puissance de calcul non équivalente 

• Des solutions de tests à distance (terminaux physiques mis à dispositions et pilotés à distance) existent mais les 

contraintes de disponibilité, l’absence d’informations sur les réelles conditions d’usage et le manque de flexibilité 

n’en font pas une réponse adaptée à la problématique de la recette sur mobiles 

• La seule approche valable reste donc le test de bout-en-bout sur des terminaux grand public: 

– Un pool de terminaux (15 – 20) permet de couvrir une grande majorité du parc 

– L’absence de fonctions trop exotiques limite également les mauvaises surprises 

– Les conditions de tests doivent être le plus proche possible des situations d’usage escomptées: 

‣ Terminaux non jailbreakés (dévérouillage de l’OS) 

‣ Niveau du réseau qu’il s’agisse d’une application ayant vocation à être utilisée en extérieur ou dans les transports 

‣ Prise en compte du soleil pour le design, de l’usage à une main, d’une utilisation en public 

• Quelque soit la solution et le temps passé en recette, il y aura toujours des surprises! Celles-ci seront 

l’occasion de faire évoluer l’application et de tenir compte des différents retours! 


APPLICATIONS 

Validation et distribution 

• Validation par les « stores »: 

• Selon les OS, le process de validation est plus ou moins opaque, long, complexe, changeant et incertain 

• Certaines conditions peuvent avoir un impact majeur dès la phase de conception de l’application 

• Sur iOS, process le plus long, il faut compter jusqu’à 3 semaines 

• Anticiper la distribution: 

• Créer les comptes en avance… 

• Trouver un titre, identifier la catégorie, les concurrents directs 

• Préparer les descriptifs (captures d’écran, descriptions) 

• Benchmarker les mots clés et les recherches 

• Référencement et tops: 

• La présence sur les stores ne garantit en rien la visibilité d’une appli, son indexation est donc primordiale 

• Mais les moteurs de recherche des stores sont encore en évolution et les critères restent très opaques, néanmoins, quelques 

idées : 

– Mentionner des applis complémentaires et populaires 

– Intégrer des mots clefs dans le titre de l’application 

– Eviter les noms trop « conceptuels » 

• Une présence prolongée dans les tops 50 dominés par les jeux et les pure players est globalement inespérable mais connaître 

les règles reste utile: 

– iOS: règles opaques, basées à priori sur les téléchargements (sur une période donnée) et sur les notes des utilisateurs 

– Android: tout aussi opaque mais prenant en compte le nombre et la qualité des notes, le nombre d’installations ET des 

désinstallations, les statistiques d’usage, la croissance du nombre de téléchargements et la pérennité de ces volumes 

– Effectuer des mises à jour permet de remonter l’application dans les « nouvelles applications » 


APPLICATIONS 

Un effort dans la durée… 

• Un projet d’application mobile ne s’arrête pas lors du lancement sur 

les stores. L’ecosystème mobile permet et impose de faire évoluer 

ses projets: 

• Exposition forte à la critique 

• Evolution constante du paysage 

• Quelle que soit la cible: tenir compte des retours et faire évoluer: 

• Recueillir et suivre les feedbacks des utilisateurs (notamment 

commentaires sur les stores) 

• Tracker et analyser l’utilisation (construire en amont un plan de tagage) 

• Enrichir, faire évoluer, se remettre en question (veille active des 

applications concurrentes) 

• Communiquer sur ses mises à jour 

• Veille technologique et suivi des évolutions du paysage: 

• Les applications sont reliées à tout un écosystème (Facebook, Google 

Maps…) qui évolue constamment 

• Les OS sont aussi régulièrement mis à jour et à chaque fois des tests 

s’imposent 

Campagne Société Générale 

Source: 20 Minutes 



3. 7. WebApp

WEBAPP 

Les spécificités 

1 


Site Web 

WebApp 

1 

Site 

Site 




2 

2 

3 

• Développement spécifiques 

« mobile » 



3 

3’ 

• Intégration de contenus dédiés 

mobile 

3’ 

4 


déploiement 


contenus 


4 

Les étapes pour le développement d’une 

webapp sont globalement les mêmes que pour 

un site mobile. 

Elle nécessite néanmoins certains 

développements spécifiques et surtout une 

approche très différente sur sa construction (cf. 

pages suivantes) 


WEBAPP 

Les technologies utilisées 

• HTML5 

• Stockage local 

– session storage / local storage 

– base de donnée locale 

– App Cache 

• Web sémantique avec de nouvelles balises: section, article, aside, 

header, footer, nav… 

• Balises video, audio, canvas… 

• CSS3 

• Effets 

• Transitions 

• Styles poussés sans image 

• JavaScript 

• Cœur de l’application 


WEBAPP 

Les limites 

• Techno non encore standardisée 

• Nécessite un navigateur récent… 

• … et tous les navigateurs ne réagissent pas 

encore de la même façon 

• Un paysage évoluant constamment, cf. niveau 

de compatibilités sur http://caniuse.com/ 

• Des adaptations de style à prévoir selon les navigateurs et OS 

• Pour IE et Windows Phone notamment… 

• Mais des « Polyfills » (contournements) sont utilisables 

• Des bibliothèques pour amener le futur dans le passé ! 

• En apportant un support partiel ou un mode dégradé des fonctionnalités HTML5 non 

supportées par des navigateurs anciens 


WEBAPP 

Une solution pour demain ? 

• Un exemple: le Financal Times qui a quitté l’appstore (en mettant en place 

sa webapp accessible depuis le web): 

• Pourquoi fuir l’Appstore 

– 30% de commissions Apple 

– Pas d’accès direct au client (ni à ses données) 

• Est-ce efficace ? 

– Deux millions d’utilisateurs 

– 12% des abonnement payants, 

– 19% du trafic 

– ½ des utilisateurs ont ajouté l’icône au bureau 

• L’option webapp et donc la sortie du business model des stores permet : 

• D’éviter la « taxation » en cas de monétisation de contenus 

• D’offrir des contenus plus évolutifs sans avoir à passer par des mises 

à jour 

• Une compatibilité théorique avec tous les OS 

• Pour demain: 

• Logique de client « léger local » moderne et particulièrement 

adaptée 

• Des fonctionnalités nouvelles tous les jours… bientôt l’accès aux API 

natives (Projet WebApi de Mozilla) 

• Mais: 

• Des performances encore inférieures à des applications « natives » 


SOMMAIRE 





1. Principe 

2. Ergonomie et design 

3. Développements et solutions cross-platform : Phonegap et Titanium 

4. Retours d'expérience techniques 



4. Le "cross-platform" 

4. 1. Principe

CROSS-PLATFORM 

Contexte 

Principe 

Il faut veiller à ce que le site mobile et/ou l’application soit compatible avec les différents OS disponibles sur le marché. Sur 

terminaux mobiles, à chaque OS correspond un langage, des règles de compatibilité, un SDK (kit de développeur) et un 

processus de distribution spécifique… Les solutions cross-platform open source (aussi appelées multi-plateformes) telles que 

Titanium ou PhoneGap, visent à répondre à la problématique de l’absence de standards de développement dans le monde du 

mobile. 

• Multiplicité des OS 

• Evolution rapide du parc 

• Hétérogénéité des langages 

• Non stabilisation des OS 

• Caractère propriétaire et fermé 

• Absence de standards 

• Amélioration et standardisation du web mobile 

• Business-model des applications verrouillé 

Dilemme 

• Investir dans des développements « natifs » sur mobile 

parait de moins en moins pertinent par manque de: 

• Pérennité 

• Maintenabilité 

• Réversibilité 

• Couts 

Solution 

1. S’orienter vers des solutions cross-platform: 

• Viser plusieurs OS en 1 développement, c’est LA 

promesse des outils de développement cross-platform 

• Utiliser des langages issus du web, standardisés et 

pérennes 

• Choisir des solutions open-source 

2. Opter pour du web mobile ou des webapp: 

• Langages universels 

• Couverture théorique de tous les OS 

• Liberté du business model, absence d’intermédiaire 



4. 2. Ergonomie et design

ERGONOMIE ET DESIGN 

Et l’expérience utilisateur ? 

• Malgré les écarts d’apparence parfois constatés entre des applications iOS et 

Android les applications cross-platforms peuvent l’être avec une seule 

ergonomie et design 

• Les ergonomies mobiles et tactiles sont encore très variées mais des principes 

sont devenus universels: 

• Un large dénominateur commun existe entre tous les OS: 

– Structure de mise en page 

– Gestuelles 

– Taille des zones cibles 

– Organisation des contenus 

– Principes de boutons, onglets, transitions, guides visuels 

• Les grands principes d’ergonomie évoqués dans ce guide sont également 

tous « cross-platform » 

• Une charte graphique neutre peut également être choisie: 

• Ni stylé iOS, ni Android, ni Window Phone 

• Des grandes tendances se dégagent entre ces OS 

• Certaines librairies / framework ont fait leur preuve : sencha, jquery 

• Mais le mieux reste de définir soit même en CSS3 sa propre charte ! 

Exemple issus de Sencha et jQuery 


ERGONOMIE ET DESIGN 

Exemples d’ergonomies cross-platform : Facebook et Allociné 



4. 3. Développements et solutions 

cross-platform : Phonegap et Titanium

DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : 

PHONEGAP et TITANIUM 

Part de spécifique vs tronc commun 

• La promesse : 

• Un seul code 

• « n » plateformes cibles 

• Simple à maintenir et faire évoluer 

Deux outils choisis par Smile 

• En pratique : 

• Des technos web : faciles à prendre en main 

• Un tronc commun (80% du code) 

• Des adaptations à faire pour chaque plateforme cible : gestion du bouton retour pour Android et 

Windows Phone, Push de notifications… 

• Estimation de charge de développement: 

• Si le développement d’une appli native nécessite « Y », le développement de la même appli en natif 

pour « n » OS coutera approximativement « n x Y » 

• Le même développement en cross-platform coutera entre « (n x Y) / n » et « (n x Y) / (n / 2) » selon 

les spécificités des fonctionnalités utilisées (ex: calibrage du gyroscope, utilisation de la caméra, 

etc.) 

• Autrement dit, le cross-platform est financièrement intéressant au-delà du deuxième OS, mais dès 

le départ il assure une bonne pérennité et maintenabilité du code 



PHONEGAP et TITANIUM 

PhoneGap (Cordova) : le « packageur » 

PhoneGap utilise le moteur de rendu HTML / CSS / JavaScript du navigateur natif de la 

plateforme cible. 

• Poids des applications léger 

+ • Moteurs d'exécution et de rendu déjà intégrés 

- 

• Nombreuses plateformes supportées 

• Différences de moteurs entre certains terminaux, 

induisant un travail d’adaptation des présentations 

Les applications mobiles de 

Wikipedia ont été développées 

avec PhoneGap 

La NASA utilise PhoneGap pour 

son application iPad Nasa Science 



PHONEGAP ET TITANIUM 

Titanium : le « traducteur » 

Titanium est un kit de développement éprouvé pour créer des applications 

natives iOS et Android. 

+ 

• Maturité du projet 

• Communauté 

• Spécialisé dans le rendu natif des interfaces 

• Applications puissantes et rapides en comparaison à 

d’autres outils cross-platform 

• Applications natives 

- 

• Montage des application complexe 

• Difficulté à s’éloigner du rendu natif des 

interfaces 



PHONEGAP ET TITANIUM 

Les tests cross-platform : communs et particuliers 

• Des montages et développements testés sur navigateur web 

• Pour une plus grande simplicité de débogage et de déploiement 

• Des tests sur simulateurs 

• Pour que les tests sur matériel ne soient qu’une validation 

• Des tests sur matériel 

• A chaque version il faut générer l’application pour chaque OS… 

• Croisements OS, versions et terminaux avec ciblage pragmatique 

• Tests unitaires sur terminaux durant la phase de développement 

• Des tests « on the fly » pour le client (TestFlightApp pour iOS, dépôt web pour 

Android…) 

• Pour éviter l’effet tunnel 



4. 4. Retours d'expérience techniques

RETOURS D'EXPÉRIENCE TECHNIQUES 

PhoneGap (Apache cordova) 

• Des « - » 

• Des interfaces non-natives, privilégier des interfaces uniformes entre les OS 

• Se méfier des librairies graphiques (type jQuery Mobile) dont il est difficile de sortir. 

Mieux vaux s’en passer et faire un montage et une création graphique dédiée 

• Un outil très complet, mais bien sûr en cours de développement. De nouvelles 

fonctionnalités sont supportées au fur et à mesure 

• Des « + » 

• 7 plateformes supportées : un gain de temps considérable 

• Une prise en main rapide : développement JS, HTML5, CSS3 

• Une grande liberté : plugins, JS, etc. 

• Outil « PhoneGap Build » qui peut se charger de la génération des applis (mais le code 

est dans le cloud…) 


RETOURS D'EXPÉRIENCE TECHNIQUES 

Titanium 

• Des « - » 

• Seulement 2 plateformes supportées, mais les principales : iOS, Android 

• Un manque d’outil de gestion d’interface/layout 

• Des mises à jour qui peuvent impacter lourdement les développements (une 

application développée avec Titanium 1.5 ne compilera pas sous Titanium 2.0) 

• La documentation… 

• Des « + » 

• Des interfaces natives 

• De nombreuses fonctionnalités gérées par le SDK (Push, intégration Facebook, etc.) 

• Une communauté active et des plugins 


SOMMAIRE 






1. Présentation 

2. L'approche sur mobile 


5. L'approche de Smile 

5. 1. Présentation de Smile

PRÉSENTATION DE SMILE 

21 ans 

d’expérience 

1 er intégrateur de 

solutions open 

source 

en Europe 

Plusieurs gammes 

de solutions 

• Gestion de contenu 

• Portails 

• Développement spécifique 

• E-Commerce 

• ERP/ CRM 

• GED/BPM 

• Mobile 

• Décisionnel 

• Système & Infrastructure 

• RSE 

45 

8 

8 

CA 2012 

M€ 

+20% de croissance 

Plusieurs métiers 

agences en France 

Paris 

Lyon 

Nantes 

Bordeaux 

Montpellier 

Marseille 

Lille 

Grenoble 

agences internationales 

Genève 

Barcelone 

Casablanca 

Kiev / Kharkov 

Amsterdam / Utrecht 

Bruxelles 

Quelques-unes de nos 

références Mobile 

Krys, Mazars, TDF Cristal, Veolia eau, JC Decaux, 

Evian Master, Melody Healthcare, SPIE… 

Une vision 

simple, utile & performant 

Agence interactive 

Ingénierie Internet 

Conseil et AMOA 

Design & Graphisme /SEO 

Maintenance (TMA) 

Hébergement & exploitation 

Formation 

600 

Collaborateurs 


5. L'approche de Smile 

5. 2. L'approche sur mobile

L'APPROCHE SUR MOBILE 

Une approche orientée vers l'avenir 

• En tant que spécialiste de l’open-source Smile a adopté sur mobile un 

positionnement assez spécifique avec pour objectif de garantir à ses clients les 

avantages et la philosophie de l’open-source: 

• Standardisation 

• Accessibilité / lisibilité du code 

• Outils évolutifs 

• Langages universels 

• En pratique, Smile a investi en R&D afin de concrétiser ce positionnement: 

• Etude et suivi de nombreux outils, pour finalement s’arrêter sur: 

– PhoneGap 

– Titanium 

– Sencha 

– jQuery / jQuery Mobile (même si quelques bémols sur ce dernier en terme de 

performance notamment) 

• Développement d’une expertise ergonomique et graphique volontairement neutre 

• En tant que leader de l’intégration de projets web, nous restons convaincus que 

l’avenir du mobile passera majoritairement par le web, sous forme de sites 

mobile, de sites en full responsive design et surtout de webapp HTML5: 

• Fortes compétences HTML5, CSS3, JS 

• Expertise fonctionnelle orientée usages 

• Ergonomie et design aux services de l’utilisation 

• Approche technique et fonctionnelles cross-canal 


L'APPROCHE SUR MOBILE 

La technique au service de l’utilisabilité... sur le mobile aussi 

• La fin de l’époque des projets « jetables » ou « pour voir » 

• Investissements plus conséquents entrainant des approches plus ROIstes 

• Enjeux techniques plus élevés dès lors qu’il faut authentifier, renseigner, informer dynamiquement, 

acheter, etc. 

• Des projets de plus en plus intégrés (contenus, SI métiers, Api externes) et complexes qui 

nécessitent : 

• Un expertise transverse du web 

• Des compétences techniques variées (back office, intégration, interfaçage, sécurisation) 

• Des méthodologies projets éprouvées 

• Un partenaire solide 

• Opter pour une approche du mobile raisonnée et pragmatique via le cross-platform 

• Réconcilier la créativité, l’ergonomie et le graphisme avec la technique via un acteur 

intégrant les deux sensibilités

LB_Smile_Guide du chef de projet Mobile

Create successful ePaper yourself

Delete template?

Save as template?