Depuis l'avènement du premier iPhone, les smartphones ont envahi notre quotidien. En tant qu'utilisateurs, ils nous rendent de nombreux services. Mais pour les développeurs web, ils ont complètement changé la manière de voir et de faire le web. Par Mathieu Parisot, Soat expert.

Une révolution pas si lointaine

Si l'on prend le temps de s'arrêter quelques minutes pour regarder en arrière, on se rend compte de la vitesse à laquelle le phénomène smartphone a tout chamboulé sur son passage. En 5 ans, les versions de téléphones et des systèmes qu'ils embarquent se sont enchaînées à une vitesse enivrante.

Un autre constat que l'on peut faire est que la phase de maturité semble atteinte. Les différences entre les téléphones se sont réduites et les dernières versions des systèmes d'exploitation semblent marquer un jalon important vers la stabilité.

Android 4 puis 4.1 visent à réduire fortement la fragmentation des versions et met en avant Chrome en tant que navigateur.

Windows Phone 8 doit marquer le vrai retour de Microsoft sur le marché des mobiles après une version 7.5 qui a eu du mal à convaincre le grand public.

BlackBerry Os 10 doit également marquer le retour de la firme sur le marché des smartphones.

Enfin, iOS 6 et l'iPhone 5 n'ont pas autant impressionné que d'habitude. De nombreuses personnes y voient déjà le déclin de la marque à la pomme après la mort de son héros, mais il s’agit plus probablement d’un autre signe que le marché arrive à maturité et qu'il est dorénavant plus difficile d'innover réellement.

Qui se transforme en course à l'armement

Finalement, les évolutions des dernières générations de téléphones se sont faites au niveau technique.

Plus légers, plus fins, plus autonomes, des écrans plus grands et surtout des téléphones beaucoup plus rapides.

La différence de vitesse entre un iPhone 4 et un iPhone 5 est assez impressionnante. Et de manière globale, les téléphones haut de gamme sont en train d'atteindre une puissance qui les rapproche des performances d'un ordinateur de bureau pour afficher un site web.

En parallèle de tout ça, la 4G et ses promesses de véritable haut débit se rapprochent à grands pas.

Et le web mobile dans tout ça ?

Mais pourquoi toutes ces considérations dans un article sur le web mobile ?

Tout simplement parce que cette maturité est également en train de marquer un tournant pour le web mobile.

Les premières générations de smartphones sont en fin de vie et seront remplacées par des téléphones plus rapides et surtout ayant fait de gros progrès au niveau implémentation des standards du web.

En effet, dans l'inconscient collectif, les smartphones sont indissociables du HTML5 ; principalement depuis le refus catégorique de Steve Jobs d'intégrer Flash sur iPhone.

Un tour de force si l'on regarde l'état du support HTML5 sur iPhone à cette époque, moins d'un tiers des principales fonctionnalités étaient supportées.

C'est cependant suffisant pour offrir une expérience assez sympathique aux utilisateurs de votre web. Encore plus à l'heure actuelle où, comme je le signalais juste avant, des progrès considérables ont été accomplis dernièrement..

Le web mobile et ses utilisateurs

Mais au final qu’entend-on lorsque l'on parle d'expérience sympathique ou « riche » dans le jargon informatique ?

Pour la seule personne qui importe, l'utilisateur de votre site, c'est un site web qui lui offre les mêmes possibilités et la même expérience utilisateur que les applications natives qu'il a l'habitude d'utiliser au quotidien.

Cela pose de nombreuses contraintes dans un univers assez hostile et contraignant tel que le développement web sur mobile.

Les contraintes du web mobile

La première contrainte est la nature même des téléphones : ils sont mobiles. Or, pour faire du web, en principe, il faut être connecté à Internet. Il faut donc anticiper des pertes de réseau arrivant potentiellement à n'importe quel moment. Et contrairement à une application native pensée pour fonctionner hors ligne, un site est pensé pour fonctionner en mode connecté.

La deuxième contrainte est le réseau. Avec l'arrivée du haut débit dans de nombreux foyers, les développeurs web ont, pour la plupart, clairement perdu de vue les problématiques de bande passante. On trouve sans trop de problèmes des sites faisant plusieurs méga octets. Cependant sur un téléphone, même en 3G+, les sites dépassant quelques dizaines d'octets commencent à poser problème.

