Historique de la page

...

Qu'est ce que le responsive web design desgin ? C'est une technique qui permet d'adapter un même page web en fonction du terminal qui veut y accéder. Le site s'adaptera à la taille du terminal et à ses fonctionnalités. Pour illustrer cela un exemplede faire des sites qui s'adaptent automatiquement à l'espace disponible sur l'écran, ainsi, d’un support à l’autre, et simplement via des règles CSS, certains éléments du site peuvent être masqués, ajoutés et changés de place pour optimiser l’expérience utilisateur. Voici un exemple qui met en évidence la différence entre un site : statique, liquide, adaptatif et , responsive.

Les approches de développement

...

Cette technique est relativement répandue, surtout lors de l'adaptation en responsive d'un site déjà existant. On reprend généralement Elle consiste à reprendre le site en l'état actuel et essaye de modifier les tailles jouer sur la taille des différents bloc blocs pour les rendre adaptatif adaptatifs 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 Cette approche favorise l'expérience de l' utilisateur sur un ordinateur de bureau 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. lL'application est pensée en tout premier lieu pour les mobiles. Il faut définir les fonctionnalités qui font le coeur de Cette approche nécessite une réflexion sur les fonctionnalités proposées par l'application et faire en sorte qu'elles soient entièrement fonctionnelle facilement utilisables sur mobile. Puis par Par la suite il est possible d'améliorer cette expérience enrichir l'application en proposant d'avantages de fonctionnalités si les capacités du navigateurs ou du terminal depuis lequel l'utilisateur se connecte utilisé le permet.

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

...

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 On pourrait résumer cela à la fenêtre d'affichage/une surface d'affichage du site. Un L'article comprendre le viewport dans le web mobile vous 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 responsives et le site mydevice.io permet de récupérer d'avoir 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 terminaux. 

Les unités relatives

Avant tout un petit rappel sur article nommé "the Lenghts of CSS" qui vous rappellera les possibilités offertes par CSS afin de spécifier une taille avec l'article the Lengths of CSS.

Auparavant durant le , lors du développement d'un site il était usuel de 1200 px de large, il arrivait fréquemment de rencontrer des notations du genre pour un site de 1200px de large. :

Imaginons un site avec une structure comme ci-dessous

...

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

Dans le cadre cas d'un développement de site responsive, il n'est pas possible d'utilisateur utiliser des unités figées tel que le pixelspixel, il faudra donc se tourner vers d'autres unités dites relatives, 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 aux modifications 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 règles CSS conditionnels, conditionnelles 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 : 

...

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

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 une règle CSS conditionnel conditionnelle 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 la valeur auto permet de dire que ma la 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 elle prendra 100% de la largeur de la page. pour Pour plus d'information informations 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.

...

Performances

Un L'un des enjeux du responsive webdesign web design 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 forcent les développeurs à faire attention aux différentes libraries librairies 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 toujours 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 front-end. Cela permet de gérer beaucoup de tâches rébarbatives de façon automatique et de s'assurer d'avoir un haut niveau de qualité. On pense par exemple à GruntJS ou Gulp, qui vont pouvoir concatener tous permettre concatener tous les fichiers CSS insérés dans sa une page et minifier cette nouvelle feuille de style, et plus encore...

...

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 Applejuin 2010, avec l'arrivée de l'iPhone 4 d'Apple, on retrouve de plus en plus de terminaux à écran haute-densité sur le marché.

Cette haute densité rend ne permet pas à l'oeil humain de distinguer les pixels les rend quasiment invisible à l'oeil nue et uns des autres. Or il a été remarqué constaté que dans ces cas la là, les image images ont tendance à être floues sur le terminal. Il existe donc Pour pallier à ce soucis, il existe 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 appelée Responsive Server-Side ou plus communement communément RESS , : voir ce slideshare qui présente ce qu'il est possible de faire.

...

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éutilisableréutilisables. 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 , car il est nécessaire nécessite de charger jQuery, et une librairie lourde, il la librairie jQuery. Il n'est peut-être pas pertinent dans des projets à de petite échelleenvergure.

Bootstrap est actuellement le choix que Jasig a retenu choisi Bootstrap pour le développer le développement du thème respondr dans uPortal 4.1, c'est pourquoi pour quoi 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 . Voir la partie Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

...

Dans chacune de ces catégories les composants et la grille fournie fournis par Bootstrap aurait auront 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. 

...

Dans l'exemple ci-dessous chacune des divs , lorsque la fenêtre du navgateur sera inférieure à 768px, chaque div 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.
Et lorsqu'elle sera comprise entre 990px et 1200px, chaque div occupera 3/12 soit 1/4 de la largeur de la page.

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, formulaireformulaires en y ajoutant des class CSS CSS

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

...

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 carousselcarrousel. 

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

