Hi All

 

Just wondering how you guys plan your sites in terms of HTML and CSS layout? What I mean is do you first write out the whole HTML and then use CSS to place and style the content, or do you write a bit of HTML and then use CSS to style it, and so on?

 

I find myself doing it bit by bit and it seems to take a lot of time as I am never satisfied with where i place the content! Is it just better to write it all out in HTML entering all content of the site in and then try styling it?

Pencil & Paper first is the answer...

 

I have a lot of default stylesheet with basic styling in, so that when I come to finally write a my HTML, I can do much of it without touching the css, and then add the background images, colours & tweaks to typography and layout at the end or as I go - depending on how important the particular element is...

 

For example, adding styling for the nav as it's the key element of the page, but leaving finicky layout tweaks to the very end.

Pencil & Paper first is the answer...

Old skool - I like it! Funny how people rush to stuff like Photoshop forgetting good old pencil and paper - reminds me of the Nasa Spacepen joke.

I know I'm not a designer but I have designed a whopping 4 sites now and I do lead designers who are working on client sites with me.

What I do is plan the structure of the content - what will work best to sell whatevers being sold and for SEO. I then mark it up in semantically correct HTML. I'll add any 'section divs' and classes/id's to identify different parts of the copy (still semantic).

Then I'll sort the positioning of things out with CSS adding extra divs to get around the fact CSS can't yet handle just semantic HTML (these'll be the 'wrapper' divs you sometimes need to work across browsers).

If I'm working with a designer on a client's site I'll stop there (just adding 'placeholder' images) and let him/her do the styling in CSS and add the actual images.

That way the content is doing the best job it can in terms of Selling and SEO - all that's left to do is create a look that fits it.

I write the HTML first, then apply some styling rules (if I haven't applied a stripped down default CSS first). Then I dress the template with PS.

I tend to break my CSS files into: layout, graphic (elements) and type. I tend to group my type properties by attribute rather than class/id of late - so I jot down my colour/font-size/weight attributes, then add elements to them. That's been really handy.

After I finish the .png/.psd I take time to think how can I make everything as every website is different.Paper&pen doesn't work for me(at the end I feel it is a waste of time),I only use paper to write down an idea when the pc is turned off

 

You need to be some superhuman to write the entire html and then add the CSS.You can never predict everything perfectly and remember what you'll do for every step.I make something,then style it to fit the .png perfectly.

 

The order in which I make the website is pretty much like this: I start with the base and build on.I make the background first,then I do the container that holds/aligns the content(usually it's a fixed layout).Then I do the navigation bar.I add the places where I'll put content.Add the content.

And after some time between steps I Check&fix if everything works perfectly on every resolution on every browser(usually IE will always have a problem)

I write down the file structure, then do roughly draw the page content layout. Then i do the psd file, slice and dice.

 

Then i write the html, then i style it from the top down, tweak the html as required. Then thats my template... done and dusted.

 

I think you can gather everyone has their own style, techniques, methods etc. etc. Finding one that suits you will take some time, and trial and error.

<offtopic>

 

Bocaj - I love your avatar!

 

</offtopic>

 

It is a preference thing, how you prefer to work depends on what your preferred tools are, and also the more sites you do, the more routines & tools you'll build up, as you'll learn from what did and didn't work the time before.

Pencil and paper first, then I move onto acetate and a waterproof pencil(or a whiteboard marker) to work out my layers. Saves me a lot of time.

Thanks guys.. some very useful info there, and its nice to see everyone has different styles and approaches. I guess it is a matter of preference and the amount of time you have to actually design the site.

... acetate and a waterproof pencil(or a whiteboard marker) to work out my layers. Saves me a lot of time.

 

LOL what a brilliant idea. Now why in the hell did I not think of that?

 

 

 

good, i will test it.