When coding a new website, most of us begin by laying out the page and writing the CSS and generally working from what I consider to be the “outside” inwards. Once the layout is complete and we are happy with our design, we then begin to fill the various containers we created with the content. I recently came across an article by Aaron Gustafson on the topic of Understanding Progressive Enhancement. In this article Aaron brings up some good points about why designing this way might not be the best option.
What’s the Alternative?
Designing from the content out, and when you think about it this kinda makes some sense. People come to your website with one goal, to consume content. Whether your content is text, audio, or video it cannot be disputed that people are there for the content. With this in mind it seems only logical that content should be the foundation of your design, on which you will layer the decoration and interactivity. An easy way to visualize this is using a peanut M&M, where the content is represented by the peanut, the presentation is the chocolatte dip, and the client-side scripting is the hard candy shell.
Structure of a Website Using an M&M
The peanut represents content in it’s undecorated XHTML state. It is the cornerstone of your website and, in the case of search engine spiders and some mobile browsers, it might be the only part of your site that is accessible. Keeping this in mind it becomes apparent how important it is to have your markup describe to the highest detail the content that it contains.
Tasty in it’s own right, this little bit of spider/human food could be served up all by itself but it’s not all the snack it could be without a little help.
If your browser supports it, CSS is the graphic chocolatty indulgence that turns plain content into dazzling web pages. Despite the apathy of search engine spiders to the “attractiveness” of a web page’s presentation, your human viewers are far more inclined to have a positive reaction to your website after it has been drizzled in chocolate.. erm.. CSS.
Hard Candy Shell
Putting it Together
Putting it all together requires a relatively simple workflow, and the steps that follow are just one way of doing it.
- Open up Textmate (or your favourite editor) and code up your index page using only your content and semantic XHTML. Be as descriptive as possible in your markup. Code as if there was no second step and this was it.
- Save your file into your htdocs folder and fire up MAMP (Mac Apache MySQL PHP). Once Apache has finished starting go ahead and open up your page in your browser. At this point it should look mighty plain, but still readable and organized.
- Open up CSSEdit and browse to the local html file we just wrote in TextMate. Get out your tongs and prepare to dip that plain webpage in some chocolate CSS goodness. Once you are done with the chocolate you can head back over to TextMate and top it all off with some client-side scripting.
Original Content Credit to Aaron Gustafson