Design Oahu

On Design Oahu the trackbacks have been separated from the comments. I felt that the trackbacks were a bit of a distraction. WordPress bloggers are most likely used to seeing the trackbacks within the comments section and skip right over them, however I would be willing to bet that new readers get a bit confused when they are trying to read the comments. For the sake of usability and readability I will provide you with some code snippets to move your trackbacks. Read the rest of this entry »

I have just released my Wordpress theme “Beer”. The beer theme uses widgets and is compatible with Wordpress version 2.3 and above. It has not been tested on earlier version, but it should work just fine on Wordpress versions 2.1 and above. If you have any bugs or feature requests please let me know by commenting below. You can view the theme in action over at Team Sea Donkey. You can download the zip file here. Installation is simple. Just unzip the downloaded file and upload the beer folder to your wp-content/themes directory. After you have done this log into your blog and select Presentation then select Themes. Now click on the Beer theme, pretty simple right?

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 »

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 »

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 »