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?

Viewing 15 replies - 16 through 30 (of 58 total)

  • I comment the heck out of everything and one thing I like to do in my stylesheets, although I’ve been a bit lazy about it lately, is to make note of the fonts used in banners that the stylesheet calls. (It’s usually a matter of noting one font, two at most.) This does two things: it helps ME remember which font I used in case I have to tweak a banner or make new buttons. And it helps anyone using my stylesheet to do the same if he or she is lucky enough to have that font on his/her computer.

    Lorelle, this is great stuff.

    As far as ordering items in the stylesheet, I have been using TopStyle Pro for ages and have become accustomed to its habit of ordering things alphabetically by elements, then classes and finally divs, but my own habit and brain pattern seems to be to arrange things in the order they appear on the page, header-content-sidebar-footer type thinking.

    Are there any hard and fast rules about this?

    That’s a good question, joni, because I wonder that as well. I use TopStyle Pro as well, and I hate it when it puts everything in alphabetical order.

    I’m notoriously lazy with my CSS. I just dump new stuff at the bottom of the sheet. I’ve thought about grouping in different ways, but the thought passes quickly! ??

    Thread Starter Lorelle

    (@lorelle)

    Didn’t I mention “comment like heck”? That was one of the things I meant to add, but spaced, so thanks for adding it. It’s a critical part of the process, especially since many of the Themes feature divs that cross modular files – really frustrating when you’re trying to track the closing div down. I’d really appreciate it if designers would add a comment to note what the closing divs are closing like:

    </div> <!-- sidebar end -->

    It would help the rest of us so much – bandwidth aside.

    As for optimizing, I did say that using shorthand was “at your own browser’s risk”. I just ran across an example today where Firefox didn’t recognize one of the shorthands when it comes to borders, but it is a rarely used shorthand style, though I will have to go through and change a lot of my css experiments to accomodate Firefox. Ugh.

    Optimizing isn’t about saving every byte, it is about getting rid of waste (I found over 40 “TAB LINE BREAK” codes in another of Kubrick’s files today) that is just bad. When I open a style sheet in Notepad, most of the time it looks like the thing has never seen order in its life. I copy it and paste it into my word processor (yes, I know that invites danger but I’ve tweaked it to not intrude upon my code, Moosey-dear <G>) and clean it up. Usually just getting rid of the TABS at the end of lines does the trip, but I also strip out all the double and triple line breaks. Folks, all of this may look good to you, but it is a mess for the user to view! Then I copy and paste it back into the text css file and save it, so next time I open it, I can actually read it.

    In the past few days, I think I’ve done this with at least 8 different Themes I’ve checked.

    But I do want to add my four cents about the “structure” of the style sheet. Personally, I hate alphabetical. When I’m messing with things, I want the structure to be together, the links together, the headings together, etc. This helps me find the parent/child relationship between things when they are together. If the sidebar is whacked, it might be because the “content” was screwy to begin with, and moving from S to C is a pain in the %#^*)!.

    You can do it however you want, but take it from a seasoned CSS user, alphabetical and even chronological (put there as you think of it) sucks. Group related and like things together and you save everyone a lot of trouble. But this is an opinion, not a fact of design life.

    Great stuff folks. So what other resources do you depend upon? I couldn’t get by without frequent trips to https://www.positioniseverything.net/ to figure out those darn bugs – out spot out!

    They have really mastered a lot of bugs in their 3-Column layout and I refer to that like it was a bible.

    Thread Starter Lorelle

    (@lorelle)

    I’m also noticing that some theme authors are putting CSS in their head – not like imagination in your head but in the page’s head just before the body tag.

    Anyway, I don’t know how, but such action should be noted somewhere, in an obvious place, like maybe in the top section of the style.css file under the comments which set the style header. Something like:

    /* Styles have been included in the header.php and index.php files in the "head" section. Please check there for more style references and information. */

    Okay, something shorter and sweeter than that, but you get the idea. I spent too long today battling with a theme’s style issue until I found the buggy reference in the head of the page by accident.

    A lot of time those tabs; which I absolutely hate; are a sure sign that the author is unfamiliar with hand editing and is using a code producing widget of some sort.
    Tabs aside it often leads to bloated markup and incomprehensible div id names. ?? Plus unreadable code.

    Thread Starter Lorelle

    (@lorelle)

    I agree, but I really thought that the Kubrick set, which went through massive testing, would have had those elements cleaned up. I just cleaned up another kubrick file and found over 50 such tab line breaks….another one! Yikes. It’s such a lovely and serious theme (does amazing things) I do hope these things are cleaned up soon.

    I think the designers spend more time designing than actually cleaning the code – of course they could spend forever cleaning up their code, but then there would be 1 theme per year. If anyone wants to volunteer to clean up everyone’s code for free, just as themes are released for free and as is, without any warranty, then it would reduce the work a designer needs to do with actually releasing a theme – that is to say, these are all ideals and guidelines. If it’s not done, it’s not a crime, just bad practice.

    As I understand it Michael is not a designer, and he only released the theme based on demand, because he’s got some things wrong, there’s no need to make a song and dance about it, it has to be put in context – a non-designer designing a theme is going to have errors.

    Ideally all these themes would be perfect, but such is life that I expect the designers have other things to do, perhaps have a life or something equally common. If it’s going to ruin your day, then by all means clean up the code and then re-release it and say you cleaned it up.

    Best practice should be implemented, but at the end of the day, all of this is free – just as criticism is levelled at WP not haivng htis or that, it’s free and you can either help improve or find something, the same is true of themes.

    Code should not need a lot of tidying up – its just as quick to write reasonably clean code to start with at least for the markup. Good code is clean code. Its semantic, its elegant, its clear and simple.

    Concur wholeheartedly, just trying to say that this isn’t an epidemic

    Thread Starter Lorelle

    (@lorelle)

    As a designer, I believe there is room for both. Good code means good practice, free or not. And cleaning up code, and I’m not talking about tight as a drum, but simple cleaning, takes minutes, not days and weeks.

    I agree with you, and I’m not bashing Michael or the design, just the facts. The Kubrick design is a work of art!

    Since we are handing out information to current and potential theme designers who want to win contests….good practice has got to start somewhere – without excuses. And it is a learn as you go process. I’m still learning what to clean up and what to unclean up, as in my example of the shortcut I made with borders that whacked out in Firefox….learning every day.

    Well no excuse as I said is an ideal, you can’t really bash designers for making errors here and there. I’m no designer, but even from my own posts here you’ll note that things just either slip the mind or you simply overlook something by the sheer pressure of other things that need doing.

    It’s something to aim for, but as Root says, good code is cealn code. I’ve seen a lot of gret designs that haven’t been entered, but they are works of art in some respect. Not all are compliant, most validate – but it seems validation is not enough, not that I’m saying work should stop at validation, merely that yu’re putting a huge burden on first time designers in particular, and would probably scare them off. I’m sure if it was said that valiation was out of the window we would see a tonne – but it’s not the way thigns should be done.

    By your comments, Kubrick is not clean, and if the rules were take out your tabs then it wouldn’t even be entered. Common sense, and hopefully a non-Stalin-esque “obey or die” attitude will lead to designers learning rather than being dictated to. I would also wonder how many of the themes entered would pass the “clean code” test, and the worse case scenario would be 0 entries.

    I just hope bashing a theme because it got something wrong, or because it doesn’t fit in with the whole “it’s not clean enough” ethos isn’t going to be the norm, as I certainly think it willd elay or even put of those who are first time designers, or those that simply have compliant code and want to release the theme with too much hassle.

    It’s the end users choice whether they download a theme or not, and how they manage it. It’s not an order for designers to make their designs to be “clean enough” for release, but it is a useful goal to head towards. It’s all free.

    Going back a moment to the order of CSS elements…. oddly enough, the order in which things appear can be importaint. I find the best way is from a macro to micro order works best. The more stuff the element covers, the higher in the CSS file it goes. This has to do with the Cascading effect of CSS.

    Tg

    This is great, Lorelle. There is one error I’d like to correct, though. You say that with {font-family: “Trebuchet MS”, sans-serif}, “if that font isn’t on the user’s computer, the system default shows up which is often Courier.”

    That is not correct. If Trebuchet MS is not on the user’s computer, the browser will choose another sans-serif font that *is* available on the user’s computer. That’s what the “sans-serif” part of that rule is for!

    In Firefox, Mozilla, Opera, and MacIE you can choose your preferred sans-serif font in the browser prefs; in other browsers (such as WinIE) the browser has its own internal list of sans-serif fonts. Either way, you’ll never get Courier.

    Personally when I want a sans-serif font I just use {font-family: sans-serif}. That way if you’re a Firefox, Mozilla, MacIE, or Opera user, I’ll be using what you’ve chosen as your favorite sans-serif font. I think that’s most polite.

    Oh, and by the way, Geneva is a bad font to specify. You may think you’re catering for Mac users by using it, but you’re not. Geneva was designed to look good without anti-aliasing at either 9px or 10px; but nowadays 9px and 10px are often too small to read (I have my minimum font size set to 16px, for example), and Geneva is even uglier than Arial at any other size. Please don’t use it.

    One approach to this is to think in threes. Choose your first choice as your Windows font, then put a similar font for mac, and finally if necessary remember the linux crowd. Then in goes your generic serif / sans-serif at the end. Its choosing the first one that is important.

Viewing 15 replies - 16 through 30 (of 58 total)
  • The topic ‘Lesson: Designing Styles for Contests’ is closed to new replies.

Tags