Don’t Fear the CSS

Posted on Jan 5, 2007 by Damien to Web Design

I recently had a conversation with a fellow designer in Chicago about the state of the web and and the constantly evolving coding structures. He, as with a lot of web designers out there, has a general fear of CSS if not the simple lack of time to learn new techniques. He is accustomed to using simple image slices and table based layouts but in todays webby world this technique will be the death of you.

CSS and XHTML based sites are easier for search engines to pick up, quicker to load and are more accessible to people with disabilities than any other type of site. Often times image/table based sites are skipped over by search engines as their content is hidden within image files which are not accessible to the disabled let alone the search engine spiders. Old swap_image markup for rollovers is also thing of the past as this this requires the user to download several unnecessary graphics in order to use the navigation. CSS handles this gracefully and quickly.

Also table based sites are slower to load, require much more HTML markup than CSS/XHTML. Speed is key when it comes to web users. The longer the user has to wait for the information the more likely they won’t wait at all.

My advice to those out there still afraid of the big bad CSS is to head to Amazon or your local bookstore and pick up a couple books and find some in-house project for which to play with. A couple good ones to start with would be CSS, The Missing Manual by David Sawyer McFalarland and the beautifully illustrated The Zen of CSS Design by Shea and Holtzschlag.

CSS is here and as far as I can tell, it’s going to be here for quite a while so take the time to learn it. It may just save your job.

Tags: CSS

Flash and SEO

Posted on Jan 5, 2007 by Jonathan to SEO, Web Design

When it comes to search engine optimization, flash sites are generally regarded as somewhat of a problem. The problem lies in the fact that the text content of a swf (flash) file is not readily available through view source like an html site. Instead the text is embedded into the swf and therefore is not indexable by the search engine spiders. This presents a problem for sites built using all flash.
Luckily, The developers at Deconcept have this flash SEO situation under control and have broken it down for the rest of us.

Here’s how it’s done: First design your page as if you aren’t using Flash at all. To do this, design an HTML page that contains a summary of what is covered in your site (the content). Then using “swfobject.js” you tell the browser to display the flash while the search engines actually index your HTML summary. This causes Google to skip the Flash swf files and only index the HTML (the content). When a viewer with a browser that supports Flash visits your site, they will only see the Flash content. This technique basically lets a 100% flash site be treated just like any other html page as far as search engines are concerned.

Heres a preview of the code that allows the search engines to index html content but display the flash instead:

<div id=”flashcontent”>

This is replaced by the Flash content if the user has the correct version of the Flash plugin installed.

Place your HTML content in here and Google will index it just as it would normal HTML content (because it is HTML content!)

Use HTML, embed images, anything you would normally place on an HTML page is fine.

</div>

<script type=”text/javascript”>

// <![CDATA[

var fo = new FlashObject("flashmovie.swf", “flashmovie", “300?, “300?, “8?, “#FF6600?);

fo.write("flashcontent");

// ]]>

</script>

For a full breakdown as well as the source files visit deconcept here:

Tags: Flash, SEO