Lesson: Designing Styles for Contests (59 posts)

  1. Lorelle
    Posted 10 years ago #

    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


    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?

  2. Lorelle
    Posted 10 years ago #

    Another reason I'd like the edit turned on!

    Courier should look like Courier not with the tt codes around it.
    [ Moderator comment: Fixed. :) ]

  3. Root
    Posted 10 years ago #

    Yes Ma' am :)

  4. This is awsome and I'll refer to it many times I'm sure while I convert some of my old MT templates to WP ones for the Theme contest thingy. ;)

  5. NuclearMoose
    Posted 10 years ago #

    Fantastic, Lorelle. Thanks for posting this!

  6. Lorelle
    Posted 10 years ago #

    I love the kudos, but are there any other "recommendations" that people can come up with?

    And blessings upon the moderator...that great cosmic mcmuffin in the virtual world!

  7. Lorelle
    Posted 10 years ago #

    Actually, here is another one.

    When possible, use shorthand for your CSS. Now, this doesn't apply across the board. There are still some browsers that can't handle it, but most of them are "old". Consider your audience before going any further. If they are using older equipment (I still have to design for my friends in Israel who are still using Windows 98 Hebrew-enabled - an abomination!), then don't do this. Stick with the long-hand version. But if they are fast-gadget-chasing-gangs, you can use this shorthand method.

    One technique in CSS is to condense the code, combining similar codes together. For example, this mouth full of code:

    h1 {margin:0; font-weight:bold; font-size:130%; color:blue; padding-left:5px; padding-top:10px}
    h2 {margin:0; font-weight:bold; font-size:120%; color:navy; padding-left:5px}
    h4 {margin:0; font-weight:bold; font-size:105%; font-style:italic; color:blue; padding-top:1.5em}

    Can be condensed down to something a little more manageable. CSS has a feature which permits grouping selectors together and giving them a shared declaration. Selectors are grouped on one line with commas to separate them.

    h1, h2, h4 {font-weight:bold}
    h1, h4 {color:blue}
    h1, h2 {padding-left:5px}
    h1, h2, h4 {margin:0}
    h1 {font-size:130%;padding-top:10px}
    h4 {padding-top:1.5em;font-size:105%;font-style:italic}
    h2 {font-size:120%;color:navy}

    There are also shortcuts and ways of combining measurements in declarations that will shrink down a web page's file size, and make it easier to write the code.

    Measurements for margins and padding, follow the clock in clock-wide positions: top, right, bottom, left. So a measurement for a division or class could be:

    .box {margin-top: 1em; margin-right: 1.5em; margin-bottom: .5em; margin-left: 1.25em}

    Consolidate all of that into this CSS shortcut and abbreviate it to:

    .box {margin: 1em 1.5em .5em 1.25em}

    Much shorter and faster to work with. There are other modifications you can do when the magins values are repeated, such as the above with the same top and bottom margins of .5em and left and right margins of 1em would be:

    .box {margin: .5em 1em}

    You can also streamline your border codes. Here is a border CSS code for a box:

    .box {border-top: 1px; border-right: 2px; border-bottom: 1.5px; border-left: 2.5px; border-color: blue; border-style: solid}

    This can all be consolidated down to the CSS shortcut of:

    .box {border-width: 1px 2px 1.5px 2.5px; border: blue solid}

    This makes a very unusually shapped box, but for a normal box in which all sides are equal:

    .box {border: 1px blue solid}

    Not all codes can be grouped and condensed, but these are the most common ones. There is a ton of information on CSS Shorthand methods on the net.

  8. NuclearMoose
    Posted 10 years ago #

    I have some tips...paper, pencil, sticky notes, and pencil crayons. "Whazzat for?" you ask? I'll tell you.

    Once I've decided on the overall concept or theme, I get to work.

    I use the sticky notes to represent a piece, chunk, module, or section of the page. (Use your own appropriate term.) I write "Links" and "Navigation" etc. on them and set them on a blank piece of paper. That way, I can easily move around the elements as I like, finding something that looks balanced. I even cut some of them to size to more closely represent their actual proportion on a page.

    After I get something I like, I will sketch it out with more detail. Often I will colour things to try out various colour combos. Actually, I just like colouring, but I don't want my kids to think I'm colouring for fun...this is serious stuff!

    I write down all of the things I want to include in the site on a piece of paper. Then I plan out each part of it, making notes about fonts, alignments, plugins that may be needed, background images, or other artwork/graphics that I may want.

    At the end of all this process, I have a pretty good handle of how I want things to look, as well as how it should be structured. I can start gathering all of the assets for the site (images, plugins, etc.) and begin to think about coding.

    In other words, there's a fair bit of non-computer-related work up front. I've found that this helps me a lot when starting the actual "construction" of the site since I'm not sitting in front of my 'puter with a blank screen in front of me, being taunted by that damn cursor blinking, blinking, blinking...

    Oh yeah, it doesn't hurt to have a CSS pocket reference or some other favourite CSS resource material handy so that you don't do silly things like *cough*use deprecated attributes*cough* on some of your elements.

    Once you get tired of all the work, you can invite your kids to come and help Dad colour the web site and spend some quality time together.

  9. TechGnome
    Posted 10 years ago #

    Duly bookmarked.

    Good stuff here.


  10. Lorelle
    Posted 10 years ago #

    EXCELLENT! I do the same thing, without the children. It's enough to keep the cat off the keyboard.

    How about some recommendations on sites and books to help people get a handle on their designs?

    I personally worship the ground Eric Meyer floats over and you can find out about him and his books at http://www.meyerweb.com/ and http://www.ericmeyeroncss.com/ and be seriously impressed with his design work. He is the MASTER of CSS.

  11. Lorelle
    Posted 10 years ago #

    Oh, and I forgot:

    http://www.w3schools.com/ has saved my buns with CSS stuff on many an occassion.

  12. I also sketch my designs out after rescuing crayons from the children. :)
    For blog-specific layouts, I started out with http://glish.com and http://bluerobot.com, since most of my basic questions were of the "how do I make my blog look like this?" :)

  13. notthatugly
    Posted 10 years ago #

    Overall good advice: but if you're producing CSS for use by others the 'optimized' version

    .box {margin: 1em 1.5em .5em 1.25em}

    is going to be harder for the layperson to understand and therefore tweak than the clunkier form. Ditto getting rid of your formatting to save bandwidth. That's fine if you're working on your own site, but if you want others to be able to work with your styles, you want them laid out in as clear and accessible a way as possible. Bandwidth shouldn't be a major concern unless your CSS contains serious amounts of redundant code; and even the most bloated stylesheet will probably consume less than the average image header.

    Another reason for mentioning this is that I worry that if contest designers are scared of making their stylesheets too long they won't comment them enough. There have already been complaints from people who feel theme developers aren't doing a good enough job of documenting their work. So I'm afraid I'm going to contradict you and say: don't worry about the extra bytes, tell your end users what the code is doing. */ and <!-- are your friends, and may save you several support queries.

    [eta: there should of course be a backslash next to that asterisk]

  14. Root
    Posted 10 years ago #

    Tantek says: Grouping your CSS eg margin 10px 0 0 10px; can lead to erratic performance in some browsers and is best avoided. Not that any of us pay any attention. NTU is making a very valid point. This CSS has to be used by others who did not write it and may not be very good at CSS. Plus - some poor guy in the forum - might be asked to read it later. Eric Meyer type parsimony with bandwidth is best left to the gurus IMHO. Give me spaced readable CSS any day. Particularly on code going out to third parties.

  15. NuclearMoose
    Posted 10 years ago #

    I would suggest that a really, really nice designer could ship BOTH a well-commented CSS file along with a stipped down one. It's a compromise, and a bit of extra work for the designer and for the user, but you get the benefits of both sides of the discussion.

  16. Root
    Posted 10 years ago #

    Yes he would.

  17. Joni
    Posted 10 years ago #

    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?

  18. NuclearMoose
    Posted 10 years ago #

    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! :)

  19. Lorelle
    Posted 10 years ago #

    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 http://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.

  20. Lorelle
    Posted 10 years ago #

    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.

  21. Root
    Posted 10 years ago #

    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.

  22. Lorelle
    Posted 10 years ago #

    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.

  23. Jinsan
    Posted 10 years ago #

    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.

  24. Root
    Posted 10 years ago #

    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.

  25. Jinsan
    Posted 10 years ago #

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

  26. Lorelle
    Posted 10 years ago #

    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.

  27. Jinsan
    Posted 10 years ago #

    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.

  28. TechGnome
    Posted 10 years ago #

    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.


  29. mpt
    Posted 10 years ago #

    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.

  30. mpt
    Posted 10 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic