On this Christmas Eve I thought I’d bring you an amazing hotels I found from Yahoo’s list of “Hotels to Stay in Before You Die”.   It’s called the Post Ranch Inn - www.postranchinn.com and it’s located in Big Sur, California, USA.

Straight off you’ll be taken aback by the breath-taking views from this property.  The modern property sits perched on a cliff overlooking the Pacific Ocean.  The sun sets from this property must be beyond description.  I’ve been looking for a contender for my next anniversary spot and I think I may have just found it.  Although I was looking for something on the east coast like Rhode Island or South Carolina, I think I’m starting to feel the tug of California.

While the site is a little clunky and disjointed to view all the individual hotel rooms one look at the sites’ photo gallery will be sure to impress. I think the room preview could easily be reworked to allow for easy viewing of the various properties without having to pop-up a different window each time and improve the navigation to go from property to property.

One thing that’s not readily apparent is the size of this Inn.  The term in is a bit deceptive here as the individual lodgings span a large a distance affording great privacy.  Also unlike many other hotels that advertise a single room, the Post Ranch has multiple rooms in the same category.  A look at their property map will show you just how well spaced and the number of options you have to choose from.

Their web site has some amazing resources to deal with in the number of high-quality images and shots of their rooms.  Each one inspires a myriad of story-lines and possibilities.  The sites code is a bit dated, but the fact that they have all three of the flagship options (lodgings, rates, and photo gallery) so readily available makes this site an A rated site.

- 39 HTML errors, 72 warnings
-1 CSS errors.
-Failed accessibility test

Overall I would give the site an A for form and a C function.

Check back soon as we take a look at the Banyan Tree Hotels and Resort.

The First Step…

If you’re like me you’ve read a lot over the last few years on Web 2.0 designs, are they in are they out and how should I design my web page today.
I continue to do my duty as a designer by checking out the latest designs on this CSS Gallery site and trying to stay abreast of the latest fads.
What I’m starting to see though is that your typical, highly stylized pages done all up in their flashiest Web 2.0 design doesn’t
work for many web sites. Even now I hesitate in bringing this up as it feels a bit like saying the emperors’ new clothes aren’t all that spectacular.

Now before you start pulling out the firing squad, I think there are a lot of design principles of Web 2.0 that work well on any site.
It just seems that the most common examples tend to be on the artistic side and are a bit light on content.
I’ve found this is especially difficult to do with eCommerce based sites.

A Little Introspection

To look at this lets use the ever popular Amazon.com to review some of the typical Web 2.0 design principles and see how they measure up and if
that’s good or bad.

1. Simplicity

Many typical Web 2.0 designs seem to abound in white-space and almost a minimalist feel to them. However when you come to a hefty site like Amazon who has a
lot of “stuff” they need to get on the page this doesn’t always work too well. I think this is pretty typical of most eCommerce sites that stick
with the old left hand listing of products and right hand display of results. Having said that I think Amazon has usually done pretty well with keeping the noise
level down and providing a streamlined shopping experience. For the sheer size of Amazon I’d be pretty hard pressed to say that they fit into the simplicity
category.

.

2. Central & 2 Column Layouts

While it’s one of my favorite layouts the standard Web 2.0 central layout is again missing from Amazon.com. Again Amazon just has so much to display that I
think it would be an inefficient use of the space to center and reduce the number of columns. I beginning to feel a bit like the first time I reviewed the source
code on Google’s main search page. For the lack of content and the size of Google I naively thought Google would surely validate their code. Ohhhh no, was I wrong.
So now that my hopes and dreams are dashed I’ll recover a little from Google’s shortcomings and Amazons apparent fauxpaus as well.

Maybe I just need to readjust my thinking a bit and realize that not all Web 2.0 design principles work in all cases. I think it behooves us as designers to not
try to push a square peg into a round hole on this either. We have to find a nice balance between making a site another showing in our gallery versus giving the customer
what they want and what they need. I think this is a constant battle we face in whether or not to implement the latest design strategy or technology at the expense of our
employers and customers.

3. Distinct Top Sections/Headers

Now this is one of my favorite parts of Web 2.0 designs. Seeing all the cool and creative ways people come up with to start out their pages. It’s the first
thing someone sees when visiting a page and one section that can be difficult to master.

