I’ve put a demo on Github where you can also see the source code.

Two columns, both with solid colours

background: #fff url(css3faux-i/cols.png);
background-image: -o-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: -moz-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: -webkit-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: -ms-linear-gradient(left, #fff 639px, #bed751 640px);
background-image: linear-gradient(left, #fff 639px, #bed751 640px);

Two columns, with a one pixel divider

background: #fff url(css3faux-i/div.png);
background-image: -o-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: -moz-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: -webkit-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: -ms-linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);
background-image: linear-gradient(left, #fff 639px, #bed751 640px, #fff 641px);

Two columns, one with a gradient

background: #fff url(css3faux-i/gradient.png);
background-image: -o-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: -moz-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: -webkit-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: -ms-linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);
background-image: linear-gradient(left, #fff 639px, #bed751 640px, #efffa5 100%);

When producing a theme, we try not to limit the website owner’s options within the WordPress Dashboard. The owner may wish to enable an option down the track and be disappointed if they can’t.

The downside for the designer and developer is they may put in work for elements that are never used. The upside is happy clients and return business.

Like most things web, the site’s purpose will dictate that some things just aren’t feasible. Consider this as a series of guidelines that you can adapt for your purposes.

This is a giant list of everything we could think of. It makes the task of designing for WordPress look a lot more daunting than it actually is. The theme test unit contains posts with every type of content listed below.

For the purposes of this post, we focused on our internal WordPress framework.

The website basics

The frame of the website includes the header, footer and any sidebars for website owners to add widgets. The frame may change on various pages throughout the site.

Some typical items that need to be designed for the site are:

• Menus, including hover states and any drop downs or mega menus, if applicable
• Headings and sub headings: HTML can have up to six levels of headings and sub headings. To keep code semantic in our framework, it allows
  • 5 levels of headings within a page (with the page title being the top level)
  • 4 levels of headings within a post (on archive pages, the post title is a second level heading)
• Form input fields, including
  • label placement
  • error message placement
  • focus states (when the user’s cursor is in the input)
  • submit buttons
    • hover states
    • focus states
    • active states (when the button is clicked)
  • an example of a typical layout can be found on our CSS framework’s form demo page (hit the submit button to view error messages).
• link colours
  • default
  • visited (if different from default)
  • hover state
  • focus state (for users navigating the page via keyboard)
    As mentioned in a recent post, we tend to reverse the foreground and background colours for the focus state.
  • active state (when the link is being clicked, frequently the same as hover state)
• Footer, typically containing
  • links to website policies
  • declaration of copyright,
  • links to main pages or a site map.

Widgets

Widgets are the various elements that appear in the sidebar, such as recent posts.

Each widget has a title and the contents described below

• List Widgets
  Most widgets are a list of links. Commonly these are styled in the same fashion but, if the design demands it, they can be made to look quite different.
  • Archives of months/categories
    • Option: Display as drop down
    • Option: Show or hide post count
    • Option for categories: show hierarchy.
  • Links/blog roll
    • Option: show link image (if no image, title is displayed)
    • Option: show link title
    • Option: show link description
    • Option: show link rating
  • Pages/custom menu, shown as hierarchy. Options do not affect design.
  • Recent post titles
    • Option: number of posts to display
  • Meta, links to site’s admin, RSS feed and similar
  • RSS Feed, can also be used to show recent posts. Shows title and an extract from the post.
    • Option: number to display
    • Option: display post author
    • Option: display post date
  • Recent Comments.
    Actually two links per list item; one to the comment and one to the commenter’s webpage.
    • Option: Number of comments to display
• Other widgets
  • Search form, includes input and a submit button
  • Text widget, can include any HTML
  • Calendar: one month with links to dates on which there were posts
  • Tag cloud

Plugins can be used to add other widgets to your page, for example a mailing list subscription form.

Archives and Search Results

WordPress includes the following archives of posts.

• Main archive – archive of posts from all categories by all authors
• Date based archives (by year, month and day)
• Category archives
• Tag archives
• Author archives
• Search results by search term

It is possible for the designer to include a description or author bio on the page. If you add this, you need to allow for the element to be removed if no description/bio is defined.

The archives are a list of posts, while the designer may remove them, they typically include

• title,
• category,
• tags (if added by website owner),
• author,
• number of comments,
• date of post,
• a short excerpt, the beginning or full text of the post
• a ‘read more’ link

Additionally, links to older and newer posts are displayed.

Search results display both pages and posts containing the search term in their title, excerpt or content.

Single Posts

Single posts typically display

• a feature image or thumbnail (if enabled by the designer)
• title
• category
• tags (if defined by website owner)
• author
• comments (if enabled)
• comment form (if open)
• date of post
• full text of the post
• links to the next & previous posts
• links to the next and previous page of comments (if applicable)

it is also possible to display a variety of information about the author if it has been defined.

Some plugins add extra content to the contents of this page. Designing for the gazillions of plugins available is impossible so discussing plugins with your client upfront will be helpful.

WordPress supports post formats which can be used to alter the display for the post depending on it’s content. The theme designer can choose to enable none, some or all of these. Possible post formats are:

• standard
• aside
• gallery
• link
• image
• quote
• status
• video
• audio
• chat

Single pages

WordPress allows multiple page templates to be included within a theme, common templates include:

• A standard page layout (required)
• A home page
• Special purpose landing pages

Pages typically display

• a feature image or thumbnail (if enabled by the designer)
• title
• comments (if enabled)
• comments form (if open)
• full text of the page
• links to the next & previous pages of comments (if applicable)

Attachment pages

An attachment page is linked to from an image or other media file.

• The full sized image, or a link to the media file
• A caption
• the next/previous attachment – if applicable.
• title
• date uploaded
• comments (if enabled)
• links to next / previous page of comments (if applicable)

Post and page content

The WordPress visual editor allows website owners to add numerous items to their post content, including

• bulleted and numbers lists,
• block quotes
• left, right, centre or justified alignment of text,
• links
• headings & subheadings – up to five levels in our framework
• images (left, right or centre aligned)
• images with captions  (left, right or centre aligned)
• video – either uploaded or embedding a youtube video.
• audio – either uploaded or embedding from elsewhere
• links to next/previous pages (if the page/post is split across pages)

If the website owner knows HTML, they can add other items using the HTML editor.

The layout test post on the theme test data page contains everything the website owner can add.

If the theme author enables it, each post and page may include a featured image/thumbnail. This may be displayed wherever post content appears.

Pull out quotes and other decretive elements can be added at the theme designers desecration.

Comments

Comments are generally displayed in the same manner on both pages and posts. WordPress allows for comments to be

• Paginated
• Nested
  By default WordPress allows comments to be nested up to ten levels deep. As the theme designer you can disable this or limit it to a lower number.
  We tend to limit it three or four levels deep.
• display avatars or not.
  As these are enabled and disabled in the dashboard, it is important for the comment design to allow for both scenarios.

The design of individual comments are dictated by the designer. Comments typically include

• name of the commenter
• the contents of the comment
• date and time of the comment
• avatar (if enabled)
• reply to this comment link (if enabled)
• When commenters submit a comment, if the comment needs to be moderated by the admin the text “You comment is awaiting moderation” is displayed.

The comment form

Users that aren’t logged in will see a comment form requesting:

• their name (required),
• their email address (required),
• their website (optional, the theme designer can remove this)
• the comment (required)
• a submit button

If the user fails to fill in the form correctly, our framework displays error messages next to each field.

If the website owner has required users register before leaving a comment, in place of the comment form logged out users will see the text “You must be logged in to post a comment.” In our framework, we display a login form below this text.

Users that are logged in will see the text “Logged in as username. Log out?” and a form requesting the comment followed by a submit button.

Not found pages

If a search term returns no results or a visitor enters a URL incorrectly, a no results/file not found page will be displayed.

Anything can be displayed on this page, by default our framework includes:

• a one line explanation of what’s happened,
• a search form,
• a site map.

Additional items

The theme designer may wish to add additional items & content to their WordPress site. For the most part your imagination is the limit.

Updates

• 28 Sep, 2011 – added a:active as suggested by Edward Caissie below
• 28 Sep, 2011 – change heading level details for posts, brain freeze.

For a few sites, we used Paul Irish’s conditional HTML classes hacks. Without workarounds, this puts IE in compatibility mode.

Recently, we decided to go back to attribute hacks.

Using LESS CSS and compiling with less.app, it’s possible to store the hacks in a single location and remove them once the browsers die.

The hacks we use are:

/* IE6 */
#something {
  _color: blue;
}

/* IE6, IE7 */
#something {
  *color: blue;
}

