Développer un site web mobile : avantages, inconvénients et bonnes pratiques?

Les annonceurs disposent de nombreuses possibilités pour diffuser leurs contenus sur l’internet mobile : le site web mobile, l’application native et à mi-chemin entre les deux, la web application (WebApp). Je traite de ce premier dans ce chapitre et les deux autres dans mes deux prochains chapitres.
Ces trois possibilités font couler beaucoup d’encre car nombreux sont ceux qui les opposent et se demande laquelle des trois choisir? Doit-on au contraire les combiner toutes les trois. C’est ce que je vais tenter de répondre à l’issue de ces trois chapitres, tant en observant une comparaison technique que d’un point de vue stratégie marketing mobile.
Qu’est-ce qu’un site web mobile et comment le développer? Quels sont ses avantages, inconvénients les bonnes pratiques?

 1. Définition d’un site web mobile

Il s’agit d’un site spécifiquement dédié aux Smartphones et tablettes numériques qui prend en compte les caractéristiques techniques de ces terminaux.

Une étude publiée par le cabinet de recherche Flurry en juin 2011 montre que le temps passé sur Internet via les applications mobiles des Smartphones et des tablettes a pour la première fois dépassé celui que les internautes passent sur le Web via les ordinateurs de bureau et les ordinateurs portables. L’Internet mobile a pris le dessus et les annonceurs se doivent de proposer désormais leurs contenus sur une version mobile.

Fort heureusement, le web mobile est souvent annoncé d’ici un à deux ans comme l’avenir du web avec notamment l’arrivée du langage HTML5 qui ouvrira encore plus de possibilités techniques et de perspectives de nouveaux usages.

2. Comment créer son site web mobile?

Développer un site Web mobile consiste à développer du Web avec des styles CSS adaptés à une résolution d’écran plus petite. Rappelons que la résolution de référence pour l’internet ‘classique’ est de 768×1024 pixels. Pour le mobile, ça parait simple et pourtant c’est là que les problèmes commencent, étant donné la variété des terminaux. Il existe trois “standards” de résolutions pour couvrir toutes les possibilités sur les Smartphones :

Marketing webmobile version web mobile
Site marketing-webmobile.fr version web mobile

320×420 (largeur x hauteur en position portrait)

240×320 (largeur x hauteur en position portrait)

240×260 (largeur x hauteur en position portrait)

Certains appareils tels que l’iPhone 3 et l’iPhone 4 ont des résolutions non standards. 320×480 pixels pour le premier et 640×960 pixels pour le second. Pour autant la taille physique de l’écran est la même à savoir 3,5 pouces. Ce qui change entre les deux c’est la densité de pixels par inch (dpi) qui améliore la netteté du contenu dans toutes les tailles.

D’autres appareils tel que chez HTC ont une résolution native de 540 x 960, le Samsung Galaxy Ace a une résolution native de 480 x 320 et un Nexus One a une résolution native de 800 x 480).

Les tablettes tactiles de type iPad, affiche une largeur 768 pixels (en position portrait) et 720 pixels en paysage. Ce qui permet de retrouver une version classique en position paysage.

Pour que le terminale interprète correctement la bonne résolution du contenu du site mobile il faut attribuer la bonne valeur au ‘Viewport’. Par défaut, le Viewport natif est de 980px (trop large) sur les iPhone.

On appelle Viewport la surface affichable d’un terminal mobile. Celle-ci peut être définie grâce à un meta tag dédié nommé  viewport (au départ fourni par Apple pour Safari), de type <meta name= »viewport » content= »width=device-width » />. La définition du Viewport dans le <head> des pages HTML permet d’éviter le redimensionnement automatique de la mise en page, qui rend les contenus trop petits, de fixer la largeur du mobile et de pouvoir s’y adapter par la suite.

Grâce à l’arrivé du CSS3 il est désormais possible d’adapter le design d’un site web de manière conditionnelle à des types de terminaux et résolutions d’écran différents. Des styles CSS différents vont alors s’appliquer à vos éléments HTML en fonction du type de terminal utilisé. Les Media Queries (ou requêtes de média) prolongent l’idée de feuilles de styles pour l’impression, l’écran, etc., mais cette fois-ci en spécifiant des résolutions d’écrans de manière conditionnelle. On peut donc prévoir un CSS spécifique pour les écrans de largeur inférieure ou égale à 480 pixels (ce qui est la résolution maximale de l’iPhone 3 en position paysage) et un CSS pour l’iPhone 4 dans lequel on indiquera 640px afin de cibler l’affichage position portrait.

