Méthodologie de développement d'un site responsive

Qu'est ce que le responsive, c'est une technique qui rend le site adaptable en largeur, et en modifiant l'agencement des différentes parties du site en fonction de la largeur de l'écran, pour illustrer cela un exemple mettant en évidence la différence entre : statique, liquide, adaptatif, responsive.

Les approches de développement

Dégradation gracieuse

Cette technique est relativement répandue surtout lors de l'adaptation en responsive d'un site déjà existant. On reprend généralement le site en l'état actuel et essaye de modifier les tailles des différents bloc pour les rendre adaptatif tout en modifiant l'affichage et le positionnement de certains blocs suivant la taille de l'écran de l'utilisateur.

En utilisant cette approche on se concentre vraiment sur l'expérience de l'utilisateur sur un ordinateur tout en lui proposant une version dégradée quand il arrive sur mobile.

Amélioration progressive, mobile first

A l'inverse de la première technique, l'amélioration progressive met le mobile au premier plan. l'application est pensée en tout premier lieu pour les mobiles. Il faut définir les fonctionnalités qui font le coeur de l'application et faire en sorte qu'elles soient entièrement fonctionnelle sur mobile. Puis par la suite il est possible d'améliorer cette expérience si les capacités du navigateurs ou du terminal depuis lequel l'utilisateur se connecte le permet.

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. 

Imaginons un site avec une structure comme ci-dessous

<div id="header" class="wrapper"></div>

 <div class="wrapper">

    <div class="content"></div>
    <div class="menu"></div>
</div>

<div class="footer" class="wrapper"></div>

Le code CSS associé :

.wrapper {
   width: 1200px;
}
.content { 
   width: 900px;
}
.menu {
   width: 300px;
}

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 : 

.wrapper {
    max-width: 1200px; /* le site peut prendre n'importe quelle taille entre 0 et 1200px */
}

.content {
    width : 75%; /* 900/1200 = 75% */
}

.menu {
    width: 25%; /* 300/1200 = 25% */
}

Grâce au modification apportées avec le petit bout de code CSS ci-dessus nous avons maintenant un site dit "fluide" quand on le redimensionne en largeur

Les medias queries

C'est une spécification CSS3 éditée par le W3C qui permet d'exécuter des CSS conditionnels, en fonction de la largeur de la fenêtre du terminal client, de son orientation, ou de certaines de ses capacités. 

La syntaxe est très simple : 

@media screen and (max-width : 1000px) {
    p {
        color: red;
    }
}

p {
    color: blue;
}

Dans ce cas, tous les paragraphes seront bleus, sauf pour les écrans qui ont une taille comprise entre 0 et 1000 pixels.

La communauté Alsacréations à publier un article très complet sur les medias queries.

Pour reprendre notre example précédent, on remarque que la page fait moins de 600px, le menu de droite n'est pas assez large, on va donc appliquer un CSS conditionnel pour lui permettre de prendre toute la largeur de la page quand la page fait moins de 600px

@media screen and (max-width: 600px) {
    .menu,
    .content {
        width: auto;
    }
}

Dans ce cas, le auto permet de dire que ma div doit reprendre son comportement initial par rapport à la propriété width, et comme cette div est un élément HTML de type bloc alors il prendra 100% de la largeur de la page. pour plus d'information sur le pourquoi du comment cet élément HTML prend toute la largeur de la page un article intéressant sur le contexte de formatage block.

Perfomances

Un des enjeux du responsive webdesign est sans nul doute la vitesse d'affichage du site et la fluidité lors de son utilisation. Le poids moyen d'une page web est d'environ 1,2Mo. Les contraintes qu'apportent les mobiles nous obligent à repenser la façon de développer et force les développeurs à faire attention aux différentes libraries utilisées. 

Pour cela il devient nécessaire d'analyser la pertinence des scripts utilisés, peut-on par exemple se passer de jQuery ? Tout dépend l'utilisation que l'on en fait dans le contexte... mais il peut-être intéressant de se poser la question.

