Tables To CSS

With some free time on my hands, I sat down and converted one of my older personal websites from a table based layout to a css based one. Highlighted below are some of the advantages of this approach (if I were still using this site) and a few changes I've made. For comparison purposes, the original is located here (content removed).

  • Layout is done with css & <div>s and not with tables. The advantages of this are:
    • The page is sematically correct. Tables are intended to be used for tabular data, not to make thigs look pretty.
    • The page degrades well on devices with small screens. Tables aren't broken up well on small screens, so the user ends up having scroll both horizontally and vertically. With a css based layout, the page is presented more like a formatted page. For a demonstration of this, try looking at this site, and at the old one on an older smart phone.
  • This content window is implemented using a <div> with overflow-y set to scroll, rather than by using an iframe. Iframes are not always very secure, and on top of that, reloading a page with an iframe resets the content of the iframe. Try it out on the the old page. Annoying, isn't it?
  • Non-content/nonessential <img>s are replaced with css background-images. As above, this helps the page to gracefully degrade on devices with small screens. Additionally, what were once just image links with alt text have been replaced with actual text with background images. This improves search engine visibility as well as accessibility. The page then uses an image replacement technique so we can preserve the appearance we want.
  • In the previous version, the "best on firefox" badge came at the beginning of the html document. "Best on firefox" is not the main content though, and having it up there isn't good for SEO. In the new version, the badge is located at the bottom of the html document, but then positioned at the top of the browswer window using css.
  • I've also taken the liberty of bumping the content frame over to the left a bit, and covering up a bit more of the cloud. There wasn't any justifiable reason for having all that empty space, and it made the page lopsided.
  • It would probably be best to make the content frame as large as it's content as well, so that the main window scrolls instead. As it is, it causes problems on the iPhone and when printing. Since this is just an exercise though, I've left it as it is to conform with the original layout from years ago.
Best on Firefox