In reality, web designers have they’re work cut out for them. It’s not as simple as creating a pretty template and plugging some content into it. The design itself is an outcome of the content. To quote someone else:

Our work in web design is all about the content. The visual design is intended to effectively deliver and support our content. So to judge the quality of a website, you really have to judge it by it’s content. Next time you critique a website try to answer these three questions:

• Who is this website serving?
• Why are they coming here? (specifically, what is it they need to do?)
• How does the site inform the reader or guide them through a process?

Who is your website serving?

A lot of our upfront design research is dedicated towards understanding our users and segmenting them by the types of tasks they need to accomplish so that we can derive mental models and personas. One key benefit of doing such research is so that we can get the right content to the people who matter.

Why are readers coming to your site?

Remember that we goto websites for a reason. It could be to learn something, such as reading an article, to achieve something, such as checking my facebook inbox, or simply to be entertained, such as playing an online game. No matter what, we visit web sites for one reason or another. We need to write our content and structure our design to facilitate these motivations. Your readers came to your site to do something; get to the point.

How is your website informing its readers?

It’s still all too common to see brochureware websites. These sites are organization centric and are chock full of information that tends to be informative but irrelevant to the user and their task. For example, if you’re in retail chances are most people coming to your site because they want to buy something or find out how to get to your store. They probably don’t care about staff policies, or how the business was founded twenty years ago, etc..

Let’s use the copy for a staffing company as an example – a good approach would be to write to the user directly in a tone like this: “You can get hired today find out how!” not “Welcome to our website. We’ve been helping professional candidates get the positions they deserved for twenty years!”. One version engages the reader directly. The other simply builds up the company. To learn more about writing user centric task orientated copy I recommend reading Gerry McGovern’s comprehensive guide: Killer Web Content

Taking Content and Copy Seriously

Jakob Nielsen doesn’t dance around the topic:

Nielsen says that it’s all too common for design teams to only consider full fledged GUI’s as interaction design. He points out that email and even the URLs your website use are forms of interaction and need appropriate amounts of attention. He also states that the shorter your text is, the more important it is to design text for usability.

Think about short text in your design. Are the terms you’re using to describe each section in your primary navigation correct? It’s really important you get this stuff right.

The guys over at 37 signals have been saying this for years now:

Designers and clients can bicker all they want about the color, drop shadow, and font-face used on a button. But more important than all of those things, even its placement/positioning, is what the label on that button says. If a user notices and reads your call to action but doesn’t understand what it means than all of that effort was pointless. This is not to discount art direction, visual hierarchy, and aesthetics, but rather to put them in their place. You need to know what you’re saying before you get into any of those details.

“It looks good, but what did it say?”, that’s what Jamie Dihiansan asks when designing the marketing sites for 37 signals. Dihiansan says “You have to make your site memorable. Your site has to speak clearly.” If you don’t your project was nothing more than an exercise in aesthetic awaiting to be succeeded by more modern implementations in the fashionable world of commercial visual design.

Copy Alters the Entire User Experience

Bill DeRouchey does an excellent job pointing out that even the tone of the content can make a big difference in the overall user experience of a web site. We can write content in a way that it strikes us, or even throws us off. The point of the story is that you can create a richer and more powerful experience by writing your content in a way that gives your site some personality. If you have some time I strongly encourage you to watch Bill’s talk below:

What’s most important is understanding your customers, your readers, your prospects. To have a successful design implemented you need to take a few steps back and get away from design all together. Here’s how to start:

1. Design Research (Personas / Mental Models)

Start by segmenting the different groups of people who use your site; or who your trying to target to use your site. Research what they are trying to get out of your site. What is it that they need? What is it that you need to tell them in order to convert them from a prospect to a client? These motives and outcomes need to be evaluated and documented so that you can design effectively.

• Mental Models: Aligning Design Strategy with Human Behavior
• Subject To Change: Creating Great Products & Services for an Uncertain World: Adaptive Path on Design

