Lorsque l'on se lance dans un projet de création de site Internet sous Joomla avec comme objectif d'avoir un site web Responsive Design, bien choisir ses extensions Joomla devient alors un travail minitieux puisque celles-ci doivent elles-aussi être Responsive.
En effet, pour avoir un site Joomla 100% Responsive, avoir seulement un template Responsive Design ne suffit pas. Tout doit être Responsive et permettre un affichage optimale sur l'ensemble des périphériques clients (Smartphone, tablette, PC, ...).
Je vais donc ici vous présenter les avantages de l'utilisation d'un Framework comme Gantry qui permet de trouver tout le nécessaire (Framework, Extensions, Templates) en un seul et même lieu : chez RocketTheme, concepteur de Gantry.
Le Responsive Design - Vue d'ensemble
La première couche, le Framework Gantry 4, fournit les principaux éléments responsive sur lesquels s'appuient le reste des éléments impliqués.
La seconde couche est le template qui repose sur la fonctionnalité Responsive de Gantry. Il doit être adapté pour tirer parti de ces fonctionnalités et fournir un style pour tous les éléments présents dans les différents layouts (=gabarits / feuilles du site).
La troisième couche, et celle sur laquelle nous allons nous concentrer dans cet article, contient les extensions qui fournissent les fonctionnalités du site : vitrines, galeries, blogs, navigation, ... Fondamentalement, tout ce qui fournit un mécanisme pour la navigation ou l'affichage du contenu. Les extensions doivent être compatibles avec des layouts Responsive afin qu'ils puissent s'adapter correctement à la taille d'affichage de chaque layouts. Les événements tactiles, qui sont principalement le domaine des appareils mobiles, peuvent être utiles pour fournir une facilité d'utilisation et une bonne ergonomie par rapport aux traditionnels événements de type "clic".
La dernière couche, la quatrième, c'est le contenu lui-même. Ce contenu doit être conçu explicitement pour supporter les layouts Responsive. En effet, tous les éléments de largeur fixe tels que les images, les cartes, ... peuvent facilement « exploser » une mise en page Responsive.
Les quatres couches nécessaires au Responsive Design
Comme vous pouvez le voir, pour créer un site efficace qui fonctionne correctement avec différentes tailles de layout, ces quatre éléments doivent tous fonctionner en harmonie les uns avec les autres. Si l'une de ces couches n'est pas totalement Responsive, le layout explosera.
L'exemple des extensions RocketTheme
Afin d'être totalement Responsive, les extensions d'un site Joomla doivent l'être aussi. Par conséquent, pour toutes extensions Joomla que vous souhaitez utiliser, vous devrez les valider pour garantir qu'elles fonctionneront correctement avec des layouts Responsive. Les 2 extensions les plus reconnues de RocketTheme sont Roksprocket et RokGallery.
RokSprocket : Un Slideshow / Showcase Responsive Design
Depuis le début de son développement, RokSprocket a été conçu en ayant à l'esprit le Responsive Design. Même si RocketTheme n'avait pas vraiment de support à l'époque, ils savaient que cela allait arriver et ils se sont donc assurer qu'il n'y aurait que peu de modifications à faire par la suite.
RocketTheme a également mis en place des gestes tactiles pour vous permettre de changer les onglets, les titres, les caractéristiques et les listes. Cela fait de RokSprocket une excellente solution pour la construction d'un site responsive.
RokGallery : La galerie photo Joomla Responsive Design
RokGallery a été codé il y a bientôt deux ans, avant que le Responsive Design devienne populaire au sein de la communauté de développement web. Depuis, RocketTheme a mis à jour les éléments d'affichage du front-end tels que les modules et les vues du composants pour s'assurer que RokGallery fonctionne correctement les différentes tailles de layouts. Pour la petite histoire, ils ont ajouté un nouveau, mais visuellement identique, layout showcase appelé "Showcase Responsive". Pour assurer la compatibilité, le style de showcase existant a été renommé en "Showcase Fixed", et n'est pas compatible avec les layouts Responsive (= donc non-Responsive Design).
RocketTheme en a profité pour ajouter une nouvelle option dans le bouton d'édition Gallery Picker, vous pouvez maintenant insérer des images à votre contenu dans un nouveau format Responsive. Cela permettra de redimensionner les images de la manière dont le layout l'exige.
Comme pour RokSprocket, RocketTheme a également ajouté des gestes tactiles à RokGallery de sorte que vous puissiez changer les images par un simple glissé à droite ou à gauche plutôt que d'avoir à toucher un petit bouton. Les dispositifs actuellement pris en charge pour ces gestes tactiles comprennent iOS (iPod Touch, iPhone, iPad) et Android (2.2 +).
RokPad2 : Le 1er éditeur Joomla Responsive Design
RokPad2 est un éditeur de code qui fournit une grande partie de la puissance et des fonctionnalités d'un éditeur de bureau, pour votre site Joomla. Lorsque RokPad2 a été réécrit, RocketTheme a fait en sorte que cette extension s'adapte aux layouts de toutes tailles, elle est donc déjà prête à être utilisé dans un projet Responsive Design.
L'éditeur Responsive Rokpad 2
Faire fonctionner une extension utilisant le Javascript sur tous les layouts
Avec la sortie des extensions Responsive RokSprocket et RokGallery, RocketTheme a créé un nouveau système qu'elles-même utilisent. En effet, via son RokMediaQueries.js, RocketTheme fournit un système unifié qui permet aux extensions d'ajouter UN Media Query "à l'écoute".
Ce Media Query est un élément nouveau des navigateurs qui permet d'activer le JavaScript pour interagir avec les Media Queries CSS. Il s'agit d'une fonctionnalité clé si vous avez besoin que votre extension JavaScript se reformate lorsque votre layout passe d'un format à un autre (Ex : Soit un redimensionnement du navigateur, ou un dispositif de rotation Vue portrait / Vue Paysage). Aujourd'hui, l'alternative est d'utiliser le Browser Polling mais cela peut ajouter une charge importante pour votre navigateur et impacter fortement sur les performances d'affichage de votre site.
Ce Media Query est pris en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari et IE10 et RocketTheme a assuré une fonctionnalité JavaScript de repli pour Opera et IE9.
Si vous souhaitez profiter de la fonctionnalité RokMediaQuery dans vos propres extensions, il suffit de vous assurer que RokMediaQuery.js est chargé et utilisé comme ceci :
1.var rand = function(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); };
2.var myFunction = function(){
3.var color = [rand(0, 255), rand(0, 255), rand(0, 255)];
4.document.body.style.backgroundColor = 'rgb(' + color.join(',') + ')';
5.};
6.
7.RokMediaQueries.on('every', myFunction);
Dans le code ci-dessus, si jamais le Media Query est déclenché par le changement de la taille de votre layout, la classe myFunction () sera appelée. Dans cet exemple, une couleur de fond différente aléatoire sera appliquée au <body>.
Informations Complémentaires
- RocketTheme est le leader mondiale de la conception de template Joomla
- Pour en savoir plus sur Gantry, lisez l'article Gantry 4 : L'intégration du Responsive Design dans les templates
Articles qui devraient vous intéresser
Concevoir un template Joomla Responsive avec Bootstrap
Gantry 4 : le framework pour créer vos templates Joomla 2.5 & 3
