Historique de la page

...

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

Les unités relatives

Avant tout un petit rappel sur les possibilités offertes par CSS afin de spécifier une taille avec l'article the Lenghts of CSS

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 dites relatives, comme %, vh, em, ... et dans ce cas le code associé deviendra ceci : 

...

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 responsivefront-end. 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. 

On pense par exemple à GruntJS ou Gulp, qui vont pouvoir concatener tous les fichiers CSS insérés dans sa page et minifier cette nouvelle feuille de style, et plus encore...

Des outils d'analyses 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é

...

(function($) {
	var $portletContainers;
	$(document).ready(function() {
    	// all portlets must have the CSS class .container
    	$portletContainers = $(".container");
    	// 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("small medium large");
	        if(portletWidth < 600)
	            $that.addClass("small");
	        if(portletWidth >= 600 && portletWidth < 1100)
	            $that.addClass("medium");
	        if(portletWidth >= 1100)
	            $that.addClass("large");
    	});
	}
})(jQuery);

Autres frameworks CSS

Utilisation d'une grille

L'élément le plus important dans la réalisation d'une portlet ou d'un site responsive est la grille qu'il utilise. Les frameworks sont toujours fournis avec une grille, on le retrouve chez Bootstrap, Foundation, Unsemantic, Knacss, ... 

Une grille fonctionne toujours de la même manière, c'est tout d'abord un nombre de colonne défini avec un espacement entre chaque (que l'on appellera gouttière) qui va former une ligne. Le système de grille le plus répandu se base sur 12 colonnes mais il est autant possible d'en avoir 16 ou 8.

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

Autres frameworks CSS

1. Foundation : concurrent direct de Twitter Bootstrap, 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
3. ...

...

• 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
• Browserstack : Service permettant de lancer des VM en spécifiant l'OS, le navigateur et la version du navigateur (y compris pour des mobiles)
• HTML5Boilerplate : Bâse de projet regroupant toutes les bonnes pratiques du développement front-end
• Code Guide : Guide de bonne pratique de développement front par @mdo un des développeurs de Twitter Bootstrap
• Writing Efficient CSS : Article du Mozilla Developer Network
• Getting to 60fps using Chrome devtools : utilisation des outils de développeurs chrome pour améliorer la fluidité général d'un site