Oublié ?
Fermer

Identifiant oublié ?

Saisissez votre adresse e-Mail à l'étape suivante.

Continue
Oublié ?
Fermer

Mot de passe oublié ?

Saisissez votre adresse e-Mail à l'étape suivante.

Continue
Inscription
Logo NosyWeb
Aide - Tutoriels - Formation - Actualités
sur Joomla! ®
Recherche avancée
Organisme de formation Joomla! N°11 91 07318 91

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

Publié le mardi 20 novembre 2012 09:29
 

logo gantryLe 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.

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

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

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

icon gantryRé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 :

Type de périphériques Description Largeur de la feuille du site Largeur des colonnes (Grille)
Smartphones Smartphones Standard 480px et moins 100% fluide
Smartphones à tablettes Smartphones Larges et petites tablettes 767px et moins 100% fluide
Tablettes Tablettes 768px et plus 64px
Ecran de bureau Affichage standard d'ordinateurs et portables 960px et plus 80px
Ecran large Affichage large d'ordinateurs et portables HD 1200px et plus 100px

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.

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

Suffixe de classe du module Smartphones 480px et moins Tablettes 767px et moins Ecran 768px et plus
.visible-phone Visible Hidden Hidden
.visible-tablet Hidden Visible Hidden
.visible-desktop Hidden Hidden Visible
.hidden-phone Hidden Visible Visible
.hidden-tablet Visible Hidden Visible
.hidden-desktop Visible Visible Hidden

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

icone infoInformations complémentaires

Vous souhaitez en savoir plus sur le Framework Gantry ? N'hésitez pas à venir en parler sur le forum en devenant membre de la communauté Joomea
 
L'auteur : un expert Joomla! à votre service
Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis l'avènement de la version 1.5 de Joomla!, je mets mon expertise Joomla! au service des professionnels. Besoin de conseils ? d'accompagnement ? de formation ? d'un site Internet ou Intranet ? ou encore d'une prestation Joomla! de toute nature ? Contactez-moi via http://www.jeancharlesgautard.com


Ajouter vos commentaires

0

Participant à cette conversation

  • Comme quoi, un article concis et bien rédigé permet d'appréhender le responsive selon rocket, sereinement...

  • Bonjour,
    J'ai choisi d'utiliser Gantry pour le site web. Par contre, je souhaite optimiser mon site pour le responsive, où dois-je place les mediaquerries relatives a class crées dans mon site ? Puis je les insérer directement dans le fichier less personnalisé ou dois-je l'insérer dans un autre fichier ?
    je vous remercie.
    Magali

Top extensions *

*Testée et validée par NosyWeb.

En tant que professionnel utilisant Joomla vous :

Hébergeur Joomla N°1

Vous êtes à la recherche d'un hébergement optimisé pour Joomla (Rapide, Sécurisé, Simplifié,...) ? Votre hébergeur actuel ne vous apporte pas de support pour Joomla ?

Lisez ce sujet et faites le bon choix :

Quel hébergeur choisir pour installer Joomla ?

Formation Joomla Paris

A la recherche d'une formation Joomla en présentiel sur Paris / Ile de France ?
Financement OPCA / DIF possible

Formation Joomla 2.5 & 3.0 à Paris
Prochaine formation Joomla :

-- 16/05/2014 --

Newsletter

Articles en relation