Big Red Tin

Faux Columns Revistited

2011-10-18T00:34:36Z

It’s time to update Dan Cederholm’s faux columns to take advantage of CSS3 gradients and reduce http requests.

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%);

WordPress Theme Elements

2011-09-28T00:13:34Z

A client asked us to put together a list of every design element required in a WordPress theme but it’s the sort of thing we think we should share.

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.

How we do IE Hacks

2011-09-12T03:40:10Z

We recently changed the way we do IE hacks at Soupgiant. For years we used conditional comments to load separate CSS files.

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.

Clout by Colleen Jones: book review

2011-09-13T06:35:45Z

There must be a difficulty in writing books about content strategy. It’s an area that has existed for a very long time but only had a name for a few years. People who have been performing content strategy tasks as part of their job will be familiar with many of the techniques explained in a book that introduces concepts. Meanwhile, there might be terms that were agreed upon by those who are active in the content strategy community but are unfamiliar to those performing the role of a content strategists in an isolated bubble.

Colleen Jones’s book, Clout: the ART and SCIENCE of INFLUENTIAL WEB CONTENT, faces this problem from the outset. Right there on the cover it straddles the fence of condescension. Its subtitle invokes the renaissance and dares to use the word “influential”: Influence being the characteristic sought by all who write content for the web but never mentioned explicitly for fear of being judged manipulative.

In that way, Jones’s title teaches us the first lesson the book has to offer: Sometimes it’s better to be explicit than pretend to be something you’re not.

Inside the book, the lessons continue and it’s quickly evident that these are lessons for the less informed content creators. The reader is eased into the concept of content strategy. For the uninformed it’s an introduction while the informed are given some ready-formed arguments to help sell the idea of content strategy to those who need to buy it.

Jones’s book is a primer for content strategy, focussing more on creating content with a taste for the planning and analytics that go along with other parts of the strategy. She describes in appropriate detail why creating the right sort of content is difficult and how it’s a job that is never really finished.

Important for any introductory book, and successfully achieved by Jones, is informing the reader that there is still so much to learn before becoming an expert. Throughout Clout, she refers to the other leaders in content strategy like Ann Rockley, Kristina Halvorson and Erin Kissane, and she prescribes further reading into areas of marketing, planning, heuristics and analytics.

In Australia we’re particularly bad at explicit instruction. The title garnered some judgement amongst colleagues and judgemental looks on public transport. Our attitude is often “what could a book tell me about what I do?” The answer is: “A lot. Now, shut up and read.”

Clout puts the concept of content strategy into perspective for those who do it on a daily basis and those who are new to the idea. For those of us who work in the field, it serves as a reminder of what it is we’re trying to achieve and who to talk about it to those who have no idea.

Big Red Framework on WordPress.org

2011-08-25T23:37:39Z

Big Red, the Soupgiant WordPress framework, has been added to the WordPress.org theme repository.

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

Maintaining Link Focus

2011-09-12T01:53:40Z

Anyone who has attempted to navigate a web page using the keyboard, will have experienced sites that remove the default a:focus style without adding in a replacement.

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, A CSS Base

2011-08-17T00:47:02Z

We decided to release Soupgiant‘s CSS base to the world at large. You can find it at minimumpage.com.

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.

How Google Damages Its Own Brand

2011-08-10T00:44:10Z

In Google Reader I can send a piece to Twitter but I can’t send it to Google+.

It’s an issue across branding, functionality and user experience.

Previously Google represented novelty, ease of use, simplicity and innovation. With every half-baked idea, lacking basic intra-operability and seemingly losing sight of their own suite of services, they damage the trust we invested in them.

Maybe it’s only a little bit at a time, but it all adds up.

Check Your Content

2011-07-13T02:04:52Z

After last week’s example in which I discussed how Vodafone’s email to customers could have been improved with a little extra time, a reader offered further improvement.

Where I had “Vodafone will correct its billing system on 8 July 2011 to include three types of data usage,” she suggested adding the word “additional” so that the sentence would read:

Vodafone will correct its billing system on 8 July 2011 to include three additional types of data usage.

That single word clarifies the situation a lot more.

One of the reasons we perform user testing in web design is to get someone who has not lived with a website for months to point out something we’ve missed. The same thing happens with content. Having another pair of eyes look over some content is a vital part of a content strategy.

When we build content at Soupgiant, almost nothing leaves the office without at least one other person looking at it. That’s part of our content strategy.

Every blog post is read, redrafted and proofed before publishing. Many of our emails are double-checked and workshopped. We want to make sure that the message going out with our brand on it accurately represents our brand. Sometimes we even cross-check tweets.

This helps in a number of ways. Most importantly it means that every bit of content is clear in its intention. It also, however, means that we’re involved in, and aware of, how the business is represented in the outside world.

In small to medium sized businesses, it’s rarely prudent to run a piece of content through a focus group but it is often easy to get someone else in the organisation to read through something.

For a large organisation, like Vodafone, there are hundreds of people within the office who could have looked at the content of that email and offered suggestions.

This part of content strategy fits into content management and follows two very simple rules:

Somebody must be in charge of approving content before it is released.
The person who created the content cannot be the person approving it.

Sometimes you might find you’re all alone, with no one to check the content and no ability wait until somebody else has a chance to look at it. This always feels weird but it works every time; If your content is written, read it aloud.

When you read something aloud you’re substituting your ears for someone else’s eyes. You will be able to hear long sentences, ambiguities, questionable jargon and anything else that doesn’t fit into your branded message.

Nobody enjoys reworking something they previously thought was finished. It’s tedious and annoying but it’s less tedious and annoying than having your brand associated with a twitter hashtag that ends in “fail”.

Website Policies and SEO

2011-07-07T02:11:10Z

Looking through the RACV website policies I noticed this item:

7. linking to this web site

7.1 If you wish to establish a link to this web site you must, in the first instance, use the Contact Us link at the top of the page and provide the following information:

a) the URL of the web site that you seek to establish a link from;

b) a brief description of your web site; and

c) the reason that you wish to establish a link.

7.2 If RACV agrees to your proposed link, you must comply with any terms and conditions imposed by RACV as a condition of such agreement. If the nature and/or content of your web site changes in any significant way, you must contact RACV and provide a new description of your web site.

Is this good SEO practice? Is it a reasonable web practice considering the need for links to create the web itself?

Is there copyright on the URL? Who owns that copyright?

In keeping with their policies, I have not linked to the appropriate page but you can find it by going to racv.com.au and clicking the link at the bottom of the page titled “RACV Website Terms & Conditions of Use”.