WordPress CSS Tip: Design for Sandbox Theme in a sandbox

In case you missed the last post, there is a CSS design contest using the Sandbox theme for WordPress. That post will explain what the heck it is all about.

I’ll be the first to admit that I only know the tip of the iceberg when it comes to CSS design, but one ‘workhack’ that easily applies to any kind of programming activity is rapid development. The concept is simple: reduce the time between action and result to the shortest amount of time possible so you can get more done. My number one tip for doing a fast CSS design is to do it all on your own machine instead of doing it live on the Internet (or wordpress.com). It will save you lots of time and headaches.

I’ve taken the sample blog and example CSS template provided by Scott Wallick and made a very easy to use downloadable archive. It contains nothing but the HTML files, image files and CSS from the sample blog. It can get you redesigning Sandbox in less than a minute.

Getting Started

1. Download the Sandboxed zip file
   • If you want to work with the version of Sandbox on WordPress.com then grab this zip instead
2. Unzip it
3. Open index.html in your web browser
4. Edit style.css
5. Refresh your web browser
6. Repeat #4 to #5

I find it easier to work on HTML files saved on my computer than creating a dummy blog on a fresh WordPress installation. If you feel the same way then downloading this archive is right for you.

Pick The Right Tools

There are several requirements for any tool that makes designing CSS easier:

1. editing with syntax highlighting plus auto-completion
2. showing you what CSS selectors are available on the page you are editing
3. inspecting why a design looks the way it does

I heartily recommend the combination of the Firefox web browser with the Firebug extension. The learning curve for Firebug is a bit steep, but it will save you a lot of time in the long run because it is chock full of goodies as can be seen on this page.

Testing in Multiple Browsers

One of the hardest things I find in web design is getting something to look the same in multiple browsers. Having multiple browsers on hand to check out your changes locally is a must if cross-browser compatibility is important to you. Here are the top browsers to consider. Market share numbers are from w3counter (thanks Daniel).

1. Internet Explorer 6 – 50% market share
   • Click on that link to get the completely standalone version of IE6 that you can run side by side with IE7
2. Internet Explorer 7 – 17% market share
3. Firefox 2 – 15% market share (and 9% market share for FF 1.5)
4. Safari 2 – 2% market share
   • Finally available for Windows users
5. Opera 9 – less than 1% market share

The market share should give you an idea of which browsers to spend the most time designing in. I find Firefox the easiest to work with. Jalaj gives a few other suggestions.

One highly recommended technique is “reseting” CSS properties at the beginning of the file to remove slight differences between browsers.

Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]

More explanation of Christian Montoya’s initial CSS

Know What Size to Design For

It is important to test your design in different screen resolutions. Market share numbers are from w3counter. Something else to keep in mind is that those big old CRT monitors and those funky new LCD monitors display colours differently.

1. 1024×768 50.43%
2. 1280×1024 17.03%
3. 800×600 8.89%
4. 1280×800 8.38%

I recommend the Window Resizer extension for Firefox for rapidly switching resolutions. Firebug may be able to do it as well, I am by no means an expert.

Advanced Design Considerations

There’s a lot out there to learn about CSS design, here are some highly recommended links with more information. If you have any other suggestions, drop them in the comments.

• Typography is the most important part of CSS design — use Typetester to compare fonts
• GIF, JPG, PNG? What image format should I use?
• Choosing “web safe” colours or use the color lab on the web
• Browse through color swatches at Adobe Kuler
• What text size is best? 100% easy to read! (100E2R)
• Different ways to style links
• 70 CSS tips from the masters