The page this article refers to can be found at www.neuralust.com. Reload it a few times and take a look at the different designs posted by site members.
Background
Being nothing more then the entrance page to the Neuralust member sites the home page doesn't have to stick to any one style or identity. In fact, the diversity of the sites members makes it impossible to come up with something that reflects us all. With this in mind we set out to design a few page designs that would cycle using a randomizer.
It was also important to find a way to make it easy to update all the designs in the case that there is a change to the page's content - specifically to deal with new members coming on board. After thinking about using different back end and redirection schemes I came up with the idea to base the designs entirely on the separation of content and style through CSS. While this method has been touted by many, I was unconvinced of its effectiveness in a real world scenario.
Photograph: Branden Hall
Layout: Chris Casciano
The Content
The first step was to develop the html document and toss in as much structure as possible (without going insane). It was important not only to use tags that created visual structure, but also those to create a proper grammatical structure. At this step its important to ignore how ugly the page looks - the more the page looks like useit the better. This marked up content will provide the foundation for the design work later.
The Style
With the foundation html document set we were off trying to teach each other CSS. More then learning each particular tag, it is about learning how to design within these new constraints. Here are a few areas we found exceptionally helpful.
Graphics & Layout:
Nifkin
Background Images
Background images were key. This was our sole method of incorporating images in our designs. Luckily, we can assign images to most any page element.
List Manipulation
The only important piece of information on the page is the list of members. Being a list of things what better way to code that then using an unordered list. Doing that brings list bullets and line breaks that can either be dealt with or forced to change with CSS.
Hiding Content
Structural content like headers can be redundant when mixed with the visual clues of a page's design. At times they can even get in the way. For all of these times we can just turn them off using the css display property.
Photograph & Layout:
Chris Casciano
Conclusion
The structure now in place for the Neuralust home page is a success. Updating content has been easy, and additional designs can be added with minimal effort. So I guess we can also say the theory of separation of content and style seems to have worked. I think the limited content on the page was a big contributing factor, but none the less, it worked.