Mais le réseau, ce n'est pas seulement les problèmes de débit, c'est également les problèmes de latence. Chaque requête au serveur peut prendre plusieurs centaines de millisecondes, voire plusieurs secondes dans le pire des cas. Il faut donc minimiser ces requêtes en regroupant au maximum nos ressources statiques.

De plus, les téléphones sont lents, terriblement lents. La manipulation du DOM peut rapidement prendre plusieurs secondes sur un téléphone moyen de gamme si l'on n'y prend pas garde.

Enfin, il y a une grande disparité de téléphones. Il existe des périphériques tactiles, avec clavier numérique, avec clavier alphanumérique, avec des écrans 4:3, 16:9, 16:10, avec des écrans HD dans des résolutions de plus de 300 dpi, avec des écrans SD et même avec des écrans carrés !

L'art de la guerre sur mobile

Maîtriser ses armes

Fort heureusement, nous disposons d'outils pour résoudre ces problèmes ou a minima limiter leur impact sur l'expérience utilisateur.

HTML5 et CSS3 nous en fournissent un certain nombre plutôt bien supportés sur la majorité des téléphones : localStorage, app cache, media-queries.

De même, nous avons à notre disposition de nombreux outils pour compresser et agréger nos ressources statiques : YUI, mod_déclare pour apache, images sous forme de sprites, etc.

Tous ces outils sont utilisés depuis longtemps par de nombreux site et peuvent, en général, s'intégrer rapidement quand vous construisez votre site.

Selon vos besoins, vous avez également à votre disposition des frameworks plus complets qui vont vous permettre de créer votre site mobile en un temps record tels que jQuery Mobile, Sencha touch, Gwt, kendoUi, etc.

Cependant, leur utilisation ne se fait pas sans inconvénient et il est important de bien les évaluer avant de les utiliser sur tous vos projets stratégiques.

Établir une stratégie

De bonnes armes, aussi robustes soient-elles, ne suffisent pas à gagner une bataille et encore moins une guerre. Pour cela, il vous faut une stratégie.

Avant de vous lancer dans la conception de votre site web mobile, vous devez vous interroger sur l'objectif de ce site. Qu'est-ce que vos utilisateurs attendent ?

En effet, le but d'un visiteur avec son mobile n'est pas systématiquement le même que celui qu'il aura depuis un ordinateur de bureau.

Prenons un site d'entreprise classique : sur ordinateur, un utilisateur sera probablement à la recherche d'informations sur votre entreprise. En situation de mobilité, il y a de grandes chances qu'il cherche des personnes à contacter ou l'adresse pour s'y rendre.

Il vous faut donc souvent adapter votre contenu, pas seulement à cause des contraintes de taille d'écran, mais également pour tenter de mieux anticiper les attentes des utilisateurs.

Bien connaître son ennemi

Dans le développement en général, les métriques sont importantes pour prendre les bonnes décisions. Malheureusement, elles ne sont pas toujours pertinentes, ni bien mises en place.

Sur mobile, en raison de toutes les contraintes supplémentaires évoquées plus haut, elles deviennent vitales mais sont, paradoxalement, plus difficiles à mettre en place.

Quels sont les téléphones de vos utilisateurs ? Que font-ils sur votre site ? Combien de temps votre page met-elle pour s'afficher en edge ?

Il vous faut pouvoir répondre à ce type de questions si vous ne voulez pas voir vos coûts de développement augmenter de manière exponentielle pour répondre à des besoins marginaux.

Cependant, il reste difficile de faire des mesures de performance, ou si vous trackez le comportement de vos utilisateurs de manière trop agressive vous risquez d’augmenter le trafic réseau.

Bien se connaître soi-même

De même, vous devez être clair sur vos intentions. Voulez-vous juste un site assurant le service minimum afin de ne pas perdre de clients ? Un site complet pour rattraper vos concurrents ? Un site époustouflant qui va créer le buzz et vous permettre de communiquer dessus ?

Là encore, pour des raisons de coûts et souvent de délais, il faudra prendre des décisions le plus tôt possible et en ayant les bonnes métriques de retour sur investissement.

Diviser pour mieux régner

Une fois que vous avez établi ce que vous voulez faire et pour quels périphériques, il va vous falloir définir des groupes.

En général les périphériques sont divisés en trois groupes correspondant à une expérience utilisateur minimale acceptable, une utilisation nominale et une utilisation avancée.

Vous pouvez ensuite répartir vos fonctionnalités, qu'elles aient trait au métier de votre entreprise ou qu’elles soient de nature cosmétique, en fonction des capacités et des possibilités des périphériques présents dans chaque groupe.

