Processus de conception Web avec CSS - pendant ou après?

Question

Quelle est la meilleure pratique? Ajouter CSS lors de la conception Web, vous pouvez voir le résultat (ou fermer) le plus tôt possible et apporter les modifications nécessaires. Vous savez également combien de divs ou travées vous pourriez avoir besoin (par exemple pour faire l'arrière-plan incurvé croisé de navigateur). Mais à mesure que vous ajoutez de plus en plus de composants à la page, les choses se compliquent parfois, car vous avez besoin de corriger ici et là pour obtenir la conception exacte requise. Ajouter CSS après avoir terminé la conception de la page, vous pouvez voir la structure globale de la page comme il est bien, sans styles. Vous pouvez voir à quel point votre site est accessible, et le modifier immédiatement si ce n'est pas assez bon (contrairement au cas précédent où vous pouvez casser plusieurs règles CSS). De plus, après l'avoir terminé, il vous suffit de passer le plus clair de votre temps à ne modifier que le fichier CSS, ce qui est bon pour obtenir l'élan. Je n'ai jamais essayé cette dernière approche, mais je la considère sérieusement pour mon prochain projet si je peux voir des raisons convaincantes - ou si ce n'est pas bon du tout.

Merci.

Answer 1

J'ai toujours préféré l'approche filaire. Vous démarrez votre site en présentant le squelette de base, vous pouvez utiliser CSS ici pour obtenir vos colonnes ou sections de contenu esquissées. Après cela, vous passez ensuite à remplir la fonction/données/contenu du site. Vous vous assurez que vous avez le balisage requis pour s'adapter à votre contenu. Une fois que vous avez le contenu dont vous avez besoin, vous pouvez commencer à appliquer votre thème. Cette sorte de va-et-vient vous donne une bonne toile à partir de laquelle travailler. Vous pouvez voir certains des blocs de construction de base, mais ne sont pas bloqués dans une structure spécifique. Appliquer votre CSS à la fin devrait fonctionner avec le balisage et être moins "hacky" comme vous le dites.

Answer 2

Je pense qu'un gros problème avec la deuxième approche est que vous seriez sérieusement effrayer le "business" avec chaque démo!

Même si la fonctionnalité est là, et vous leur dites que le style sera ajouté plus tard, ils pourraient perdre confiance.

Sur ce seul point, je pense qu'un certain niveau de CSS est nécessaire dès le début.

Cela suppose que le projet est commercial avec des sponsors commerciaux, sinon je vois moins de problèmes avec la seconde approche.

Answer 3

Ce que je fais est de commencer à ajouter des CSS vers la fin du processus de structuration, principalement pour la mise en page. Ces types de styles seront des marges, des paddings ou parfois la taille de la police. Lorsque la structure est terminée, l'amélioration progressive peut être fait pour polir la conception.

Answer 4

Je suis un peu confus à l'angle que vous venez de poser ce genre de question.

Généralement, le design actuel est fait sur papier ou dans une application comme Photoshop ou Illustrator. Le processus de transformation de ce design en HTML/CSS vient ensuite. Identifiez vos zones de contenu principales et placez-les en tant que divs sur la page. Obtenez quelques CSS de base en place pour obtenir la structure de base de travail. Ensuite, commencez à ajouter des divs wrapper et d'autres éléments de page au besoin, pour obtenir la version HTML ressemblant à la conception sur papier. (Certainement pas tous les concepteurs suivent ce processus - par exemple, votre concepteur graphique typique (pas web) va ajouter des tranches et faire un "export vers HTML" à partir de photoshop, ce qui générera un horrible HTML non-maintenable) .La bonne chose à ce sujet, c'est que si vous venez de l'autre angle en tant que développeur, vous pouvez simplement faire le minimum HTML - identifiant vos principales zones de contenu (comme le corps principal, un peu de navigation, une boîte montrer qui est connecté, etc) et faire ces divs. Ensuite, lorsque le design est ajouté, il s'agit d'ajouter le bon CSS et d'ajouter des éléments supplémentaires au besoin au HTML.

Vous parlez comme si vous étiez en train de créer un processus de création avec HTML. Franchement, c'est la mauvaise façon de s'y prendre. Le crayon et le papier vont très loin. Aussi, si vous êtes un développeur, obtenez un concepteur. Vraiment. Il y a très peu de gens qui peuvent faire les deux. Je connais beaucoup de développeurs qui pensent qu'ils peuvent concevoir parce qu'ils savent écrire du HTML et utiliser Photoshop - mais vraiment, ils ne le peuvent pas.