Again if we look at Amazon.com we see we have to make room for the logo, the welcome or hello message, advertisements, primary and secondary navigation, a search
bar and shopping cart buttons. A quick look will make you appreciate the quality work the people at Amazon.com do in dealing with such a high-traffic web site.
I think a quick review of just about any of the CSS design galleries will leave you hard pressed to find an example where they’ve fit all the pieces into a
distinct header. Now I’m more than open to someone showing me wrong on this one as I’d think that would defiantly be an example we could review and
learn something from. I’m just not sure how many of them there are. By my account Amazon.com is 0-3 on the Web 2.0 design checklist.

4. Simple Navigation

This is again one of my favorite Web 2.0 principles because it really allows us to rework the hierarchy of a web site and get down to the most important items the
web site contains. However if I again look at this from an eCommerce perspective I find myself coming up short. I’d love to reduce most sites to four or
five main topics and not have to even worry about secondary navigation, but with all of the categories on a typical shopping cart like Amazon it seems nearly
impossible to do. Amazon has 11 main categories and 72 sub-categories hanging off of those. I ask you, how in the world
do you make simple navigation out of that? Amazon has chose to use a standard slide-out multi-tiered menu system, but I’d love to see how other designers would
tackle this mammoth task. Make simple navigation out of 83 links. I think one solution many people are coming up with are layered menus.

I think jetblue has a great example of this on their web site for their flight search form. They have at least four dozen airports that they serve and instead of
using a typical drop-down select control they’ve used a hidden layer that contains the valid origins and destinations. This is just one alternative to the typical
tiered menu when there is no implied higherarchical relationship between the options. Now is where we breath a collective sigh of relief and thank the developers who
gave us our favorite JavaScript libraries. On three everyone, “Thank you JQuery!”

JetBlue is another great business that has thrived in it’s Brick-and-morter efforts as well as being cutting edge when it comes to airline reservation systems,
yet they don’t seem to be adhering to many of the Web 2.0 guidelines. Could it be that many of the guidelines just don’t translate well into shopping cart
or reservation systems or have we just not come up with a better way to reprent these now somewhat legacy systems?

5. Bold Logos

Man, am I starting to see a pattern hear. Let’s take a look at some of the most well known logos around.

Who doesn’t know and love Coca-Cola, McDonalds and Nike? Around the globe most people will be able to quickly recognize these brands.
Not very Web 2.0-ish are they. Maybe they just haven’t keept up with the times. Maybe Coca-Cola needs a cute Illustration or the McDonalds arch could be in a
fatter, more bubbly font, or I know how a bout a reflective shadow on the Nike swoosh. Hey, that one might not be bad…let me think. Maybe not.
Now I’m just playing the devil’s advocate on this but can you argue with success. Some may say yes, we should do so frequently to constantly
reevaluate our image and change with the times. Other may so no that good design is timeless and we shouldn’t change our message. Personally I’m on
Socrates side. He has one of my favorite sayings not just for code and design but life in general. “The unexamined life is not worth living.”
Tell me what you think.

Today we’ve looked a five of the standard Web 2.0 design principles and they’re effectiveness with some web sites.
Don’t get me wrong there are many aspects of design I think these new principles have helped us with but I just don’t
think they work everywhere and I’m looking for what does. I hope you’ll join me as we talk about this and other principles in future blog episodes.
If you think I’ve brought up some valid points post a comment. If you think I’m a complete idiot and don’t know what I’m talking about
let me know that too, but don’t just flame. Back up your argument and give us examples so that we may all learn from your experience.

First off I have to comment on the beautiful photos on their front page. These images alone make me want to take a weekend trip to this resort.
The colors are so clean and crisp I can imagine myself on top of the mountain breathing in the cool air.

Beaver Creek Resort in Colorado ranks third in the grooming of
their trails I think the photo to the left shows some of the beauty you’d see while skiing their slopes.

The page looks very well put together on the outside with a nice layout and use of their branding. Let’s see how well they rank on my top three qualifiers.

Number one, how quickly can I see what the rooms look like. This has got to be a top priority for any type of resort. How quickly can I as a consumer rent a
room or get time on a golf course or a pass for skiing at the resort. This has got to be the main money maker for a site and it’s surprising how many
sites don’t make this the main focus.

This one I’ll have to mark the site down on because it was a bit of a hunt and peck to find any information on the resort but ended with a surprise.
I couldn’t see right off anything that said lodging or something to that effect. I started hunting along the main menu and finally found under Travel Plans
and option for Lodging. Then I was presented with still more options to pick from different locations. This is difficult for someone who’s never been to any
of the resort villages. How do I know the difference? After I made my way around I then noticed that if I scrolled all the way to the bottom there was a little
area that blended into the background where I could search for a room. While this functionality was there it’s hidden at the bottom and beyond the fold of my
viewable area even though I have a large monitor and my browser was open 978px high. I must say that this was a nice search feature when I did find it.
I was quickly able to see the properties and a price or price range for the property.