2. Paper Prototyping

The next step is to get ideas flushed out rapidly on paper. You may iterate through several ideas. The idea here is to quickly create concepts for different scenarios that your users will encounter to achieve the tasks you want them to do on your site. If you flush it out quickly on paper you can actually run various ideas past sample groups to get some immediate feedback. You can test to see if they were able to accomplish the tasks you set out for them to do. You can also find out if they need to be able to do something you didn’t necessarily anticipate. This is a very low fidelity form of user testing and a crucial step in a successful design process.

• Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces
• Sketching User Experiences

2b. HTML/Flash Prototypes

If your budget permits you can actually build out your newly sketched out website as a plain looking interface. The goal here not to create something that looks amazing. The goal is to build something that represents the paper design as quickly as possible. By doing this you can then actually send customers / users to the working prototype and see how they actually use it.

• HTML Prototyping: All Gain No Pain
• Easier Page States with Polypage

3. Art Direction / Mockups

Finally, once you have worked out all of the kinks with your design you can start focusing on making it pretty. Again, aesthetic is very important but it often comes to soon in the design process. People view this segment as the design process when in fact it is really the last step. Aesthetic is used to improve the user experience of the site. It comes in the form of art direction as well as animation and other interactive effects that can help communicate actions and provide feedback to the user. This step can be very time consuming and making changes to the overall UI when working in high fidelity becomes a more time consuming process. Thus it makes it harder for us to react to the necessary changes we need to make to our website in order for our design to be truly successful. This is why you must focus on aesthetic at a later stage in the design process.

• CSS Artistry: A Web Design Master Class (includes full-color Transcending CSS book and 2 1/2-hour Inspired CSS DVD video training)
• Site-Seeing: A Visual Approach to Web Usability

Visually Phoenix

On the surface I’ve tried to incorporate colors and tones more representative of Phoenix. You’ll find illustrative elements resembling our city as well. The site headline contains the Phoenix skyline – as does the site footer. I’ve also made a minimalist illustration of the Tempe Center for the Arts; the amazing venue hosting the event.

More notable however is the extensive use of transparency used throughout the site. This was achieved with PNG images and rgba color values in the CSS. For viewers in IE7 and IE6 these features have been gracefully degraded. Indeed the entire design and build of this site was an extensive exercise in progressive enhancement.

Overflowing with CSS Tricks

A lot of tricks with overflow and absolute positioning were used to achieve various effects throughout the site. For instance, the three flickr images shown in the intro content are cropped by a containing element. The border around them is achieved with rgba transparency to create a unique effect for those who are visiting the site with modern browsers.

Getting Inline with Block

Another fairly simple CSS feature I took advantage was the ‘inline-block’ display mode. A well supported CSS feature that I’ve not used to much extent prior to this project other than a work around when we ran into layout complications. In this case I was able to use rgba transparency and ‘inline-block’ to create a pretty neat highlighting effect. I also liked how I was able to make elements of different formats run into each other quite naturally with this display mode.

Advanced Positioning

Nearly every major element of the page is absolutely positioned so that we could achieve a fluid layout that spans the entire width of the browser window but meets gracefully in the center. The content itself is contained in a 960px grid from the 960.gs system. To use absolute positioning so extensively we had to hack some magic with some simple jQuery:

function ensureAboveEachOther(onTop,onBottom,spacing){
   if(onTop.length > 0 && onBottom.length > 0) {
      onBottom.css('top',onTop.position().top+onTop.height()+spacing);
   }
}

A Navigation That Watches You

The main content of the site is presented in a single page layout. So naturally, it works just fine without javascript as the nav anchors point to targets on the page. However, for a better experience I’ve implemented some smooth automated scrolling via jQuery. Still though, it helps to know what section you’re in, and these fixed position navigations fail if they don’t update as the user scrolls out of the current section. Again, jQuery is here for the rescue:

