I am a self-taught Search Engine Optimization (SEO) guy, something I take pride in. I am also a self-taught website designer and get excited when I learn new skills that both improve my design and SEO abilities. I am not, however, programming minded and so getting my head around an entire page layout without using tables was a bit daunting.
I finally decided to take some time to teach myself and I’m glad I did. Using CSS instead of HTML tables reduces you page HTML code. Reducing your page code means it loads faster which is always a great thing.
For search engine optimization, less HTML code means the important content with your chosen keyword phrases is more prominent - the code to keyworded copy ratio is much better. Search engines will value this improved ratio and so your website stands a better chance of ranking higher for keywords on your page (assuming you use other SEO methods - title tags, incoming links, etc). A quick word of caution; do not over-use keyword phrases (known as ‘keyword stuffing’) as this may cause your page to actually lose positions. Always try to write so that when you read you content out loud it doesn’t sound like you are repeating words too often.
So, if you know some HTML and CSS, I strongly recommend you learn to build a page without tables. When you get your first tabless web page working you will be glad you took the time. If you are like me and need software help to create your websites, programs like Dreamweaver are very helpful so you can see how your page looks as you go (WYSIWYG). WARNING: these ‘what you see is what you get’ (WYSIWYG) programs are not always correct in their representation so be sure to check browser compatibilities (see below).
Once your tabless CSS design is working, you will want to check it displays properly across popular browsers such as IE, FireFox, Opera, Safari, etc. I use
http://ping.fm/DKebs which allows you to paste in your web page URL/URI and choose the browser you want to test (they have all of them). Give the site some time to do its thing and you will get screenshots of your web page’s appearance in each browser. You can also download the screenshot to your computer.
I recommend you also validate your CSS. If you do this then when it comes to checking your cross-browser compatibility, you will find very few issues. You can validate your CSS by going to the W3C CSS Validator at
http://ping.fm/7YFG7For some great information on designing a tabless website using CSS, I highly recommend SitePoint’s ‘CSS Utopia: Designing Without Tables Using CSS’ (see
http://ping.fm/mqU9U). This ebook helped me a lot and I found it less of a trauma then I thought I would. I already had an understanding on a good amount of CSS so found it easy but it teaches you the very basics step by step with actual web pages you can download. Combining resources like this book with the W3C CSS Validator allows you to learn a lot.
Well, that’s it for now. Make sure your website has built-in SEO!