Ce travail est important en amont, car il est bien plus facile de rajouter pour certains périphériques une fonctionnalité que l'on a omise plutôt que d'en retirer une, pour un téléphone qui ne la supporte pas, une fois qu’elle est déjà implémentée.

Le pire étant probablement de laisser à l'utilisateur une fonctionnalité qui fonctionne mal. En effet, si la fonction est absente, il est déçu et passe à autre chose. Cependant, si elle est présente, il l'utilisera bon gré mal gré et vous en voudra à chaque fois.

Ce que nous réserve l'avenir

Je l'ai déjà dit, le monde du mobile avance très vite. Il est donc impossible de véritablement anticiper à quoi ressemblera cet univers dans 10 ans. Cependant, des tendances fortes se dégagent, ce qui nous permet de nous préparer à certains changements qui se font progressivement.

Le rapprochement entre natif et web

Le premier gros changement qui aura probablement lieu est le rapprochement progressif entre les applications natives et web. Cela concernera surtout, dans un premier temps, les applications de gestion qui, au final, n'apportent pas de valeur ajoutée à l'utilisateur autres que la rapidité et des animations plus sympathiques.

Bien évidemment, certaines applications très spécifiques telles que les jeux ou des applications utilisant massivement les capacités matérielles d'un périphérique spécifique, comme une application entièrement basée sur la réalité augmentée, seront toujours plus performantes en natif.

Cependant, avec l'implémentation progressive des spécifications HTML, permettant d'utiliser les capacités matérielles, l'écart entre ce qui est possible en natif et en web, va se réduire. Aujourd'hui, vous n'avez pas besoin de faire une application native si vous avez besoin de géolocaliser votre utilisateur. Demain, vous pourrez accéder à la webcam, à la batterie, aux contacts et à bien d'autres choses.

Le même phénomène s'est produit sur ordinateur de bureau, les clients mails ou les agendas sont tous en ligne aujourd'hui. Vous avez même des suites bureautiques, des éditeurs de photo, des sites de création de diagrammes et même des éditeurs de code en ligne. Et cela suffit pour la plupart des usages des particuliers et même des professionnels. Il n'y a pas de raison pour que la même chose ne se produise pas pour le mobile, lorsque le réseau sera suffisamment stable et rapide et que les périphériques seront suffisamment matures.

La maturité des frameworks

Avec l'Ajax, puis le HTML5, le développement web a vraiment changé et gagné en maturité. Aujourd'hui, il existe de nombreux frameworks simplifiant grandement la tâche des développeurs JavaScript. Ces frameworks rendent aussi, en général, les sites plus faciles à maintenir sur le long terme en apportant des concepts qui se trouvaient plutôt côté serveur jusqu'à présent : modularisation, MVC, internationalisation, gestion de dépendances, templating, etc.

Le web mobile n'est pas en reste. Non seulement il profite de toutes ces avancées, mais il possède également ses propres frameworks côté client et côté serveur.

Que ce soit jQuery Mobile, Sencha touch, kendoUi ou autre, il existe de nombreuses librairies permettant de créer rapidement un site fonctionnant sur de nombreux mobiles.

De même, il existe maintenant des déclinaisons mobiles pour les principaux frameworks axés composants, tels que GWT, Primefaces ou maintenant ADF mobile, par exemple.

Cependant, tous ces frameworks ont un point commun : ils sont récents. Les plus vieux ont à peine soufflé leur première bougie.

Ce n'est pas un problème rédhibitoire en soit, ils fonctionnent et remplissent leurs rôles. Cependant, il faut que les équipes de développement les intégrant soient, en plus de la montée en compétence classique, en veille technologique permanente pour rester au fait des nouveautés qui sont souvent nombreuses et rapides.

Conclusion

En conclusion, le web mobile est, pour moi, l'avenir du développement mobile ; tout du moins pour la majorité des usages actuels. Il restera une poignée d'applications natives pour des usages très spécifiques face à de nombreux sites web mobiles développés à l'aide de frameworks qui auront gagné en maturité.

Ce phénomène s'est produit sur ordinateur, il n'y a pas de raison qu'il ne se produise pas sur mobile. Google l'a bien compris également en lançant ses chromebooks et Apple s'y prépare avec iCloud. Les technologies actuelles ne sont pas encore parfaitement prêtes, mais elles ne sont plus très loin d'être suffisamment au point pour une adoption massive.

Mathieu Parisot, Soat expert