Theme Design and Approach

Welcome to this chapter on theme design and approach. My hope for this chapter is that even you design pros may discover interesting tidbits that will help you in your WordPress theme design creation. The purpose of this chapter is to help you create a working XHTML and CSS-based mockup, with a view to having it end up being a WordPress theme while staying compliant with W3C standards and table-less CSS layout techniques.

Theme design is essentially web design and, throughout the chapter, we'll be focusing a bit more on thinking about standards and compliance first. The first part of the approach will cover what we want to design for (keeping in mind it will end up in WordPress) and the second half will focus more on creating a design that is made with the content in mind.

This approach will give us a more flexible, yet solid XHTML and CSS structure. We'll then be able to enhance and embellish that structure with great visual design. The more "standard" approach most of us are familiar with makes us create a purely visual design first and then jump through hoops to create XHTML and CSS to support that design. We then attempt to fit content into the design, often causing a few more glitches along the way. This approach often creates less-than-ideal markup and the need for hacks and fixes, just to get the design to hold up across all browsers and varying types of content.

While you might find this approach a little strange at first, it's by no means set in stone as the only right way to design! Simply read through the chapter and, even if you already have a polished Photoshop or GIMP mockup, go ahead and try to set up your XHTML and CSS mockup using the steps laid out in this chapter. You may find it helps your process.

In this chapter, we're going to take a look at:

• The essential elements you need to consider when planning your theme design

• The best tools and process for making that design a reality

• An introduction to my own rapid design comping strategy

• Some tips and tricks to help you define your color scheme and graphic style

• Some standard techniques for slicing and extracting images for your design

By the end of this chapter, you'll have a working XHTML-and CSS-based "comp" or mockup of your WordPress theme's design, ready to be coded up and assembled into a fully functional WordPress theme.

Already got a design? Not a designer at all?

That's fine! This chapter covers the ins and outs of web design best practices, with a view to ending up with a unique and custom WordPress theme. It contains time honored and tested methods for approaching compliant, accessible XHTML and CSS creation. If you're a total XHTML/ CSS design wizard, you can skim this chapter for any new tips and tricks that might be of use to you and then move on to Chapter 3.

If you're not a designer at all and you just need to convert an existing XHTML/CSS template into WordPress, I'd still recommend you skim this chapter, as it may help you better understand some of the XHTML markup and CSS in your template. You can then move on to Chapter 3 to learn how to code up and dice working XHTML and CSS templates and mockups into WordPress.

Things to consider

First up, before we start, I'll acknowledge that you probably already have a design idea in mind and would like to just start producing it. Chances are that unless you're learning theme development solely for yourself, you probably have a client or maybe a website partner who would like to have input on the design. If you have neither, congratulations!—you're your own client. Whenever you see me reference "the client", just switch your perspective from that of a "theme designer" to "website user".

At any rate, before you start working on that design idea, take a moment to start a checklist and really think about two things:

• What type of site/blog the theme is going to be applied to

• What, if any, plugins or widgets might be used within the theme

Types of blogs

Let's take a look at the following types of blogs (regular sites fit these types as well). These are not genres. Within these types of blog sites, you can apply any genre you can think of—horseback riding, cooking, programming, and so on.

You may be designing a theme for a specific site that has a targeted genre. You may want to make a generic theme that anyone can download and use. Still, if you target your theme to fit one of the types of blogs below, you might get more downloads of it just because it's more targeted. There's a reason why Brian Gardner's Revolution WordPress Theme is one of the top-rated themes for online news and magazine sites (http://www.revolutiontheme.com/). People who want to start a magazine or news blog know that this theme will work for their type of site. There's no need for them to look through dozens or even hundreds of more generic themes, wondering if they can modify them to accommodate their site.

Just read through the following blog types and notice which one of these types your theme fits into. Knowing this will help you determine how the content should be structured and how that might affect your theme's design.

• The professional expert site: This is an individual who blogs in their area of expertise to increase their personal exposure and standing. The type of design that can be applied to this site is diverse, depending on the type of expertise and what people's expectations are from that genre. For example, lawyers will have more people who are just content searchers; the cleaner and more basic the design, the better. Designers need to give the user a great visual experience in addition to the content. People in media might want to create a theme design that lends itself to listening to or viewing podcasts.

• The corporate blog: It's a company that blogs to reach customers and encourage closer relationships, sales, and referrals. Here, the user is actually a content searcher, so you might think a site that's simpler and focuses on text would do better. They just need the specific information about products and services, and maybe would like the opportunity to post a comment to a relevant blog post by the corporation. However, the corporation that is paying you to design the theme is really hoping to further engage the user with a great site experience and immerse them in their brand.