...

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 à ces 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 d'accéder à l'historique des discussions sur à propos de 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 basent que sur la largeur de la fenêtre, or les portlets peuvent prendre différentes tailles au sein d'une page, une . Une portlet va pouvoir avoir une largeur de occuper 40%, 50%, 60% ou même 100% de la largeur de la page. Et une même portlet pourra avoir deux largeur largeurs différentes sur une même page.

La version modifiée permet de passer outre ces les limitations des imposées par les medias queries. Il devient en effet alors possible d'avoir des "css conditionnelleconditionnelles" 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 JavaScript vient calculer la taille de chacun chacunes des portlets et lui attribue une classe correspondant au mode d'affichage dans laquelle elle se trouve.

...

A chaque redimensionnement de la fenêtre ce script va parcourir tous les éléments de la page pour recalculer taille des conteneur de porlet et leur 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

...

projets tirant parti du framework

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

...

L'utilisation de framework CSS n'est pas toujours utile, il se peut que parfois . Dans certains cas, lorsque l'existant est trop lourd, ou que l'interface se révèle très sommaire il devient soit très fastidieux soit est fastidieux et/ou inutile de se baser sur des librairies aussi conséquentes. 

Dans le cadre de l'intégration d'une portlet en se basant sur un système déjà existant l'utilisation d'un framework obligera le développeur à reprendre quasiment entièrement la structure HTML de son site pour se conformer à la philosophie du framework. Il faudra reprendre chaque bloc un par un, appliquer les class CSS nécessaire nécessaires à l'affichage des styles correspondantcorrespondants. Il sera faudrait aussi obligatoire de reprendre une bonne partie du code CSS afin d'en retirer les éléments qui viendraient entreraient en conflit des avec les classes du fournies par framework, afin d'éviter que la largeur soit surclassé surclassée par la feuille de style initial initiale mais que ce soit bien celle de la librairie qui va être soit utilisée. Un autre point non négligeable est de De plus, il faut s'assurer que les plugins JavaScript (ou jQuery) utilisés sur dans la portlet soient eux aussi responsiveresponsives... et dans le cas contraire trouvés trouver une librairie iso-fonctionnelle pour remplacer l'ancienne, avec tous les problèmes que cela peut occasionnéoccasionner...

On le comprend bien que cela peut très vite devenir lourd et très compliqué à mettre en place pour atteindre obtenir le résultat attendudésiré.

On retrouve aussi l'effet inverse dans le cadre d'une vue minimaliste dans une portlet, est-il nécessaire de charger autant de styles pour au final ne tirer partie profiter que d'une infime partie de la librairie ? Il semble que non. 

Dans ces cas la là, il parait plus pertinent de partir sur une solution sans librairie de réaliser soit même l'intégration. 

...

Comme vu précédemment il est malheuresement malheureusement impossible avec des médias queries de cibler la largeur de la portlet, nous . Nous sommes obligés de nous baser sur la largeur de la fenêtre (pour mieux comprendre cette problématique, un article explique bien les problèmes d'implémentation de cette fonctionnalité nommée Element Query).

Il faudra donc s'abstraire des medias queries et passer par une technique alternative. La technique est de détecter en JavaScript le redimensionement de redimensionnement de la fenêtre et d'appliquer une classe CSS a à un élément HTML en fonction de sa taille. 

<div class="container">	
	<!-- prendra la classe "small" si la taille de ce bloc est inférieur à 600px -->
	<!-- prendra la classe "medium" si la taille de ce bloc est supérieur à 600px et inférieur à 1100px -->
	<!-- prendra la classe "large" si la taille de ce bloc est supérieur à 1100px -->
</div> 

En Avec un CSS classique tirant partie des médias queries nous aurions écrit quelque chose comme ça ceci : 

@media screen and (max-width: 600px) {
  /* règles pour les écrans "small" */
}
 
@media screen and (min-width: 601px) and (max-width: 1100px) {
  /* règles pour les écrans "medium" */
}
 
[...] 

...

Pour mettre en oeuvre ce qui est présenter présenté dans la partie précédente nous n'avons d'autres choix que de nous reposer sur JavaScript. Il existe actuellement deux solutions : 

...

Cela tire partie des attributs data-* (compatible à partir de IE8+), ces attributs data-* ne sont pas présent prévus pour cela à la base, mais il n'existe aucune solution en CSS pour le réaliser. L'avantage de cette librairie est qu'elle est relativement légère et qu'elle permet de mettre en place rapidement des points de bascules personnalisés

...

Il est également possible de reprendre le snippet JavaScript proposé pour la version bootstrap Bootstrap et en faire une version adaptée à vos besoins

...

Dans le cadre d'un développement de ce site il est hautement recommandé de se baser sur une grille existante, il . Il est possible de se baser sur celle de Bootstrap ou même Foundation, ces deux frameworks proposent offrent la possibilité de choisir quelles partie module de la librairie téléchargé, il télécharger. Il devient alors possible de n'avoir que les grilles.

...