Around the time we switched, Mathias Bynens wrote a post detailing much the same conclusions we reached. I won’t rehash them here.

Excuse the dull and highly unfashionable post. It’s main purpose is so we can go to bigredtin.com/iehacks when memory fails us. We use this blog a resource.

If you have any code suggestions, you can fork the theme on Github and submit a pull request.

The cause – but not the fault – lays with Eric Meyer’s original CSS reset, subsequently included in the YUI CSS framework, among others.

Eric warned that he didn’t “recommend that you just use this in its unaltered state” but people did so anyway. Including the code:

:focus {
  outline: 0;
}

The problem became so widespread that Eric has apologised for it, even though it wasn’t his fault people ignored his advice! In the second version of his reset, he removed the code above.

At Soupgiant, we take a two-fold approach to link focus styles. We leave the outline in place because users have come to expect it. To increase the contrast of focused links further, we reverse the foreground and background colours too.

a:link, a:visited {
  color: #00f;
  background: transparent;
  text-decoration: underline;
}
a:focus {
  color: #fff;
  background: #00f;
  text-decoration: none;
}
a:hover, a:active {
  color: #00f;
  background: transparent;
  text-decoration: none;
}

While it seems we are doubling up on some code, it’s a necessary evil as multiple pseudo-classes can be applied to single a link at once (for example: :hover and :focus).

