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.

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")

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.

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.

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.

The web is an ephemeral medium, subject to trends and whims; art directors and design by committee; browser-based compromise and accessibility assessments. Excellence on the web is subjective, elusive, and fickle. But you’d like to think that you do good work. Every project comes with concessions but your latest project is usually your best. You take screen shots for your portfolio, maybe enter it into some contests or showcases, and you promote it any way you can. But inevitably you have to hand that design off to the client, or a developer, or another designer who may not share your vision. And that’s when the heart-break sets in. Lately I’ve had several sites butchered by the clumsy hands of zealous, would-be designers. It makes me envy my friends in the print design field who’s work is preserved at the peak of its freshness like a beetle in amber.

Some of my designs stay alive, just as I designed them for many years. Some, just for a few months. Sometimes the designs degrade over time due to client access, improper training, or just a lack of attention. You try to account for that degradation in your design by applying character limits, styling markup elements, or offering style guides. But it’s inevitable. Then some day someone comes along and institutes a sweeping change. You just hope it’s for the better.

Picture yourself as a parent. You work hard to raise the perfect child and before you know it, they’ve left the house, fallen in with a bad crowd and they’re smoking crack! (Breathe.)

But what happens when the major change is detrimental to your original design, or to the client’s brand? Picture yourself as a parent. You work hard to raise the perfect child and before you know it, they’ve left the house, fallen in with a bad crowd and they’re smoking crack! (Breathe.) How do you tell people that you had nothing to do with it without sounding like a snob? Or, worse yet, what if the client asks for your opinion? I’m not the type to bash people’s work unless it’s unnecessarily awful. By that I mean, you had a perfectly good site but you trashed it just because you felt like it. (Breathe.) It’s natural to get upset about it. In fact it’s healthy. It shows that you care about your work. But it’s also unprofessional to let it get you down.

Remember: It’s not your fault

Don’t forget that people always want to put their mark on things. Even if your design was better that the new one, it doesn’t matter. If someone decides to make a change, you can’t stop them. So have a good cry, keep your chin up, and move on with your career.

Stay Fresh

One thing you can do is keep your portfolio fresh. Make sure your portfolio home page always reflects your latest and/or best work. Be proud of your  latest accomplishments and don’t hang on too tightly to previous success. I used to have a creative director who would walk into every pitch with the same 3-5 case studies of projects he had done over 10 years before. This is a bad habit. The work looks dated and it makes you look as though you haven’t done anything good in a while. PURGE! No one’s gonna look through your old work, and if they do, chances are it does not accurately reflect the way your current status as a designer. If you must include old work, perhaps add a conspicuous date to it, or better yet, section it off in a “vintage” or “classic” area where old designs can be put out to pasture.

Go ahead and tell users that this version is no longer active. But feel free to archive a static version of the site to show.

Stay Honest

If you must show out-dated work, don’t beat around the bush. Feel free to tell users when a site has become inactive. I like to show the date of completion for a project and if my design is no longer live, I say so. If it’s a small site or a Flash site, I may even archive my version on my website for display only. However, be careful not to detract from the current site’s SEO by stripping meta data, alt tags, and any live links to the site.

Put Your Best Foot Forward

Push your latest work. I find it useful to have a “featured work” area that showcases my latest and/or greatest work over my other work. Items in my general portfolio are listed by vertical market, while most other pages showcase items I feel represent where I am at this moment. And that’s important because people want to quickly understand what distinguishes you from other artists. Make sure you lead with the right impression.

But the best thing you can do is keep working. Keep doing your best work on each project. You will ultimately be defined by your latest work so make sure that your next design is always your best.

http://www.raisingmomny.com

With so many resources out there for taking care of a baby, it’s about time someone stood up for the mother. Raising Mom is a New York-based organization that helps new moms cope with their new adventure and teaches them helpful techniques. They offer classes and seminars while the site offers articles and blogs to create an empathetic and supportive community around motherhood. Check it out!

While I did the concept design and template/CSS production, additional props go to Integra Strategic for project management and overall development.

