This week we had two articles to choose from. I’m opting to respond to the one that is readily available online: “10 best-designed websites in the world” by Ben Hunt. I question his choice of titles. Reading through his list, it seems the post focuses much less on design than it does on trends.

As in any list of trendy sites, his top pick is Apple.com, of course. Now don’t get me wrong, everyone loves apple.com, but I am not sure about choosing it as the best designed site in the world. But Apple is Trendy with a capital T.

Remember Stacey from Junior High? Maybe I have her name wrong, but surely she went to school with you: she’d walk into class with a new outfit on Monday, and by Friday several other students were wearing the same thing. Within six months, you’d more or less be beat up for not dressing like her; and by the time you get the outfit, they’re beating you up for not wearing the next big thing.

Apple is the new Stacey in so many ways: ask any software author about the initiation to the iPhone App club and you’ll see a strong comparison. But I’ll focus on the wardrobe analogy. Stacey might indeed look fabulous, but isn’t calling it the best outfit ever going a bit overboard when everyone knows she’ll abandon her look as soon as the band geeks start wearing it?

Apple is the same way. They really do define trends on the web, but how well designed can it be when they change it so soon? I can’t say as I blame them, either, what with all the copycats out there, but I hesitate to list this design among the best of the best when they aren’t even using it anymore. For the life of me I can’t find a single page on their site that looks anything like the screenshot he’d grabbed. It’s not just the content, either. The navigation is completely different. I did find this, though, courtesy of the WayBack machine at webarchive.org:

Screenshot of Apple.com in 1997

You don’t see many sites looking like that anymore, right? Was it horrible design on Apple’s part, or did it simply go out of style?

Apple has changed their look and feel several times through the years, opting for a simpler layout in 1998, then adding tabs across the top and a news ticker that later went away. I had a great time digging through the archives, but I never found anything that looked like the screenshot Mr. Hunt provided. The layout has apparently been dramatically changed again since then, from the site with the cute icons and several boxes of information around the page, to this:

A screenshot of Apple's Site circa Jan. 2010

So now we have a few plain tabs across the top and a full-screen image with a brief description of the page. Users scroll down for some below-the-fold content. A glance back at his top ten list tells me Mr. Hunt would approve of that trend as well.

Tabs along the top, full screen image with summary, scroll for content.. wait a second!

The same thing happens with websites trends, and similar messages apply. When I’m evaluating clients, I like to try to figure out where they stand when it comes to web trendiness. Well-funded clients are happy to pay for a team of designers to give them a cutting edge look. Others are happy to pay, and re-pay, to ride each trend as it comes along. Remember the message? “We are successful enough that we can afford to keep up with the ever-changing trends!” — if that’s really what they want, I as a designer am happy to help them with their goals!

Some are happy to utilize whatever is already functional and cheap. Some balk at designers rates; bear their expectations in mind when giving them a quote. Personally, I’m the type that would rather find a neat and functional look of my own so I can stick with it for years as style takes a back-seat to content. None of these are wrong; use what fits your client best.

But real design work… the type Apple pays the big money for… is much less a question of which trend to follow, and more a matter of rational thought and strategy with style sprinkled in as a finishing touch. This makes judging a top ten list much more complicated, because how are we to know what a company’s goals are and what limitations they must work within? How are we to know whether their intentions are being carried out successfully? Design doesn’t start with a template or with inspiration from a trendier-than-thou model. It is learning what the client wishes to communicate, and finding the best way to do so.

She’d asked me to help her make her store easier to find. So we did a little keyword research and fixed up her items titles and descriptions. It’s amazing how many more t-shirts sell when people can actually find them! But she still wasn’t very happy with how her store looked. The CafePress premium shop allows for some customization, so we added horizontal product dropdown menu, created a funky vintage custom tiling background, layered her logo design over some chocolate stripes, and did a custom front page with a grid of her best selling t-shirt designs in colors she loved.

Here’s the final result:

Custom Designed CafePress Store

Here’s an example. EksAyn is principal broker of X Factor Real Estate, Inc, and he wanted a placeholder web page of sorts to give his business a fast and professional looking online presence. He already had his business card design ready to go, and had purchased his domain and hosting, so he sent me a digital copy like this (only not shrunken down to blog image size of course!)

X Factor Real Estate Card

