Design Oahu

Web design blog from the middle of the pacific.

Using valid XHTML markup with CSS (part II)

If you haven’t read it yet, you may want to check out part I of this series where we go over the basics of the differences between HTML and XHTML and start off wit a simple markup. Thank you to everyone that sent me an email of their site that they would like to be sed as the example. I have decided to go a slightly different route though. I wanted to pick a website that is familiar to a lot of people that suffers from the old table based HTML design, so I picked MySpace. MySpace is great way to keep in touch with old friends, but I think the websites user base grew much quicker than their web designer team. If you have ever tried to customize your MySpace, it is a pain in the @ss trying to figure out how all the tables work. Mike Davidson wrote a nice tutorial on Hacking A More Tasteful MySpace that helps you get past the mess of markup to style your MySpace. What I will be doing is taking the default profile layout which is table based HTML and turning it into valid XHTML/CSS markup while keeping the look the same. I will show you step by step what I am doing, so that you can do the same with your own project. Read the rest of this entry »

New Design!

If you have been to Design Oahu in the past you will notice that the design has been revamp. The design was created as a WordPress Theme. I have been working on the design for quite some time, and have gone back to it several time without completely finishing it. Well I know there are still a bit of bugs that need to be worked out, but I thought what the heck, let me just go ahead and launch it. I currently do not have any plans to make this design publicly available, but if enough people are interested in this theme I will put the finishing touches on it such as make it widget friendly, adding the screenshot and all that other good stuff. Read the rest of this entry »

Using valid XHTML markup with CSS (part I)

A question that still often comes up is how to turn your table based image sliced layout into a valid XHTML/CSS design? The answer is quite complicated and is why I will be going over it in several tutorials, but I will start by giving you some reasons why you should do this.

  • Adding your style information to a Cascading Style Sheet (CSS) file rather than inside your HTML markup allows a visitor of your website to download all the style information the first time they visit your website. That means that they will have a slightly longer page load the first time they visit, however the styles are now cached on the client side and subsequent page requests can load up lightning fast as the style information has already been downloaded.
  • By moving your style information to an external file, you have now separated the content from the design. Previously if a request to change the background color of a container was made, you may have had to fire up Photoshop change the color in the layer, and re-slice the images. With CSS you would simply change the background-color element to the desired change and it would change all pages that reference your stylesheet.
  • Markup is straight forward and easy to figure out where a possible text change is located. If you need to fix a simple spelling mistake for example, rather than searching through all the <tr> and <td> to find where the misspelled word is you would simply look for a <div id=”sidebar”> tag to quickly get to your sidebar for example.
  • Having valid markup is the first step towards accessibility. Accessibility is the idea that someone is able to view your website regardless of their platform (mobile phones, old systems, screen readers, etc). Plus you can refine each of these by simply adding a new stylesheet which specificly target that platform.

Read the rest of this entry »