Design Coding. The SEO Rapper
The Poetic Prophet (AKA The SEO Rapper) is back with another marketing rap. This time he describes how web standards and proper design can affect the ranking and conversion of pages on your site.
The Poetic Prophet (AKA The SEO Rapper) is back with another marketing rap. This time he describes how web standards and proper design can affect the ranking and conversion of pages on your site.
How do you answer the Internet Explorer 6 question?
- Design for better browsers, then design alternative solutions to handle IE6 bugs?
- Write a remedial IE6 stylesheet to address layout issues?
- Use JavaScript to bootstrap CSS support in IE6?
- Make your site look exactly the same in IE6 as in any other browser?
- Develop to better browsers and spend no development time or testing for IE6?
- Block IE6 users from seeing your site's styles?
Comments (0)

photos credit: http://www.hotdesign.com/
Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.
Overview: What’s in it for me?
We'll give you an introduction to a way of working that will
- make your pages load faster
- lower your hosting costs
- make your redesigns more efficient and less expensive
- help you maintain visual consistency throughout your sites
- get you better search engine results
- make your sites more accessible to all viewers and user agents
- and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.
We'll also talk about how laying out pages with Cascading Style Sheets (CSS) requires a slightly different way of thinking about your content and your markup than you may be used to.
The problem with using tables:
- mixes presentational data in with your content. (This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit. Bandwidth ain't free. )
- This makes redesigns of existing sites and content extremely labor intensive (and expensive).
- It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
- Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.
Comments (0)

Blame is the cure, cure anything”—Mike Doughty
Readers and conference participants know that the more I write and talk about web standards, the more I point out that they really don’t exist. Step back with me for a moment: we wouldn’t need a web standards movement if there were standards! We continue to do the very best work we can to arrive at a standard of quality and professionalism. Sadly, however, despite a decade or more of web standards evangelism, we face the prospect of losing whatever influence we’ve gained these past years.
Comments (1)
I really like this article. I have to admit, doing this technique requires high expertise to be able to achieve.
Comments (1)
Find your strengths and excel above the rest
So many web developers claim to know all when it comes to web, but when put to the test someone that can write “hello world” doesn’t meet the standards the client expected when they said “Do you know PHP?” All developers whether primarily front-end or back-end, should know at least a C level amount in both. To be an awesome back-end developer you need to be able to structure your content in something other than tables or invalid HTML, and to be an awesome back-end developer, you should at least know how to make simple variables and includes to make your job quick and efficient, rather than copying/pasting your doctype and head information on each page. If you want to do well in the next few years, then succeed by being a GURU in at least two of the following:
- XHTML and CSS – with clean and valid markup that works in FF, Webkit, and IE7+
- Flex and ActionScript – flash/animation/design are a huge plus
- JavaScript – with and without frameworks, jQuery or MooTools knowledge a plus
- PHP – cakePHP or codeignitor frameworks will take you to the next level
- .NET – IIS and server administration a plus
- Ruby – Rails will take you to the next level
- JAVA – desktop publishing knowledge a plus
Learn new and trendy technologies
While following trends isn’t always a good idea, trends that have been around for more than just a year and have high demand are usually worth taking a second glance at. In the past 5 years, there are a few major trends that are really growing. I highly recommend picking one of the trends and learning as much as you can about the technology on the side of your current studies and work..
Comments (0)
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)
Comments (1)