Méthodologie

Pourquoi une révolution ?

Un marché en devenir

En 2016, il y avait environ 2,6 milliards de smartphones dans le monde. Selon le cabinet Park Associates, ce chiffre devrait atteindre 6,1 milliards d’ici 2020. En comparaison, fin 2010, on recensait environ deux milliards d’internautes sur PC. On peut donc parler de « Web Mobile Révolution » Leur nombre continuera à progresser mais plus lentement. En voici deux raisons importantes :

• L’équipement en ordinateur dans les pays développés est arrivé à quasi saturation. En comparaison, le marché des smartphones est en pleine croissance et celui des tablettes le sera bientôt.
• L’essentiel du potentiel de croissance de l’accès à internet des pays émergeants ou en voie de développement se fera par smartphones car ils y sont (et seront) plus aisément accessibles qu’un ordinateur.

Les sites internet pour mobiles (smartphones et tablettes) sont donc appelés à se développer de manière encore plus rapide et spectaculaire que leurs frères aînés pour ordinateurs il y a 10 ou 15 ans.

Un usage différent

Si le socle technique des sites internet pour mobiles est identique à celui des ordinateurs, il en va différemment de leur utilisation. En effet, ces sites correspondent à un besoin et un usage différent :

• Un mobinaute peut être pressé, l’information doit donc être accessible très rapidement.
• Il peut aussi chercher un passe-temps, le site doit être récréatif tout en étant adapté à son support de consultation dont les dimensions sont plus réduites.
• Un site pour mobile ne doit pas nécessiter de concentration particulière car son visiteur n’est pas nécessairement dans des conditions propices (transports, en déplacement, en groupe).
• Il doit limiter au maximum les interactions manuelles peu faciles sur un mobile, surtout lorsque celui-ci est utilisé d’une seule main.
• Il doit s’adapter à l’utilisateur car un smartphone est avant tout un objet personnel bien souvent utilisé comme support pour les réseaux sociaux.
• Il doit tirer parti au mieux du caractère nomade de son support pour offrir au mobinaute des services adaptés à sa localisation.

C’est pourquoi les sites internet pour mobiles doivent être pensés différemment. 2 Nouvelles contraintes, nouvelle approche Avant de se lancer dans le développement d’un site pour mobiles, il est utile de se rappeler quelques éléments essentiels qui vont conditionner cette réalisation.

De nouvelles contraintes

La diversité des navigateurs internet

Alors que le monde des ordinateurs personnels est caractérisé par une faible variété de navigateurs internet, celui des smartphones est beaucoup plus hétérogène. Parmi ceux qui existent, on pourra noter les plus répandus :

• les déclinaisons du noyau Webkit sur les appareils Apple (iPhone, iPad), sur les appareils fonctionnant sur Androïd, et sur quelques plateformes propriétaires
• Opera Mobile et Opera Mini
• Internet Explorer Mobile

Il en résulte une difficulté accrue pour réaliser un site qui soit compatible avec les différentes plateformes. Il existe cependant des possibilités de tester son site sur différents types d’appareils en utilisant des émulateurs. On retiendra toutefois que l’application de quelques règles de bonnes pratiques associées à l’utilisation de standards favorise considérablement la portabilité d’un site.

Les limitations matérielles

Malgré les progrès spectaculaires réalisés lors des derniers mois, la configuration matérielle des smartphones reste inférieure celle des PC de bureau. Si les résolutions d’écran ont atteint un palier tout à fait acceptable (résolution de 800×400 points voire plus), la taille de l’écran est et restera un facteur limitatif. Ceci a un impact, non pas pour l’affichage des informations, mais en tant que dispositif tactile de pointage. A moins d’utiliser un stylet peu pratique et fort facile à perdre, les doigts du mobinaute offre une surface de contact importante, et donc peu précise. Il faut donc concevoir les éléments actifs de l’interface qui soient adaptés à cette contrainte (boutons, listes, …).

