This begs the larger question of what defines content. Zeldman posted awhile back (citing his own tweet, no less) that,

Content precedes design. Design in the absence of content is not design, it’s decoration.

Obviously a project can begin without all the materials, but it’s far from ideal. In the absence of photos and text, you can help the process along by quizzing the client about their industry, business philosophy or desired audience. In this sense, you’re getting a feel for “content” even without materials. Or as Zeldman says,

‘Content’ doesn’t mean ‘having all the copy.’ It means knowing what the site is about, what kinds of information it will present; it also means knowing something about the intended users and what they might want to be able to do on such a website.

So in this quest for content, you’ve researched an industry and analyzed an audience, yet the client has no prior business identity and no input when asked about basic look & feel. You’re the designer, he insists. Design something.

You stare at a blank canvas in Photoshop, wondering how to proceed.

1. Do you freeze the project until the client can provide materials?
2. Do you refer the content-less client to a branding firm that can provide a logo, tagline and copywriting?
3. Do you recommend the client to a photographer? Do you research stock photography? Do you ask the client to do it?
4. If the client is on a budget, do you improvise a basic logo or typeface yourself?
5. Do you write copy and improvise marketing blurbs and taglines? Do you charge a different rate? Do you already consider this part of your role as designer?
6. Do you take baby-steps with the process and present one element at a time (palette, typeface)? Do you use wireframes and moodboards?
7. Do you improvise a rough mockup just to get preliminary feedback or do you jump straight to a polished mockup?

Every designer has a different strategy, so I’m interested to hear how you guys handle the empty-handed client dilemma.

Why Is It Useful?

Pretend you’d discovered that story (”Kenya tourism, economy devastated by violence”) via random Google search. You might finish reading, know nothing else about the site, and hit your ‘Back’ button. As a designer, you want to help users explore topics in a forward or sideways motion from anywhere on the site. You can accomplish this by pulling in related content and providing logical jumping-off points, without requiring users to work backward.

Online newspapers like The Times use this principle. This article on Hillary Clinton is supported by smaller modules like political cartoons and related election coverage:

Politically-minded readers are now immersed in a topic they already enjoy, and are more likely to dig deeper into a whole section of the website rather than just one story. Good information-design connects the page to the interests of the user. Think of Pandora’s scrolling interface and the way it begins to ‘know’ your musical taste, compelling you to visit more often.

The Code

Here’s a simplified version of the code Ben wrote for Mimbo Pro, which must be included outside of the loop:

<?php

  //Gets category and author info
  global $wp_query;
$cats = get_the_category();
  $postAuthor = $wp_query->post->post_author;
$tempQuery = $wp_query;
  $currentId = $post->ID;

// related author posts
  $newQuery = "posts_per_page=5&author=" . $authorPosts;
  query_posts( $newQuery );
$authorPosts = "";
  $count = 0;
if (have_posts()) {
  while (have_posts()) {
  $count++;
  the_post();
  if( $count<4 && $currentId!=$post->ID) {
  $count++;
  $authorPosts .= '<li><a href="' . get_permalink() . '">' . the_title( "", "", false ) . '</a></li>';
  }
  }
  }

// related category posts
  $catlist = "";
  forEach( $cats as $c ) {
  if( $catlist != "" ) { $catlist .= ","; }
  $catlist .= $c->cat_ID;
  }
  $newQuery = "posts_per_page=5&cat=" . $catlist;
  query_posts( $newQuery );
$categoryPosts = "";
  $count = 0;
if (have_posts()) {
  while (have_posts()) {
  the_post();
  if( $count<4 && $currentId!=$post->ID) {
  $count++;
  $categoryPosts .= '<li><a href="' . get_permalink() . '">' . the_title( "", "", false ) . '</a></li>';
  }
  }
  }
  $wp_query = $tempQuery;
  ?>

Then inside the loop, call the functions like this:

<h4>More from this category</h4>
<ul>
<?php echo $categoryPosts; ?>
</ul>

<h4>More from this author</h4>
<ul>
<?php echo $authorPosts; ?>
</ul>

How’s it Work?

This whole task would be easy if we were pulling from a single static category or author—the query_posts function offers simple parameters. But pulling that information dynamically is slightly trickier.

Ben explains further:

