...

Dans le cas d'un développement de site responsive, il n'est pas possible d'utiliser des unités figées tel que le pixel : il faut donc se tourner vers d'autres unités dites relatives, comme comme %, vh, em, ...

.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% */
}

...

Dans ce cas, la valeur auto permet de dire que la div doit la div doit reprendre son comportement initial par rapport à la propriété width, et comme cette cette div est un élément HTML de type "bloc", elle prendra alors 100% de la largeur de la page. Pour plus d'informations sur le "pourquoi/comment" cet élément HTML prend toute la largeur de la page, consultez cet article portant sur le contexte de formatage block.

...

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 fastidieuses et/ou répétitives de façon automatique et de s'assurer par la même occasion d'avoir un haut niveau de qualité. On pense notamment à GruntJS ou Gulp, qui permettent par exemple de concatener tous concaténer tous les fichiers CSS insérés dans une page et "minifier" cette nouvelle feuille de style, et plus encoreetc...

Des outils d'analyses de performances de site existent et permettent d'identifier les axes d'amélioration : Chrome developper tools Chrome developper tools , Google page insight, WebPageTest, ...

...

Depuis juin 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 uns des autres. Or il a été constaté que dans ces cas là, les images ont tendance à être floues sur le terminal. 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.

...

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 appelée Responsive Server-Side ou plus communément 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 créé par deux développeurs de Twitter , : c'est une librairie comprenant une grille et un ensemble de composants CSS réutilisables. L'avantage de l'utilisation de ce système est qu'il est testé sur un grand nombre de navigateurs, cela évite évitant ainsi les problèmes de compatibilité. 

L'inconvénient de Bootstrap est son poids car il nécessite de charger la librairie jQuery. Il n'est peut-être donc pas forcément pertinent dans des projets de petite envergure.

Jasig a ayant choisi Bootstrap pour le développer le thème respondr dans Respondr de uPortal 4.1, c'est pour quoi il peut être pertinent de l'utiliser au sein de portlets du portail. Cependant Toutefois, l'utilisation de ce framework pour les portlets connait au niveau des portlets connaît quelques limitations qui ont été comblée comblées -en partie- par la création d'une version modifiée. Voir customizée de Bootstrap. Pour plus d'information, consultez la partie Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

...

Dans chacune de ces catégories, les composants et la grille fournis par Bootstrap auront un fonctionnement comportement différent. 

Voir l'explication du fonctionnement de la grille

On considère que notre site va être Considérons un site découpé en 12 colonnes sur sa largeur. Si l'on veut afficher 4 blocs côtes à côtes côte-à-côte, 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-dessousdessus, lorsque la fenêtre du navgateur navigateur sera inférieure à 768px (xs), chaque div prendra toute la largeur de la page.
Et lorsqu'elle sera comprise entre 990px et 1200px, chaque div occupera 3/12 soit 1/4 de la largeur de la page.

...