La plupart des smartphones ne disposent pas d’un clavier matériel. Celui-ci est remplacé par un clavier virtuel affiché à l’écran. Pour les même raisons que celles présentées ci-dessus, ce clavier virtuel occupe une place importante de l’écran, réduisant ainsi la surface d’affichage des pages du site. Les claviers des smartphones, qu’ils soient matériels ou virtuels n’offrent pas une ergonomie suffisante pour permettre la saisie de textes longs. Cette limitation doit également être prise en compte dans la réalisation d’un site web pour mobile. Enfin, le débit offert par les réseaux mobiles sur internet n’est pas encore aussi important qu’avec une connexion filaire classique. Cette contrainte qui tendra à s’atténuer dans le futur est aujourd’hui à prendre en compte si le site internet propose le téléchargement de gros volumes de données.

Quelques bonnes pratiques

Le W3C a énoncé les 6 commandements à respecter pour la réalisation d’un site web pour mobiles :

• Epargnez le réseau
• Libérez les utilisateurs
• Appliquez les principes du web
• Soyez flexible
• Exploitez les terminaux mobiles
• Optimisez les temps de réponse

Sans détailler tous ces points, il convient de souligner les quelques bonnes pratiques qu’il convient d’appliquer :

Faire preuve de simplicité

Cette règle est à appliquer en termes de présentation du site. Celle-ci doit être linéaire et intuitive. L’iconographie doit être explicite et universelle (des symboles plutôt que des textes). Les enchaînements de page doivent être logiques et la navigation implicite. Le style doit être épuré pour correspondre à un maximum de configurations.

Minimiser la taille

La taille des images doit être adaptée aux résolutions des mobiles (idéalement pas plus de 300 pixels de large). Elle doit être explicitement définie dans la page pour éviter toute adaptation du navigateur. Si cela est possible, prévoyez un mécanisme d’adaptation des images sur le serveur du site. La taille des pages doit aussi être limitée. En effet, si le défilement sur un écran d’ordinateur est une chose aisée, cela ne l’est plus avec un mobile. Cette opération doit donc être réduite si possible.

Aider l’utilisateur dans ses actions

Cette aide doit prendre plusieurs formes :

• Limiter les entrées manuelles
• Guider et contrôler la saisie avant envoi au serveur pour minimiser le risque d’erreur
• Mémoriser les préférences pour éviter à l’utilisateur de devoir refaire des opérations identiques systématiquement à chaque visite.

Optimiser les échanges de données

Il faut compresser les données nécessaires au chargement des pages et éviter des envois inutiles de données au serveur si ces dernières ne servent que du côté client (stocker localement les données sur le mobile).

Quels supports pour réaliser un site ?

Un site internet est constitué d’un assemblage de composants technologiques dont les rôles sont complémentaires : HTML, CSS, Javascript, images, vidéos. Il existe différentes versions et différents formats pour ces composants. Voici quelques conseils pour bien les choisir :

La famille HTML

Il existe plusieurs déclinaisons du langage HTML et de ses dérivés (XML et XHTML). En ce qui concerne les sites web pour mobiles, le W3C préconise fortement l’emploi du Document Type XHTML 1.0 Strict lorsqu’on souhaite rendre compatible un site à la fois pour les ordinateurs et les mobiles. Le Media Type recommandé pour les fichiers html est text/html.

Du style avec CSS

Les feuilles de style en cascade, aussi appelées CSS de manière abrégée, permettent d’appliquer des styles de présentation au contenu d’un site. Il existe plusieurs versions de syntaxe pour ces feuilles de style. Ces versions sont appelées niveaux. Un niveau a même été conçu spécifiquement pour les sites mobiles : le profil CSS Mobile. Si le site cible doit être compatible à la fois pour les ordinateurs et les mobiles, il est conseillé de choisir le niveau 1 car il est proche du profil CSS Mobile.

Javascript : Le langage de script pour internet

