Logo Gantry

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.

icon gantryLe 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 DesignLes 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.

icon gantryL'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.

Responsive Roksprocket

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.

Responsive Roksprocket

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.

responsive rokgallery

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.

Responsive RokpadL'éditeur Responsive Rokpad 2

icon gantryFaire 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>.

icone infoInformations Complémentaires

Si vous souhaitez en savoir plus sur Gantry et RocketTheme, ou si vous cherchez de l'aide, venez en parler sur le forum en devenant membre du centre de formation Joomla
 

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !

L'auteur : un expert à votre service
Jean-Charles Gautard
Nom : Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

Concevoir un template Joomla Responsive avec Bootstrap Concevoir un template Joomla Responsive avec Bootstrap
Nous allons voir dans ce tutoriel comment utiliser le framework Bootstrap de Twitter pour créer de zéro un template...
Gantry 4 : le framework pour créer vos templates Joomla 2.5 & 3 Gantry 4 : le framework pour créer vos templates Joomla 2.5 & 3
Gantry est un framework conçu par l'équipe de RocketTheme.com, en licence OpenSource et à la disposition de tous...

Commentaires (5)

This comment was minimized by the moderator on the site

hello
il y a des retours sur la lourdeur de gantry4 ... tu en penses quoi ?

This comment was minimized by the moderator on the site

Hello,
J'utilise presque systématiquement Gantry pour mes projets et il n'y a pas de perte de performance notable de mes sites webs.
Cela ne m'empêche pas quand même optimiser mes ressources CSS / JS avec un plugin comme JCH Optimize (Combine,...

Hello,
J'utilise presque systématiquement Gantry pour mes projets et il n'y a pas de perte de performance notable de mes sites webs.
Cela ne m'empêche pas quand même optimiser mes ressources CSS / JS avec un plugin comme JCH Optimize (Combine, Gzippe, Minify, ...) ou Rokbooster développé aussi par RocketTheme. Avec en complément un bon .htaccess et un hébergement performant, tu obtiens d'excellent résultat (Yslow, PageSpeed, Vitesse de chargement, ...)

Lire la suite
This comment was minimized by the moderator on the site

faudra que tu nous fasse un tuto sur l'optimisation avec jch le hatccess (je suis convaincu de siteground ..)
note je ne recois jamais les notifications ....
sinon super le nouveau site ! bravo

This comment was minimized by the moderator on the site

Merci ;-)
Les notifications des commentaires ?
Un bon sujet de tuto c'est clair, surtout que cela fait un moment qu'il est dans les cartons, je pense que ce sera le prochain du coup.

This comment was minimized by the moderator on the site

oui quand j'ai une reponse à un commentaire .. je ne recois rien ..
super si tu l'as dans les cartons
Merci

Ps juste un petit mot on as ouvert la communauté google+ pour FLEXIcontent, ainsi que 2 guides de démarage rapide (FR et ENG), la FAQ...

oui quand j'ai une reponse à un commentaire .. je ne recois rien ..
super si tu l'as dans les cartons
Merci

Ps juste un petit mot on as ouvert la communauté google+ pour FLEXIcontent, ainsi que 2 guides de démarage rapide (FR et ENG), la FAQ contient maintenant 150 articles, et les bases d'un tutoriel sur la création de template et plugin est visible (un peu vieux mais en cours d'actualisation)
a+

Lire la suite
Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
Affichage des modules Joomla sur mobile, tablette et desktopAffichage des modules Joomla sur mobile, tablette et desktop
La souplesse d'utilisation des modules est une grande force de Joomla. Parmi ses avantages citons notamment ses nombreuses possibilités de positionnement sur la page, l'assignation à plusieurs...