If there’s one thing that this economy has taught us, it’s that only true substance survives. To offer value as an independent designer, it seems that you have to have more than a keen aesthetic and lust for typography. You have to acquire skills that go beyond what one might learn in a design class. Experience becomes a key asset as you gain a wealth of subtle extra-credit vernacular. Of course there’s no substitute for specialized skills, so recognize where your limits are and be honest with yourself and your clients. However, it’s possible that you possess a high-level understanding of peripheral concepts that can help you AND your customers produce better creative to get through these tough times.

So here are 10 basic ways you can add value as a designer and ultimately make more money.

1. Project Management
   The number one reason companies hire freelancers is because their perception is that agencies charge extra for “overhead”. To some extent, they’re right. Clients are on the lookout for “smoke and mirrors” techniques like brainstorming sessions, formal presentations, and “process”. Is this unnecessary? NO. But clients have to worry about the bottom line. So anything they perceive as fluff reflects poorly on agencies. As a freelancer, you’re responsible for the creative process. So it’s up to you to determine how much buildup a project requires.

   Get in the habit of creating a detailed statement of work that accounts for all your anticipated hours and costs. Once agreed upon, this document can save you time later when the inevitable scope-creep occurs. It’s also your responsibility to manage the client’s expectations and hold them to their responsibilities so be sure to end each conversation with a “next steps” discussion. Make sure the client understands what’s supposed to happen next and what’s expected of them. Then, not only do you maintain your professional credibility, but you’re in charge of the project timeline.

   Another client perception is that agencies also have an inherent bureaucracy designed to protect the “fragile” talent. Account executives often have to run interference for designers and developers, creating lots of perceived hoopla around seemingly simple tasks. Your willingness to address things quickly and without ego or fanfare can go a long way toward establishing a solid relationship. However, don’t be afraid to tell them what your schedule is really like. Although the client should feel that they are a top priority, it’s ok to let them know that they’re not your only priority. This establishes boundaries in a respectful way.

2. Copy Writing
   So many small projects have no budget for copy-writing. And while you may not add a line-item in your proposal for it, you know damn well that there will be a moment when you have a small bit of Greek copy occupying space on the page. Why not take a stab at filling that in? I can’t tell you how many times my copy ended up making the final cut. Sometimes I’ll even put sarcastic copy in as a joke to call attention to the fact that they need to address it. Clients don’t often realize what a value that is, but in many cases it can keep a project on schedule.

   Another fine point is that you NEED take responsibility for navigation and calls to action. No page should ever have a “submit” button. Put yourself in the place of your users and understand what their mental process is. Then let that dictate what a button should say. By giving the user more specific language, you will entice them more and set up a proper expectation for the next step. This establishes trust between you and the user. But it also can increase the conversion of the site. Which leads me to…

3. Sales
   You’re not a sales guy. You probably don’t do business on the golf course or expense fancy dinners. But you CAN make your design more-sales oriented. Don’t kid yourself. The moment you became a commercial designer is the moment you became a marketer —gulp— a sales guy. If your love of design doesn’t translate to conversion you’re in the wrong business. You can make a huge impact with your design. It seems like a lot more articles are popping up lately about designing for conversion. And they’re right. By developing your visual acuity, you already know how to lead someone’s eye. Now take that skill and apply it to one specific point on every page. Figure out what the client’s key selling point is and drive all support content to promoting that one goal.
4. Photography
   You’re a designer, which means you probably took some photography courses in school. You’re working on a great design but you don’t want the site to be full of bland stock photography. Yet the client can’t afford pricey photo shoots with “real” photographers. Here’s an opportunity to be resourceful and profitable by offering to take photos yourself! Again, be honest about your limits but be confident that you can do a good job. I mean, they can always replace your images in “phase II” right? Identify the client’s photography needs before beginning work and offer to add that service as a line item. Or if the need isn’t realized until later in the project, the client may be frustrated by the prospect of paying too much. You have a golden opportunity to add recognizable value. Not only are you offering to take take pictures, but you’re able to create the exact aesthetic your vision calls for. Plus you’re offering to do all photo editing AND giving them exclusive rights to all high-resolution originals. That’s huge!