Javascript est le principal langage de script utilisé sur le web aujourd’hui. Le support de Javascript sur les navigateurs mobiles est très contrasté, allant d’une absence complète de prise en charge, au support des fonctions des dernières versions. Dans ce cas, la solution la plus appropriée est de s’appuyer sur une librairie qui prend en charge la gestion de ces différents contextes. JQuery est l’une des principales librairies pour les développements de site sur ordinateur. Une version dédiée aux mobiles JQueryMobile a vu le jour récemment et simplifie énormément la préparation d’un site pour mobiles.

Images

On distingue 2 types d’images : les images vectorielles et les images en mode point (dîtes aussi bitmap). Pour les images vectorielles, il existe aujourd’hui 2 formats répandus : Flash et SVG. Nous recommandons l’utilisation de SVG car le format Flash n’est pas supporté sur certaines plateformes (comme celles d’Apple qui est un acteur important du marché). Pour les images bitmap, le choix se fera entre JPEG (si une altération légère de l’image est tolérée, comme cela peut être le cas pour des dessins) et PNG (à retenir si les images représentent des diagrammes, des logos ou des icones).

Vidéos

Contrairement aux images, les vidéos ne sont pas des éléments qui étaient nativement reconnus par les navigateurs avant l’arrivée d’HTML version 5. Il fallait donc avoir recours à des plug-ins pour exécuter ces dernières. Cette approche est problématique pour les sites à destination des mobiles. En effet, la disparité des plateformes et la difficulté ou l’impossibilité d’installation de plug-in sur ces dernières rend très difficile un choix de format de vidéo. HTML 5 a introduit une nouvelle balise pour résoudre ces problèmes. Pour autant, la gestion des différents formats de vidéos n’est toujours pas un standard car ces derniers continuent à évoluer rapidement.

S’il faut faire un choix, il conviendrait sans doute d’adopter l’un des 3 formats suivants : H.264, Theora ou WebM. Actuellement Google a annoncé renoncer à supporter le format H.264 et promeut le format WebM. Inversement, un consortium comprenant Apple et Microsoft défend le format propriétaire H.264 et tente de faire valoir des brevets sur le codec VP8 intégré au format WebM.

Autres composants

Il existe d’autres composants présents sur les sites web classiques. Le format PDF est ainsi largement répandu. Mais ces derniers ne disposent pas (encore) d’un support suffisamment grand sur les mobiles pour prendre le pari de les intégrer dans des sites dédiés. 3 2 sites différents pour PC et mobiles ? Avec tous les éléments présentés dans le point précédent, il apparaît nécessaire de prévoir 2 sites différents, l’un pour les PC et l’autre pour les mobiles. Pour autant, la réalisation et la maintenance de 2 sites représente un travail supplémentaire non négligeable. Il est donc important d’étudier comment réduire ce surcoût de travail. Pour cela, il existe 2 approches différentes.

Préparer 2 sites, tout en mutualisant au maximum leur développement

Cette approche est la plus coûteuse mais c’est celle qui permet de produire les sites pour mobiles les plus aboutis dont le contenu peut être vraiment spécifique au support. Le travail de conception porte sur la mutualisation de la structure et du contenu qui peuvent l’être sur les deux environnements cibles. Il reste malgré tout un travail conséquent d’adaptation pour les 2 types de sites.

Préparer le squelette d’un site et disposer d’un système de génération de sites pour ordinateurs et pour mobiles

Cette approche est très pratique lorsque le besoin correspond à un CMS. Les dernières versions des principaux CMS, à l’image de Drupal ou SPIP, permettent ainsi de générer à partir d’une base commune des sites pour ordinateurs ou pour mobiles. Cette approche évite de devoir faire la plus grosse partie du travail d’adaptation. Elle requiert toutefois des tests et des ajustements dans certains cas.

Est-il possible de ne pas adapter son site internet PC aux mobiles ?

