Bien entendu un site accessible sur tous supports via les media queries est l’idéal à atteindre, mais c’est oublié aussi qu’un site mobile peut-être autre chose que la réplique adaptée à l’écran du site original. Il faut repenser parfois le site mobile pour tablette et smartphone avec l’objectif non seulement de bien afficher le site, son ergonomie, etc., mais aussi : quels contenus nous allons mettre en avant ?
Quelle stratégie pour le mobile ?
Avant de se lancer dans une application ou un site mobile via des plugins, des framework ou en design adapté, il est indispensable de se poser les bonnes questions. Votre stratégie de communication, de diffusion, etc., définira le support technique qui vous convient. Cela demande un travail supplémentaire, couteux en développement, mais il est indispensable.
- Pour un site qui souhaite proposer un contenu pratiquement identique et garder une cohérence graphique, les media queries me semblent la meilleure solution. Les media queries permettent d’adapter l’affichage du site en fonction du support (voir les captures en fin d’article). Il n’est pas nécessaire de créer un nouveau site spécifique pour chaque support, il suffit d’intégrer dans les CSS l’adaptation automatique du design. Le webdesign adapté demande cependant un travail important pour que l’affichage soit optimale. Il existe de plus en plus de thèmes WordPress qui utilisent ces techniques.
- Pour diminuer le coût de développement, il existe des plugins ou extensions en fonction des CMS (WordPress, SPIP, Dotclear…). Ces plugins proposent, plus ou moins proprement, une version mobile simplifiée pour votre site avec la possibilité d’en modifier quelques aspects dans les CSS. Ces plugins vont cependant plus loin qu’une simple adaptation graphique du site « original » et offrent une simplification du site. Souvent ils proposent aussi de basculer du site web au site mobile via un simple bouton.
- Pour un site mobile spécifique, qui pourrait s’approcher d’une application, vous avez la possibilité d’opter pour un framework comme celui de jQuery (même si je ne suis pas fan du côté iframe).
Le débat actuel n’est donc plus seulement de savoir si nous devons développer un site mobile ou une application mais déjà définir quels contenus nous voulons mettre en avant sur le mobile et avec quelle interface.
Favoriser l’accès aux sites web
J’aurais tendance à vouloir autre chose d’un site web mobile : pas uniquement une adaptation graphique, ni même une simplification graphique mais un véritable site pensé mobile. De même, il serait vraiment intéressant de pouvoir développer des sites adaptés aux tablettes, avec des fonctions de glissements comme on en trouve sur certaines applications (twitter, pulse…).
Il faut cependant rester raisonnable. Il n’est pas indispensable de créer un site mobile spécifique, la plupart des sites se contenteraient d’un design adapté. Ce qui, par contre, me semble indispensable c’est d’y réfléchir et de s’y mettre. De nombreux sites, et je ne parle même pas des sites en Flash (charger un site en flash en 3G est possible mais couteux en data), ne sont pas du tout adaptés aux formats mobiles et risquent de perdre de plus en plus d’internautes. L’accès aux sites via des tablettes ou des smartphones n’est plus réservé aux accrocs, aux « geeks » ou aux professionnels.
Les medias queries et le design adapté (responsive design) répondent en grande partie aux besoins des sites web, et c’est une avancée non seulement à suivre mais à pratiquer d’ors et déjà.
Et les applications
L’avantage des applications est simple : une maitrise de l’environement pour afficher des contenus en respectant une ergonomie précise. Avant de se lancer dans la création d’applications (et le pluriel a toute son importance) il faut bien réflechir aux cibles visées et aux moyens à mettre en œuvre. En effet, si vous vous lancez dans ce genre de projet, il faut savoir que vous devrez sans doute créer non pas une application mais au minimum trois (pour iPhone, pour androïd et pour windows), sans oublier les tablettes…
Il est nécessaire aussi de penser à la forme du contenu. Est-ce que ce contenu sera figé, dans une interface fermée sans flux entrant, ou si vous souhaitez au contraire y afficher des flux divers (actualités, agenda, articles, twitter…). Ce ne sont pas seulement des coûts de développement, une interface permettant d’avoir la main sur une partie du contenu la rendra plus intéressante.
À lire :
- Lire l’ouvrage d’Ethan Marcotte « Responsive Web Design » (existe en français)
exemple de site :
http://responsivewebdesign.com/robot/ - Suivre le blog http://projetresponsive.fr/ autour du livre référence « Projet Responsive Web Design » chez Eyrolles
- Les media queries – Alsacreations
- Sur le blog de lunaweb autour des questions de design adaptatif
- jQuery Mobile – tutoriel en français
exemple de site sous jQuery mobile avec tuto pour coupler avec SPIP
Captures en fonction des supports
Cliquez sur les images pour voir le rendu en grand
Exemples et tutoriel en video
[iframe http://www.slideshare.net/slideshow/embed_code/13815574 427 356]
Quelques exemples
[iframe http://www.youtube.com/embed/h3DAfnHCdEE 560 315]
Exemples et tutoriel
[iframe http://www.dailymotion.com/embed/video/xkp5r1_utiliser-les-media-queries-pour-un-design-responsive_lifestyle 480 300]
Publié le 12 janvier 2012