All we need is work out which category/author the post is in and use that data to get the information. 5 posts are grabbed - then, when looping through the posts, we double check to make sure that the current post is not being linked to redundantly (this feature is not currently in Mimbo Pro but will be in the next update).

Because of the layout of the theme, we need to do all of this before the post is displayed. At the time I found the easiest method was to save the current page’s data as a new variable ($tempQuery = $wp_query;), do all the work, and then reassign the values so that the page can be updated as normal. This works great, but if I was to write it again I would use a new instance of the wp_query object, as described here by Ronald Huereca.

No matter how you code it, supporting your posts with related content is valuable to readers who want additional context and to bloggers who want a stickier site.

Seadragon/Photosynth is exactly the kind of ‘3-D web’ experience people were hyping in the late 1990s, along with VRML (Virtual Reality Modeling Language), as though they were poised to go mainstream.

Instead, many users rejected the over-use of tools like Flash, while Google’s simple text-based results became the gold standard.

Discussion of ‘visual browsing’ has heated up again, though. It will be interesting to see what kinds of interactions the public adapts to and which they reject. Here are more recent examples I’ve been seeing, some genuinely useful, some experimental and less practical.

Cover Flow

In late 2004, Andrew Enright first designed a visual browsing method which later became Apple’s Cover Flow.

Enright was nostalgic for flipping through the used bins at record stores and mentally cataloging the albums based on cover art:

Images have the ability to convey a lot of information very quickly. In addition, I would argue that images have a larger inherent capacity to instantly and simultaneously jog one’s factual and emotional memories than does text.

Not only does it convey more information in the less space, it makes the information presented easier to understand. Additionally amazing, this natural and subtle visual trick requires a minimal amount of processing, as it employs 2D effects to create the illusion of a 3D space.

Enright’s design influence can now be seen all over the web, and has been remixed for other purposes: Doug McCune recently built Muxmaster, a brilliant Adobe Air app that merges Cover Flow with Muxtape!

SnapShots

Do a search for “Snap + annoying” to see what people are saying about these screenshot previews, found on many Wordpress.com blogs.

Lorelle has called them “a blight” and I myself tried unsuccessfully to use them for less-annoying purposes.

To Snap’s credit, they adapted early to the idea of creating visual relationships between text-links and websites. The implementation might not be ideal, but they seem to listen to their critics and make improvements.

SearchMe

For a comparison, search Google for “Darren Hoyt“, then compare with SearchMe’s results. Here again you see the influence of Cover Flow.

Rich Ziade concluded SearchMe wasn’t very useful and I’m still trying to decide. As a designer, I’m inherently curious not just about content but the visual identity surrounding it, and SearchMe speaks to that curiousity, even if the screenshots don’t always communicate much.

Piclens

Like Photosynth, PicLens is pretty mind blowing. It plugs into your browser and transforms the search/browse experience of GIS, Flickr and YouTube into a giant, 3-D wall of multimedia.

It will be interesting to see how, and if, people adapt to this level of immersive browsing without feeling overwhelmed. It’s such a departure from the current methods, PicLens almost risks being too far ahead of its time.

Relation Browser

Moritz Stefaner’s Relation Browser is a great Flash tool that displays “complex concept network structures in a snappy and intuitive manner.”

I’ll be skinning a modified Relation Browser later this month for a site that links University of Virginia staff with their projects and departments. I’ll post more impressions when the project is complete.

Yahoo Glue

Yahoo India recently launched the “Glue” feature, which combines traditional text-based search results with multimedia. This kind of thing must blow the minds of elderly academics and researchers who spent years stumbling around dusty old libraries.

Instead of emphasizing cutting-edge methods of searching, Glue builds a rich, Web 2.0ish index of results . It’s kind of the same all-in-one effect (YouTube, Flickr, Wordpress) we attempted with the Probama theme.

YouTube ‘Warp’

I haven’t heard any real chatter YouTube’s ‘Warp’ option, and after playing with it, I can see why.

Warp is a prime example of cool “what if…?” concepts that aren’t really intuitive and don’t really go anywhere, but you have to applaud that someone built it. Even shaky implementations can push technology forward and inspire great ideas down the road.

Browse 3-D and SpaceTime