• Online news source/magazine: This is a blog that provides content on a particular topic, usually funded by ads. The design for this kind of site depends on how traditional the news content is or how appropriate the content is to put into a magazine. People looking for news and the latest updates in a genre might prefer theme designs that remind them of the experience of reading a newspaper, while magazine readers—especially for fashion, travel, people, and "bleeding-edge" technology—tend to like the site for the design experience of it as well as its content. Just pick up a paper version of any current news source or magazine and you will quickly become aware of what people in that genre are expecting.

• The Campaign Blog: These are the non-profit blogs run by charities or "causes". The information needs to be structured for clarity and winning people over to understanding and campaigning the cause or candidate. Most users will be content searchers and, while being appreciative of a nice and clean content structure and design experience depending on the campaign or cause, users may become critical if the site is too well designed. A user may think: "This is nice, but is it where they spend the money I donate, instead of on the cause!"

Keeping the above types of sites/blogs in mind, you can now think about your design idea and assess how appropriate it is for the type of blog or site, the kind of experience you want to give to users, as well as what you might think of the user's expectation about what the content and experience should be like.

Plugins and widgets

The second consideration you'll want to make is about plugins and widgets. Plugins are special files that make it easy to add extra functions and features to your WordPress site. Widgets are now built into WordPress 2+ and are basically things you can put into your WordPress site's sidebar, regardless of knowing any HTML or PHP.

Plugins and widgets usually place requirements on a theme. The theme should have basic API hooks in place so that it can take advantage of all a WordPress plugin may have to offer. Certain CSS classes may be generated and placed into the site for headers or special text areas; a template file in the theme might need some specific PHP code to accommodate a plugin.

In Chapter 3, we'll cover the most important API hooks that will make your theme play well with most WordPress plugins. However, you should find out the theme requirements of any plugin or widget that you plan to use so that you may accommodate it when you write code for your theme.

What kinds of plugins are available?

You can see all the types of plugins available on the WordPress.org site, identifying them by their tags (http://wordpress.org/extend/ plugins/tags/). Find out more about widgets:

You'll be able to see a sample of widgets, as well as find out the requirements for a widget compatible theme at http://widgets. wordpress.com/. This will walk you through "widgetizing" (we'll cover widgetizing our theme in Chapter 8).

When you begin working on your design, you'll want to compare your sketches and design comp(s) against your plugins and widgets checklist, and make sure you're accommodating them.

Design Comp (abbreviation used in design and print): A preliminary design or sketch is a "comp," comprehensive artwork, or composite. It is also known as comp, comprehensive, mockup, sample, or dummy.

Getting ready to design

You may already have a design process similar to the one I detail next; if so, just skim what I have to say and skip down to the next main heading. I have a feeling, though, that many of you will find this design comping technique a bit unorthodox, but bear with me; it really works.

Here's how this process came about. Whether or not you design professionally for clients or for yourself, you can probably identify with parts of this experience.

A common problem

Up until a couple of years ago, in order to mock up a site design, I loaded up Photoshop and began a rather time-consuming task of laying down the design's graphical elements and layout samples, which entailed managing text layers. However, this sometimes ended up being a very large amount of layers, most of which were just lots of text boxes filled with Lorem Ipsum sample text.

I'd show these mockups to the client and they'd make changes, which more often than not were just to the text in the mockup, not the overall layout or graphical interface. As my "standard design procedure" was to have the client approve the mockup before production, I'd find myself painstakingly plodding through all my Photoshop text layers, applying changes to show the mockup to the client again.

Sometimes, I would miss a small piece of text that should have been updated with other sets of text! This would confuse (or annoy) the client and they'd request another change! I guess they figured that as I had to make the change anyway, they might request a few more tweaks to the design as well, which again were usually more textual than graphical and took a bit of focus to keep track of.

The process of getting a design approved became tedious and, at times, drove me nuts. At one point, I considered dropping my design services and just focusing on programming and markup so that I wouldn't have to deal with it anymore.

Upon finally getting an approval and starting to produce the design comp into XHTML and CSS, no matter how good I got at CSS and envisioning how the CSS would work while I was mocking up the layout in Photoshop, I would inevitably include something in the layout that would turn out to be a bit harder than I thought I would reproduce with XHTML and CSS.

