Web Design Portfolio: VitalBodies.com

Table-less, XHTML Strict, Valid, CSS Web Design. Create a multi page multi section web site from scratch in a text editor?

Why Yes.

A one page site that can assemble itself into over 100 different web pages and up to 10 different sections, 3 style sheets and all be Table-less, CSS, XHTML Strict and have every page validate?

Yes.

DESIGN: This version of the Vitalbodies web site used hand coded (in a text editor) CSS, XHTML, SSI Content Management System and Administration. All of the little site graphics and backgrounds were either created in as vector art or raster program or shot and edited with a digital camera. All of the company images a side from Ecolution where images by those companies. The Ecolution hemp bag was one of our own product shots. The site had three styles sheets the customer could choose from by clicking the small icons in the upper right corner. One layout was fluid and fills the screen and the other is a fixed width. The third what a nearly style-less design to show what having no style sheet at all looked like or for printing. At the time this site was first being served, the site was one of the few completely table less sites on-line that every single page validated XHTML strict. Each section had its own color scheme. There were countless fragments.

CMS FRAMEWORK: The hand coded content management system included a random images on the main page and a hand chosen image on each company page. The CMS also automatically created the meta title, keywords, and description and basically assembled the the whole site from reusable fragments. each main part of the site was a fragment. Meaning the nav bar was on its own page and the header on its own page etc. The fragments were assembled by a special page that determines the layout of the fragments and which fragments to use. Each fragment had to be designed with intelligence so that all the correct information was assembled in depending on what page was being assembled. The most challenging was the navbar that changed (tabs, colors, section, and page names) depending on what page and what section the site viewer had clicked to. The CMS also generated the nav barm page layout, style sheet selection, and many other features on the fly. The site design was interesting in that every page was the same page, yet that one page could assemble into any of the 100 or more pages on the web site. Pure magic!

ADMINISTRATION: This administration program was designed so one only needed to edit one single text based page in order to maintain the web site.

The Third Table-less, XHTML Strict, Valid, CSS Design:

The Forth Table-less, XHTML Strict, Valid CSS Design:

(only the style sheet is different and the random images)

Each of the sections and pages colors can be seen as you move down the page.