Depuis quelques temps on découvre de nouveaux outils basés sur NodeJS qui permettent d'apporter un niveau d'automatisation très intéressant pour le développement de site responsive. Cela permet de prendre au final de gérer beaucoup de tâches rébarbatives de façon automatique et de s'assurer d'avoir un haut niveau de qualité. 

Tout particulièrement à GruntJS ou Gulp.

Des outils d'anlayses de performances de site existent et permettent d'identifier les axes d'amélioration. 

Chrome developper tools , Google page insight, WebPageTest, ...

Prise en charge des écrans haute-densité

Depuis quelques années on retrouve sur le marche des écrans à haute-densité de pixels. Cette tendance à vu le jour avec les écrans retina des terminaux Apple.

Cette haute densité de pixels les rend quasiment invisible à l'oeil nue et il a été remarqué que dans ces cas la les image ont tendance à être floues sur le terminal. Il existe donc plusieurs techniques permettant de prendre en compte ces nouveaux écrans. Cela passe par un travail au niveau des visuels du site.

Un article assez exhaustif présente 5 techniques pour adapter ses images aux écrans haute densité

Une autre approche relativement intéressante pour régler ces problèmes est la prise en charge côté serveur de la partie gestion des ressources à transmettre au client. Cette technique est appellée Responsive Server-Side ou plus communement RESS, voir ce slideshare qui présente ce qu'il est possible de faire.

Les solutions techniques

Twitter Bootstrap

Twitter Bootstrap est un framework CSS mobile-first créer par deux développeurs de Twitter, c'est une librairie comprenant une grille et un ensemble de composants CSS réutilisable. L'avantage de l'utilisation de ce système est qu'il est testé sur un grand nombre de navigateurs, cela évite les problèmes de compatibilité. 

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

Bootstrap définit quatre catégories d'écrans à savoir :

1. Extra-Small : Largeur inférieure à 768px
2. Small : Largeur comprise entre 768px et 1200px
3. Medium : Largeur comprise entre 990px et 1200px
4. Large : Largeur supérieure à 1200px

Dans chacune de ces catégories les composants et la grille fournie par Bootstrap aurait un fonctionnement différent. 

Voir l'explication du fonctionnement de la grille

On considère donc que notre site va être découpé en 12 colonnes sur sa largeur. Si l'on veut afficher 4 blocs côtes à côtes on devra leur donner une largeur de 3 colonnes chacun. 

<div class="row">
    <div class="col-xs-12 col-md-3"></div>
    <div class="col-xs-12 col-md-3"></div> 
    <div class="col-xs-12 col-md-3"></div>
    <div class="col-xs-12 col-md-3"></div>
</div>

Dans l'exemple ci-dessous chacune des divs prendra toute la largeur de la page dans les modes Extra-Small et Small et les quatres blocs seront sur la même ligne dans les modes Medium et Large

Styles de base

Il existe beaucoup de class CSS qui aident au développement de l'interface, on retrouve toutes ces class dans l'onglet CSS de la documentation, cela permet de mettre rapidement en forme des boutons, tableaux, formulaire en y ajoutant des class CSS

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

<button type="button" class="btn btn-warning">Warning</button>

Les composants

Une des grandes forces de Twitter Bootstrap réside dans la richesse des composants qu'il propose. Un composant peut être considéré comme un module dans une page, comme par exemple un menu déroulant, ou un caroussel. 

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. 

Il est possible de trouver un historique des discussions sur cette version modifiée de Bootstrap avec Jasig via l'historique de la mailing list

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

1. Portlet email-preview
2. Portlet news-reader-portlet
3. Esup-Dematec (Bootstrap en version 2.3)

Autres frameworks CSS

1. Foundation : concurrent direct de Twitter Bootstrap, on retrouve beaucoup de similitude avec ce dernier
2. Knacss : micro framework, très léger et ne contient aucun style graphique, juste une grille et des fonctionnalités de placement d'éléments, idéal pour des demandes graphiques très spécifiques

Ressources utiles

• Can I use : liste de la prise en charge des différentes propriétés CSS par les différentes versions des navigateurs
• Modernizr : Librairie JavaScript de détection des capacités du navigateur