Archive for May, 2009

Ski Butlers Redesign

The newly redesigned home page for Ski Butlers.com

The newly redesigned home page for Ski Butlers.com

Ski Butlers is a Park City-based chain of ski rental delivery franchises all over western North America. They cater to discerning ski vacationers who want top of the line gear without the inconvenience of traditional rental shops. At skibutlers.com you can reserve your rentals in advance for delivery to your hotel room at a time that suits you. They even show up with extra boot sizes if the fit’s not quite right.

The redesign was challenging in that much of the content and functionality did not previously exist. What’s more is that the previous site made little consideration for SEO so the new site had to be completely standards compliant with lots of text and minimal markup.

There’s still a lot to be done with the site’s content to get it up to speed but the new site should really help elevate the brand for next season, while increasing visibility and conversion. Here’s hoping.

  • Comments Off
  • Filed under: general design
  • Avoiding Client Communication Errors

    As a designer you may find yourself constantly explaining the same things to clients. And while this can be frustrating for you, remember that it may be their first time down the road so you may need to slow down and explain why things are the way they are. Often times, simply addressing these items ahead of time will help you avoid any awkwardness in the transition from concept to development. Hopefully these common questions can help you anticipate your clients’ likely concerns and address them before they become an issue.

    There are ways to avoid these “surprises” throughout the process. But they require subtle communication and careful preparation. Remember, you’re the designer. So don’t corner the client with complicated technical or design questions, only to watch them glaze over and feel like they’re being talked down to. Instead try to engage your clients gently throughout the process to extract the necessary information and avoid any surprises.

    Common Client Questions

    Why doesn’t the type look like it did in the concept sketch?

    Setting the proper anti-aliasing for "live type" in your sketch can help avoid surprises down the road. (Mac OSX = "crisp" or "smooth", Windows IE6 = "none", Windows IE7 = "sharp" although not perfect.)

    Setting the proper anti-aliasing for "live type" in your sketch can help avoid surprises down the road. (Mac OSX = "crisp" or "smooth", Windows IE6 = "none", Windows IE7 = "sharp")

    It’s so easy to design a concept in Photoshop™ with gorgeous anti-aliased type as it will appear on your Apple Cinema Display. The client will LOVE your design because the smooth type looks better than jagged type on sites on their old CRT in IE6. But that’s not realistic now, is it? One way to avoid this pitfall is to find out what browser your client runs and design your concept to suit their environment. There’s no universal way to perfectly match Windows rendering but if you’re familiar with the evolution of different operating systems and how they render type, you can make small adjustments to better replicate what they will see when the site goes live. If your client is using IE6 as a primary browser, they’re most likely on an older machine without cleartype. So in anticipation, you can set all “live type” (type that will be editable) in your Photoshop sketch to “none” which will more accurately render the type as jagged (gag) like the browser would. If your client is on Vista, using IE7 or IE8 there is no perfect rendering mode, but the “sharp” anti-aliasing mode will be a little closer. If your client is on an Apple with OSX (you lucky bastard) you’re in the clear (pun optional) to use “crisp” or “smooth” as your preferred rendering mode.
    Here’s an example of fonts rendering in different browsers.

    What’s up with all the white space?

    Every time I get this question I die a little inside. But it’s legit. Clients often see real-estate as a finite asset, something to be rigidly maximized. This is understandable but it may be useful to set up an appreciation  for white space ahead of time. Often times, your client appreciates white space but they just don’t know it yet. At some point a client will say “Make it look like Apple.com.” Of course that’s a laughable statement but the undertone is that they like the singular focus and big beautiful imagery. You can do this. You really can. But when you  hear comments like that it’s important to jump on them and respond with something like “Yeah, I love how open their site is, and how focused the imagery is.” You may also have white space in the left hand column below the navigation. This is a common place for “dead space” (as the client  may call it) to accumulate. It’s important  to remind them that (A) the height of that column is independent of the content and will vary from one page to another, (B) it’s most likely dynamic so it’s impossible to control, so you’ve designed it to accommodate the worst-case scenario, and (C) the clean area will allow the user to focus on the important content at hand. But be sure to address it while you’re still concepting, rather than letting the site go to development.

    How come the site doesn’t take up my whole browser window?

    This is a tricky topic. But if you’re designing for a fixed width, the best answer is that you’ve looked at the client’s user data and it overwhelmingly suggests that their users are mostly on a common resolution (1024 x 768 most likely), and your design is set to optimized that viewing experience. The second half of the answer is that the site does not scale with the browser resolution (like say, Amazon) because your client’s content is not infinite. All the client wants  to know that you’ve considered these possibilities and made an educated decision that your decision best suits there needs. You’ve considered that a fluid width would be detrimental to the ideal line-length (66 characters or so) and ultimately it would hurt readability. You’ve addressed all the permutations of necessary content objects (banners, promos, etc) and they all have a nice neat place to live. And if all else fails, point out that The New York Times does it so it must be right. (Of course, choose your words carefully.)

    Why can’t we use our corporate font everywhere?

    It can be hard to explain the limited font selection on the web. But once you’ve gotten over that hurdle, it can be an opportunity to discuss why you’ve chosen Arial to compliment their logotype of Bodoni for example. And until CSS3 is universally supported, embedding display fonts through the use of “@font-face” is not a viable option.  In some cases, however you may want to dress up headings or special type areas with more graphic-looking fonts. For that you may want to look into sIFR which is a cool way of replacing live type with display type rendered in Flash through the use of CSS and Javascript. Another options is FLIR which uses PHP, Javascript, CSS and image replacement to render your headlines. But of course the effort and accessibility are drawbacks to these otherwise cool work-arounds. Having used sIFR initially on FetchDog.com I also found that there were load time issues caused by the extra scripts and server calls. So the best bet is to get good at making web type look sexy.

    Can you change the rollover states?

    It’s impossible to anticipate and document every minor detail for client approval. Sooner or later you’ll have to make some executive decisions to avoid opening a major can of worms and wasting time with client approvals. For example, should you ask your client what visited link color to use in the right hand column? Probably not, but what if they don’t like the color you picked? Obviously that’s an easy one to fix. But what if you created a nice flash site where all the button elements have a complicated mouse-over behavior? It may be best to define the behavior once and seek approval before proceeding with the rest. Your call. But consider how long the effect will take to alter and weigh it against the time it would take to receive a quick approval. There’s your answer.

    Can we add a major content element at the last minute?

    Last minute scope creep is a given in this industry. Typically it happens when a client is not fully prepared, but is under a tight deadline. But rather than being combative or perceived as unreasonable, cover your ass with a signed Statement of Work (SOW) document that defines the scope and requirements of the project. This document can get batted around many times but when it’s signed you have a project framework and a record of which requests are reasonable and which ones may mean potential added revenue. If those out-of-scope requests add up, you may be able to table them until after launch and address them all at once in a Phase 2 approach. Clients can usually budget and digest that much more easily than a nickel and dime approach.

    So I have an idea for the site intro…

    NO. This isn’t 1999. I don’t do intros. —Well, let me clarify. I’m not opposed to some animation on the home page. But in recent years I’ve adopted a “no splash page policy”. If someone requests an “intro” I try to talk them off the ledge by offering them an animation on their home page. This usually goes over pretty well once I get done explaining that (A) the concept of an intro is out-dated, (B) it’s annoying to users who are completely over the idea and who just want to find content, and (C) that we can make the same impact without a barrier to entry which the isolated intro represents.

    My mom looked at the site on AOL and…

    There’s always going to be some techno-peasant on a dial-up connection somewhere who is not getting the complete experience. Your job is to determine early on in the process if those people matter. If you’re able to ascertain who the clients’ core users are and what their minimum requirements are. If your client is hot on ground-breaking technologies or a high-bandwidth user experience, you’ll need to warn them about the risks without talking them out of their excitement. A good way to do this is to make clients sign a Technical Requirements Document (TRD) up front. We’d all like to stop supporting IE6 but that  may not be realistic and it’s important to know up front if that’s important. So draft up a document saying which target browsers will be supported, what system specifications are necessary to view the complete experience and what versions of software will be required.

    Your Turn:

    If you’re a designer, are there common questions you get from clients that make you want to dine out on a bullet? If you’re a marketer, have you ever had an awkward exchange with a designer that could have been easily avoided with proper communication up front? If so, comment on this post and let’s discuss.

  • Comments Off
  • Filed under: clients
  • Apple does it again

    It’s no secret that I love Apple. It’s also no secret that I hate banner ads. So when I see something like this I get mixed emotions. But I’ve decided that I love this iLife ad. Apple has upped the anti for synced banner ads. The idea is not completely original but as with anything Apple’s marketing team dreams up it’s just freakin’ cool.

    The premise is that “PC” (John Hodgman) is trying to sabotage the iLife banner’s call to action button to shock users who might  otherwise be tempted to click. Of course, in typical Wylie Coyote style he ends up shocking himself.

    Another brilliantly creative synced apple ad.

    Another brilliantly creative synced Apple ad.

    The ad works for many reasons.

    1. The smooth loading and clean design allows the story to play out in a clear, decisive way.
    2. The dramatic scale of the ad is not entirely typical for the New York Times homepage, so it breaks from the heavily loaded content you’re used to seeing in this space. Plus the white space calls more attention to the action.
    3. The quality of the video allows for an uncompromosed viewing experience, one that may not have been possible just a few short years ago.
    4. The video initially plays without the sound, which is not only standard compliant with most publishers’ ad requirements but it also entices you and draws you in immediately.
    5. The aggressive media buy is placed on the perfect site demographically speaking, at the perfect time. A total buyout on a boring wednesday makes sense on a site who’s regular users visit at least daily.

    Anyway, not to be a blatant Mac-a-holic, but damn these guys are good.

  • 2 Comments
  • Filed under: general design