I was then saddled with two unappealing options—either go back to the client and get them to accept a more reasonable "reality" of the design or spend more time doing all sorts of tedious research and experimentation with the XHTML and CSS, to achieve the desired layout or other effect across all browsers and IE.

The solution: Rapid design comping

I soon realized the problem was me hanging onto a very antiquated design concept of what the mockup was and what production was. Before late 2005, I would have never cracked open my HTML editor without a signed design approval from the client, but why?

The Web was originally made for text. Therefore, it has a very nice, robust markup system for categorizing that text (that is, HTML/XTHML). Now with browsers that all comply (more or less) to CSS standards, the options for styling and displaying those marked-up items are more robust, but there are still limitations.

Photoshop, GIMP, and image editors have no display limitations. They were made to edit and enhance digital photographs and create amazing visual designs. They can handle anything you lay out into them, be it realistic for CSS or not. They were not designed to help you effectively manage layers upon layers of text that would be best handled with global stylings!

This realization led me to the ten step process I've termed rapid design comping. The term is a bit of a play on the term rapid prototyping which, taken from the world of manufacturing and applied to web and software development, had become very popular at the time this design process emerged for me in 2004-2005. This process is indeed inspired by, and bears some similarities to, rapid prototyping (as it is used in web and software development).

The radical, new process—is not so new or radical?

Turns out this approach, while it took me a bit to come around to it on my own, is not that new, radical or original. Many web-compliance and accessibility experts advocate a similar approach of starting with lean, optimized, semantically ordered markup created for the content and designing specifically for that content and markup, instead of "smushing" content into heavy XHTML markup and convoluted CSS styles that were created solely to handle design decisions (in some cases, poor decisions at that).

I'm often given the argument that this approach limits design creativity. However, I'd like to point out that this approach is the whole point behind the famous CSS Zen Garden site (http://www.csszengarden.com). Every single design on that site has been created using the exact same, clean, compliant, accessible, and semantically structured XHTML markup. There's no reason to feel limited creatively with this design process. If anything, it should push and spark your creativity.

Overview of rapid design comping

The following is the overview; we'll go over each step in detail afterwards:

1. Sketch it: Napkins are great! I usually use the other side of a recycled piece of photocopied paper—the more basic the better. No fine artist skills required!

° Perk: Using this sketch, you can not only get your graphic interface ideas down, but you can already start to think about how the user will interact with your theme design and resketch any new ideas or changes accordingly.

2. Start with the structure: I create an ideal, unstyled, semantically structured XHTML document and attach a bare bones CSS sheet to it.

3. Add text and markup: Lots of text, the more the better! A sample of actual content is best, but Lorem Ipsum is fine too. Will you be taking advantage of WordPress forms? Be sure to add in those as well.

4. CSS typography: Think of your typography and assign your decisions to the stylesheet. Don't like how the formatted text looks inline? Being separated into columns with fancy background graphics won't make it any better. Get your text to look nice and read well before moving on to the layout.

5. CSS layout: Set up the layout. This is where you'll see upfront if your layout idea from your sketch will even work. If there are any problems at this stage, you can rethink the design's layout into something more realistic (and usually more clean and elegant).

° Perk: Your client will never see, much less become attached to, a layout that would cause you problems down the road in CSS.

6. CSS color scheme: Assign your color scheme basics to the CSS. We're close to needing Photoshop anyway, so you might as well open it up. I sometimes find it useful to use Photoshop to help me come up with a color scheme and get the hexadecimal numbers for the stylesheet.

7. Take a screenshot: Time for your image editor! Paste the screenshot of your basic layout into your Photoshop file.

8. Visual design: Relax and have fun in GIMP, Inkscape, Photoshop, or Illustrator (I often use a combination of a vector editor and bitmap image editor) to create the graphical interface elements that will be applied to this layout over your screenshot.

9. Send for approval: Export a .jpg or .png format of the layout and send it to the client.

° Perk: If the client has text changes, just make them in your CSS (which will update your text globally—no layer hunting for all your headers or links, and so on) and resnap a screenshot to place back in the Photoshop file with the graphic elements. If they have a graphical interface change, that's what Photoshop and GIMP does best! Make the changes and resend for approval.

10. Production: Here's the best part; you're more than halfway there! Slice and export the images of your interface elements you've created and apply them to your XHTML mockup with background image rules in your CSS stylesheet. Because you worked directly over a screenshot of the layout, slicing the images to the correct size is much easier and you won't discover that you need to tweak the layout of the CSS as much to accommodate the graphic elements.

If you start getting really good and speedy with this process, and/or especially if you have text overlaying the complicated backgrounds, you can also just export your images to your CSS file right away and send a straight screenshot to the client from the browser for his/her approval. Play with this process and see what works best for you.

For the purposes of this title, there's actually an eleventh step of production, which of course is coding and separating up that XHTML/CSS mockup into your final WordPress theme (we'll get to that in Chapter 3).

