Plus il y a d’appareils ayant un accès au web sur le marché, plus les gens sont connectés à partir d’appareils différents. Les smartphones, les tablettes, les consoles de jeux portables, les unités de divertissement dans les voitures et même les appareils ménagers, tels que les réfrigérateurs, permettent aux utilisateurs de rester connectés à Internet toute la journée.
Cependant, ces appareils n’apportent pas un confort de vue optimal du fait que la plupart des sites web sont conçus pour être consulter à partir d’un PC. Devoir zoomer et loucher sur l’écran pour voir ce qui est écrit est à la fois problématique et ennuyeux. Durant un temps, la détection des mobiles a résolu la plupart de ces problèmes. Mais, de plus en plus d’appareils sont apparus, ce qui a rendu la détection des différentes résolutions d’écrans et les méthodes d’affichage plus compliquées.
Actuellement, la solution la plus efficace contre les problèmes de périphériques multiples est le Responsive Design. Si vous ignorez ce qu’est le Responsive Design, alors vous pourriez passer à côté des dernières tendances du webdesign. Au lieu de s'appuyer sur les frameworks et les extensions pour détecter le dispositif, certains travaillent durement sur la résolution des navigateurs et l’affichage de différentes mises en page en accord avec cette résolution.
Le Responsive Design
Le Responsive Design modifie et adapte un site web en fonction de comment l’utilisateur le perçoit. Que ce soit un portable, une tablette ou un PC, pouvoir adapter et changer le design et la mise en page, en fonction de la résolution et de la façon de regarder, permet d’améliorer l’expérience utilisateur. (Cf. Concevoir un template Joomla Responsive avec Bootstrap)
Pour vous montrer un exemple concret, amusez-vous à redimensionner la fenêtre de votre navigateur avec le template Music de Gavick.
Il est important de noter que la méthode est généralement différente avec Joomla. La méthode traditionnelle ou la plus courante pour générer un site web mobile est de détecter le périphérique de l'utilisateur à l'aide d'un framework particulier ou d’une extension Joomla, puis d'afficher un template ou une mise en page adaptée.
Le Responsive Design, de son côté, utilise les media queries et les feuilles de styles en cascade CSS pour faire apparaître une mise en forme du site différente. Plus intéressant encore, vous pouvez avoir différents affichages en fonction de l’orientation de l’appareil, comme avec une tablette passant du mode portrait au mode paysage.
Cette méthode adaptative du design a pour but de fournir à l’utilisateur la meilleure expérience possible en termes d’affichage du contenu à partir de n’importe quels appareils utilisés.
Ce n'est pas quelque chose de nouveau, en fait, de nombreux sites web utilisent des techniques similaires pour afficher les versions print de leur site web ce qui peut masquer les éléments non pertinents exceptés la marque et le contenu afin de préserver les ressources d'impression.
Passer à l’adaptatif
Créer un Responsive Design pour votre site web Joomla n’est pas chose aisée. Cela requiert de bonnes voire d’excellentes connaissances en HTML et CSS. L’une des méthode pour créer un template adaptatif est d’utiliser les media queries.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="/mobile.css" />
Cette ligne CSS fera appel au fichier mobile.css si la largeur maximum de l’écran est 320px.
C’est la même méthode utilisée pour afficher la version print de votre site web.
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
Le navigateur détecte quelle résolution vous utilisez et charge différentes feuilles de styles en fonction de cette dernière. Cette méthode peut aussi être utilisée pour l’orientation de l’écran, portrait ou paysage.
Une autre méthode permettant de créer un template adaptatif est d’utiliser du CSS fluide plutôt qu’une mise en page avec des largeurs fixes. Configurer les largeurs de votre site sur 100% ainsi que celles de vos images est un bon début pour que votre template s’adapte à différentes résolutions d’écran.
img { max-width: 100%; } or img { width: 100%; } for IE
Ces techniques ne fonctionnent pas sur tous les navigateurs et doivent donc être testées mais la majorité des navigateurs modernes et appareils mobiles s’adaptent à ces méthodes ce qui correspond à votre objectif.
Sans aller plus loin dans les méandres du codage des templates, de nombreuses ressources sur l’intégration du Responsive Design est disponible sur le net.
Votre site web Joomla peut-il tirer avantage de cela ?
Que votre site web tire avantage ou non du Responsive Design cela dépend entièrement de votre audience.
Si vous constatez que beaucoup de vos visiteurs utilisent leurs appareils mobiles pour accéder à votre site ou que vous êtes en contact avec vos utilisateurs via Twitter ou d’autres plates-formes sociales orientées mobiles alors avoir un Responsive Design ne peut être que bénéfique.
Le futur du Responsive Design pour Joomla
Avec le nombre croissant d’entreprises et organisations voulant et exigeant un Responsive Design pour leur site web, on peut voir de plus en plus de templates clubs proposés des templates adaptatifs pour Joomla.
Au vu des quelques fonctionnalités du Responsive Design prévues pour les futures versions de Joomla ou du moins distribuées avec l’administration des templates, cela offre de nouvelles perspectives pour la gestion de votre site web Joomla.
Il existe déjà quelques templates permettant de gérer Joomla sur un mobile et d’autres appareils, autre qu’un PC ou un portable mais imaginez pouvoir charger et s’adapter rapidement aux différents écrans et plates-formes en utilisant un seul template au lieu d’un template pour chaque situation. C'est d'ailleurs le pari que s'est fixé la Team Joomla avec l'intégration de BootStrap de Twitter dans Joomla 3 (cf. Joomla mise sur une meilleure expérience utilisateur).
Un autre domaine où le Responsive Design peut grandement aider les utilisateurs, c’est l’accessibilité au web. Les utilisateurs ayant besoin d’un agrandissement important des sites à cause d’une déficience visuelle peuvent trouver difficile de naviguer sur un site web ne s’adaptant pas à leur point de vue. Une interface s’adaptant à l’utilisateur peut améliorer grandement l’utilisabilité.
Adopter le Responsive Design pour améliorer l’accessibilité au web est bénéfique pour tout le monde. De subtils changements sur la mise en page en fonction de la résolution peuvent améliorer l’utilisabilité et plus important permettent aux utilisateurs visés de lire votre message.
Si vous êtes intéressé par l’expérience mobile et l’utilisabilité de Joomla, rendez-vous sur http://ux.joomla.org, rejoignez le projet Joomla et venez participer aux conversations. L’objectif final étant une amélioration importante de l’expérience utilisateur avec Joomla.
Source : Magazine Joomla.org
Articles qui devraient vous intéresser
L'effet miroir avec Photoshop CS4
Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos
