HeadsetOptions Web Design, SEO, WordPress, Etcetra

For those making the final submission of your CSS designs for the competition either tomorrow or the day after, I compiled this quick (should take less than 15 minutes) and a short checklist to help ensure your theme gives the rest a run for the money. At the risk of being called “Captain Obvious”, here it is:

Style

Hierarchy: Make sure your h1, h2… are all styled using commonsense formats to create a meaningful visual hierarchy. Sandbox does not use h2 in the sidebar like the Widgets do, so think about both scenarios, that is, users using your theme as is and those using sidebar widgets. (Time: Should take you less than 1 minute for this)

Dropdown menu usage: If you plan on using the default dropdown in Sandbox, leave the pages list intact for IE 6 users. If you plan on hiding the sandbox_globalnav, the div id is “menu”, make it “display: none;”. (Time: Again, should take you less than 1 minute to check)

Favicon: Don’t waste your time on it, remember, you can’t touch the php files. (Time: 0 minutes)

Keep it simple: Complex designs are not necessarily the best designs, both in terms of usage and in customization. Check my earlier article on a similar topic about designed a theme in less than an hour, where I have attempted to use very basic styling to make the theme just desirable enough (I hope) but not too different from the original gist. Remember the real deal is the backend (php files that you can not touch), so if someone is planning on using Sandbox based themes they are more likely to be able to hack the php files too, unlike those entering this competition, so leave room for their imagination in your design. (Time: This is a personal preference, so there is nothing really to check)

+CSS=

Validation and Compatibility

Validate your CSS: This is by far the most critical step. Here’s how you do it, go to W3.org (opens in a new window), then enter the URI where your design resides. You don’t have to have the site active with your CSS to use this service; you can upload the file from your computer using the “by File Upload” option or copy paste it using “by direct Input”. (Time: 1 minute to check, 1 minute to copy and paste the “Valid CSS information” from the site)

Check if your design looks fine across all browsers: This part of the check requires the Sandbox design be visible at least to you in option “1″ or to everyone in option “2″.

1. You are hosting WordPress with Sandbox design locally on your machine and have both IE 5 or 6 (or 7) and FF on your computer. Open the final design and view all pages using both browsers, ensure the CSS degrades as you intend it to in both browsers. (Time: 2 minutes total)
2. You are hosting your WordPress with Sandbox design on an external server and can be viewed via the Internet (my preferred way- we do live designs for our clients). In this case, use Browsershots.org (opens in a new window) to check your site using as many browser types as needed. One other advantage of using this service is to check the theme across various browser resolutions while you are at it. (Time: Depends on the number of browsers selected, but you can always bookmark the page and visit later after submitting, so I would say 1 minute to add, 2 minutes to check back in a few hours)

Package your images: I know most of you will end up with a folder full of .png files, but what you end up doing is cut off 25 to 45 percent of users across the world from viewing and appreciating your work. Use a more common file format like .gif (graphics interchange format) if you really want even those still using IE to bother checking your theme. (Time: Again, this is a personal preference, but highly recommended)

Misc.

Manual rundown of CSS to remove useless styles: This is to reduce your file size and make your design/stylesheet lean and mean. For example, look for repetitions like defining the font color both while defining the font and when styling the link property, unless they are different, also, remove all useless divs and classes. Most importantly, ensure you don’t hack the code too much to the point that it looks more like a My Space page! (Time: I would spend a good 3 minutes here)

Finally

Know thy limitations: Read the official rules and refer to the how to submit one last time before you hit the send button on your email. (Time: 5 minutes or more if you are reading it for the 1st time)

So there you have it, less than 15 minutes could make the difference between making it to the top 4 or not. Do let me know if it’s useful and/of if I missed something. Also, check out a few more resources (Sunburntkamel and Small Potato). All the best.