OpenRoad + Mod7

Two pioneering organizations, together at last.

OpenRoad is pleased to announce the acquisition of creative agency Mod7.

Read the letter from our Principal

No thanks, continue to website

OpenRoad is pleased to announce the acquisition of creative agency Mod7. Read the letter from our Principal.

toggle mod7

HTML + CSS Standard Framework

Posted on July 20, 2006 in Design by Mod7

In this article, the author takes a stab at creating a naming convention for universal web page elements. Ambitious, if not a bit simplistic.

In general, I'm in favour of this sort of thing on a corporate level.

On a related note, I appreciate this guy's motivation for introducing such conventions:

"...as a businessman I would like to establish conventions which make my development time more efficient and therefore more profitable."

This is a big challenge for companies like ours, who pride themselves on unique solutions to unique problems. There isn't a lot of space for process and workflow flexiblity when every project is so vastly different. ("vastly" is a bit of an over-statement, sure -- it's not like we're making websites in one project and then stuffed bears on the next...) 

Regardless, looking at this guy's suggestions, I already see that it doesn't apply cleanly to one of the music-based websites we're working on. His conventions are:

#container
Page container (usually a 
)
#branding
Used for a header or banner to brand the site.
#branding-logo
Used for a site logo
#branding-tagline
Used for a strapline or tagline to define the site's purpose
#nav or #navigation
Used to contain a navigation device
#nav-main
Main or primary navigation
#nav-section
Navigation to pages within the current site section
#nav-external
Navigation to pages outside the site
#nav-supplementary or #nav-supp
A supplementary list of links, perhaps in a footer. This can replace the common, but presentational #footer
#nav-(whatever)
A list of links named at a designer's descretion
#search
Related to search interface and search results
#search-input
A search form
#search-output
Search results which could include a 
or other markup including definition lists
#content
Used for content rather than for another purpose such as navigation
#content-main
The main content area
#content-news
News related content
#content-(whatever)
Could include any form of content, including #content-related, #content-quote etc.
#siteinfo
Used for various site related information
#siteinfo-legal
Copyright information etc.
#siteinfo-credits
Designer or other credits

E-commerce related

#content-products
An overall area containing products
.products
Referring to individual products
.products-prices
Prices, discounts, special offers etc.
.products-description
A summary or longer description of a product
.products-review
A customer review
.products-(whatever)
Could include any form of product related content

This is great for corporate brochure sites or blogs, but it gets pretty restrictive (and thus useless) for some of the kinds of things we do.

That said, I still can't underscore enough the importance of establishing consistent conventions on the project level. This is critical and sometimes gets brushed aside in the rush to "get it done". Which brings me back to my original lament -- I wish we could get rolling on the production of projects sooner by using a standard framework of conventions (and not redesigning the wheel on every go)!

Back