Historique de la page

...

Cette technique est plus lourde à mettre en place lors de développement sur des produits existant mais devrais être privilégier dans un projet ayant une portée mobile.

Comment cela se passe-t-il en HTML/CSS

Le Viewport

C'est une composante très importante à prendre en compte lors de la réalisation d'un site web responsive. C'est une balise HTML qui sert a donner les instructions du comportement du viewport du client. 

Qu'est ce que le viewport ? on pourrait résumer cela à la fenêtre d'affichage du site. Un article comprendre le viewport dans le web mobile aidera à comprendre les concepts liés à cette balise HTML.

Il arrive régulièrement que cela soit source de problème lors de la réalisation de sites responsive et le site mydevice.io permet de récupérer un récapitulatif complet des configurations du navigateur affichant cette page.

Voici un autre article de la documentation Apple résumant le fonctionnement du viewport sur ses terminaux 

Les unités relatives

Auparavant durant le développement d'un site il était usuel de rencontrer des notations du genre pour un site de 1200px de large. 

...

Dans le cadre d'un développement de site responsive, il n'est pas possible d'utilisateur des unités figées tel que le pixels, il faudra donc se tourner vers d'autres unités, comme %, vh, em, ... et dans ce cas le code associé deviendra ceci : 

...

L'inconvénient de Bootstrap est son poids, il est nécessaire de charger jQuery, et une librairie lourde, il n'est peut être pas pertinent dans des projets à petite échelle.

Bootstrap est actuellement le choix que Jasig a retenu pour le développement du thème respondr dans uPortal 4.1 c'est pourquoi il peut-être pertinent de l'utiliser au sein de portlets du portail. Cependant l'utilisation de ce framework pour les portlets connait quelques limitations qui ont été comblée par la création d'une version modifiée, voir la partie Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

Fonctionnement de la grille

...

Dans ce cas Bootstrap propose un ensemble de composant prêt à l'emploi en se basant sur ses styles de base. l'avantage principale d'utilisé cela c'est que tous les composants sont responsive de base.

Adaptation de Twitter Bootstrap pour fonctionner dans un contexte

...

portlet

Dans le cadre de développement de portlet responsive, Mohamed Belmokhtar a pu repérer certaines limitations du framework quand on l'utilise au sein d'une portlet. 

Effectivement, les medias queries détectent la largeur de la fenêtre dans son intégralité, tandis qu'une portlet ne représente qu'un fragment de la page. Dans ce cadre la, Germain Souquet et Mohamed Belmokhtar ont mis en place une version modifiée du framework pour s'adapter aux contraintes. Les sources sont disponibles sur Github.

Cette solution se veut iso-fonctionnelle par rapport à la version non modifiée. Cependant il reste aujourd'hui quelques conflits de classes de la version modifiée/non modifiée quand on utilise cette librairie avec uPortal 4.1 et le thème respondr. 

Nécessité d'implémentation de modification au sein du framework

Comme évoqué précédemment les medias queries ne se base que sur la largeur de la fenêtre, or les portlets peuvent prendre différentes tailles au sein d'une page, une portlet va pouvoir avoir une largeur de 40%, 50%, 60% ou même 100% de la largeur de la page. Et une même portlet pourra avoir deux largeur différentes sur une même page.

La version modifiée permet de passer outre ces limitations des medias queries. Il devient en effet possible d'avoir des "css conditionnel" en fonction de la largeur de la portlet elle même.

Chaque portlet possède donc une classe indiquant que c'est le conteneur de la portlet, et un script javascript vient calculer la taille de chacun des portlets et lui attribue une classe correspondant au mode d'affichage dans laquelle elle se trouve.

Fonctionnement de la version modifiée

Il faut insérer un petit snippet JavaScript dans la page 

(function($) {
	var $portletContainers;
	$(document).ready(function() {
    	// all portlets must have the CSS class .pc
    	$portletContainers = $(".pc");
    	// Resize event isn't fired on DOM Content Loaded, we launch the function manually
   		onWindowResize();
  		$(window).resize(onWindowResize);
	});
	function onWindowResize() {
    	$portletContainers.each(function(index) {
        var $that = $(this);
        var portletWidth = $that.width()
        $that.removeClass("xs sm md lg");
        if(portletWidth < 768)
            $that.addClass("xs");
        if(portletWidth >= 768 && portletWidth < 992)
            $that.addClass("sm");
        if(portletWidth >= 992 && portletWidth < 1200)
            $that.addClass("md");
        if(portletWidth >= 1200)
            $that.addClass("lg");
    });
}
})(jQuery);

A chaque redimensionnement de la fenêtre ce script va parcourir tous les éléments de la page pour recalculer taille et appliquer la classe CSS en fonction de leur nouvelle largeur. 

La limitation actuelle de ce système est qu'il ne gère pas le déplacement de portlet en drag & drop, imaginons que la portlet. Cela fait partie des évolutions futures du développement. 

Exemples de projet tirant parti du framework

...