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 - 1 through 15 (of 58 total)
  • Thread Starter Lorelle

    (@lorelle)

    Another reason I’d like the edit turned on!

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

    Yes Ma’ am ??

    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. ??

    Fantastic, Lorelle. Thanks for posting this!

    Thread Starter Lorelle

    (@lorelle)

    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!

    Thread Starter Lorelle

    (@lorelle)

    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.

    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.

    Duly bookmarked.

    Good stuff here.

    Tg

    Thread Starter Lorelle

    (@lorelle)

    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 https://www.meyerweb.com/ and https://www.ericmeyeroncss.com/ and be seriously impressed with his design work. He is the MASTER of CSS.

    Thread Starter Lorelle

    (@lorelle)

    Oh, and I forgot:

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

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

    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]

    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.

    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.

    Yes he would.

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

Tags