How to organize XHTML/CSS before even starting to code?

December 30, 2010 9:46 AM

Web Design noob here: is there a standard strategy for planning XHTML/CSS structure before you start coding?

I'm still fairly new to CSS and XHTML, and my search-fu is failing me. I'm trying to figure out if there's any kind of standard - like a chart, or design mockup, or even just general advice - for planning out major structural elements of a website before you even start coding. So, for example, once the content and visual design is ready, how to determine which content elements will be or , or which elements will need to be emphasized throughout, or whatever.

I can just imagine myself assigning ids to what should be classes, etc., in the CSS once I start coding, and I'm trying to figure out the best way to organize all of this in advance so I'm not trying to do it while coding at the same time.

I hope this makes sense. Thanks!

posted by Ms. Toad to computers & internet (17 answers total)

I don't think this is exactly what you're looking for, and it's for HTML5 anyway, but there's this HTML5 Boilerplate template which is meant to function as a starting point for new projects. There are also CSS frameworks like 960.gs and the square grid which can help with the general layout of your page--you basically assign a class to your divs based on what you want and the framework handles the layout/size/margins/etc.
posted by logic vs love at 9:59 AM on December 30, 2010 [5 favorites]

Thanks - these are helpful but not quite what I'm looking for. I think what I'm looking for is more like a strategy - if, say, I were going to hand-code the site. How would I go from the visual layout or wireframe design to organizing my coding elements to doing the actual coding? I'm looking for something in that middle step - something to help me plan the various hierarchies or cascades so I realize out late in the game that I've coded something for universal style that should only have a local style.
posted by Ms. Toad at 10:14 AM on December 30, 2010

There are essentially two approaches:

The first, and more popular, is code first - the 37signals approach. There are solid arguments for it, and it works for their style.

The second is to create full mockups. That's what people at my company do - full layouts in Inkscape and then they export design elements into css sprites which they use throughout the page. It requires a bit of crazy brilliance to keep it all organized, but it tends to have people do 'richer' / less forcibly minimal designs.

And then there are middle ground approaches between the two - cycles of design and code. I think there are mostly for people who aren't coder/designers, or for imperfect client-company relationships.

And there are also a bunch of people who do IA/Wireframing first. No comment.

How your design hooks up to your code depends thoroughly on what's underneath. Ideally templating should abstract virtually all of the design-elements from your code process, but that's never really the case.
posted by tmcw at 10:47 AM on December 30, 2010

What I do is take my wireframe and box it out - isolate parts of it that need to be separate for positioning, make some general rough measurements, and use those as a base for creating div ids. Also make sure you've got everything in a wrapper div to keep the entire site contained in specific measurements.

ID tags should be used for elements that only appear once on a page - like div#header or div#footer or div#nav. Classes are for things that will appear multiple times, like an indented paragraph could be p.indent. Nesting tags is always great too - if you know you want all of the images in the main content to always have a certain border, you can just specify that with a tag like
div#main img { }

As for what needs to be universal vs. local, figure out while you're making your wireframe what colors you're using where, and what fonts you're using where. If you're making the entire site in verdana, you can specify that at a pretty high level - but if you're only using verdana in your navigation and you want to use georgia for body copy, specify that more locally, something like:
div#nav a { font-family: verdana }
div#main p { font-family: georgia }

When your site is near completion, it's a good idea to go back over your CSS and just clean it up. Find things that are redundant and eliminate them to make it as clean as possible. Don't hesitate to make notes so that you know what you were doing later. Just play with it and find a strategy that feels comfortable for you - it will get more comfortable the more you do it.
posted by girih knot at 11:01 AM on December 30, 2010 [1 favorite]

Honestly, for the scale you're probably working at right now, I'd recommend that you just start coding. That's what I do. It takes a bit of practice, but being able to lay everything out in your head or on paper is a terrific skill to have when you start dealing with more complex IA.
posted by thsmchnekllsfascists at 11:24 AM on December 30, 2010

Oh and I forgot: on the id vs. class thing, don't worry about it. If you use redundant CSS or too many divs you can always fix it when you realize your mistake. It's not like you're carving it into clay tablets.
posted by thsmchnekllsfascists at 11:25 AM on December 30, 2010