As a major multi-tasker I can see why Browse 3-D or SpaceTime would be helpful for toggling between screens.

Browse3D’s site says they “provide the most efficient way to find, organize, save and share web-based content…with multiple web browser engines”, which all sounds extremely promising. Yet, have you met anyone who uses a 3-D browser?

I’m guessing the $30 pricetag is part of why Browse3D hasn’t caught on more. As for SpaceTime, I’m currently finding dual monitors and tabbed browsing to be sufficient for all my multi-tasking, but in another five years, maybe my tastes will change.

Pixsta

When ordinary Googling for products doesn’t work, Pixsta will take the results, analyze them by shape, color and texture, and build a visual gallery, sort of like the Music Genome Project did with music, only with retail products.

Pixsta does seem to take a common problem—lack of recommendations based on visual similarities—and provides a neat solution, while other applications have it backward, a ’solution in search of a problem’. Read more at Pixsta’s blog.

Oskope

Oskope is a visual search tool that pulls images from eBay, Amazon and other sites.

The more I played with Oskope, the more I found it useful. There are options to display search results in a list view, a graph, a stack, a pile, or a grid. You can then drag images and drop them into a folder to be emailed. There are currently a million other ways you could accomplish this, but Oskope’s method is amazingly quick and convenient.

White Void

Not actually an application, White Void is a high-concept interactive agency with a Papervision3D portfolio.

I remember when a lot of Flash developers were trying this kind of navigation and the general response was, “no thanks”. Now I wonder if that’s because people just weren’t accustomed to it or if because the interface was genuinely flawed.

That last point is one I think of a lot. It will be another few years of experimenting before the next generation of visual browsing is something mainstream users agree on and are comfortable with. Jaw-dropping as it is, even Photosynth could fade into obscurity. Plenty services will fail before the next Google Search becomes a household word.

What other obvious interface features are missing from these examples? What else would help them get bigger in the mainstream?

In the past year, I’ve pushed to change our standard contract to say, “We will propose 1 wireframe, 1 homepage mockup, and 2-3 secondary page mockups”. So far the result has been distinctly happier clients and happier designers.

Why? The underlying idea is that a design budget is better spent with ample planning, strategy and confidence applied to one “definitely” design, rather than letting clients chase after multiple “maybe” designs.

Continue reading»

Remember while reading, I still don’t suggest there is any one perfect formula. Occasionally a client will insist on multiple concepts and be willing to pay for it. And sometimes those projects turn out great.

That’s the tricky part about designing for user-experience in the infant stages of the internet — almost no one agrees about what works, what doesn’t, or what The Rules are. And even when they agree, the ‘rules’ change on a monthly basis. No design direction is bulletproof. See also, William Goldman on the film industry:

“Nobody Knows Anything” — Perhaps the most famous quotation from [William Goldman's] book. Now widely quoted, it is often inaccurately used to suggest that Hollywood executives are stupid, but in fact refers to Goldman’s strong belief that, prior to a movie’s release, Hollywood has no real idea how well a film will do.

Aka, even fully-functional and beautifully-designed websites won’t succeed in bringing traffic or revenue unless a hundred other factors (marketing, networking) are in place. And often, not even then.

Part of the motivation was a desire for something warmer, more spacious and more readable to accommodate longer bits of writing and tutorials. As for the shorter bits, I’m also posting links to Twitter. I still want this site to be a ‘final destination’ for readers rather than an index of outsourced content as Zeldman has noted.

Design

Design-wise, I wanted something catchy but not trendy. I mostly improvised and found myself riffing on the textures and colors from my band’s EP cover which also favors the rich brown-orange-blue palette. Otherwise I just improvised and found that ideas came quicker when I didn’t force myself to plan — the benefits of being my own client.

Mostly, as you see from the homepage, I wanted to avoid the constraints of the typical blog format and use Wordpress make the content more modular. This should make life easier next time I want to redesign.

Browser Compatibility

In my paid projects I will continue to temporarily support Internet Explorer 6, but this site no longer supports it. Users will still be able to navigate the content, but display and DOM issues will not be fixed for browsers more than two years out of date.

Boy, does that feel good to say.

Content

I’ll continue to write about the smaller details of building websites, especially when it comes to Wordpress, but I also want to cover more big-picture issues that come with planning and strategizing larger websites and dealing with client feedback.

Functionality

The new site uses fewer template files than any theme I’ve developed, yet is significantly more powerful. Much of this is due to Wordpress’s conditional tags. Instead of creating custom page templates for everything, I inserted a number of conditionals within page.php and both sidebars to dynamically determine which content to display. I also used applied classes and IDs to the <body> tag to control layouts. All in all, the theme is much ’smarter’ while remaining compact.

On that note, I also used the loop in some non-standard ways throughout the theme. I created a unique template called loop.php and inserted some conditionals to make it behave differently in different contexts.

As far as solving problems, the feature I’m most happy with is the ability to use a dropdown menu for subscribing via RSS. I mentioned awhile back that I thought the current method of offering feeds was unintuitive. Users unfamiliar with RSS typically click the orange icon, are greeted with XML code and have no idea how to proceed. Offering them the one-click ability to add the feed to their favorite reader seems, to me, an improvement. If you have suggestions for more feedreader support, please let me know.

Finally I added some javascript zoom tricks to the Work page and also to the Archives and Category menus. In my experience, I only use those menus to navigate blogs a very small fraction of the time, so I thought I’d experiment with minimizing them.

But enough self-indulgent explanation — I hope you enjoy the new direction!

How does the sale work?

At any time on May 5th, users purchasing the theme can simply enter a special coupon code (name: “cincodemayo”) during checkout.

Why Now?

Since the theme launched in March, sales have been excellent despite the fact that neither Ben nor I have had much time to properly promote it — all publicity has been word-of-mouth.

At this point, initial kinks and bugs have been worked out and cool upgrades have been added. We thought Cinco de Mayo would be a festive day to offer this special deal and expand our user-base.

How can I make money on Mimbo Pro sales?

Place an ad on your site and collect 25% of each resulting sale of the theme!

When will you stop with the salesman stuff and go back to writing about Wordpress?

Yeah, sorry about that.

I’ve been a little out of touch lately, occupied with some home renovations (my other hobby). I also began feeling a bit burned out last month, juggling work responsibilities + blog and Mimbo stuff, and am trying to temporarily lighten my load.

I do have some things queued for the upcoming months:

• Mimbo 3.0 — top secret new features and layout
• A new design for darrenhoyt.com
• A theme collaboration with Adii
• More behind-the-scenes tutorials on Mimbo Pro
• An experimental theme for bbPress

Meantime, thanks for all your support and patience.

If you are multi-lingual and interested in swapping your services for a copy of Mimbo Pro, please get in touch. Sales have been great so far and we’re interested in reaching an even larger number of international users.

It makes me wonder if CNN isn’t really trying anymore. Or maybe they’re trying really really hard. Or, this is the last dying gasp of publicity before they finally succumb to new media and blogs. Or, this is the story of how they adapted to it.

More coverage here and here.

On the surface, it looks like a war over haircuts, but I have a feeling that underneath the fighting, there’s some good old fashioned homophobia/xenophobia at work, which sucks for teenagers whether they’re emo or not, or gay or not.

I actually had a long post in mind for this — I wanted to write a little about being a teenager in the late 1980s, living 2 hours from DC and hearing the older kids talk about the hardcore scene that created bands like Rites of Spring and Embrace, which were known to some as “emotional hardcore”, then later “emo”, and how back then the ideals were all about non-consumptive lifestyle and social justice and definitely not hinged on dyed black bangs or cutting yourself. Somewhere in the middle of writing I stumbled on this from the AV Club which said it a lot better than I could’ve.

Seriously, though — “Mexican Emo Riots”. Who would have ever thought they’d see that phrase in the mainstream media ? It sounds made up, like a Mad Lib.

Last month The Golf Channel, formerly an advertiser on NCGolfer’s site, launched a redesign of their own:

When asked about the similarities, The Golf Channel’s only response was to withdraw their advertising.

Most every designer admits to taking ideas from sites they admire and this example is nowhere near the biggest “ripoff” I’ve seen. But it seems to reflect pretty badly on the Golf Channel that they, as a large company with a large design budget, would need to borrow so heavily from a small private website which had not only carried their advertising but had already received recognition for the design. Not responding with any useful explanation makes them look even worse. More discussion at 9rules»