// Setup scrolling selector update.
      var scrollTarget = $(window);
      scrollTarget.scroll(function(){
         // TODO:
         // Refactor this into a nice function sometime later.

         // About
         if(scrollTarget.scrollTop() > about.position().top-100 && scrollTarget.scrollTop() < venue.position().top-100) {
            $('#primary_navigation li.about').addClass('current');
         } else {
            $('#primary_navigation li.about.current').removeClass('current');
         }
         ...
   });

A Big Thanks

Overall I'm really pleased with how the site came out. I have to thank Tomas Carrillo who went out of his way to make sure that this project got to see the light of day. Though I did all of the work to create and build the theme, there was a considerable amount of work done to make sure the theme wouldn't break existing content on the site. If Tomas didn't make the time to do this the theme would have sat on the sidelines as nothing more than a pretty concept. This is for everyone who is involved as an organizer, sponsor, speaker, or community participant just coming to see the event. I hope you enjoy it and see you in June!

One More Thing

Since this is a community project the entire source for the wordpress theme is available on GitHub. Feel free to check it out!

• Visit the new Ignite Phoenix website!
• Grab the Theme Code Off GitHub

Update! I’ve added detailed directions on how to get this system setup on your own blog.

Reusing a Good Idea

How does it work? Well the primary premise is based off a design pattern that Aza Raskin demonstrated with Ubiquity. Simply highlight any text in the body of this post and a ‘Respond’ bubble should fade in near your mouse. As in Ubiquity, the bubble maintains a low opacity in order to be fairly unobtrusive unless you mouse over it. Clicking the respond button scrolls you to the comment box where it is now populated with an html blockquote of the selected text. Now you can type your comment easily and immediately whilst quoting the article.

This works even nicer within comments. If you select any text within a comment the ‘Respond’ bubble will appear here as well. This time however, a directive ‘@author name’ link is generated for you in addition to the blockquote. It’s that easy to respond directly to a given comment!

More Controls Within Comments

But why not take it a step further? After all, discussion goes back and forth. Sometimes you may want to follow a specific comment author to find out what else they said, or maybe you want to easily find responses aimed at a specific comment. I’ve implemented a simple set of lists that appear adjacent to a given comment if applicable content was found. These navigational lists are intended to allow you to jump between related comments and responses quickly. In addition to scrolling – the targeted comment is highlighted for you.

Last but not least, when you mouse over any comment you will be presented with two faded controls in its top left corner. These alternatives to the text highlighting utility explained earlier allow you to reply or quote another author without highlighting any text. Click on the ‘reply’ control and you simply target that comment. Click on the ‘quote’ control and the entire comment (sans embedded block quotes) is quoted for you. Similar to the highlighting technique except this method quotes the entire comment instead of a specific selection.

Get the Source and Contribute

While I just hacked this code together in jQuery. I want anyone to feel free to use it on their blogs. I’m not going to attempt to create some kind of plugin. Each implementation will be too specific and require too much thought for a generic plugin. Instead I have setup a public repository on github so that anyone who would like to use this technique on their own site can go ahead and adjust the source for their own purposes. If you are handy with javascript and would like to extend this idea, modify it, rewrite it in another javascript framework, or make it easier for others to redeploy – you are more than welcome to feel free to fork away.

• Access the ‘Encouraged Commentary’ Project on GitHub.

Sorting & Single Tiered Threading

As an experiment to help make the conversation flow more naturally the script now sorts responses after their parent and marks them as a response. This keeps everything decently sorted and prevents excessive layers of responses.

When speaking of rhythm – Bringhurst is referring to the horizontal spacing between characters and the vertical spacing of lines of text. ‘Breathing’ is how much words the page will carry. This controlled by the rhythm. When we layout text and information, we face the challenge of applying content to the constraint of our space. So the more words we put into a given page, the less it can breath. For the reader’s sake it’s important that the text can breath. If it can’t the text becomes unappealing and difficult to read.