Au-delà des résolutions, les Media Queries permettent d’agrandir la taille du texte et la taille des contrôles et zones cliquables (pour une utilisation au doigt), de faire passer le contenu sur une seule colonne, de masquer ou afficher des éléments spécifiques, d’ajuster les dimensions et marges et de jouer sur l’orientation portrait ou paysage dans des périphériques comme l’iPad ou l’iPhone grâce à la fonctionnalité orientation.

Elles sont compatibles qu’avec les navigateurs les plus récents, tels que Safari 3+, Chrome, Firefox 3.5+ et Opera 7+, de même que la plupart des navigateurs pour mobiles (Opera mobile et WebKit par exemple).

[sam id= »6″ codes= »true »]

3. Quels sont les avantages et inconvénients d’un site web mobile?

Tout d’abord le développement d’un site web mobile est directement accessibles par pour toutes les terminaux. Si une version web HTML mobile est bien conçue, elle s’affichera en principe de façon optimale et identique sur tous les terminaux.

De plus, contrairement à une application propriétaire que vous devez soumettre à l’App Store pour approbation, peut être mis à disposition immédiatement une fois finalisé, en toute indépendance. Il n’y a donc aucun délai d’attente et aucun risque de refus par la plateforme qui valide les applications.

Ce choix est économique vis-à-vis du coût de développement. Puisqu’il n’y a qu’un seul site web à développer, il n’est pas nécessaire comme pour une application de doubler les efforts comme c’est le cas lorsqu’une application doit être déployé sur iOS et sur Android (en tout cas, une par plateforme). Sans compter que les taux horaires pour un développeur web et souvent inférieur à celui d’un développeur d’application.

L’aspect économie se traduit aussi par le fait que les App Stores touchent des commissions sur les abonnements payants des annonceurs. Ainsi par exemple sur BlackBerry App World vous devrez reverser 30% de votre chiffre d’affaire à RIM sur chaque vente d’application réalisée. Ce qui diminue d’autant la marge sur votre vente.

Par ailleurs, un site web mobile ne requiert que peu de stockage sur le terminal utilisé, ce qui permet de conserver de l’espace disque pour d’autres fichiers. On s’aperçoit très vite que lorsqu’on accumule les applications, la mémoire disponible pour la musique ou la vidéo peut finir par faire défaut.

Lorsque vous faites évoluer votre site, l’utilisateur peut immédiatement bénéficier des mises à jour, sans délais, ni quelconque approbation d’un App Store, ni d’intervention du côté du mobinaute.

Enfin, un site web mobile couplé à de bonnes compétences en référencement organiques (SEO) permet d’être bien référencée par Google et apporte potentiellement plus d’utilisateurs qu’une application sur un store propriétaire.

En termes d’inconvénients, la liste me semble bien plus courte. La principale étant de faire connaitre l’URL du site et d’inciter le mobinaute à le taper entièrement sur son navigateur en espérant qu’il ne fasse pas de faute de frappe. Même si ce lien peut être placé dans les favoris pour faciliter l’accès direct, ce n’est pas comparable avec la rapidité d’accès (une seule pression sur l’icône) que l’on connait avec une application native disposée sur son bureau.
Par ailleurs, malgré la puissance du HTML5 et CSS3, certaines fonctions du téléphone ne sont pas utilisables tels que le GPS ou la webcam.

4. Quels sont les bonnes pratiques en matière de site web mobile ?

Une enquête “What Users Want From Mobile” menée par Equation Research sur 4014 mobinautes dans le monde (1,001 U.S., 500 U.K., 500 Germany, 507 France, 506 China, 500 India, 500 Australia) a révélé que les consommateurs ont des attentes élevées pour la consultation de site web mobile. 71% ont déclaré qu’ils s’attendent à charger les sites web plus rapidement ou plus vite sur leur téléphone mobile par rapport à l’ordinateur qu’ils utilisent à la maison. Ce pourcentage a évolué puisque 2 ans auparavant, ils étaient 58% dans ce cas de figure. OR, 60% d’entre eux sont près à attendre jusqu’à 3 secondes seulement avant de quitter la page web si celle-ci ne s’affiche pas.

Si le site est considéré comme trop lent, 57 % des utilisateurs ne le recommanderons pas et 43% n’y retournera pas et visiteraient probablement le site Web mobile d’un concurrent. Il est donc impératif de maîtriser le temps de chargement des pages et des éléments qui le composent.

