Filed under: Our websites

Designing a wordpress theme from scratch (Part One)

Designing for wordpress isn’t really all that different from designing any other website, yet it seems to be that its not something that gets approached as creatively, or is given as much thought as traditional web design.

Yes it’s true wordpress has some limitations, but on the whole its a great tool that’s simple to use and you can still be really creative with it.

In the first part of this series of tutorials I’ll be looking at how to structure your design composition in a way that makes it easier to code into xhtml/css.

I’ll also look at basic semantic mark-up and using css to degrade your site nicely into older browsers.

The final layout for this part of the tutorial is viewable here.

Later on we will split this design up and turn it into a wordpress theme.

First Things First…

Credit where its due. A few of the techniques I employ in my site design have been taken from Jon Hicks and in particular his talk at FOWD which you can view here.

The final layout for this part of the tutorial you can see here.

You can download the original files for this tutorial here if you wish.

You can also grab my base template (which we will cover using in the next paragraph) here

Feel free to play around with all the files ’til your hearts content, that’s always a good way to learn and you can always grab a fresh copy and start over.

Setting up a template system makes your life easy

First thing I do is make a copy of my base template (which has several folders, one for images, one for css, one for javascript, one for library (which will hold any extra scripts like jquery plugins etc…), a dev folder for all photoshop files etc.. and an index.html page + several stylesheets, all of which contain helpful snippets and basic markup) and rename the parent folder to the project name

You can download my base template here if you wish.

Now we are ready to begin

Design First Steps - Basic Layout & Structure

When you design your site, in whichever graphics program you use, ultimately you’ll make most of your decisions on layout at this stage.

Each project requires it’s own decisions to be made on where the navigation goes, how many sidebars you have, if its fixed or fluid width etc… ultimately it depends on what you are aiming for.

I’m not going to cover ‘how to design a website’ as everyone has their own style. What I will say is useful however is to write down your hex colour codes and column widths (either in a comment portion in you css file or on actual paper). These come in really handy later on. If you’re like me and sometimes you just can’t get colours gelling, http://kuler.adobe.com/ is great for a helping hand.

Once I have the design down, I have sliced out the images to my images folder and written down my hex codes and column widths, I start marking up the comp with really basic structure as follows (I actually print it out and write on it but for the purposes of this tutorial I’ve done it in photoshop).

This provides me with a quick idea of how I’m going to mark up the site as well as giving me a visual flow to follow.

Now the more observant among you will notice that the site doesn’t look exactly like that. This is because when it came to marking up the site into xhtml later on I made a two decisions.

1. I wanted the navigation higher up in the html as in this design it was in the sidebar and as a result, half way down in the mark up which is not great for site structure. I could have solved this by floating it next to the logo at the top of the page but…

2. I added the second sidebar which made me want the site to fold together if it was viewed in a smaller resolution. As a result I wanted the navigation to be high up in the document, even if the site was viewed at a really small resolution. Having it floated next to the logo would make it fold underneath but retain its small width which wasn’t ideal.

I always think its worth following your gut on these things and not sticking so rigidly to your comp. I feel the site is better for the slight changes I made to the layout and if it hadn’t worked I could have always fallen back on my initial idea.

Getting into the code - Setting up your style sheets for the best cross browser performance

I’ve used Jon’s method for this as I find it really robust.

What we have in the <head> portion of the page is one linked, one imported, one print and two IE specific stylesheet.

1. The basic stylesheet

This is linked into the document using <link href>

As older browsers don’t understand @import this is the stylesheet those browsers will find. All this stylesheet does is style the page in a simple way and let the user know politely that their browser is a bit old now.

2. The main stylesheet

This is brought into the document using @import"css/style.css"/**/;

The /**/; at the end bypasses IE browsers older than IE6 as they don’t understand it, which means anything older than IE6 will be passed the basic stylesheet.

The main stylesheet also has two @imports for typography and a reset stylesheet.

The reset stylesheet resets browsers to their default styling and then adds some sensible defaults.

The typography stylesheet controls the basic type styles for the site.

3. IE 7 only stylesheet which holds all the styles for that browser.

In this stylesheet I also use @import to import the IE6 stylesheet as IE7 shares a lot of the same problems as IE6 and its a bit daft to write them out twice. If an IE7 element needs styling differently from both the main stylesheet and the IE6 stylesheet, this is where we put those styles.

Below is an example of what I mean.

4. IE6 only stylesheet which holds styles for IE6.

This stylesheet holds all the styles for IE6. Where I don’t want an element to be shared with the IE7 stylesheet I use the *html hack (see example below). This way IE6 can share elements with IE7 and also have styles just for itself.

Phew, that was fairly intense!…

Getting into the code - Basic layout mark-up

Once we have our template set up and images ready to go all that’s left is to start marking up. I’ll go much further into this in my next tutorial but lets get the basic principles down now. (Note that this is my way of doing it, you might have a different approach and that’s cool. If you find this way helpful in any way then great).