Robert, explains various strategies for allowing a page to breath and still carry more text. For instance, longer line lengths require greater leading. If we shorten the line length by dividing the page into columns we can reduce the amount of leading on the page and still allow the document to breath. By reducing the leading we can fit more lines into a given page and thus allow it to carry more text if necessary.

What’s interesting about the entire concept of breathing is that it seems very print orientated. How does this apply to the web where our designs are often modified by the reader. If the reader resizes their window the entire body could potentially change depending on how we designed our site to accommodate variations in screen-size. At the same time if we use a fixed width design such as this site – we can find that we suddenly are no longer utilizing enough of the page and allowing the page to breath far too much. And then of course, the user can adjust the font-size which totally changes the amount of words we carry on each line as the character size changes but the line-length doesn’t.

It seems like a new set of typographic rules needs to be written for the web where the constraints aren’t so absolute. But who will do it?

Horizontal Rhythm

Line length is critical in print and web design. Perhaps the greatest rationale for arguing against a fluid-width web layout come from the general rules of thumbed defined in Robert’s book.

The measure, or the line-length, is fundamental to the readability of your text:

• In general a satisfactory measure is anywhere between 45 and 75 characters long.
• A 66-character line measure is widely regarded as ideal.
• For multiple columns, a measure of 40-50 characters tends to be satisfactory.
• You should not go below a 40 character measure when text is justified.

Choosing ragged lines or applying justification can affect the structure and feel of your piece:

• If both styles of alignment suit the piece, choose ragged.
• San-serif fonts tend to look better using ragged lines.
• Mono-spaced fonts always look better ragged.
• Justification of text in columns with shorter measures can lead to over-hyphenation.

The service describes itself as: Poplisher is a tool to discover and select the best stories on the web. Popular articles from independent writers will be published in professionally designed and distributed magazines. Print power to the people.

I would highly encourage any bloggers out there interested to sign up and participate in the beta issue!

What is the Best Web Gallery?

If you’re familiar with sites like StyleGala or CSS Remix, then you’ve probably heard of Best Web Gallery or sites like it. I found that Nick’s site has the best frequency of updates with quality sites which is why his site is the CSS Gallery I goto almost exclusively for design inspiration. I submitted DontTrustThisGuy.com over the weekend and surprisingly made it into this weeks update!

Some Much Needed Traffic

This site is not very well known so I average only about 40-70 visits per day. Yesterday’s publicity shot my traffic out of the water! Almost 800 visits in one day! Needless to say I hope at least a few new people to the site stick around for more upcoming posts.

A Recap of the Site Design

What you can’t tell from the surface from this design is the technology under the hood. I took this site as a chance to experiment with extensive implementations of Microformats and also took advantage of some new features in CSS3. So if you’re interested in seeing just how I did it check out my article ‘A Refreshed Design for 2008.‘

My CSS Comments Bundle For Textmate

I was surprised that there was nothing in the included CSS bundle for basic commenting so I took the liberty to write one. I also made tab triggers for all of the techniques shared in Jina’s article. It’s broken down into five snippets:

• Comment: a traditional CSS comment.
• Section: I chose to use the section flagging technique as mentioned in Jina’s article.
• Colors: a reference table for defining hex colors used in your stylesheet. This was mentioned by Jina which she accredited to Steve Smith.
• Declare: a wordpress theme declaration. I found this to be a substantial way to define a stylesheet while following an established best practice by the wordpress community.
• Updated: this is the timestamp technique mentioned in Jina’s article.

I prefer to use the declare snippet on my main stylesheet and the updated or timestamp on all of my included child stylesheets. This bundle has been in use by me for three weeks now and I’ve actually found it to help me a lot. Putting in comments for organizational purposes; I’d be too lazy to do it without this. Your mileage may vary with the bundle, but I hope you find it useful too.

• Download My CSS Comments Bundle for Textmate