infographie-mobile-web-disappoiting
sources : http://www.gomez.com/wp-content/uploads/CPWR-MWD-Infographic-FNL3-72dpi.jpg

Au niveau du contenu,  il est préférable de proposer des contenus différents du site classique et plus limités pour les terminaux mobiles, adaptés au contexte de mobilité et d’inconfort. Rappelons-nous que la vitesse du chargement d’une page est fonction du volume de contenu en plus du contenant. Par conséquent, la taille des pages et des images doivent être réduites et optimisées.

Le contenu du site devra être simple, écrit en texte avec des caractères larges et lisibles et mis au premier plan, c’est-à-dire en haut du site. La navigation doit être limitée à quelques liens  bien visibles positionnés en bas. Les actions doivent être principalement incitées par des boutons bien visibles.

En ce qui concerne le référencement naturel dans les moteurs de recherche (SEO), les bonnes pratiques du web classiques sont généralement valables pour les sites mobiles. Il faut notamment eviter d’utiliser des frames ou des liens en javascript,  par exemple, et utiliser les balises H1, H2, H3, strong… En la matière, un  la version mobile d’un site ne desservira jamais son référencement naturel. Cela n’entraîne donc pas de contenu dupliqué, et à l’aide du sitemap, Google assimilera très facilement que la version est exclusivement créée pour les Smartphones. Cette procédure ne concerne que ceux qui utilisent des URL différentes pour la version mobile et la version classique de leur site. Le sitemap communiquera à Google toutes les URL mobiles et l’informera de la mise en ligne de nouvelles pages par un système de ping.

Il faut prendre en compte les avantages et les contraintes de la navigation tactile mais limiter la manipulation de la page par l’utilisateur (scrolling horizontal, zoom).

Surtout, ne pas utiliser de plug-ins additionnels de type Flash qui risque de ne pas être compatible avec les plus part des terminaux.

Enfin, assurez-vous que les numéros de téléphones soient « clickables ». C’est-à-dire qu’on puisse directement appeler en cliquant dessus. Il suffit pour cela d’utiliser la syntaxe tag <a href=”tel:[number]”>[number]</a>.

Enfin, il faut créer des URL spécifiques à la version mobile. Il est notamment possible de choisir de placer le site mobile en sous-dossier ou en sous-domaine, de type http://m.monsite.com/. Cela permet d’optimiser et de personnaliser en totalité votre site (xHTML, CSS, Javascript et même moteur PHP, Url rewriting, etc.), de définir des balises <title>, <description> différentes pour mieux cibler le trafic, et de l’inscrire dans les annuaires dédiés.

Conclusion

Le développement de site web mobile s’avère sensiblement complexe à cause de la multitude des terminaux mais il offre de nombreux avantages (dont son caractère d’accessibilité sur n’importe quel téléphone, et son développement plus économique comparé aux applications) et visiblement peu d’inconvénients. Il permet en outre d’adresser marché de mobinautes en forte croissance. Dans ce contexte toujours de plus en plus concurrentiel, comment se passer d’une telle poche de croissance ? Peut-être par l’intermédiaire d’application native ou de WebApp. C’est ce que je vais publier dans mes prochains chapitres.

[sam id= »6″ codes= »true »]

 

Twitter Cet article a été écrit par Thierry Pires

Facebook Twitter LinkedIn Google Plus Google Plus Page Klout pinterest Viadeo WordPress Facebook Page

Sources:

http://www.presse-citron.net/internet-mobile-10-raisons-de-proposer-une-version-web-mobile

http://www.servicesmobiles.fr/services_mobiles/2011/07/un-site-web-sur-mobile-se-doit-d%C3%AAtre-rapide-sinon-57-sont-peu-susceptible-de-le-recommander.html

http://www.gomez.com/thank-you/what-users-want-from-mobile-infographic

http://planete.drupalfr.org/node/1368

http://www.blog-nouvelles-technologies.fr/archives/5142/infographie-letat-du-developpement-web-mobile-en-2011/

http://www.superbibi.net/web-marketing/version-mobile-ergonomique

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/

http://www.alsacreations.com/article/lire/930-css3-media-queries.html
http://www.lunaweb.fr/blog/web-mobile/

http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile/

http://www.lunaweb.fr/blog/web-mobile/

2 réactions sur “ Développer un site web mobile : avantages, inconvénients et bonnes pratiques? ”

    • Thierry Pires Réponse

      Merci Nicolas pour ce très sympathique commentaire et pour les compléments d’informations apportés à travers votre lien. Je « Like » ! ;o)

Répondre à Nicolas Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *