For this project, my friends at PlainJoe Studios created the site design and architecture, with complete Photoshop mockups. Based on their design, I built a custom WordPress child theme using the StudioPress Genesis framework. The final product includes some great features, including a widgetized homepage, a dynamic video gallery fed via Vimeo, and slick access to the site map via the Quick Links in the header (give it a try!).

Best of all, the client can easily manage their own website content. And that is something to give praise for.

WordPress — it’s not just for blogging.

Do you need a website that works for you (instead of against you)? I can help. I have a network of design and developer resources that team together to deliver dynamic, high-performance websites. Our team is known as Room Five, and we’re here to help. Contact me for details.

Related posts:

1. Backing Up Your WordPress Site There are a lot of different methods you can use...
2. WordPress 3.1 Arrives It’s been a long time coming, but WordPress 3.1 is...

And so…

There are two kinds of people in the world. Those that like Starbucks, and those that don’t. I love Starbucks.Yes, it’s pricey, but I usually visit my local Starbucks on El Camino two or three times a week. My girlfriend would probably guess more frequently, but I’m not ready to admit to that.

I just unlocked the "Starbucks Tribute" badge on @foursquare! http://4sq.com/hXltsx

March 10, 2011 8:01 am via foursquareReplyRetweetFavorite

@jeffhester

Jeff Hester

This week Starbucks is celebrating their 40th anniversary. Regardless of what you think of their coffee, you have to respect that they’ve done a few things quite well from a business perspective. In conjunction with their 40th anniversary, they rolled out their new logo. It’s not really all that new — but more of a modification. Essentially they stripped out the band with the text that read “Starbucks Coffee,” leaving only the siren.

There was an uproar when they announced the new logo back in January. Some of my designer and marketing friends were up in arms over the new design. “Big mistake” was the consensus. Now that it’s here, I don’t hear much from anyone. Certainly it didn’t seem to reduce the morning lineup at Starbucks. It didn’t confuse, confound or bother the average customer at all. Either they didn’t notice, or didn’t really care. If they did notice, it was a novelty — “Oh, look! They changed the logo!” A sort of positive vibe that keeping it fresh provides the brand.

Mark Hurst profiled Starbucks in last week’s Good Experience newsletter. He notes that the formula that drove success at Starbucks began to falter a couple years ago, but they’ve appeared to turn this around. CEO Howard Schultz explained to the Wall Street Journal how they turned things around. “Putting our feet in the shoes of the customer…” was his key message. Note that the average customer wasn’t bothered by the logo change. The noise generated by the design and branding community was simply that — noise.

Last week at Linked OC, Seth Godin shared an interesting anecdote about Starbucks. He noted that when they originally opened, they did not sell coffee. They sold coffee beans, but not coffee by the cup. The formula faltered until they brought in a new CEO who brought in the idea of serving espresso drinks such as he had seen in Italy, and the rest is history.

Where is all this headed? Well, we’ve established that I like Starbucks. Two out of my three offspring have worked for Starbucks (one still does). And Starbucks, in spite of all their success was not and is not immune to mis-steps, either. The key has been, and remains — keeping the customer in mind.

So then, who is your customer? And are they on your mind?

Related posts:

1. Things Real People Don’t Say About Advertising Things Real People Don’t Say About Advertising is a Tumblr-powered...

A sample of the League Gothic web font

One of the challenges of designing for the web is that the font you want for your design may not be available on the computers your audience use. Resolving this usually requires either 1) Ditching the design intent and sticking with broadly supported font families; 2) Creating images containing text, in which case you can use whatever font you have; or 3) Using a web font type kit.

Option #1 is unappealing to most designers, although it shouldn’t be dismissed out of hand. There’s a good reason that those fonts are widely used. They’ve stood the test of time. Ever see the documentary Helvetica? Watch it.

Option #2 is not so great, though I’ve seen it done and it can work successfully if kept to a minimum. Images are always heavier than text alone, and much more difficult to update. Search engines can’t read them well, so you need to include ALT text.

Option #3 requires a little more effort, but the results are much more flexible. There are several web font kits available.

TypeKit was one of the original. They are a commercial service with access to a large library of quality, licensed fonts. You can get a free account for a single website, which is what I did recently for U.S. Speed Sport. You can see the page title (“Drag Racing” in this case) uses a special font provided by TypeKit. The drawback with the free account is that you have a limited library of fonts, and you’re required to display the TypeKit badge. It’s not obtrusive and might work for a smaller site, but bigger sites will probably want to pay for the non-badged license.

Google Web Fonts is a free alternative that is based on the TypeKit code. The javascript kits are very similar. The advantage here is that there is no badging requirement, but the library is even more limited than TypeKit’s free level.

My most recent discovery is a site called Font Squirrel. They literally hundreds of web fonts available in prebuilt kits, and you can create your own. I haven’t had a chance to use Font Squirrel yet, but it looks promising.

Are you using web fonts in your designs?

No related posts.

Things Real People Don’t Say About Advertising

While it’s sure to make you smile, especially if you’ve been involved in advertising or even commercial web projects, TPDSAA has a very real point. Too often we miss the mark when trying to communicate. We spend too much time on minutiae, and make too many assumptions that “we” know what our audience wants because we think they are just like us.

We Are Not Our Audience

Whether “we” means an ad agency, design firm or an individual simply trying to stake their claim on the Internet, “we” are not the same as everyone else. In fact, everyone else is very different from us. We are too close to the subject to see it through the eyes of the average visitor.

Over and over I’ve heard anecdotes of people recruiting their mom as the ultimate usability tester. The assumption is, if mom gets it, everyone will. Honestly, this is not far from the truth. We need to interact. We need to be genuine. We need to ask — our visitors, employees, members or customers — what they really need and want. And then, we need to give it to them.

I’m not suggesting design by committee, or worse, design by community. There is still a need for vision and creativity. Our experience and knowledge can help create a user experience that delights. Doing so requires a combination of that know-how and a willingness to listen and adapt to genuinely serve the audience.

Check out TPDSAA. I guarantee you will find at least a few photos you’ll relate to. And if you’re in a position to influence user experience, think about how you can avoid ending up lampooned on TPDSAA.

Looking to improve user experience? Here’s two companies I recommend:

• Adaptive Path provides a range of consulting services to help companies improve their user experience, as well as coordinating a series of events and conferences for user experience professionals.
• Creative Good also provides consulting services for companies who want to improve the user experience, supplemented by councils — groups of peers sharing their knowledge and expertise. The annual GEL conference (Good Experience Live) draws a range of creatives in a format closer to TED than an typical conference.

Meantime, I’m thinking about how I can apply the humor of TPDSAA to the realm of knowledge management. Stay tuned…

No related posts.

What really makes this band interesting was the way Scott and the Minimal team developed it. They had a great idea for converting the iPod Nano into a multi-touch watch, and to raise the capital they needed to take the bands from concept to production, they turned to Kickstarter. Kickstarter  allows people with an idea for a product, production or service to recruit micro-investments. The “investors” give a few bucks (or more), and rather than getting a share of ownership, they get the satisfaction of supporting someone with a great idea achieve their dream. And in some cases (as with TikTok and LunaTik) you get something in exchange.

Scott smartly put together great donor levels incentives. Pledge $25 or more and get a TikTok band. Pledge $50 or more and you got a LunaTik iPod Nano watch conversion kit. For $70 or more you got both. There were even bigger, fancier packages. In Scott’s case, their goal was to raise $15,000 — the minimum they felt they needed to justify the cost of going to production. They set a pledge deadline of December 16, but the response surprised them.

In the end, 13, 512 backers pledged a total of $941,718!

Needless to say, the project was a success, not only for Scott Wilson and Minimal, but for Kickstarter as well. Not that it wasn’t without some bumps in the road. Fulfillment was fraught with problems, as it turned out Kickstarter allowed people to pledge money without giving full addresses — obviously necessary for those getting the watch bands.

Scott did a great job of keeping the backers up to date with regular emails outlining the progress. He included photos as he travelled to China to meet with the manufacturer and shared videos of the bands being made.

A few notes about TikTok and LunaTik

• The are designed to work with the 6th generation iPod Nano (the current model, as of Feb. 2011).
• The iPod Nano is not included.
• It is super easy to remove the iPod Nano from the TikTok. Snap it in; snap it out.
• The LunaTik, on the other hand, is accurately labeled a watch conversion kit. While you can technically take your iPod Nano back out, it takes a couple special tools and some time.
• They are big, but there are bigger watches out there. It’s definitely more of a man-sized watch though (sorry ladies).

The final product? See for yourself. Click any image below for a larger version.

Check out other projects on Kickstarter, learn what else Minimal has been designing, and if you’re interested in the LunaTik and TikTok watch bands, you can find out more at LunaTik.com.

One Last Thought

Someone is probably wondering why I would need both a LunaTik and a TikTok band, after all, I only have on iPod Nano. The reality is, I do not need both. I am thinking of a clever way to give one away. If you’ve got any ideas, leave me a comment!

No related posts.

In these cases, help should be readily available when you need it, and unobtrusive when you don’t.

Here are a couple of great examples of online help that really works.

When Facebook introduced their recent changes to the profile page, they offered a tour of the changes that highlighted each new feature without taking you away from your profile. This is awesome, because essentially the guide uses your own profile as an example rather than a generic “Joe Facebook.” The data and examples are all relevant to you because they are yours!

Click here to view the embedded video.

Xero.com is a cloud-based accounting system for business. Accounting is complex, and people tend to be a bit touchy about getting the numbers right, especially when it comes to their own money!

Xeno has done several things really well. They use a “welcome block” to put additional help right in front of new customers. They offer inline, contextual help that doesn’t take your focus from the current page. And they provide links to a more traditional, full-featured help or even live support when you need it.

Click here to view the embedded video.

Another nice touch? Note how the help is clearly identified throughout Xeno with the color orange. The customer will intuitively know when they are looking at help and when they are looking at part of their web app.

Have you seen or designed a great help system? Share it in the comments!

No related posts.

I first read about Flipboard months before I finally plunked down the cash for an iPad, and it had already captured my attention. It’s remarkable in that Flipboard really doesn’t do anything that I couldn’t do before.

What is Flipboard?

Essentially, Flipboard is a different way of reading and consuming media that I’ve already been reading and consuming via other means. What makes Flipboard remarkable is that it does it so elegantly.

Flipboard transforms Twitter, Facebook, Flickr, Google Reader and RSS feeds into a beautiful, magazine-like interface that leverages all the good bits of the iPad. A Twitter stream is noisy and difficult to browse. The same stream through Flipboard is a pleasure. Links, photos and videos show up inline without requiring extra clicks, making browsing your streams not only a pleasure, but making it possible in a new way.

Here are a few screenshots to help tell the Flipboard story. Click any thumbnail to browser the larger images.

I still use Twitter and Facebook, but reading the same streams via Flipboard never fails to surface new and interesting conversations that I might have otherwise overlooked.

If you have an iPad, you must download and use Flipboard. Hell, it’s free.

If you don’t have an iPad, Flipboard might be reason enough to get one.

No related posts.

Assuming you care about the huge number of people who might want to visit your site from their mobile device, there are two important issues that warrant some thought.

Keep it Light

Back in the early days of the Internet, most people used dial-up access. The rule of thumb for websites was to keep the total size of  your page to less than 100 KB so that it could load reasonably quickly for dial-up users. Today, most computers connect via some form of broadband, and–according to Google–the average page size has ballooned to over 300 KB or more. While this works great for most fast broadband connections, mobile users may have data access speeds that are much slower. On top of that, many times they are paying by the drink. Some mobile providers charge based on how much data usage you slurp, so the greater your usage, the bigger bite they take out of your wallet. And don’t forget about data roaming!

Make it Useful

The mobile version of your website should not be a replica of the desktop experience. Just because your site can be displayed on an iPhone, doesn’t mean it’s mobile-ready. A mobile user has very different needs.

Domino’s Pizza provides a great illustration of this.  Visit the main Domino’s website on your computer and you can find a wealth of information. There are menus, online ordering, location information, nutritional info and even information about the corporation. Almost anything you want to know about Domino’s can be found on the site.

What are the primary objectives for the mobile visitor? How do they differ from the person sitting at a computer? For Domino’s, they want to make it easy for someone on a mobile device to place an order and find a store. You don’t get all the bells and whistles of the full website, just the key activities that Domino’s has found most mobile users want.

Taking Your WordPress-powered Site Mobile

It is said there are a thousand ways to skin a cat. There are probably even more ways to provide mobile support for your WordPress-powered website. I’m not even going to attempt to cover them all, but I will point out a few quick and relatively easy solutions. Essentially the options fall into one of three categories:

1. Roll your own. You can create a mobile CSS file that scales down the design and content for mobile users. This really isn’t too hard, but it does require some technical knowledge of CSS. I won’t be covering this– instead I’m going to focus on the easier solutions.
2. Mobile Plugins/Themes. There are WordPress themes or plugins designed specifically to provide mobile support.

Mobile-izing WordPress

One of the easiest ways to add a mobile version of your self-hosted WordPress site is with the WPtouch plugin. WPtouch is available in both free and commercial versions. It provides a much-improved mobile interface on iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch and BlackBerry Storm/Torch mobile devices.

I use WPtouch on several of my sites, including socalhiker.net and here at jeffhester.net.

The easiest way to try the free version is simply to add a new plugin via the WordPress admin console or download from here in  the WordPress.org plugin directory.

As you see in the screenshots above, the mobile version generated with WPtouch looks considerably different from the full site. The benefit to the mobile user is that it loads quickly, gives them something with an interface optimized for their device, and still gives them access to the content.

Of course, you can customize it further with your branding and colors. As time permits, I’ll do that as well. But without a lot of fuss or effort, you get something very usable on a mobile device.

There are many other good options including Mobify. VisionWidget has a more comprehensive overview if you’d like to see some alternatives.

Testing Mobile Support

