Lesson: Designing Styles for Contests

WordPress “powers that be” are serious about keeping things loose. However, when it comes to designing your styles or Themes for contests and public consumption, there are a few things you should take into consideration. I’ve been looking at a bunch of themes and styles, loving them all, but under the hood, there are a few things you should consider when designing your own.

Start With The Default Template
You can start with someone else’s theme or style sheet, that’s fine, but if you really want to do this right, start with one of the two default themes that come with WordPress. They are called “Classic” and “Default” aka Kubrick.

Why start here? Because these have been through the presses by WordPress designers and testers, as well as bazillions of users who are more rigorous on these things than the developers. These are solid code, for the most part, and a good starting point. From there, do whatever your imagination desires.

Style ALL the Template Files
The old WordPress was all about the index.php file, forcing it to do all the work for every element of your page. Today’s WordPress uses modular elements to make up an entire page.

The Default Theme for WordPress relies upon the index.php, sidebar.php, single.php (for a single post which looks different from the categories and archives), comment templates, header.php, and footer.php, among others. If you create a theme or style based on only the index.php, leaving out comments or others, you may run into design problems.

If WordPress can’t “find” the modular part, such as the comment template, it will look for it in the default folder. Therefore, if the designer hasn’t taken this modular template into consideration, the layout and design might be a little messed up. It will work, but it could look weird. You don’t have to use all the various bits and pieces, keeping the header and sidebar inside of the index.php or single.php, but do look at the parts as well as the whole.

Consistent and Standard Fonts
Many new themes and styles feature only one font. I don’t mean just an overall font style for the whole page but ONE font. In the body style tag it would say:

body {margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; font-size: 12pt;....}

What happens if the user doesn’t have Trebuchet on their computer? It happens every day. We’ll have a Lesson on fonts later, but if that font isn’t on the user’s computer, the system default shows up which is often Courier. If you like the look, great, because just about everyone has it, but if you want Trebuchet and don’t get it, then you have a problem.

Add more choices to the font-family like this:

font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;

If the browser can’t find Trebuchet, it looks for Verdana, and if can’t find that, it looks for Geneva, and so on. That should cover all your bases. 😉

There is another problem in the first font style presented. Notice the font size is set for 12pt. In general, this is a no-no. You can do it, but don’t expect every browser to see the same “point”. Use em, px, or a percentage to set your fonts such as:

font-size: 1em

or

font-size: 12px

Avoid font redundancies by NOT putting the font-family on every style. Set your basefont in the body tag style, then refer to the font-sizes in your design based on a percentage of the base size. By using a percentage instead of a fixed font, your site becomes immediately more accessible. For example, many people want smaller links in their sidebar menu, so that would be:

menu ul ul {margin: 2px; padding:5px; font-size: 80%; font-weight: bold;...}

If you want a larger font in your header, then set it like this:

header {margin:20px; font-weight: bold; font-size: 130%;...}

If you change your font to something totally different on, say, your sidebar, then list a new font-family, but if the whole site is set for a single main font, then list it once and be done with it.

Optimize Your CSS Style Sheet
WordPress stresses that code and style files should be laid out with a lot of tabs so they are easy to read. What I find are a lot of styles (and code pages) that feature a lot of wasted space. Get out your broom, folks, and clean up your bandwidth wasters.

Every space, character, and bit in your code and style sheets add up to bytes. That sentence came to about 64 bytes. Each byte of information adds up and the larger they are, the longer they take to load. You do yourself and your users a favor by keeping your file sizes down to byte sized sizes. So where do all these bandwidth wasters hide?

If you have set your code to look pretty with lots of indents, have you checked to see if there are any TAB codes at the end of the line before the line break? I find a lot of these. The Default Theme for WordPress has more than a dozen of these tiny invisible bandwidth wasters. You don’t need a TAB before a line break, only after, but somehow, these sneak into the code.

Using spaces to line up code adds to the size. A TAB is considered one character in most editors, but the five spaces that copy the TAB indent takes up five characters. Using double spaces instead of single spaces in your code and styles adds up, too.

Using a good search and replace capable text editor, you can quickly clean these up, making your styles and code optimized for fast loading.

There are a lot of ways of optimizing your code and styles, but we’ll save that for later. Keep it clean and small and FAST.

Validate! Validate! Validate!
Make sure your codes and styles validate across the board. That means they have to meet the “strict” standards set by the W3C Organization and pass a variety of validations for CSS and HTML. It’s like an HIV test. The first one has a high false/positive and you need several to make sure your page tests positive consistently. In this case, positive is a good thing. 😉

Validation doesn’t just mean putting your pages through some web driven testers. It also means test-driving it with friends, relatives, co-workers, and strangers you meet on the street. Everyone has a little different system, so ask for others to test-drive your styles or themes before you make them public. And ask here in the forums. The Your WordPress section is dedicated to having volunteers check out your site while you are working on it, when you have trouble, or just to say ooooh and ahhhhhhh.

What Else…?
This Lesson has given you a few of the most common things you should take into consideration when presenting your themes or styles to the public, but it is only the tip of the iceberg. I’m sure others will chime in with a few more recommendations.

There are no hard and fast rules for design. The sky is the limit. I recommend everyone take a look at the CSS Zen Garden to see the impossible made possible. All the rest of us are just asking for you to follow the rules of the game and make sure your code matches web standards and works for everyone.

So what else do you think designers should know or do?