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 (0)