5. Site Architecture
   Clients often have no idea how large their site is. A typical scenario includes clients guestimating that their site is “only 6 pages” when in fact it’s 6 major sections with sub-nav and multiple utility pages. Learn to recognize the overall scope of a project early and be willing to spend a little bit of time outlining the site map as part of the bidding process. This will help you assess the size of the project, but it will also help the client visualize the amount of effort you’ll be undergoing. This small step can act as a springboard for a discussion on functionality and a quantitative device for additional usability or navigational concerns.
6. Usability
   As an interactive designer, you’re automatically a usability expert, right? Well no, it’s not that simple. But it’s the assumption of the client. So make sure you spend a lot of time observing trends and usability enhancements you can make on your designs. This is the primary difference between a print designer (for example) and a web designer. It’s not enough to make something look nice. Study the nuances of well-designed interfaces. Are your buttons’ hit states big enough? Is the next step obvious and are they in the right place? Are the links named appropriately? Can you add title tags to act as tool tips? Usability and accessibility are words that are thrown around a lot but they can’t be stressed enough.
7. Development
   Dammit Jim, I’m a designer not a programmer! But does that mean you can’t learn new tricks? In my opinion, designers shouldn’t design web sites if they don’t at least have a basic HTML background to understand the implications of their decisions. But if you have that basic understanding, why not improve on it? I prefer to work with developers whenever possible to handle all the heavy-lifting on the back end. But I often find them to be very grateful when I hand off detailed HTML templates and well-constructed CSS frameworks. The designer in me wants to maintain the aesthetic control over the design as deeply into the process as possible. But the Developer in me wants to make sure that things are built just so, with proper semantic markup and clean CSS, minimizing div/span usage and acheiving a nice balance between progressive enhancement and graceful degredation. What’s more is that the marketer in me wants to be sure that the precedent is set that alt tags and title tags are used appropriately, and that the copy supports the client’s SEO goals.
8. SEO (Search Engine Optimization)
   SEO is a science and an art. There’s a fickle relationship between content and search engines because search engines use complicated algorithms that are always evolving. But the one constant is that if you write clean code with lots of useful copy, and update frequently, search engines will respect you. Aside from the traditional meta content (which is still important even if it’s not the first thing search engines look at), you have a responsibility to your client to understand how your code and design will affect their visibility on the web. So consider the little things. Before handing off a coded template, make sure all your images have alt tags. and make sure all your links have title tags that reinforce key words while supporting the expectation set by the link display text. And of course make sure you’re using divs instead of tables wherever possible. I was a relatively late adaptor to the anti-table movement, but it has made my work more effective and ultimately more marketable. And while you should again, be honest about your expertise (or lack thereof) in regards to SEO, you should be familiar with the basics. If you’re just learning the basics and are handing off .PSD’s to a developer, follow up with them by styudying how they built out your design.
9. SEM (Search Engine Marketing)
   One good way to extend your relationship with a client is to offer to research ways to get them more business. Emphasize that the site itself can only guarantee a small percentage of conversion among unique visitors. But those numbers will increase as the site gains visibility. So although a well-built site may gain organic search traffic, a well marketed site can increase the site’s overall efficacy. You may want to research places within your clients’ industry where banner ads (which of course you’d design) are appropriate. Or you could define keywords on which to base a cost-per-click campaign. Maybe Facebook is a good medium for micro-targeted ads supporting your new site. Or perhaps your client needs a shove towards Twitter or suggest they submit the new site to industry blogs or awards sites for extra traffic. You can also become an ambassador for your clients. It seems obvious, but by promoting your work, you’re also promoting your client. So become an official PR spokesperson and refer people you know to them. You may also want to suggest email marketing. This is a huge can of worms but even a small site can have a basic HTML template (which of course you’d design) to promote the site to a list of core users identified by the client or perhaps accumulated through the site. All of these ideas can help your client gain market share while creating potential for extra work for you after the site has launched.