Chances are, you already have a mobile phone or device to test on, but how do you test your mobile site on a variety of devices without buying them all? There isn’t a single option that works well for this, but CrossBrowserTesting will let you see what your site looks like on Android, iPhone and iPad devices. It’s a commercial service with a free trial.

For even more mobile options, check out PerfectoMobile. They focus exclusively on mobile devices, but include a much larger range.

Potential Problems

One obvious design difference between a typical site and a mobile version is that it won’t typically have a sidebar. If you rely on the sidebar for navigation or other functionality, you’ll need to provide another solution with your mobile version.

Another common issue will is Flash. Apple devices like the iPhone, iPod Touch and iPad don’t support Flash, and many video sites use Flash players. The mobile Safari browser on Apple devices will support HTML5 video, but you may need to tweak your embed technique to specify this.

Some of the mobile systems like WPtouch have issues with third-party comment systems like Disqus, Intense Debate or Echo. Usually this is not a showstopper, but if you use one of these systems, plan on doing some additional testing.

Summing it All Up

This isn’t meant to be an exhaustive list of options, but my own preference. Hopefully this whets your appetite for providing mobile support on your websites.

Got a better solution? Share your knowledge! Leave a comment  below.

No related posts.

The finished results

Space. The final frontier. Those famous words from the beginning of Star Trek still echo in my head after years of watching Kirk battle cheesy-looking aliens. And for my little beach shack, space really is the final frontier–and that space is at a premium!

I moved into the Big Blue Beach Bungalow nearly 1-1/2 years ago, and at long last (and with thanks to IKEA), I’m nearly finished furnishing the place. My main living area is a long, narrow room that serves a dual purpose. It’s my primary lounging about area, with all my media, the flat-screen, blu-ray player, Xbox, etc.  But it’s also a workspace, with my computer and all the accoutraments.

For a long time, I put up with a cheap $19 ready-to-assemble desk from Walmart. This humble little desk wasn’t much to look at, but sufficed as a short term solution while I completed my vision for the room.

My vision? 12 linear feet of IKEA BESTA storage in black-brown finish. Three units side-by-side, with each unit progressively taller. When I originally moved in, I already had one of the three units (my flatscreen sat atop it). And this month, the collection was completed.

The Problem

There was, however, one small problem. My original vision called for replacing the cheap desk and putting my Mac Mini in the BESTA unit, and my keyboard and mouse (both wireless) on an INREDA pull-out frame with the shelf insert option. The INREDA pull-out frame could be fitted with one of three available options: a compartmentalized tray; a hanging file system; or a shelf insert. The shelf insert works perfectly for a laptop or small keyboard and mouse.

Unfortunately, IKEA discontinued the shelf insert in 2010.

Bummer.

I tried a couple stores for stock to no avail. I checked Craigslist, again with no luck. I even tried the IKEAfans Forum, again with no success. “Screw it,” I thought. I’m fairly handy. I’ll build my own.

My Solution: The Do-It-Yourself INREDA Shelf Insert

The vinyl remnant was just a little long. I only needed trim one side.

The first step was assembling and installing the INREDA pull-out frame. This is easy enough for anyone with a screwdriver and the ability to follow directions.

Next, I carefully measured the opening for the insert. As it turns out, 1/2″ thick plywood is the perfect height for the insert, with dimensions of 19-3/8″ x 13-7/8″. First stop, Lowe’s. I found a 2′ x 2′ x 1/2″ sheet of sanded pine plywood, which the staff at Lowe’s were happy to cut to size for me.

Now all I needed to do was cover it. The original IKEA part was available in either white or black faux leather, and I wanted to do something similar in either black or very dark brown. The friendly people at the neighborhood Denault’s Hardware sent me down the road to Foam n’ Fabrics, where the owner gave me–for free–a remnant of black vinyl that fit perfectly.

I borrowed my neighbor’s staple gun, wrapped the vinyl around the plywood and stapled it to the underside.

I just eyeballed the staples, taking care to keep the vinyl stretched taut.

The corners were folded "gift wrap" style

It fits snugly in the pull-out frame opening, and looks perfect. Total cost? About $6 bucks (and a little bit of elbow grease).

No related posts.

A new project from Small Batch Inc. looks to change all that. Typekit promises to give you the ability to embed fonts on any web page with full fidelity and typographic control. 

Typekit is not yet available, but you can sign-up here to be notified as soon as it is.

No related posts.

Companies committed to a culture of antidesign (also consultants like Jakob Nielsen) may occasionally succeed in the marketplace, but they do so in spite of their antidesign, not because of it. Of course we can’t prove that; we can’t run a controlled experiment, let alone 41 of them with distinct shades of blue. It is merely one of those things a visually literate person knows. The fact that you don’t know it, or you deny it’s important, or deny it even can be known goes to show you really are better suited to programming a computer all day than dealing with actual human beings.

No related posts.