For the cost of a few extra bytes, we believe it adds significantly to the usability of our sites. For that reason, we’ve included it in Minimum Page: our reset-free, CSS starting point.

Minimum Page comes from a frustration with CSS resets and bases. Ripping down the styling only to rebuild many of the same styles is unnecessary, especially for defaults common to all browsers.

To encourage people to consider the code they insert in their site, the styles aren’t provided in a minimised form. Developers should edit the original base to make generic, site wide changes.

It’s exactly what we use to start all of our CSS at Soupgiant. We think it’s important to share.

• Find out more
• View on github

For a not-for-profit, like WordPress.org, the decision can be simple. The project is free and the cost is resources. To no longer support IE6 in their admin means the WordPress team can develop more efficiently. When a website makes a profit, however, I think the decision is black and white.

Many of us, are bastardising Microsoft’s advice for users to upgrade. Once enough people have upgraded, sites can then safely drop support for IE6.

Website owners and web developers who drop support for IE6 before their users upgrade, forget a key tenet of customer service: it has to be focused on the customer! My perception — and it’s nothing more — is the larger the project, the more willingness there is to drop support for IE6 without regard for the user. A larger project has larger development costs, and the larger development costs increase the cost of supporting IE6.

If I ask someone why they’re dropping support for a particular browser, the answer I look for is: “The extra dev costs outweigh the profits from the browser segment”. When people list percentage of visitors as their justification, I’m reminded of a conversation I had with Matthew Curry on Twitter.

Matt is the head of ecommerce for British sex toy retailer Lovehoney (this link may not be safe for work). He wrote: hmmmm, IE6 Lovehoney users have now dropped to 0.8% – decisions decisions……. – Source

Some suggested he drop support for IE6. Matt’s background is statistics so I knew he’d follow the numbers. Instead, we spoke about conversion rates for IE6 users on Lovehoney. They were lower than for other browsers but not statistically significant.

To my mind, Lovehoney’s decision to drop IE6 or not boils down to this question: “Are development costs for IE6 greater than 1% of profit?” If the answer is yes, drop that browser like a hot potato. If the answer is no, support the browser until the answer changes. I’d be surprised if Matt’s question was much different.

There are things web developers can do to encourage dropping IE6. A prominent message, like the one on IE6 countdown is one way. However, the question at the front of the website owner’s mind should always be about return on investment.

If you’ve decided to drop IE6 support your website, I’d love to hear your reasons in the comments.

Unlike James Collins, we don’t have terminal access to any servers in Australia. As I’ve detailed before, our sites are hosted in the US. James was kind and diligent enough to do some further testing comparing Microsoft’s CDN to Google’s. He found they resolved as follows:

If you have the chance, I’d love you to test where ajax.aspnetcdn.com and ajax.googleapis.com resolve to for you. You can do a traceroute and you should be able to work out the destination from host names and response times. Letting me know via twitter is probably easiest, my username is @pwcc.

Obviously, I should have done all this checking before writing the post. By failing to do so, I look a bit of a tit.

Over on Twitter @bobearth, prompted me to run some trace routes against the Google CDN and compare it to the Microsoft CDN. It appears Google have taken the distributed network out of their CDN.

As you’re probably aware, CDN is an abbreviation for content distributed network. The idea behind them is that American users will be served content from a server located in the US or Canada, Australian users will be served content from a server located in Australia or the Pacific, and so on.

Doing a trace to the Google CDN from the Soupgiant HQ in Melbourne, I was expecting to receive a response a server in Sydney. Instead, the response came from California, USA as the final steps of this traceroute show:

127.0.0.1:~ peterwilson$ traceroute ajax.googleapis.com
[snip]
 5  syd-nxg-men-crt1-ge-3-1-0 (202.7.173.241)  27.479 ms  87.472 ms  78.234 ms
 6  202.7.171.46 (202.7.171.46)  91.118 ms  31.786 ms  27.314 ms
 7  66.249.95.232 (66.249.95.232)  80.358 ms
    66.249.95.234 (66.249.95.234)  27.842 ms
    66.249.95.232 (66.249.95.232)  44.059 ms
 8  209.85.249.52 (209.85.249.52)  177.570 ms
    66.249.95.166 (66.249.95.166)  172.656 ms  157.311 ms
 9  72.14.236.126 (72.14.236.126)  172.117 ms  153.304 ms  180.227 ms
10  googleapis.l.google.com (66.249.89.95)  178.725 ms  193.939 ms  181.227 ms

The response from Microsoft’s CDN were more to my liking:

127-0-0-1:~ peterwilson$ traceroute ajax.aspnetcdn.com
traceroute: Warning: ajax.aspnetcdn.com has multiple addresses; using 70.37.159.166
traceroute to ajax.aspnetcdn.com (70.37.159.166), 64 hops max, 52 byte packets
[snip]
 7  10gigabitethernet5-1.syd-xmx-edgcom-1b.ntwk.msn.net (70.37.149.62)  90.691 ms  86.004 ms  37.900 ms
 8  ajax.microsoft.com (70.37.159.166)  71.541 ms  83.053 ms  80.586 ms

This prompts the question: should I switch to serving jQuery and other hosted libraries to the Microsoft CDN? Both Google and Microsoft use a cookie-free domain for their CDNs, both are set to browser cache for 12 months. More sites use Google’s CDN to serve, but only Microsoft serve geographically near the majority of visitors to Soupgiant and Big Red Tin.

I don’t know the answer to this question. I do know that if Google’s CDN was distributed, there would be no question.

#nav {
  float: none !important;
  /* where did I float this? */
}
/* ...jumble of code... */
ul#nav {
    float: left;
}

There are, however, instances where the !important declaration is the best tool for the job.

Responsive Web

The increase of users accessing web sites via mobile devices has redefined the way many design for the web. Rather than considering the desktop first, they now consider the mobile user. Andy Clarke’s 320 and Up is one reaction to this.

A requirement of the responsive web is that images expand and contract according to the width of the browser. To achieve this, the advice to define the width and height in the HTML has been reversed, an image should now be added without these attributes.

<img src="img.png" width="30" height="30" />

This leads to problems when redesigning a site, images in previous blog posts and older content could have the width and height defined. If the site uses a CMS with a visual editor, it may add the dimension to an image by default and content editors may unwittingly break the layout by leaving them in place.

To allow for this, I usually add the following to the CSS

img {
  height: auto !important;
  max-width: 100% !important;
}

Print Styles

There are certain elements that are almost always hidden from print styles: skip links, navigation, and oversized footers, for example. Backgrounds are also removed as they’re not printed by default. Changes to the screen layout won’t alter these needs. To avoid future problems, it is legitimate to include the following in your style sheet:

@media print {
  #nav, #footer, .sidebar {
    display: none !important;
  }
  .has-a-background {
    background: #fff !important;
  }
}

Leave a comment with your thoughts if you frequently use !important for other purposes, agree or disagree.

Update 16 Nov, 2011: changed img code block.