Case Study: ProjectSeven.com

Cascading Style Sheets are a mainstay of effective SEO template optimization. They eliminate the need for table code by defining regions on a page. With the code stripped of formatting, a page that takes advantage of CSS looks more like a text document then HTML. The lack of bloat code allows engines to see exactly what is on a page without having to parse the page. The defined regions in CSS coding also allows the programmer to place important information near the top of the page no matter the layout. Regions, no matter their page position, can fall anywhere in the code.

But there are other uses for CSS beyond mere text formatting and layouts. How about fly-out and tab navigation structures made only of text links? Or what about tree structures that don’t involve tons of messy JavaScripts? But who has time to program the CSS to get all this done? PVII – that’s who. They’ve done all the work for you.

Project Seven (PVII) is an organization dedicated to making use of Cascading Style Sheets, and they’ve created a series of Dreamweaver Extensions and CSS tutorials that enable designers and optimizers alike to create complex navigation structures and layouts using style sheets. The CSS tutorials are free and offer assistance in learning the basic syntax of style sheets and how to create rollovers effects and make CSS tables. For those who yearn to do more with Cascading Style Sheets, PVII offers extensions, many for free, that allow Dreamweaver to create pages using style sheets.

For an example of how effective CSS can be, look no further then Project Seven. By viewing the source of PVII’s homepage, we can see the unintentional use of good optimization techniques. Looking at the head of the code, we see good use of the title tag along with links to several external style sheets. There are also two smaller conditional style sheets that are there to ensure the page renders correctly on Internet Explorer. The body of the page features the main content first. The keyword-rich text also makes use of heading tags to emphasize importance. Scrolling down in the code we come to the best aspect of the code. The sidebar navigation, which renders to a flyout navigation bar, is created using a series of unordered lists. The list items contain nothing more then text links.

On the engines, this translates to success. The phrase “Dreamweaver extensions” has nearly a million competitors in Google, PVII occupies spots 4 and 5, just above Macromedia. In Yahoo!, they occupy position 5. The easy to read code and abundance of text links has enabled spiders to easily index the site. Google has 508 pages indexed, Yahoo! has 504, MSN with 234, and Teoma totaling 286. This success on the engines and great products has led to a huge number of links across the engines. On Google, there are 341 backlinks reported, MSN reports 2,707 links, Yahoo shows 2,750 links, and Teoma reports a whopping 23,700 inbound links!

Though there are some backwards compatibility issues with Cascading Style Sheets, PVII has employed methods that allow the style sheets to gracefully degrade. This translates to the optimal intended experience for the end user as well as having a fully search engine friendly site. There is a learning curve when dealing with CSS. But through their numerous tutorials and Dreamweaver extensions, Project Seven actively teaching the web community how to overcome these obstacles while unintentionally exposing them to the world of web marketing.