Use classes for most layout elements. This not only means you can re-use certain elements throughout the page, but you can build up multiple classes on certain elements to vary styling. I only use ID’s when dealing with javascript, anchors or flash content.

Use a wrapper to contain the site. This gives you greater control of where and how the whole site is positioned. This way if you decide you want to move it all to center alignment for example you can very easily.

Use <h1> for you blog title/logo and all your blog post titles. These tags are really important for SEO so this just makes sense.

Use lists for lists & paragraphs for paragraphs. Semantically its correct and it helps you identify what’s what quickly.

Ban the <br/>. I’m not talking in posts but in layouts. You can break things apart using margins and padding in css.

Cut down on images in the html layout. If you can use background images or replace text with images via css (i.e for the logo, buttons etc…) then do. A good marker is, if you can switch off your stylesheet and see a nicely structured text document with few layout related images, your on the right lines.

That about wraps it up for part one. In the second tutorial I will look at building the site in more detail and cover some css techniques for taking the design to the next level.

Existem.com updated

In between developing affiliates4u version 2 with Nick and working hard on getting a4uAwards looking suave I’ve been busy giving existem.com a face lift and a better use of user integration all round.

The site is run totally from version 2.5 of wordpress and its fair to say we are all pretty happy with it.

Some nice new additions include twitter updates, user gravatars and dynamic body background images for each section.

The site is compliment in the big 3 (MSIE 7, Firefox and Safari), not sure on how MSIE 6 and below will handle it yet but its on my to-do list for the coming weeks.

Any comments would be greatly appreciated, either on this blog or, if your attending a4uAwards tonight, feel free to bend my ear.

The Design Process

I thought it might be nice to pass on a few hints, tips and my ideologies about designing and building websites that I’ve either picked up or developed over the past year or so. I won’t be going into super detail here so if you have any questions feel free to pop me and email.

Stage 1 - The Design Process

Research and Inspiration - I’ll often have a glance over at cssremix or cssmania to have a glance at what’s going on around me and generally keep an eye open for emerging trends (or ones that are dying out). I try to avoid taking layout or colour inspiration from any sites on here though, I’ve tried that in the past and just ended up cloning a site I liked (and i have no urge to become one of those designers). Instead I think its a good idea to take your inspiration from a sideways perspective, finding an idea and concept from something as easy as mind-mapping your thoughts. This will often take you down the ‘road-less-traveled’ with your ideas and you’ll probably develop a much stronger design concept. Websites like designyoutrust often get the creativity flowing by taking you out of a ‘web’ mind set and getting you thinking about the overall image of what you want to create.

Embrace what you like, and fight for it too! - There’s no harm in designing as you design and this means you bring a certain set of values, styles and methods to the table that no-one else can. Removing all trace of what makes something you will ultimately result in something generic. If you believe that what your doing is right then fight for it. I’m not saying be a stubborn mule about everything, there is always room for compromise and sometimes a new perspective and input can be really useful too. Choose your battles and give reasons for your choices.

“A camel is a horse, designed by committee” - Involve a maximum of 2-3 people on the design process if you can. Being a visual medium everyone has an opinion on how things should look, thus the more opinions, the more convoluted everything can become. If you receive criticism, encourage it to be constructive and detailed. Its much better to hear ” I’m not sure about the image it conveys as I think its too informal” than “It doesn’t feel right”.

Stage 2 - Creating a design

Wire framing - I didn’t used to do this that often, and, to be honest, I found when I did it made the whole project a lot easier. By simply setting out areas where things will go on each page first, you can save yourself hours later on.

Design the homepage last - Yep, thats right. I’ve found, especially with larger projects, that the homepage is the most organic, and ultimately the hardest to get right. As ideas for the site, importance of features and layouts change (they all happen) the homepage will look a million miles from what you had planned by the time the site goes live. I know this from experience of re-designing home pages several times. Save yourself some time and do it last

Write down your hex-codes - Seems obvious but if you keep them all together (in a book, online, wherever) you’ll save yourself the bother of picking through the css at a later date looking for them. While I’m on this, its always a good idea to write down some variants on your main tones, these can come in really handy later on.

Stage 3 - Coding

Comments, the more the better - Make sure you comment everything clearly with start and end comments. This lets you, and anyone else who looks at your code, understand it and know where they are.

Keep a clear class - Using “clear:both” to clear floated elements is fundamental to css design and by keeping a class such as “.clear { clear:both:}” in your style sheet you can apply it wherever its needed, to whatever element.

Hot Headings - Recently I’ve started using h1, h2, h3 etc.. tags in a slightly different way. I still keep then semantically correct on the page, but in the css iIve given them zero margins and padding and defined the text size to something standard across the board (say 18px). Then I style them using different styles via classes. This gives you much more control over each heading, but keeps the structure the same.

Outline:none - If your like me and you don’t like the little dotted line that appears in firefox when you click an image, add “outline:none;” to your “a” styles. This will remove it.

I hope this is helpful :)