Gantry 4 : L'intégration du Responsive Design dans les templates

Le framework Gantry, dans sa version 4, prend maintenant en charge le Responsive Design (cf. Le Responsive Design : l'UX de Joomla abat sa première carte). Basé sur le Framework Bootstrap, Gantry vous permet maintenant de concevoir des templates Joomla qui s'adaptent automatiquement à la résolution du périphérique utilisé par l'internaute (Smartphone, PC, Tablette, ...).

RocketTheme, le concepteur de Gantry, a bien compris qu'avec la forte croissance des appareils mobiles, aux tailles d'écrans très variés, il était rapidement devenu ingérable de proposer une vue spécifique à chaque type d'appareils indépendemment du design principal. D'où la nouvelle tendance du Responsive Design et son intégration dans le Framework Gantry.

La montée des Responsive Frameworks

Au cours des dernières années, la conception de design en grille basée sur des solutions populaires comme 960 Grid, Blueprint ou encore YAML est devenue LA solution pour le design en CSS dans un monde dominé par les ordinateurs de bureau et les ordinateurs portables.

RocketTheme a adopté cette philosophie lorsqu'ils ont créé le Framework Gantry, sélectionnant le système 960 Grid comme base de travail en raison de sa flexibilité, de sa légèreté et de sa compatibilité avec les navigateurs. Avec la popularité croissante des Responsive Layouts (pages de site adaptatives) et la disparition progressive des systèmes à grille plus traditionnels, toute une série de Frameworks Responsive ont été développés.

Parmi les plus connus on peut citer Fondation by Zurb, Frameless, Inuits CSS et Bootstrap. Même si Gantry a été construit sur un système de grille fixe, certains utilisateurs ont eu le courage de le transformer pour être Responsive en intégrant ces systèmes de grille. Et pour des certaines applications spécifiques, cela a plutôt bien fonctionné. Malheureusement, un Responsive Design n'implique pas seulement le template, il implique n'importe quelle extension visible sur votre site. C'est pourquoi tous les éléments doivent parfaitement cohabiter ensemble.

Une compatibilité Responsive

Revenons à nos moutons, si vous avez déjà travaillé avec des templates Joomla RocketTheme, vous savez sans doute que ceux-ci sont conçus avec le Framework Gantry que RocketTheme avait initialement développé fin 2009 et qui est sorti peu de temps après comme projet GPL.

Il a beaucoup évolué jusqu'à aujourd'hui et a été porté sur Joomla 1.6, 1.7 et 2.5. Actuellement, il est en à la version 4 tout juste compatible pour Joomla 3.

RocketTheme a décidé d'intégrer certaines des demandes et améliorations les plus critiques dans cette nouvelle version appelée Gantry 4, et de mettre de côté leurs plans les plus ambitieux mais moins urgents dans la version suivante, Gantry 5.

Les nouveautés de Gantry 4 appellent à une version plus légère et plus ciblée qui porte sur les points suivants :

• Un nouveau template Responsive front-end Gantry basé sur le système de grille de Bootstrap
• Une interface administrateur back-end revisitée
• L'optimisation mineure des performances de l'administration
• LESS pour le CSS avec une compilation basée sur le PHP. RocketTheme fournis différentes options, y compris le Ever-page load et un changement concernant la recompilation pour un maximum de flexibilité du développement jusqu'à la production.
• La fusion générale des Codebases de Joomla et WordPress
• De nombreuses optimisations des performances du front-end liées au chargement de classes, à l'implémentation des caches, et au rendu.

La solution choisie par RocketTheme

Après avoir évalué tous les Responsive frameworks et les différentes solutions existantes, RocketTheme a choisi d'utiliser le système Responsive du Framework de Twitter : Bootstrap. Bootstrap est un projet provenant de gens très talentueux de Twitter et qui a été conçu pour fournir « un HTML, CSS et Javascript simple et flexible, pour les composants et les interactions de l'interface ». Pour l'anecdote, si vous avez utilisé les extensions RocketTheme RokSprocket ou RokPad dans vos projets, vous n'aurez peut-être pas réalisé qu'ils ont déjà été construits avec des éléments de Bootstrap. Dans la nouvelle version de Bootstrap, il y a maintenant une nouvelle architecture pour le Responsive Design qui utilise un système de grille avec les Media Queries pour supporter différents types d'affichage.

Répartition des grilles Responsive

Gantry 4 est basé sur le même système de grille Responsive que Bootstrap. La répartition des résolutions d'écran est la suivante :

En termes de Media Queries, cela se traduit par :

01./* Smartphones */
02.@media (max-width: 480px) { ... }
03.
04./* Smartphones to Tablets */
05.@media (min-width: 481px) and (max-width: 767px) { ... }
06.
07./* Tablets */
08.@media (min-width: 768px) and (max-width: 959px) { ... }
09.
10./* Desktop */
11.@media (min-width: 960px) and (max-width: 1199px) { ... }
12.
13./* Large Display */
14.@media (min-width: 1200px) { ... }

La seule différence ici avec les tailles standard de Bootstrap, c'est que plutôt que le 980px pour l'affichage du Desktop, RocketTheme utilise le 960px, c'était en effet leur taille standard de Desktop avant qu'il ne s'intéresse au Responsive Design. Une autre différence entre leur grille Responsive et celle de Bootstrap est qu'ils n'ont pas codé en dur les Gutters dans la grille en laissant les blocs les configurer selon les besoins. Cela permet une flexibilité beaucoup plus grande lors de la conception. On peut par exemple facilement créer des designs qui collent parfaitement au bord de la grille sans avoir à s'appuyer sur des margins négatifs.

Avec les Responsive Layouts, RocketTheme utilise leur système de grille à 12 colonnes qui est entièrement intégré à Gantry et qui permet un contrôle complet des Layouts avec une interface de contrôle très agréable, pas besoin d'ajouter manuellement vos largeurs de colonnes ici. Donc, même avec du Responsive Design, vous avez toujours 100% de la puissance et de la flexibilité que vous connaissiez avec Gantry.

Les classes supportées

Autre fonctionnalité très utile apportée par Bootstrap, les classes propres au Responsive permettant de peaufiner les Layouts en décidant d'afficher ou non tel ou tel module en fonction du périphériques clients. Grâce à celles-ci, vous êtes maintenant en mesure de saisir les suffixes de classe de module ci-dessous à n'importe quel module Joomla (Paramètres avancés) pour définir si celui-ci doit s'afficher ou se masquer en fonction de la résolution d'écran.

Navigation et Responsive Design

L'un des éléments les plus importants d'un site est la navigation, après tout, c'est la façon dont un utilisateur est en mesure de réellement explorer votre site. RocketTheme dispose d'un système de menu très sophistiqué appelé RokNavMenu. Ce système de menu supporte des rendus personnalisés qui permettent de créer une variété de structures de menus tels qu'un Drop-down (Fusion Menu), ainsi que divers Split-menus, et même parfois un hybride des deux, le Splice-menu.

Le Drop-down menu est capable d'afficher plusieurs niveaux de liste déroulante ainsi que des colonnes personnalisées et même l'intégration de modules dans le menu lui-même. On ne retrouve pas toute cette puissance et cette personnalisation dans les menus sur un appareil mobile où l'espace est limité. C'est pour cette raison que RocketTheme emploie une technique standard en utilisant un champ de sélection pour les petits appareils, à savoir les smartphones. Un champ de sélection est probablement la meilleure solution car la plupart des téléphones ont une bonne interface de sélection intégrée directement dans l'OS du mobile qui permet de naviguer facilement entre les options.

Cette solution est cependant provisoire jusqu'à ce que RocketTheme sorte un nouveau système de menu. Celui-ci sera conçu en ayant à l'esprit la notion de Responsive Design et offrira une vue beaucoup plus personnalisable avec les événements tactiles ainsi qu'une vue standard plus rapide et plus réactive. Ce nouveau système de menu sera bien sûr publié sous le projet Gantry (Version 5 ?) et sera également GPL.

Informations complémentaires

• Retrouvez la formation vidéo complète Gantry 4 par Laurent Brière

L'auteur : un expert à votre service

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

L'effet miroir avec Photoshop CS4

Pour ce deuxième tuto, j'ai décidé de vous expliquer comment appliquer un effet miroir sur une image toujours...

Arrondir les bords d'une image avec Photoshop CS4

Le principe est d'arrondir les bords d'une image qui à l'origine se présente donc sous la forme d'un rectangle....