10. Maintenance
    One of the first questions I ask when starting a project is “what happens after launch?” I can’t build a CMS, but I have friends who can and if I’m gonna need their help, I want to know. I need to know who will be making edits, how often they’re making edits and how they plan on making edits. If i can team up with a developer who offers a CMS, that’s great. But every project is different. I like to empower the client to do their own edits if possible. If I build a Flash site, I like to hand over text or XML files allowing the client to edit certain content objects. But be sure to set the proper expectation about maintenance before beginning work. Your client may not plan on updating until the next redesign. Or they may want to edit anything, any time. Maybe you’d like to sign on to do all the maintenance? If so, it’s important to establish how much maintenance there will be per month and how much that will cost. Maybe you can get a monthly retainer or work for a reduced hourly rate? Maybe it’s not worth your time at all, and you’d rather hand them the keys by training the client on the system you’ve built. Or perhaps you’d rather hand off the minor edits to a junior designer who needs the work. Just be sure to establish all that up front.

I reluctantly joined Facebook about 3 years ago, while researching for a social network application I was designing. But like the rest of the world, I’ve become part of the inane fabric of white noise on the social internet. Overall, I think FB is a brilliantly designed application with tons of usability revelations. And throughout my Facebook tenure there have been several small redesigns and re-alignments that have mostly improved the usability of the site. However, the most recent redesign has unleashed a virtual sh*tstorm of criticism among FB users. Commentary ranged from the less sophisticated “where’s my stuff?” to more subtle arguments like “You took away the verb in my status. How am I supposed to fill it out now?”

In fairness, the most fundamental change to the interface is that they expanded the fixed-width of the design to embrace a higher minimum width target for their audience. I can appreciate the desire to do that but I also recognize that it poses certain real estate challenges they’ve had to overcome. But here are a few observations.

Some finer points of UI interest in the new Facebook redesign that represent a shift in philosophy. In green are the point I feel are improvements and in red are the points I'm not happy about for usability reasons or personal annoyance.

The good.

1. “What’s on your mind?” FUNCTIONALITY – FB has integrated a tabbed system allowing users to update their status or add links, photos, video etc. This helps centralize the initiation of these functions which were seen as scattered and unintuitive before. The selection process is slick, animated and super intuitive.
2. Live feed preferences – Each item in your live feed has preference options allowing you to hide updates from certain users, or hide updates from certain annoying applications. However, I’m not aware of any setting that hides ALL application announcements. I’ve taken to hiding updates from certain users who either update too much or who’s updates are not relevant to my life.
3. The footer – This is one of the best improvements I’ve seen in Facebook and it came from a previous re-design. The additional chat functionality and easy access to applications are a huge improvement. What’s more, the footer’s fixed position helps its accessibility, which is perfect for a utility bar like this.
4. Left column applications – Facebook’s newly expanded width has afforded them to reserve this column exclusively for applications that were previously stored on the right. The expandable list keeps the column clean and forces the user to prioritize those apps which they use the most.

The Bad.

