Intégrer une maquette signifie la traduire à l’identique en langages pour le Web. Chaque pixel est important ! Comme une photocopie. C’est pour cela que la taille des éléments, ainsi que leurs proportions les uns envers les autres, sont fondamentaux.
Grille et proportions
Nous l’avons mentionné plus tôt : la maquette de votre site a beau être conçue pour un affichage sur un ordinateur, vous devez penser à son adaptation sur mobile et sur tablette.
"Tu veux dire qu’il faut que je fasse d’autres maquettes ? Et comment gérer la position de chaque élément pour les appareils dont les écrans sont entre deux valeurs ? Par exemple 500 px de largeur quand ma maquette est pensée pour un écran de 480 px ?"
Ne vous inquiétez pas, il n’est pas nécessaire de créer de nouvelles maquettes. Quant aux dimensions intermédiaires… Vous aurez la réponse dans quelques minutes. 
Commençons par un petit dessin ! Ou plutôt deux : un pour le smartphone et l’autre pour la tablette. Le jeu va être d’agencer les éléments de la maquette pour un écran plus petit (celui d’un smartphone) puis un peu plus grand (une tablette). Reprenez vos esquisses et, comme s’il s’agissait d’un puzzle, réorganisez les éléments.
Et voilà !
Intéressons-nous maintenant au positionnement des éléments pour les tailles d’écran comprises entre ces trois esquisses. Nous n’allons évidemment pas faire une esquisse par taille d’écran qui existe, d’autant plus que de nouveaux modèles sortent chaque jour. Nous allons plutôt définir un “breaking-point”, un point de rupture en français. Nous allons décider que l’organisation de certains éléments changera à partir d’une taille d’écran définie.
En général, nous retrouvons 4 breaking-points :
Les très petits écrans (< 768 px : pour les écrans dont la largeur est comprise entre 0 px et 768 px)
Tablettes (768 px - 991 px)
Ordinateurs (992 px - 1199 px)
Grands écrans d'ordinateurs et télévisions
Prenons un exemple et utilisons le breaking-point des très petits écrans (< 768 px). De 0 à 768 px, le<h1> et le<p> seront au-dessus de l’image. Puis, à partir de 768 px, le titre et le paragraphe seront à côté de l’image.
La clé est alors de penser en proportions plutôt qu’en pixels et d’utiliser la grille. Chaque élément compris dans la grille est mesuré en nombre de colonnes ou en pourcentages : 6 colonnes sur 12 ou 50% de la largeur de la page. Ainsi, peu importe si la taille de votre écran change : vous savez que votre élément prendra toujours 50% de l’espace total de votre page.
Vous n’avez donc pas à noter la taille exacte en pixels de tous les éléments qui suivent la grille.
Prenons un autre exemple. Ce texte : 
Visuellement, nous distinguons deux colonnes ‘invisibles’ (une à gauche et une à droite).
Si nous suivons la grille de 12 colonnes, le texte de gauche occupe un espace de 6 colonnes sur 12 et celui de droite également.
Nous noterons donc qu’il nous faudra créer deux<div> (une pour le texte de gauche et une pour le texte de droite). Chacune de ces<div> devra occuper un espace de 6 colonnes sur 12.
Par contre, lorsqu’un utilisateur visitera ma page depuis un mobile, chaque élément occupera 100% de la largeur de l’écran. Le titre viendra en premier, puis les paragraphes de la colonne invisible de gauche et les paragraphes de celle de droite. Leur contenu sera ainsi plus facilement lisible car il sera plus grand.
Il existe néanmoins un élément à noter en pixels : la largeur de la grille ! Elle ne dépend de personne et ne peut donc pas être exprimée en pourcentages.
Revenez à Photoshop et sélectionnez l’outil Règle dans la colonne de gauche. Glissez votre curseur pour mesurer l’espacement entre la ligne le plus à gauche de votre grille et celle le plus à droite.
Puis regardez la valeur qui s’affiche sur la barre supérieure, à côté de la lettre L : 1230. La largeur de ma grille est donc de 1230 pixels sur ordinateur. Notez-le sur vos esquisses afin de vous en souvenir !
Dimensions verticales
Nous avons beaucoup parlé des éléments compris dans les colonnes, mais comment mesurer les éléments en hauteur ? Peut-on également réfléchir en pourcentage ?
Oui, mais ce n’est pas très pratique.
Si nous voulons le faire en pourcentage, c'est possible. Il faut alors mesurer la hauteur totale de la page, puis l’élément à placer verticalement, et trouver la proportion. Le problème, vous l’imaginez bien, est que la hauteur de votre page est amenée à varier en fonction de son contenu !
Ce n’est donc VRAIMENT pas pratique !
Nous allons donc nous contenter de mesurer les pixels pour la version desktop et de les inventer pour la version mobile et tablette. 