Il existe une solution gratuite, mais généralement peu satisfaisante. Elle consiste à utiliser les solutions d’adaptation de contenu mis en place par certains opérateurs de réseaux mobiles ou certains moteurs de recherche tels que Google ou Bing. Il est inutile de préciser que cette adaptation se fait selon des règles qui ne tiennent pas compte des spécificités du site puisqu’elles doivent pouvoir s’appliquer à tous les sites transitant par l’opérateur ou le moteur de recherche. C’est un proxy d’adaptation qui se charge de ce travail. Les résultats obtenus sont acceptables pour les mobiles basiques.

Par contre, le système révèle ses limites avec des mobiles plus évolués sur lesquels on peut attendre un rendu plus optimisé. Il est heureusement possible de désactiver ces adaptations automatiques à l’aide de quelques directives insérées dans les pages html. C’est fort utile lorsque l’adaptation a déjà été réalisée à l’aide de l’une des 2 premières solutions.

Dans le cas d’un site spécifiquement conçu pour les mobiles, il ne faut pas oublier de bien communiquer sur cette adaptation. L’utilisation judicieuse d’un suffixe de nom de domaine de type .mobi y contribue sans aucun doute (attention toutefois à respecter les pratiques prescrites par la joint venture mTLD en charge de l’attribution des noms de domaine ayant ce suffixe). 4 Et demain… Les éléments qui ont été abordés dans cet article concernent ceux qu’il est possible de rencontrer aujourd’hui sur un site web. Or, les mobiles apportent des fonctionnalités nouvelles par rapport à un ordinateur. Il est plus que probable que les sites web pour mobiles de demain tireront parti de ces spécificités. Voici donc quelques tendances possibles :

Géolocalisation

La géolocalisation avec un mobile ouvre des perspectives intéressantes pour un ensemble de besoins liés à la position ou à l’itinéraire pour les utilisateurs. De nombreux sites web peuvent ainsi s’enrichir de fonctions clef pour les mobinautes : visite de sites, itinéraire pour aller à une adresse, affichage de cartes, jeux de parcours… Il existe une API Javascript qui offre déjà cette fonctionnalité de géolocalisation qui est exploitable sur l’iPhone, sur Androïd et sur Opera Mobile.

Interactions audio

La fonction première des mobiles était la possibilité d’avoir une conversation téléphonique avec un interlocuteur. L’appareil dispose donc par défaut d’un système d’acquisition de la voix. Il est possible de lui associer un système de reconnaissance vocale. L’intérêt d’un tel système est de pouvoir piloter les applications du mobile à la voix et offrir ainsi une nouvelle manière d’interagir avec ces dernières. Ce système permet de compenser les contraintes liées au clavier et au dispositif de pointage moins aisé à utiliser sur ce type de support. Toutefois, il faut disposer d’API spécifiques permettant de tirer parti de ce nouveau type interaction. Plusieurs groupes travaillent actuellement sur ce type de projet.

Accéléromètre

L’accéléromètre est un autre système qui se retrouve de plus en plus souvent sur les smartphones. Il est actuellement exploité à partir d’applications conçues nativement pour les appareils. Il est tout à fait envisageable d’imaginer de futures API qui exploite cette possibilité. Des projets sont en cours et quelques plateformes bénéficient déjà d’une API Javascript (QtWeb Runtime).

Technologies web et applications natives

Depuis quelques années, il existe un débat autour de l’approche qui doit être faite lors de la réalisation d’une application sur mobile : Faut-il choisir de développer une application native ou bien une application web pour mobile ? Au-delà des querelles de clocher qui peuvent animer les groupes de discussion, il convient de bien garder en tête quels sont les avantages et les inconvénients des deux approches pour faire son choix. A terme, il est tout à fait imaginable d’envisager des applications qui pourraient être mixes pour bénéficier des avantages des deux approches.

Renvois bibliographiques

« Relever le défi du Web mobile » (François DAOUST, Dominique HAZAEL-MASSIEUX – EYROLLES)
« Les bonnes pratiques du web mobile », Site du W3C (http://www.w3c.org/2007/Talks/11-parisweb/#%281%29)
« dotMobi Mobile Web Developers Guide », Site de mobiForge (http://mobiforge.com)