1. “What’s on your mind?” APPROACH – This may be my number one complaint with the new Facebook. You may recall the “status” window used to be a permanent fixture atop your FB home page as well as your profile page. It started with your name in large bold letters, followed by the simple (but editable) helping verb “is” initiating the predicate of a sentance waiting to be completed. It’s a simple change that has destroyed the consistency of users’ status updates. It can be argued that that lack of structure encourages creativity, but I would argue that it has actually decreased users’ motivation to update. It could be the pressure of originating a complete thought without guidance, but I hope not. I think the simpler explanation is that the page no longer begins with one’s name, which exonerates the user from any accountability to update their present status. I know I’m getting obscure here but I can guarantee you the people at Facebook went into much greater detail before making this decision.
2. Left column spareness – I love white space. But the truncated list of applications in the left column leaves a missed opportunity for other important bits of content to be displayed above the fold. This white space also exposes the ragged left edge of the center content. This center column used to be much tighter and cleaner in the old, narrower design because, well, it had to be. Anyway, birthday reminders or notifications would be great examples of things that would occupy this space beautifully because they are short and tightly formatted.
3. Suggestions (formerly “PEOPLE you may know”) – Suggestions used to only consist of users who had two or more mutual friends with you. If there was no one who fit that criteria (sad) The list would be empty. Now, not only does the criteria for users seem to be less strict, but the list also includes pages and groups your friends to which your friends lay claim. That’s frustrating for me but I can get over it because they also allow you to cancel a listing if it’s not in fact relevant to you. It then replaces the  listing with a new one served almost at random. However, by the very nature of the process of elimination the new listing is inherently less relevant and asinine than the previous. I call this “Suggestion Whack-a-Mole” where you hammer down one undesirable result in favor of a less desirable result. Anyone else find this  frustrating?
4. Highlights – Highlights seems to celebrate the most annoying aspects from my live feed by listing them in a more graphic way. In this snapshot alone, I’m seeing announcements that my friends like flipflops, love handles, some stupid nightclub in Miami, and a number of pointless applications I will never want to use. I’d much prefer to be able to customize this box to show only photos and videos (or media interactions perhaps) by my friends.
5. Birthday Reminders – Facebook birthday reminders are a long-overdue and mindless method of fulfilling the social obligation of acknowledging an insignificant acquaintance’s birthday with the least possible effort. This is the perfect tool for me. However, it’s new location beneath the fold and BELOW the aforementioned sea of mind-numbing trivialities is problematic. By the time I’ve scrolled that far down the page, I’ve already seen 10-20 insipid announcements about idiotic applications and quizes and have moved on to questioning why I’m spending any time at all on Facebook. So by the time I see an “important” birthday reminder, the juvenile triteness of Facebook has already washed over me and my attention span has failed. I’d much rather see these reminders listed above the highlights box or over in the left column.

Anyway, I know this is a long and silly rant. I still very much like certain aspects of Facebook and I guess you have to take the good with the bad. Facebook does offer a clean and sophisticated interface with many usability merits from which to draw UI design inspiration. It’s a great social platform where design snobs like me can appreciate user-generated content on the same level as the unwashed, techno-peasant masses. And that’s what the web is all about.

Preface: The following demo yielded results that basically didn’t work in IE. Although a better man may be able to figure this out, I was not able to dedicate any more time to the subject. So unless you’re ok with that, or can help me get past it, you may want to save yourself some time.

I was recently asked by a client to simply “take that right column content and stick it UNDER the left”. Sounds simple enough, right? But what if you don’t have access to the table? What if all you had were styles you could manipulate to simulate a new row? Well damn. Sucks to be you.

1: Here’s the table structure we’re stuck with. One row. Two cells.

Traditional layout of a 2-column table row

But what the client wanted was for the right hand column to be moved below the left hand column without editing the table. (For the sake of argument you can assume there were classes defined in the TD’s allowing us to have some CSS access.)

This is usually the place where I say “I’ll see what I can do”, knowing there’s nothing I can do. But I spent some time experimenting and the result was a solution that worked just fine…except in IE. Great. Things like this make me want to become a print designer.

2. So here’s my admittedly not very elegant solution.

Manipulated row where second TD falls inline UNDER the first in the same Table Row.

I started with some styling of the table cells setting up the parental structure necessary to position the divs nested in each cell.
Table cell one:
<td style="position:relative; height:200px;" id="div-for-td1">
#div-for-td1 { width:960px; position:absolute; left:0px; top:0px; display:block; padding:0; margin:0; }

Table cell two:
<td style="position:relative; height:500px; overflow:scroll; margin-top:-200px;" id="div-for-td2">
#div-for-td2 { height:390px; width:620px; float:left; position:absolute; left:0px; top:210px; }

Basically that’s it. I’ve used the td styling to set up the relative positions, heights and behaviors, while the div id selector dictates the actual position and size.

A few things to note:
First: The second cell holds content of an undetermined height. However because the container is floated it loses its hasLayout property (see: On having Layout), which means that the markup of the page does not respect the  height of the div and the content below it will overlap show through this div. Obnoxious, right? Second: And since a simple clear style or clearfix (see clearfix) didn’t work, i had to limit the table cell’s height and cap the content with an overflow:hidden;
also because I’m basically tricking the browser into ignoring the markup of the table, I had to use the specified height from the first cell as a negative margin in the second cell. Otherwise the browser would apply the height from the first cell to the second as you may expect, creating a 200px gap above the content.