As for the ability to see a photo gallery, I think they’ve got this covered well as there is a great image that draws you into the photo gallery that
includes videos, photos and web cameras.

If we review their site’s internal code it seems to be a hodge-podge of old and new styles. They make use of CSS layout for some divs but then switch
back to table-based layout with internal tag attributes. This causes a number of errors both in the the HTML and the CSS which of course in turn have no option
to be accessible and fails the accessibility test.

- 131 HTML errors
-4 CSS errors.
-Failed accessibility test

Overall I would give the site an B for form and a C function.

Snowmass in Aspen, Colorad brings us to the number four spot on the top groomed trails.
While their resort may rate high on Ski Magazine’s list I’m finding it extremely difficult to find my way around their site.
One of the most disconcerting issues is the functionality of their web sites’ menus. Once a menu is expanded the only way to get it to
leave is to click on an item or expand another item. It gives you an aweful sense of stickyness that is very frustrating.
I found on further examination that the menu’s do work just like Windows menus in that they stay expanded until you select another option or click off the menu.
I think the thing that causes the fingernails on the chalkboard for me is that typically a menu collapses once an item looses focus on the web.
One would think these more advanced menus would be more usable but I found them more frustrating and I just wanted to leave the site.
They just contribute to the already cluttered feeling of all the widgets in the main area.

Moving on let’s look at how easy it is to find the top three items on their website.
First off if I try to find a place to stay I do find an option in the first menu for a place to stay.
If I click on the lodging link I’m presented with a page of text and links that take me somewhere else.
This seems to be a common problem amongst some resort towns. The lodging is so scattered that it’s difficult to
present a unified interface to the public. If I go thee levels deep all I find is contact information and no way to find
what the lodgings look like and what it would cost me.

So while Snowmass seems to fail the first two tests of finding lodging it then makes up for it in their media area.
They have an extensive library of photos and videos of the mountain. It’s fairly easy to find from the main page and
they’ve gone to the work to have YouTube host their videos for them. I think this is a great move on their part as YouTube
foots the bill for the hosting and bandwidth of the movies. It also gets their product out to the masses more by partnering with YouTube.

While I give them kudos for exporting their data to YouTube on the front-page they’ve added an iframe to do their work.
I noticed right off when I first went to the site that it took quite a while to load. Not only are iframes bad for speed but
they reak havic with usability issues as well. A quick look at their validation will prove this.

- 25 Errors, 10 warning(s)

-1 CSS error.
-Failed accessibility test

Overall I would give the site an C for form and a C for function.

One addendum I’ll write for the site is both a redemption and another strike. I did notice that while I browsed to other secondary
pages the menu started working as I expected. I think the issue is that the front page is so big and slow that the javascript doesn’t
have a chance to fully load before I would interact with the menu. You can begin to see what an issue it is though from my first reaction to the site,
it does become a usability issue. In order to dig a bit deeper into their issue I ran YSlow on their main page and I see that there is a 774 Kb
Flash file that takes about 24 seconds (around 16 coming from cache) to fully load on my high-speed connection.

In short, their site definatly needs some attention and to put their site on a diet to reduce the load time and improve the user experience.

Coming in at number two on Ski Magazines best groomed runs is
Mount Sunapee Resort in NewHampshire.
You can tell from spending just a few minutes on their web site that they’ve been around the block a time or two.
This is both good and bad. It’s good because they’ve made it easy to find the information your looking for.
Within 10 seconds I was able to find lodging, photos of the lodging and how much it would cost me to stay there.
They have a nice selection of Bed & Breakfasts, Country Inn’s, Hotels & Motels as well as Houses and Cottages.

The bad part about being around for so long is that the page looks dated.
There isn’t a freshness or attention payed to the detail of layout and branding.
Another dead givaway is looking into their code. One of the first things that pops up is the Adboe Photoshop
generated code for pre-loading images. Then we start seeing the old and depricated table-based layout.
I must say though that I’ve seen much worse. While they are using table-based layout it isn’t
tortured by overbearing attributes, font tags and needless markup. It is generally pretty clean code on the front-page.

There’s a lot of potential for this site as there are some beautiful surroundings but they are just not featured
prominently enough. There’s a lot of data on this site and it could be helped by giving it a good grooming just
like they did for their ski trails.

- 61 HTML errors
-0 CSS errors.
-Failed accessibility test

Overall I would give the site an C for form and a A- function.