There's a book called transcending CSS that explains exactly what you want to learn, if I read you right. It has some great examples like a magazine layout and shows how you would approach it in HTML/CSS and why.
posted by circular at 12:27 PM on December 30, 2010 [1 favorite]

thsmchnekllsfascists: I'd recommend that you just start coding.

Whoa. Whoa. Whoa!
Where to start coding? I don't even know where to start. I can start programming in a number of other languages, I just can't seen to get wrapped around the HTML & CSS. Not to mention the constant struggle between content and display.
posted by Drasher at 8:40 PM on December 30, 2010

Maybe have a browse through the following links. Sounds like you're after best practices for layout and CSS. If not, the links are still worthwhile and useful.

Best Practice:
Apple - Web Page Development: Best Practices
Dev.Opera - Introduction to The Web Standards Curriculum
Isobar Code Standards
Mozilla - WebDev:FrontendCodeStandards
Web Do's and Don'ts
stackoverflow - What should a developer know before building a public web site?

CSS:
W3C schools CSS examples
A List Apart: Practical CSS Layout Tips, Tricks, & Techniques
Blueprint: a CSS framework
CSS Shorthand Guide
CSS Tools: Reset CSS
CSS CHEAT SHEET
CleanCSS - CSS Formatter and Optimiser

Other:
Web Design Articles & Tutorials
MVC for Noobs

Colors and Icons:
Color Combinations and Color Schemes
ColorSchemer - Online Color Scheme Generator
Silk icon set
posted by hungrysquirrels at 10:00 PM on December 30, 2010 [2 favorites]

Where to start coding? I don't even know where to start.

Pretty much anywhere you like! It's very organic, and as long as the elements are all in place at the end, it doesn't matter where you start.

That's not terribly helpful, is it? Here's what I do: start by building a skeleton of containers. For instance, this AskMe page seems to be split into

Header
----------
Content
----------
Footer

So I'd start there, very bare bones. The HTML, skipping the <head></head>, would look like:

<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

And the CSS would look something like:

* { margin: 0; border: 0; padding: 0; }
div#header { height: 100px; }
div#content { padding: 10px 15px 30px 10px; }
div#footer { height: 200px; }

Then I'd go into the header and start breaking that down into logo, Meta sites link bar, time bar, etc, etc. I could finish that or if I got bored on working with it, move on to the footer or the content, going back and forth until it's done, or just plow through each item at a time until I got them the way I liked them.

There's really no right way to do this as long as it validates at the end.
posted by girih knot at 10:19 PM on December 30, 2010 [2 favorites]

Er. No wrong way to do it, I mean.
posted by girih knot at 10:21 PM on December 30, 2010

Ditto girih's comment. You can't really go wrong with your progression throughout coding. Some people like to keep all their layout CSS together, all their typography CSS together, etc. Some people like to keep all their CSS for the Header together, all the CSS for the Footer together, and all the CSS for each of the boxes on their page together. You do whatever makes it easy for you to find and change and update.

You'll find as you're learning more about this that the way you're coding is awesome, or that you wish you had organized it slightly different. Do some code peeking to see what other designers do, how other designers code. What makes the most sense in YOUR head? Do it that way.

I find that assigning an obnoxious color to every div as I set up helps me to keep the space visually organized. So, if I'm leaving the sidebar coding and content till later, I'll make it background-color:blue, just so I can look at it and say "That's not whitespace, I still need to do something with it." YMMV.
posted by kellygrape at 5:56 AM on December 31, 2010

Thanks!
posted by Drasher at 7:10 AM on December 31, 2010

OK, I think what I'm looking for is a "markup guide" (thanks to the link on Transcending CSS for helping me identify that!). As I understand it, it's a way of marking up a visual layout with specific elements (h2, ol, img, etc.) to help better make the transition from the visual design to the XHTML. Something like this.

Thanks for all the additional comments and links, though - all very helpful.
posted by Ms. Toad at 7:32 AM on December 31, 2010

Along those lines, this Guide to Semantic Web Markup for Blogs may be a little useful.
posted by logic vs love at 10:02 AM on December 31, 2010

I pretty much just start typing
posted by delmoi at 5:03 PM on December 31, 2010

actually, what works best probably differs for different people. Try different things until you find one you like or discover problems with other methods.
posted by delmoi at 5:09 PM on December 31, 2010