Step by step process for CSS/HTML layout?

Question

I'm a sometime developer who is trying to get up to speed on customer-facing sites. I have a designer (who has years of experience, but it's all been print, so she's also ramping up on web design) so I'm not looking for design or usability tips. What I am interested in hearing about is the step-by-step process of doing the actual coding for a page. I want to make sure I get off on the right foot and build the pieces up in a logical order.

So please share your thoughts on what things you generally do first, second, etc. in your style sheets and HTML. I mean after you already have mockups (in Photoshop, or whatever) and are sitting down to create your code.

For example, do you first think about all the sections on your page (header, nav bar, content, rss feeds), and then add appropriate DIVs to your style sheet? And then go in and work on each section in detail?

(I know there have been other posts for web design tips/best practices, but I haven't found any that focus on the step-by-step coding process.)

Thanks!

Answer 1

Start with the 960 Grid System, from http://960.gs - It will come with some printable grids for sketching out ideas. This CSS-framework will facilitate rapid development of layouts, with very easy to understand markup and minimal CSS on your part.

Nettuts did a video tutorial a while back showing how easy it is to design layouts with the 960 Grid System. You can view it online at http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

If you prefer to read, they have a written-tutorial as well.

Related:

If you decide to play with the 960 Grid System, you can add a bookmarklet that will overlay your pages with the grid to allow you ease in getting the layout you like. More information (along with the bookmarklet itself) available at http://gridder.andreehansson.se/

Answer 2

Here is the correct way to do this by the numbers:

1) Write your HTML. Do not do anything but write it. Do not render it in a browser to see what it looks like most importantly. Focus on semantics, brevity, and accessibility. At this point nothing else matters. If you get this step wrong nothing else will matter.

2) Validate your HTML. If your HTML fails validation then fix it before doing anything else.

3) Write CSS for your HTML. At this point your will have to render your HTML in a browser to see the impacts of your CSS. Do not make changes to the structure of your HTML to fit the demands of presentation. That is why you write your HTML first. The only things you should be altering in your HTML at this point are the class, id, and title attributes of your tags. CSS is referenced from the head section of the HTML using a link tag with an attribute of rel="stylesheet". Do not attempt to include a stylesheet using a style tag or the @import rule.

4) After the CSS is complete and everything looks pretty then create any background images required of the CSS.

5) Only after the CSS and everything required from the CSS is complete should you work on JavaScript. JavaScript does not ever go into your HTML. JavaScript always goes into an external js file. JavaScript is referenced by use a script tag that occurs directly prior to the closing body tag only.

6) Upon completion of your JavaScript pass it through the JSLint tool. Rewrite your JavaScript exactly like it says.

When I have worked with designers that have migrated from print to web I have encountered problems. Print designers typically fail to leave the print world behind when they attempt to adapt their experience of layout to the web. The web is not print. Print has different limitations and freedoms than does the web. Even grid layouts sometimes do not fail to convert from print to web design.

Answer 3

I always use a css framework I made out of a few basic stylesheets. A reset.css to make sure all margins, paddings, borders etc are the same in all browsers. Then a typography.css to set a few rules for all fonts, sizes, colors etc for all standard elements like paragraphs, lists, headings, etc. Then a forms.css to take care of the forms, and finally a wireframe.css that lets me build a page based on A List Apart's Holy Grail: http://www.alistapart.com/articles/holygrail/

In my case the wireframe consists of a header, subheader, container and footer. In the container I can specify one, two of three columns by giving it the appropriate class.

With this basic set-up I start writing the HTML very globally. Of course the divs for the wireframe sections, and then the divisions within those divs. Usually I fill the header with a h1 and a list with main navigational elements (depending on the design), the sidebars with one or more blocks of lists and/or paragraphs, and the main column with just some paragraphs. This is just to fill the page up a bit, even if the content's still gibberish.

Then I start taking each element (for instance the navigation menu), first writing the HTML for it as if it were shown in a browser without stylesheets. Make sure the semantics are okay, use h1 for headers, p for paragraph, ul/ol for lists, etc. Then when that specific element's HTML is ready and looks good in a style-less browser I start applying the css.

All the style that I add after having configured the framework's stylesheets go into a separate stylesheet, being main.css. I usually divide this stylesheet in the same way as the page, first a block with the classes that are used throughout the entire page (like recurring blocks that serve multiple purposes), and then one by one blocks with style for the header and it's contents, the subheader and it's contents, the main column, the left and right sidebar, and the footer.

This process makes me think about each html element before even applying style to it, so that the underlying html is semantically correct, but by defining the main css framework beforehand I at least have something to work in.

(an example in progress can be seen at pkr.nl/template/, where the forum tab in the topmost menu is clickable for another page with less columns).

Answer 4

After slicing the Photoshop comps, I usually write the HTML first. I use semantic HTML as much as possible. After the HTML page is complete, I move on to the CSS. The grid systems describe in previous answers are really good at helping you layout your CSS, but you really need to have your design created with that in mind.

If I'm not using the CSS grid system, I use a CSS Reset (the one provided by Eric Meyer), as it gives you the best possible starting point and the least trouble when trying to develop for IE7/IE8/Safari/Firefox. I've recently dropped supporting IE6 unless I'm paid specifically to do so.