Getting started

After taking all of the preceding items into consideration, I've decided that the type of theme I'd like to create, and the one we'll be working on throughout this book, is going to be an "online news source/magazine" type of site. Our site's content will be geared towards using open source software. Even though this type of site usually does very well by just focusing on the content, I would like to give users the design experience of reading a more trendy paper magazine.

Sketching It

The whole point of this step is to just get your layout down along with figuring out your graphic element scheme. You don't have to be a great artist or technical illustrator. As you'll see next, I'm clearly no DaVinci! Just put the gist of your layout down on a sheet of paper, quickly!

The best place to start is to reference your checklist from the steps I provided, which consider how the site is going to be used. Focus on your desired layout. Consider the following questions: Are you going to have columns? If so, how many? Will the columns be on the left or the right? How tall is your header? Will your footer be broken into columns? All of these things will compose the structure of your design. You can then move on to any graphic element scheme you might have in mind. This again may involve questions such as: Would you use rounded corners on the box edges or a particular icon set? Where will you use them and how often?

In the following figure, I've sketched a basic three column layout that features using the WordPress blog to manage and feature magazine-style articles on a particular subject, rather than just straight-up blog posts.

Because the design experience I want to give my site's viewers will be that of reading a paper magazine, the scheme for my graphic elements are going to focus on creating the illusion of paper edges and columned magazine-style layouts (particularly on the home page). I want the home page to feel similar to the "Table of Contents (TOC)" page in a magazine.

TOCs in magazines usually have big images and/or intro text to the featured articles to pique your interest. They then have listings of recurring columns such as "Ask the Expert" or "Rants and Raves".

Therefore, the graphical element scheme of my site that will make up the majority of the design experience, will focus on paper edges, curling up at the corners, just like a well-read, glossy, thin magazine paper tends to do. My layout is going to take advantage of the main WordPress blog, using the readily available text of the story as the intro text to pique interest. I'll use WordPress' categorizing feature to mimic a display of recurring columns (as in recurring articles) and the monthly archive list as a "Past Issues" list.

Start small

You may have a couple of ideas in mind; you can jot them down in quick gestures called "thumbnails". Thumbnails are a recommended and standard way to start any design mockup processes. They're a great way to be clear on the very basics of your layout before embellishing a larger (but still rough!) sketch with details.

Considering usability

Once you've created your sketch, based on your considerations, look at it for usability. Imagine you are someone who has come to the site for the information it contains.

What do you think the user will actually do? What kind of goals might they have for coming to your site? How hard or easy will it be for them to attain those goals? How hard or easy do you want it to be for them to attain those goals?

Are you adhering to standard web conventions? If not, have you let your user know what else to expect? Web standards and conventions are more than what's laid out in a lengthy W3C document. A lot of them are just adhering to what we, as web users, expect. For example, if text has underlines in it and/or is a different color, we expect that text to be a link. If something looks like a button, we expect clicking on it to do something, like process the comment form we just filled out or add an item to our cart.

It's perfectly fine to get creative and break away from the norm and not use all the web conventions. But be sure to let your viewers know upfront what to expect, especially as most of us are simply expecting a web page to act like a web page!

Looking at your sketch, do any of the just discussed scenarios make you realize any revisions need to be made? If so, it's pretty easy to do. Make another sketch!

Clean it up?

This might seem to defeat the purpose of rapid design comping, but if — you're working within a large design team, you may need to take an hour or so to clean your sketch up into a nicer line drawing (sometimes called a wireframe). This may help other developers on your team to understand your WordPress theme idea more clearly.

header looks kinda like cover of magazine page curl in header miniarticle bites w/ more link graphic opensource online magazine (nice graphic header)

quick nav: about books contact sidebar col. looks like content page in mag: (Features and columns)

3 Columns:

blog column: sidebar:

third column:

Features colomns

Blogging Profits Unleashed

Blogging Profits Unleashed

Already know that blogs are an essential element of your online business but just don't know HOW to gain a slice of the pie? Discover What You Need To Know About Setting Up and Running a Successful and Profitable Blog, Quickly and Easily.

Get My Free Ebook


Post a comment