Again, I’m not saying this was impossible. But having spent a fair amount of time on it, I’d say your best bet is to keep it simple and avoid this technique.

Say hello to EnergyCircle.com, a new online resource for home energy efficiency. Streamline the performance of your house and save some serious money while your at it with Energy Circle’s blogs, articles, instructional videos, and a wide variety of products for each room of your house. Check it out »

Additional props go to David Puelle of Portland, Maine for branding and art direction, while development credits go to Integra Strategic of Portland, Maine.

Check this out: http://www.homedepot.com

Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

There are a lot of negative things I could say about HomeDepot.com, like the unintuitive architecture etc. But instead I’d like to mention a VERY minor detail that I think 99% of designers would never think of. Let’s face it, the entire Home Depot experience, virtual or otherwise, is overwhelming. Take a look at the quicklinks on the left hand side of the site. They’re there to give you smarter access to the high-demand product areas of their daunting product selection.The type size hierarchy is gorgeous, the color variance ads a nicely priortized foil to the signature orange they could be over-doing (but they’re not), and the almost retro usage of the link underline is unmistakably usable.

But here is where I totally geek out. Notice how each category of links has two lines. Now, notice how the first line always ends with a comma. Why is that, you ask? Well whoever designed this menu (props) took the time to add a simple attribute to the links in this definition list to disallow the links from wrapping onto a new line. Essentially, this CSS author added the following attribute to the definition data type selector:

dd a { white-space:nowrap; }

This allows each line to end with a complete link. Why would anyone bother doing this? This is the usability quivalent of a print-designer manually setting type to clean up any awkwayd hyphenation. To put it another way, consider the user’s mentality when viewing this list. Am I looking for “Toilets, Tubs & Whirlpools?” or do I just want “Toilets?” Well, without this attribute, “Tubs &” would probably reside on the first line potentially causing confusion about where the which link is which and where each ends. I know I’m making to much of this, but I’d love to think that someday, someone might spaz over my attention to detail like I’m geeking out over this right now.

You’re probably aware of the anti-comic sans movement among designers and assorted type snobs (see ban comic sans). But while we’re hating on god-awful typefaces designed for Microsoft (notice a trend here?) let’s toss Trebuchet into the mix. Despite gaining popularity in the “aren’t I cheeky?” blog era of the web for its universal availablity (see: ubiquitous mediocrity), Trebuchet MS is contributing to dumbing down interactive type design.

• Trebuchet’s clumsy weights allow little room for elegance.
• Its awkward, schizophrenic features (“g”, “l”, “&”, “$”, “?”) distract the eye’s natural rhythm and decrease readability.
• Drastically inconsistent x-heights (“A” vs. “x”) establish jarring vertical agreements.
• The ampersands (“&”) is a ligature of a bad “E” and a stumpy “t”. That’s just savage.
• You can’t just throw in a half slab-serif whenever you feel like it (“i”, “j”). Were you raised in a barn?

While I’m all for experimentation and destinguishing yourself from the competition, this font has been abused in recent years. And while I may have been able to overlook its childish qualities in small doses, the time has come for someone to stand up against type that sucks. I simply can’t overlook it anymore. And I urge you to write your congressman and/or local web designer to reclaim our dignity and stop abusing this heinous face.

Being that so much of our industry is perception turned reality, I’ve decided to start a professional blog. My wife, Sarah and I will keep posting to our personal adventure blog, but this will be a place for me to expound on my ideals as an interactive designer. You may see some subjective commentary, jaded criticism, or blatant self-promotion here, but isn’t that what it’s all about?

Here, you’ll be able to read about many aspects of interactive design like layout, typography, usability, user interface, design trends, CSS, Flash, Photoshop, social media, new apps, link-sharing, and most importantly, respect to quality work around the internet.