Principes de base du responsive web design

Bonjour, je m'appelle Daniel Walter Scott. Dans cette vidéo, nous allons voir en quoi consiste un site web en responsive design.

Avec ce type de site web, la mise en page s'adapte à l'écran d'affichage.

Voici le site que nous allons créer dans cette série de tutoriels. Je vais utiliser mon MacBook Pro sur lequel l'espace disponible à l'écran sera exploité au maximum.

Quand on opte pour le responsive design, il faut s'assurer que la mise en page s'adaptera aux écrans de tablette et de smartphone. On va donc commencer par examiner les maquettes que nous avons réalisées dans Photoshop. Chacune d'elles correspond à une mise en page spécifique du site. Le maquettage s'opère dans Photoshop. Pourquoi commencer dans Photoshop, me direz-vous ? Et bien parce que c'est une application conviviale et rapide. Vous pouvez déplacer les éléments, régler les couleurs, etc. sans le moindre problème. Le but est d'obtenir des compositions de ce type,

sachant que leur rôle est uniquement de définir l'apparence du site et non d'offrir une quelconque interactivité. Et c'est là que Dreamweaver intervient. C'est dans cette application qu'on ajoutera les éléments d'interactivité et les fonctionnalités qui permettront au site de s'adapter aux différentes tailles d'écran. Ces trois maquettes sont toutes basées sur le même contenu. Celle de droite est destinée aux terminaux mobiles, celle du milieu aux tablettes, et celle de gauche aux postes de travail. Le processus de création dans Photoshop a pour but d'optimiser la présentation du contenu pour les écrans des terminaux mobiles, des tablettes et des postes de travail.

Même si les maquettes présentent toutes le même contenu, il convient d'adapter chacune d'elles à la taille de l'écran. Si vous les observez de plus près, vous noterez une différence majeure entre la version pour terminal mobile et celle pour tablette, avec un menu de navigation vertical sur la première et horizontal sur la seconde. Nous avons imaginé quelque chose de différent pour les postes de travail, avec un logo sur la gauche, et le menu de navigation sur la droite.

Le corps principal de la page diffère lui aussi, et c'est flagrant si on fait la comparaison avec les versions pour terminaux mobiles et tablettes. La grille du site mobile tient sur une seule colonne et celle du site pour tablettes sur deux colonnes, tout comme celle du site pour postes de travail, à quelques différences près.

La principale différence, c'est que les quatre images occupent une seule ligne sur la version pour postes de travail et deux lignes sur la version pour tablettes. Et sur la version mobile, elles sont empilées.

Jetons maintenant un œil à la version définitive du site web que nous allons créer. Voici la version pour postes de travail, conçue à l'aide de Dreamweaver. Je vais cliquer sur le bord droit de la fenêtre et le faire glisser jusqu'à atteindre la taille approximative d'un écran de tablette. À mesure que je réduis la fenêtre, les éléments s'ajustent et les photos s'adaptent. Et dès que j'atteins un certain point, on bascule sur la mise en page pour tablettes.

Si je continue à réduire la fenêtre jusqu'au format pour terminaux mobiles, on retrouve le menu de navigation vertical, avec les photos les unes au-dessus des autres.

Les spécificités de cette version sont principalement le menu et la disposition verticale de la grille. Les éléments du menu sont donc empilés sur la version pour mobiles, côte à côte mais centrés sur la version pour tablettes, et à droite sur la version pour postes de travail. Les principales différences au niveau de la grille d'images en dessous se situent au bas de la page, avec les photos sur une seule ligne. Si je passe à cette version, elles se retrouvent sur deux colonnes. Sur la version pour terminaux mobiles enfin, elles sont les unes au-dessus des autres.

Il existe d'autres différences plus subtiles, comme la taille des polices et cette marge intérieure. Pour l'instant, il n'y a aucun espace à ce niveau mais si j'agrandis la fenêtre pour passer à l'affichage pour tablette, la marge intérieure apparaît et la taille de la police est bien plus petite. Même si ce site évolue et change en fonction de la taille de l'écran, il n'en demeure pas moins relativement simple. Cette série de tutoriels est l'occasion parfaite de concevoir votre tout premier site.

Nous procéderons étape par étape, en découvrant tous les outils de Dreamweaver qui simplifient le processus à l'extrême.

Bien. Maintenant que vous savez ce qui caractérise un site web en responsive design, visionnez les autres vidéos de cette série pour apprendre à en concevoir un à l'aide de Dreamweaver.