HTML + CSS Standard Framework
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)!