The Web Design Process With CSS - During or After?
What's the best practice?
Add CSS during web design, you can see the result (or close) as early as possible and make the necessary changes. You also know how many divs or spacing you might need (for example to create a curved background browser background). But as you add more and more components to the page, sometimes things get hacky as you have to fix here and there to get an accurate design.
Add CSS after the page design is complete, you can see the overall structure of the page as well, no styling. You will find out how accessible your site is, and immediately change it if it is not good enough (as opposed to the first case, where you can break a few CSS rules). Plus, after you've finished it, you need to spend most of your time only changing the CSS file, which is good to get a boost.
Of course, I've never tried the latter approach, but I'm seriously considering it for my next project if I can see compelling reasons - or if it doesn't work at all.
Thanks.
a source to share
I've always preferred the wireframe approach. You start out your site laying out a basic skeleton, you can use CSS here to get a rough description of your columns or sections of content. After that, you proceed to filling in the function / data / content of the site. You will make sure you have the required markup for your content. Once you have the content you want, you can start using your theme.
This back and forth look gives you a nice canvas to work with. You can see some of the basic building blocks, but not stuck in a specific structure. Applying CSS at the end should work with the markup and be less "hacky" as you put it.
a source to share
I'm a little confused at the angle you came from to ask such a question.
Typically, the actual design is done on paper or in an application such as Photoshop or Illustrator. After that, the process of converting this design to HTML / CSS. Define the main content areas and place them as divs on the page. Get some basic CSS to get the basic structure to work. Then add cover separators and other page elements as needed to get a paper-like version of HTML.
(Definitely not all designers follow this process, for example your typical graphic (not web designer) is going to add slicers and "export to HTML" from Photoshop, which will create some horrible unsupported HTML).
The nice thing about this is if you come from a different angle as a developer, you can just do some minimal HTML - define the main content areas (e.g. main body, some navigation, a box showing who is logged in, etc.) and creating these divs. Then, when the design is added, it is a matter of adding the correct CSS and adding additional elements as needed in the HTML.
You speak as if you are doing a creative design process using HTML. This is, frankly, the wrong way. Pencil and paper go LONG. Plus, if you're a developer, get a designer. Indeed. There are very few people who can do both. I know a lot of developers who THINK they can develop because they know how to write HTML and use Photoshop, but they really can't.
a source to share
I think the big problem with the second approach is that you seriously scare the "business" with every demo!
Even if the functionality is there and you say the style will be added later, they might lose confidence.
At this point, I think a certain level of CSS is required from the start.
This assumes that the project is commercial with business sponsors, otherwise I see fewer problems with the second approach.
a source to share