Lorsque tu conçois une maquette avec un logiciel de graphisme, rien ne t'oblige à fixer de manière statique les tailles et positions des éléments: par exemple, je n'utilise quasiment jamais de fenêtre de 800 pixels de large, mais plutôt de plus petites fenêtres (500 pixels de large, ou moins) lorsque j'essaie de concevoir une maquette ou ses sous-ensembles. La maquette me sert avant tout à pouvoir choisir un jeu de polices/couleurs/marges/décorations qui soit conforme à ce que j'attends, mais lors du passage de l'image au HTML/CSS, j'exprime ces contraintes en termes d'éléments aux marges et tailles relatives, et non en termes de tableaux imbriqués aux largeurs de cases fixes.
En fait, ça se passe en cinq phases:
* expression de la structure logique du site
* en fonction de cette structure logique, maquette dessinée (papier ou tablette graphique) pour fixer la présentation
* en fonction de la maquette papier, maquettes dessinées finies, permettant d'avoir une représentation du modèle à utiliser
* expression de la structure logique du site en HTML
* expression de la structure visuelle du site en CSS, à partir des contraintes tirées de la maquette dessinée finie.
Le problème du passage direct maquette papier -> CSS (c'est comme ça que je faisais avant), c'est que taper directement le code CSS ne permet pas (ou du moins, ne _me_ permet pas, peut-être certains sont plus doués) de savoir, par exemple:
Est-ce que les titres en #A03030 s'accordent bien avec les sous-titres en #602020 ?
Est-ce que, avec un titre en font-size: 120%, les sous-titres en font-size: 80% n'ont pas l'air trop petits?
De quelle taille fixer les marges de telle boîte, pour que le texte ne soit pas trop collé au bord, ou trop éloigné?
Est-il vraiment judicieux d'utiliser tel graphisme, telle icône, telle décoration, à cet endroit? Et comment la positionner?
Bien sûr, il est parfaitement possible de procéder à tâtons avec les CSS (et parfois, dans le cas d'une modification mineure du site, ça va bien plus vite). Mais, quand il s'agit de décider de l'allure générale, complète, il me semble en général plus efficace d'avoir, sous les yeux, une page représentant ce vers quoi on souhaite tendre. En tous cas, et en ce qui me concerne, c'est toujours comme ça que j'ai obtenu les meilleurs rendus.
[^] # Re: Composer++ : après la scission
Posté par Gruik Man . En réponse à la dépêche Composer++ : après la scission. Évalué à 5.
Lorsque tu conçois une maquette avec un logiciel de graphisme, rien ne t'oblige à fixer de manière statique les tailles et positions des éléments: par exemple, je n'utilise quasiment jamais de fenêtre de 800 pixels de large, mais plutôt de plus petites fenêtres (500 pixels de large, ou moins) lorsque j'essaie de concevoir une maquette ou ses sous-ensembles. La maquette me sert avant tout à pouvoir choisir un jeu de polices/couleurs/marges/décorations qui soit conforme à ce que j'attends, mais lors du passage de l'image au HTML/CSS, j'exprime ces contraintes en termes d'éléments aux marges et tailles relatives, et non en termes de tableaux imbriqués aux largeurs de cases fixes.
En fait, ça se passe en cinq phases:
* expression de la structure logique du site
* en fonction de cette structure logique, maquette dessinée (papier ou tablette graphique) pour fixer la présentation
* en fonction de la maquette papier, maquettes dessinées finies, permettant d'avoir une représentation du modèle à utiliser
* expression de la structure logique du site en HTML
* expression de la structure visuelle du site en CSS, à partir des contraintes tirées de la maquette dessinée finie.
Le problème du passage direct maquette papier -> CSS (c'est comme ça que je faisais avant), c'est que taper directement le code CSS ne permet pas (ou du moins, ne _me_ permet pas, peut-être certains sont plus doués) de savoir, par exemple:
Est-ce que les titres en #A03030 s'accordent bien avec les sous-titres en #602020 ?
Est-ce que, avec un titre en font-size: 120%, les sous-titres en font-size: 80% n'ont pas l'air trop petits?
De quelle taille fixer les marges de telle boîte, pour que le texte ne soit pas trop collé au bord, ou trop éloigné?
Est-il vraiment judicieux d'utiliser tel graphisme, telle icône, telle décoration, à cet endroit? Et comment la positionner?
Bien sûr, il est parfaitement possible de procéder à tâtons avec les CSS (et parfois, dans le cas d'une modification mineure du site, ça va bien plus vite). Mais, quand il s'agit de décider de l'allure générale, complète, il me semble en général plus efficace d'avoir, sous les yeux, une page représentant ce vers quoi on souhaite tendre. En tous cas, et en ce qui me concerne, c'est toujours comme ça que j'ai obtenu les meilleurs rendus.