Suggested common elements and naming conventions for websites
Andy Clarke's suggestions
OK, here goes... my latest thinking...
- #container
- Page container (usually a < div >)
- #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
Summary
My main reasons for these particular suggestions were to:
- Name for content rather than presentation or positioning
- Build a structural heirarchy
- Allow for flexibility and extensibility within a common framework
So, what do you think? Does this reasoning 'work' or am I barking up the wrong tree? And even if these conventions are not definitive (and I don't suppose for a minute that they are ;) ), how can we best promote (what Eric continues to call) 'best practices' and see a set of conventions widely used?
View a huge lists of some famous web designer's naming conventions
Comments (1)