In one evening, I was able to loosely convert that design into a single-page website that matches his existing branding (or his corporate look and feel – the design of his logo, color scheme, etc). You can have a look here:

This is a screenshot of his first landing page. He

Now he’s free to set up a blog, gather some photos, or work on whatever content he wants — without having to show that to the world yet. His beautifully branded page will hold his place on the web nicely in the meantime.

If you need to get started with a small web page like this, drop me a note in my contact form for a quote. Have your files ready to email me. Like I said, a well experienced web designer (such as myself ) can typically get a site like this done quickly and quite inexpensively if you already have your logo and business card design ready to go. Just give me a heads up and check for availability. This is a quick project since the difficult design work is done, so as long as I’ve got a free spot in my schedule, you’ll have your welcome mat on the web in no time!

We also brainstormed together to come up with a custom-candle wizard that allows her customers to create their own, uniquely scented, custom candle – with or without color and scent layers.

She is happy to create single custom candles for individuals or larger batches as wedding favors (the couple’s wedding colors and fragrances in the the jar sizes and styles of their choice) or for businesses. Candle-making is her passion and it shows through in the quality of her candles, and now, in the quality of her site!

Scented Inspirations Custom Candle Company

PS: I’ve been able to sample her products myself — my favorites so far are black-cherry + rose petals in burgundy, or peach-gardenia in a lovely pinkish peach. I’m hoping to buy a few summery scents in fun tropical colors soon too. I highly recommend them!

My time was somewhat limited on this project (as far as I can tell it’s still being programed), and they wanted a specific look for the site, so my primary goal was to organize the categories in a way that would make it easier for gardening enthusiasts, “brown thumbs” (not-so-good gardeners like me), and the curious to find information, based on whether they wanted to search, or browse for a specific plant by name or by category or even by photos or current specials. So I utlized a tabbed navigation along the top, along “staple links” along the left.

Here is the layout I submitted, with the “content” being pretty much what was already in their catalog:

Tripple Brook Farm Layout

::

In the web design world we have become familiar with the terms ICE and LIQUID to describe different methods to lay out a webpage. As a brief overview, an ICE layout is a solid, fixed width that may be dwarfed by a too-large container (high resolutions) or too large for the lowest resolutions, resulting in too-wide right margins in one case and dread horizontal scroll bars in the other.

LIQUID layouts mean simply that the content can be poured into whatever size container it’s given. These, at least by my perception, are more widely accepted for usability. Most designers I know (myself included) don’t particularly like the look. Most programmers I know laugh about designers not liking the “look” of something, but this gut reaction to poor form is actually based in functionality.

At larger resolutions you can end up with entire paragraphs stretching across the screen as one line. Low resolutions will often take the text from columns or headers and wrap it at just a few words per line.

So a
sentence
in a
header or
column
might
look
something
like this.

Text blocks that are too wide OR too narrow look funny and can give your reader a headache. The dread horizontal scroll bars are replaced by having to scroll constantly (vertically or horizontally) with our eyes.

I know the solution to this is to wrap the lines at a comfortable width regardless of resolution and even user defined text size (the ability to control text size is a great boon to me when I don’t have my contacts in so I can imagine it’s good for others too). The method: EMs.

The experiment is simply this: instead of focusing on how my content fits the size of it’s container, I’m concentrating on how the container fits the size of it’s content. The container is the layout itself and it should scale with its contents, like a balloon scaling to fit the gasses inside it as they react to their environment.

Here are the problems I’ve run into so far, so if anyone has ideas on how to solve them, point me in the right direction.

1. At the lowest resolutions or largest text sizes, with more than one column of text, I can get horizontal scroll bars. But the reason they’re taboo is a user might have to scroll back and forth to read a paragraph. In this case, they might not be able to fit the whole site (columns and all) but they still shouldn’t have problems reading one column. Even if they did, they could always resize their text, but only if they know how.

2. Without the support of min-width, fixed elements like logos and contextual images can potentially break the layout.

I’ve tried to address these issues by designing around them on my site, but they can be more difficult to address if the client wants three columns or larger images in the layouts.

At any rate. If you want to see how I made this site, go ahead and have a look at the code and the imported css. Let me know what you think of it and whether it worked for you.

An Angel Gets Her Wings

(We’ll miss you Lil!)