[Total : 3   Moyenne : 5/5]

responsive-web-design

Vous souhaitez réaliser un site responsive ? Que ce soit pour un projet en code html/css pur ou bien pour créer un thème sur mesure pour WordPress, Joomla, Drupal ou autres… C’est ici que ça se passe.

Pour cette première étape de la création d’un site responsive « from scratch » (depuis zéro), nous allons commencer par l’étape de la création des maquettes graphique. C’est l’essence même de la qualité du résultat final, donc autant faire les choses proprement et ne pas se compliquer la vie.

A savoir : Les sites actuels ont un « standard » de 960 pixels de large, même si avec l’évolution des tailles d’écran, la tendance va s’étirer petit à petit vers du 1200 pixels. Les 960 pixels sont plus sûr pour garantir que votre site s’affichera en pleine page même sur les petits écrans (notebook, ordinateurs compacts…).

 

Aller cette fois on attaque le gros du morceau :

Qui dit responsive, dit grille. Pour faire un site qui s’adaptera au support (ordinateur, tablettes, mobiles), il faut résonner en terme de colonnes. On notera d’ailleurs une utilisation fréquente d’une base de 12 colonnes. Il est possible de travailler sur une base de 12, 16 ou même 24 colonnes.

 

Ou trouver cette grille ? Comment s’en servir ?

La grille se trouve sur le site 960 Grid System.

> Cliquez sur le gros bouton de téléchargement (on ne peut pas le louper).

960 Grid System

 

 > Ouvrez le ZIP, puis cliquez sur le dossier « Templates »

templates-zip

 

 

> On aperçoit alors qu’il existe des grilles pour pas mal de logiciels, dont Illustrator, Gimp, InDesign … Celui qui nous intéresse pour ce tuto c’est Photoshop.

> Ouvrez le ZIP, puis cliquez sur le dossier "Templates"

 

 

> On fait alors le choix du nombre de colonnes désirées. Personnellement je conseil le 12 colonnes.

12col-zip

 

 

> Adobe Photoshop s’ouvre, et une maquette avec 12 colonnes apparaît. La base de votre design est prêt !

grille12-psd

 

J’ai mes 12 colonnes, maintenant qu’est ce que je fait ?

A partir de maintenant, il vous faut construire votre maquette selon les colonnes. Autrement dit, une div devra faire un nombre de colonne(s) entier.

Chaque élément aura un nombre de colonne défini, et chaque ligne sera remplie de 12 colonnes. Les images parlent mieux que les mots alors voici une illustration simplifié du rendu :

 

mapping 12 colonnes psd

Réaliser un mapping de la maquette au préalable pour organiser votre contenu

 

> Commencer par faire un mapping comme ci-dessus pour organiser le contenu. Une fois que vous en êtes satisfait, vous pouvez commencer à travailler tous les détails de votre maquette (créer le menu, choisir les polices, les tailles des titres et des paragraphes, le choix des couleurs, l’intégration du logo etc).

Conseil Funky : Plutôt que de remplir vos faux textes avec du « Lorem Ipsum », pensez à Fileratti ! =)

> Le but étant d’arriver à un résultat final comme celui-ci, où chaque élément est placé selon les colonnes :

 

maquette-12 colonnes

 

> Répétez l’opération pour toutes les pages.

Sauf exception : si votre page « historique » a la même organisation des éléments que votre page « Qui sommes nous? » nous vous embêtez pas à recréer une maquette pour chacune. Puisqu’elles auront la même disposition, la seule chose qui changera sera le contenu (titres et paragraphes).

Voila, vous avez à présent les outils et conseils nécessaires pour réaliser des maquettes graphiques pour vos site web. Avec ce système de colonnes vous créerez plus facilement vos maquettes et le résultat sera propre, clair et organisé.

Cette méthode est la base du responsive, elle simplifiera largement l’intégration HTML/CSS et vous fera gagner énormément de temps.

Nous verrons dans le prochain tuto comment intégrer votre maquette 12 colonnes avec le Framework Twitter Bootstrap, afin d’en faire une maquette fonctionnelle en HTML/CSS complètement responsive. A bientôt !