Usability - Arizona SEO | Phoenix SEO

The Compete Top 50 List – No Surprises Here!

On December 27, 2009, In SEO, by Nick Stamoulis

Web Pro News shared some information from Compete.com that lists the top 50 websites in the United States by volume of visitors.
Here is the actual Top 50 Website List:

Here are a few observations on the list:

The No. 1 site on the list is no surprise: Google
4 of the top 10 sites are search engines [...]

Web Pro News shared some information from Compete.com that lists the top 50 websites in the United States by volume of visitors.

Here is the actual Top 50 Website List:

Here are a few observations on the list:

The No. 1 site on the list is no surprise: Google
4 of the top 10 sites are search engines (5 if you count You Tube)
3 of the top 10 sites are Microsoft properties
2 of the top 4 sites are Google properties
The top 5 sites are all search engines or social media websites
The No. 1 e-commerce site on the list is Amazon.com (No. 6)
The top 3 e-commerce sites are Amazon.com, eBay and Walmart

Let’s stop right there. Of the top 13 sites, only 4 are not a search engine, social media site or Wikipedia – and one of those is Microsoft.com. This begs the question, what does it take to be a top website (or a highly trafficked one)?

Judging by the list I’d say you need to own the real estate, rent it (all of the top 10 sites are sites that provide a service for others in some manner that allows the owner to benefit from the usability of the masses). Secondly, you’ve got to offer a service with broad appeal. This is an appeal that is much broader than having a niche website. We all know that having a niche website is key to build your business online and is also a must to do very well with you search engine optimziation and search engine marketing efforts.

I believe it will be more and more difficult to break into the top 50 sites, but companies that manage to do so will do if they do all the right things and have a substantial marketing and advertising budgets. Even companies that focus on the best marketing practices, will stand a better chance of being considered a high traffic website, whether they make the top 50 or not, at the end of they day they too can be very successful online.

The Unusable and Superficial World of Beer and Alcohol Websites

On December 7, 2009, In SEO, Web Design Tips, by Louis Lazaris

I was pretty excited when I came up with the idea of examining and showcasing some of the most famous beer and alcohol-related websites from a number of countries around the world. After all, who doesn’t like the odd drink now and again? (Well, besides me — I can’t stand alcohol in any form.) Surely this would make for an interesting article that would elicit quite a few comments. Well, if that’s the result, it wouldn’t be for the reasons I suspected when beginning to research this piece.

Instead, I’ve concluded — due to problems related to typography, accessibility, and usability — that the apparent “beauty” present on many of the websites related to this industry is merely “skin deep”. To put it quite bluntly, the designers and developers in the beer and alcohol website industry should be ashamed of themselves for creating such horrendous user experiences. My analysis here will attempt to inspire modern-day designers and developers to avoid imitating the superficial design and development techniques employed by these web professionals.

But I won’t just focus on the negative. There are some positive things to be mentioned, and a showcase of some of the nice sites is certainly in order, so that will round out the article (and might even fool a few of the “I’m here for the pictures” visitors).

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in The Unusable and Superficial World of Beer and Alcohol Websites" border="0" /> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in The Unusable and Superficial World of Beer and Alcohol Websites" /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in The Unusable and Superficial World of Beer and Alcohol Websites" /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in The Unusable and Superficial World of Beer and Alcohol Websites" />

Instead, I’ve concluded — due to problems related to typography, accessibility, and usability — that the apparent “beauty” present on many of the websites related to this industry is merely “skin deep”. To put it quite bluntly, the datetime="2009-12-07T21:43:34+00:00">designers and developers people responsible for decision-making in the beer and alcohol website industry should be ashamed of themselves for creating such horrendous user experiences. My analysis here will attempt to inspire modern-day designers and developers to avoid imitating the superficial design and development techniques employed by these web professionals.

The Painful “Age Verification” Screen

Something that is common to nearly every site I found when researching this article is that all the sites require that you confirm your date of birth before you can view the content of the site. Obviously, alcohol is a very serious issue, and reasonable precautions must be taken to ensure that the owners of these sites are not encouraging underage drinking. So, typically, a site will have a “date picker” form where the website visitor can enter their date of birth (month, day, and year), as shown below on the href="http://www.corona.com/">Corona website:

href="http://www.corona.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/corona-age.jpg" alt="Corona-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="529" />

A Legal Requirement? Or a Waste of Time?

Since it is impossible for such a welcome screen to actually ensure the user is really old enough to drink, then why not simplify this process? You’ll notice that the welcome screen on the Corona website also asks the user to enter their country of residence, which further complicates the process of entering the site. But don’t get me wrong; I am not suggesting that alcohol-related websites remove the age verification screen. In most countries, they’re probably required by law to do this. I’m suggesting that they make this process easier for the user.

First of all, if you want to know what part of the world your website visitors are from, use Google Analytics (or similar technology), or track IP addresses. Don’t waste your visitors’ time with a question that they could lie about anyhow. I certainly hope the owners of these sites are not depending on those statistics for any serious demographic analysis.

But more importantly, since the user can enter any date of birth they want, and the site will never permanently block a person that enters a non-qualifying date, why not just have a simple screen that clearly asks if they are of drinking age in their country of residence? It was surprising how many sites did not have a simple means of entering. Below are two of the few examples that I found that had a user-friendly intro page:

href="http://www.christianiavodka.com/">Christiania Vodka

href="http://www.christianiavodka.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/christiania-age.jpg" alt="Christiania-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="395" />

href="http://www.drinkjett.com/">JETT VODKA

href="http://www.drinkjett.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/jett-age.jpg" alt="Jett-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="500" />

At the very least, if you must ask for their age, why not just ask for the year? It’s true that the person’s exact day of birth could determine whether or not they’re qualified to enter, but let’s be honest here — this screen isn’t stopping anyone. And you can’t drink a website. So simplify the process and get on with what you really want people to see.

During my research, I wondered if there were any laws in Canada or the United States that required the use of such a splash page. I contacted href="http://www.labatt.com/">Labatt Breweries of Canada and I was informed that there was no law requiring the age verification screen, but that it was a company policy to have the user enter their date of birth. Okay, that’s fair enough. But I wondered why they would opt for the complicated version over the simple examples shown above. The woman I spoke to reemphasized that it was a company policy to have the user enter their exact date of birth. She suspects it’s the same for most other companies as well. I had also contacted href="http://www.anheuser-busch.com/">Anheuser-Busch but hadn’t heard back from them.

Maybe the site owners are ensuring that they don’t risk any legal trouble (regardless of laws), thinking that the more difficult the process, the better it would look in their behalf. But considering the age form isn’t really stopping anyone from entering, it’s more likely that these sites suffer from poor usability management and tend to fall back on bad habits that were carried over from the old days of the web design industry. Also, some sites did have a simplified version of the age verification screen (as shown above), so there really is no reason for the overly complex version of that screen. If anyone involved in the alcohol website industry would like to provide some feedback on this matter in the comments, I will make any corrections as needed.

Unnecessary Complications

Some age verification screens are complicated for no good reason, and certainly for no legal reason. Take for example the href="http://www.budweiser.com/">Budweiser landing page:

href="http://www.budweiser.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/budweiser-age.jpg" alt="Budweiser-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="416" />

After selecting the month and day you were born, the years are shown in 10-year blocks, with the start of each decade representing each block. In order to select the specific year you were born, you have to hover over the appropriate block, then slowly move your cursor until the year you want appears. What a usability nightmare!

The href="http://www.samueladams.com/">Samuel Adams website goes beyond ridiculous in who it allows to enter. Initially the user is presented with this screen:

href="http://www.samueladams.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/samadams-age.jpg" alt="Samadams-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="433" />

Then, after you’ve entered a date of birth, you’re informed that you’ve “signed in” (which is not technically correct and can potentially be confusing) and now you have to reenter your year of birth:

href="http://www.samueladams.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/samadams-age-2.jpg" alt="Samadams-age-2 in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="500" />

It’s safe to say the Samuel Adams’ website architects have turned the bad intro page into an art form.

Yet another example that has two different age verification screens is the href="http://www.remy.com/">Rémy Martin website. When you first visit, you’re presented with this screen, unnecessarily created with a barely usable Flash-based date picker:

href="http://www.remy.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/remy-age.jpg" alt="Remy-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="500" />

Then you’re redirected to a completely different domain, and once again are asked to enter your age:

href="http://www.getinteresting.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/remy-age-2.jpg" alt="Remy-age-2 in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="417" />

The site colors and branding are different from the first screen, leaving the user wondering if they’re even still on the correct website. I really don’t know what they’re thinking with this dual age verification system, but it’s obvious that the site architects have little knowledge of modern website usability best practices.

Below is another overly-complex age verification screen, on the href="http://www.zima.com/">ZIMA website. Try to find your year of birth in this unnecessary mess:

href="http://www.zima.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/zima-age.jpg" alt="Zima-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="395" />

Another problem with the age verification screen was that some sites required you to manually enter a 4-digit year, while others allowed you to choose a year from a <select> box. The href="http://www.busch.com/">Busch Beer site is one of a few sites that expects the user to enter the year in just two digits:

href="http://www.busch.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/busch-age.jpg" alt="Busch-age in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="396" />

After customarily entering a year in 4-digit text format, or from a familiar select box, this 2-digit option comes as a bit of a surprise. So naturally, when I tried to enter the site, I typed a 4-digit year beginning with 19 — and the “19″ part stuck. I got this error message:

href="http://www.busch.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/busch-age-2.jpg" alt="Busch-age-2 in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="396" />

What if I was born in 1919? Well, after some experimentation, I discovered that anyone born before 1930 is considered “too old to drink” (which is fine), but despite initially receiving an error message, if you continue to attempt to enter a year prior to 1930, the site instead redirects the user to href="http://www.worldsofdiscoveryblog.com/">Worlds of Discovery, “a place of enjoyment for people of all ages.” All usability problems aside, that was pretty funny.

You may have also noticed the 1999-style “site requirements” notification in the above screenshots. Another strong reminder that the sites we’re dealing with here seem to be managed and developed by people who have not done a whole lot of research on modern design and usability trends.

Overuse of Superficial Elements

What makes a website “cool” today, is not the same as what made a website “cool” 8 years ago. In fact, if you didn’t know any better, after visiting 10 or more alcohol-related websites, you’d think it was 2001. It was astounding how many of these sites employed self-indulgent, superficial techniques that make the entire experience quite a drag.

While perusing some of these sites, I often had no idea what was clickable, when an animation was going to finish, or where a particular sound was coming from.

Too Much Flash Animation

Most modern developers understand that creating an entire website in Flash is rarely a good choice. Granted, in some industries Flash is useful for full sites. href="http://www.smashingmagazine.com/2009/11/27/designing-websites-for-kids-trends-and-best-practices/">Kids websites and games sites are two good examples. But for the most part, the use of Flash in the alcohol web design niche is often unnecessary and seems to be used in a trendy way because of the false assumption that a complex Flash site equates to a “classy, upscale” experience. As mentioned, around 2001, that may have been the impression that users got, but that’s not the case anymore.

The href="http://www.seagramsginlive.com/">Seagram’s Gin website is one of many examples of a full Flash website, an extremely common practice in this industry.

href="http://www.seagramsginlive.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/seagrams-flash.jpg" alt="Seagrams-flash in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="375" />

Why Not JavaScript-Based Animation?

I’m not saying that these sites should never use Flash. Some of the sites I visited had some complex user interactivity that would certainly require the use of Flash-based technology. But in many cases, animation and effects could be implemented through good semantic code manipulated unobtrusively with jQuery or another JavaScript library.

For example, the href="http://www.finlandia.com/">Finlandia vodka website has a mostly-Flash interface with promo boxes that could have been done with plain HTML and JavaScript:

href="http://www.absolut.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/finlandia-promo.jpg" alt="Finlandia-promo in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="335" />

Another site that overused Flash is the href="http://www.threeolives.com/">Three Olives Vodka website. Take a look at the screen capture below:

href="http://www.threeolives.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/threeolives-full.jpg" alt="Threeolives-full in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="412" />

The content section displays the different vodka flavors, with a Flash-animated rollover effect for each bottle — which is understandable since the animation is somewhat complex. But the entire site is created in Flash, including the very static logo, top navigation, and text-based footer. All of those sections could have been done using conventional coding methods, making the site cleaner and more usable. In fact, many of the animations on this site could have been accomplished with JavaScript, making the experience much more up-to-date, intuitive, and flexible for future development.

The href="http://www.bacardi.com/">BACARDI website is another one done completely in Flash, including the header, footer and dropdown menus — all of which could have been done with HTML and JavaScript without losing anything aesthetically:

href="http://www.bacardi.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/bacardi-menus.jpg" alt="Bacardi-menus in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="419" />

The Outdated “Skip Intro” Link

Another 8-year-old web design trend used on many commercial alcohol sites is the “skip intro” button, which is obviously a symptom of what was discussed in the previous section — overuse of Flash. Below are a few examples of sites with Flash intros that have the option to be “skipped”.

href="http://www.zyrvodka.com/">ZYR Vodka

href="http://www.zyrvodka.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/zyrvodka-intro.jpg" alt="Zyrvodka-intro in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="341" />

href="http://www.bombaysapphire.com/">Bombay Sapphire® Gin

href="http://www.bombaysapphire.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/bombay-intro.jpg" alt="Bombay-intro in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="474" />

href="http://www.mountgay.com/">Mount Gay Rum

href="http://www.mountgay.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/mountgay-intro.jpg" alt="Mountgay-intro in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="500" />

Even worse, after verifying your age, the href="http://www.jamesonwhiskey.com/">Jameson Irish Whiskey website loads up a Flash intro of a super-fancy animated 3-D cube that does not even have a “skip” button:

href="http://www.jamesonwhiskey.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/jameson-intro.jpg" alt="Jameson-intro in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="500" />

Auto-Playing Sounds and Video

When Flash is overused, it’s inevitable that embedded sounds will be also. Sound should generally only be triggered by the user, and should always have an obvious method for toggling or reducing the volume. Many of the sites I investigated failed miserably in this regard.

After passing the age verification screen, the href="http://www.corona.com/">Corona website plays an intro-style photo animation with music playing. As seen in the screen shot below, there is no way to skip this animation and no way to turn off the sound.

href="http://www.corona.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/corona-sound.jpg" alt="Corona-sound in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="425" />

The href="http://www.budlight.com/">Bud Light website doesn’t even wait for you to pass the age verification screen to trigger automatic “ambient sounds” (people talking in the background, like at a party). The sounds are mildly annoying — but at least there’s an easy-to-locate on/off switch in the top right corner of the screen.

href="http://www.budlight.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/budlight-sound.jpg" alt="Budlight-sound in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="425" />

The href="http://www.bluemoonbrewingcompany.com/">Blue Moon Brewing Company website is a very beautifully-designed but nightmarishly-unusable site. It’s done with a book-style look that has nice animation, but is really out of place on the modern web. After verifying your age, a lightbox-style overlay initiates to advertise something about New Year’s Eve. This overlay is accompanied by the sounds of href="http://en.wikipedia.org/wiki/Auld_Lang_Syne">Auld Lange Syne — with no apparent method to disable the song.

href="http://www.bluemoonbrewingcompany.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/bluemoon-sound.jpg" alt="Bluemoon-sound in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="446" />

The href="http://www.michelob.com/">Michelob website plays a video during the age verification, and again when the site loads. In both cases this is done without initialization from the user. In this case, they weren’t annoying and obtrusive, and they were very brief — so I’ll give them credit for a much nicer and more usable experience than some of those we’ve already considered.

href="http://www.michelob.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/michelob-sound.jpg" alt="Michelob-sound in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="303" />

A better option would have been to have a large play button to indicate the video is there, and allow the users to initiate it at their leisure.

The href="http://www.skyy.com/">SKYY Vodka website plays a series of videos after you verify your age. At first glance, there is no apparent way to disable the videos or the sound. But when you roll your mouse over the video area, a video toolbar appears allowing you to pause the video and/or turn off the sound. Better than some of the other options we’ve considered, but considerably less than user-friendly.

href="http://www.skyy.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/skyy-sound.jpg" alt="Skyy-sound in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="338" />

And now for the href="http://www.russianstandardvodka.com/">Russian Standard Vodka website. What can I say about this horrendous, irritating, and unusable monster of a site? It’s a full Flash, fluid-width site that embeds a giant video as the background in the Flash movie, and, as is common, does not have an obvious way to disable this annoying video that shocks you to your very core — until you realize that clicking anywhere on the background of the movie will toggle the pause/play option. A true usability nightmare, and one of the most self-indulgent techniques you’ll ever see on a web page.

href="http://www.russianstandardvodka.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/rsv-sound.jpg" alt="Rsv-sound in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="412" />

They weren’t the only ones to implement this bad practice, however. The href="http://www.hennessy.com/">Hennessy website similarly has a giant auto-playing background video with no apparent method to pause or stop it. The sound can be muted, but the background plays a series of videos with no end in sight.

href="http://www.hennessy.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/hennessy-sound.jpg" alt="Hennessy-sound in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="418" />

There were so many more examples of sites that embedded sounds and videos. It’s amazing how the sites in this niche hold so much in common in the area of bad practices. The designers and site architects seem to live in their own little world of “trendy” web design and have, for the most part, failed to break out of many old-school techniques from which most modern designers have moved on.

“Mystery Meat” Navigation (in 2009?)

Until I started researching this article, I thought href="http://en.wikipedia.org/wiki/Mystery_meat_navigation">mystery meat navigation was an old-school practice that was overcome by a modern-day movement of user-centric design — but that is obviously not the case in the commercial alcohol website industry.

Because of the many superficialities, the overuse of Flash, and other self-indulgent design tendencies, many of the sites in this industry suffer from this “mystery meat” or “Where’s Waldo?” phenomenon — that is, pages where the user has no idea what is clickable and what is not. Take a look at some of the screen shots below and see if you can clearly identify the clickable elements. Below each screen shot I’ve included some explanations to decrypt the “mystery” elements so you can see how unusable some of these sites really are.

href="http://www.sanmiguelbeer.com.ph/">San Miguel Beer

href="http://www.sanmiguelbeer.com.ph/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/sanmiguel-mystery.jpg" alt="Sanmiguel-mystery in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="413" />

On the San Miguel Beer website (above), in addition to the navigation bar links, nearly all the graphical elements in the content area are clickable, including the car, the truck, all the doors on the building, and signs. Who knew?

href="http://widmer.com/">Widmer Brothers Brewery

href="http://widmer.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/widmer-mystery.jpg" alt="Widmer-mystery in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="467" />

On the Widmer Brothers Brewery site (above), there is a “mystery” link associated with each of the following elements: Both Widmer brothers, the big glass of beer, the lemon slice, the bottle cap, the keychain, the laptop, and the dart.

href="http://www.malibu-rum.com/">Malibu Rum

href="http://www.malibu-rum.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/maliburum-mystery.jpg" alt="Maliburum-mystery in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="334" />

After enduring through the auto-playing “island” sounds, repeating animations, and the obtrusive “drink mixer” overlay advertisement, the Malibu Rum site visitor is presented with a semi-underwater island scene with “mystery meat” navigation as the focal point of the page. The five primary page elements (the mirror ball, the binoculars, the coconut, the bottle, and the drink mixer), however, are not the only clickable items; there’s also the satellite dish in the background.

Up to this point, all the examples of “mystery meat” navigation display a graphic or text hint, on mouse over, that explains what the clickable item points to. The next example doesn’t even go that far.

href="http://www.mountgay.com/">Mount Gay Rum

href="http://www.mountgay.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/mountgay-mystery.jpg" alt="Mountgay-mystery in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="339" />

The Mount Gay Rum site (above) is all Flash, and the main content area is a book with pages that turn when clicked. First of all, finding the exact spot to click on the corner of each page is not the smoothest experience. But there are other clickable elements outside of the book object; you can click the liquor bottle (the barely-visible object in the top left, not the one in the content area), the glass of rum with ice, and the red hat (top right). In my experience, after turning the pages and clicking the mystery items multiple times, I still don’t know what those extra mystery links are for, and why they’re not labelled.

Outdated Design and Typography

From my research, many of the sites that do not suffer greatly from the problems discussed above, and are actually fairly usable, incorporated outdated trends and layouts. A few examples are shown below.

The href="http://millerlite.com/">Miller Lite website is too small for modern screen resolutions.

href="http://millerlite.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/millerlite-old.jpg" alt="Millerlite-old in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="325" />

The href="http://www.martell.com/">Martell Cognac website has tiny font sizes and other small elements.

href="http://www.martell.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/martell-old.jpg" alt="Martell-old in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="279" />

href="http://www.beefeatergin.com/">Beefeater Gin has small navigation text and even smaller drop-down menu text.

href="http://www.beefeatergin.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/beefeater-old.jpg" alt="Beefeater-old in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="300" />

The href="http://4copas.com/">4Copas Tequila site is somewhat old-looking, uses small typography all over its pages, and has an outdated vertical navigation bar.

href="http://4copas.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/4copas-old.jpg" alt="4copas-old in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="352" />

The href="http://www.jackdaniels.com/">Jack Daniel’s site is too dark, and many sections are almost unreadable because of the small typography.

href="http://www.jackdaniels.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/jd-old.jpg" alt="Jd-old in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="396" />

Showcase of the Best Sites

As promised, although this article did come down quite hard on the designers and developers of many alcohol-related websites, there are many sites that are well-designed, usable, and do not overuse Flash animation and other obtrusive techniques.

Many of the sites I’ve already considered are actually nicely designed (usability issues aside). Therefore, this last section is not necessarily showcasing sites that are “pretty”, but instead taking all factors into consideration to compile a list of the highest quality sites, in line with modern web design and development standards and best practices.

Some of these sites have a few of the weaknesses I’ve discussed, but generally are more intuitive, non-obtrusive, and easier to navigate.

href="http://www.guinness.com/">Guinness

href="http://www.guinness.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/guinness-sc.jpg" alt="Guinness-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="312" />

href="http://www.coorslight.ca/">Coors Light

href="http://www.coorslight.ca/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/coorslight-sc.jpg" alt="Coorslight-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="420" />

href="http://www.sleeman.com/">Sleeman Breweries Ltd.

href="http://www.sleeman.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/sleeman-sc.jpg" alt="Sleeman-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="322" />

href="http://www.molsoncanadian.ca/">Molson Canadian

href="http://www.molsoncanadian.ca/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/canadian-sc.jpg" alt="Canadian-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="420" />

href="http://www.deschutesbrewery.com/">Deschutes Brewery

href="http://www.deschutesbrewery.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/deschutes-sc.jpg" alt="Deschutes-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="399" />

href="http://www.svedka.com/">SVEDKA

href="http://www.svedka.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/svedka-sc.jpg" alt="Svedka-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="333" />

href="http://www.drinkjett.com/">JETT VODKA

href="http://www.drinkjett.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/jett-sc.jpg" alt="Jett-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="340" />

href="http://www.mikeshard.com/">Mike’s Hard Lemonade Co.

href="http://www.mikeshard.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/mikes-sc.jpg" alt="Mikes-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="477" />

href="http://www.aviationgin.com/">Aviation Gin

href="http://www.aviationgin.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/aviation-sc.jpg" alt="Aviation-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="283" />

href="http://www.silveroak.com/">Silver Oak Cellars

href="http://www.silveroak.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/silveroak-sc.jpg" alt="Silveroak-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="409" />

href="http://www.ste-michelle.com/">Chateau Ste. Michelle Winery

href="http://www.ste-michelle.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/chateau-sc.jpg" alt="Chateau-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="357" />

href="http://www.rombauer.com/">Rombauer Vineyards

href="http://www.rombauer.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/rombauer-sc.jpg" alt="Rombauer-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="401" />

href="http://www.eljimador.com/">el Jimador Tequila

href="http://www.eljimador.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/eljimador-sc.jpg" alt="Eljimador-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="398" />

href="http://www.cuervo.com/">Jose Cuervo

href="http://www.cuervo.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/cuervo-sc.jpg" alt="Cuervo-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="421" />

href="http://www.1800tequila.com/">1800® Tequila

href="http://www.1800tequila.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/1800-sc.jpg" alt="1800-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="341" />

href="http://www.bushmills.com/">Bushmills Irish Whiskey

href="http://www.bushmills.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/bushmills-sc.jpg" alt="Bushmills-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="327" />

href="http://www.tullamoredew.com/">Tullamore Dew Irish Whiskey

href="http://www.tullamoredew.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/tullamore-sc.jpg" alt="Tullamore-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="411" />

href="http://www.admiralnelsonsrum.com/">Admiral Nelson’s Rum

href="http://www.admiralnelsonsrum.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/admiral-sc.jpg" alt="Admiral-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="371" />

href="http://www.captainmorgan.com/">Captain Morgan Rum

href="http://www.captainmorgan.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/captain-sc.jpg" alt="Captain-sc in The Unusable and Superficial World of Beer and Alcohol Websites" width="500" height="336" />

Conclusion

In no way does this article mean to imply that the designers of these sites are not talented. In fact, most of the designs presented here are far beyond anything that I could personally accomplish. But, as web developers have learned in recent years, beauty in web design does not guarantee success — and in many cases, a quest for a more visually appealing experience can often weaken the more important aspects of a website.

As shown by the final showcase in this article, not every site in the beer and alcohol website niche is unusable or superficial. But the number of poorly-executed design and navigational techniques and the overwhelming amount of self-indulgent elements I’ve discussed here make it clear that this industry has some important ground to make up in usability, accessibility, and best practices.

If you’re reading this and thinking that I’ve chosen a few specific examples to serve as a basis for an overblown opinion, you should know that there were dozens of other examples of poor usability and downright annoyances that I didn’t include. I also did not discuss special needs users, graceful degradation, semantic markup, and table-based layouts — any of which could have provided further evidence that these sites, for the most part, are downright awful.

Maybe there are underlying reasons for many of the decisions made in these designs. Those reasons could be due to business politics, legal issues, or even a failure to encourage forward thinking — so I will acknowledge that some of these criticisms could be, upon further analysis, overly harsh.

Or maybe these problems have something to do with the possibility that these designers are exposed to a lot of free alcohol…? Hmm…

© Louis Lazaris for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites/">Permalink | href="http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites/#comments">214 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites/&title=The%20Unusable%20and%20Superficial%20World%20of%20Beer%20and%20Alcohol%20Websites">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'The%20Unusable%20and%20Superficial%20World%20of%20Beer%20and%20Alcohol%20Websites'%20http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/showcases/" rel="tag">showcases

The Smashing Book Is Released: Buy Now!

On December 3, 2009, In SEO, Web Design Tips, by Smashing Editorial

Here it is, the brand new Smashing Book. Announced several months ago in a couple of posts, it has finally arrived. You can buy the Smashing Book right now. And in case you didn’t know, it’s available here exclusively. The book is available and can be shipped right away.

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in The Smashing Book Is Released: Buy Now!" border="0" /> /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in The Smashing Book Is Released: Buy Now!" /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in The Smashing Book Is Released: Buy Now!" /> href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64" > src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in The Smashing Book Is Released: Buy Now!" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in The Smashing Book Is Released: Buy Now!" border="0" width="1" height="1" /> /> Here it is, the brand new Smashing Book. Announced several months ago in a couple of posts, it has finally arrived. You can href="http://shop.smashingmagazine.com/smashingbook-dispatcher.php?utm_source=Smashing%2BMagazine&utm_medium=editorial&utm_content=release_announcement&utm_campaign=Smashing%2BBook">buy the Smashing Book right now. And in case you didn’t know, it’s available here exclusively. The book is available and can be shipped right away.

href="http://shop.smashingmagazine.com/smashingbook-dispatcher.php?utm_source=Smashing%2BMagazine&utm_medium=editorial&utm_content=release_announcement&utm_campaign=Smashing%2BBook"> class="alignnone size-full wp-image-19852" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/order-smashing-book-button.jpg" alt="Order-smashing-book-button in The Smashing Book Is Released: Buy Now!" width="461" height="286" /> /> It’s a paperback: 313 pages, full-color images on coated paper, available worldwide. Free shipping to the US and Germany, and reduced shipping costs to other countries. 30-day 100% money-back guarantee.

A word to all who ordered the book in advance with the 20% discount. Pre-orders were on their way as of yesterday to you. Yes, we know that we’ve taken far too long, and we are sad about it. We are, after all, a small design magazine, not a large publishing house. We didn’t have logistics and contacts already in place, and the Smashing Book is our very first book. Please know that we are grateful for every order we have received. But enough excuses: next time, everything will work better… promise.

style="margin-bottom: 10px;" src="http://creatives.commindo-media.de/static/smashing-book-pageview-2.jpg" border="0" alt="Smashing-book-pageview-2 in The Smashing Book Is Released: Buy Now!" width="400" height="300" />

What Are The Shipping Costs?

We want to make the book affordable to everyone and are therefore subsidizing shipment of the book worldwide. However, shipping costs to some parts of the world are extremely high. Please help us minimize these shipping costs for folks who are worse off by voluntarily paying more for the shipping of your copy. This is what we call “social shipping.” The shipping costs per book are simple:

United States and Germany: free shipping + (optional) social shipping /> (notice: free shipping to US = Ground Mail; because books are shipped from Germany, ground mail for US will take 30-40 days to arrive! If you want to get the book quickly, use Air Mail option instead).
Europe (except Germany): €3,50 by ground mail, €5 by air mail.
Rest of the world: $5.00 USD by ground mail, $10.00 USD by air mail.

Yes, it’s that simple. We pay a part of the shipping costs ourselves to make it possible for anyone in the world to purchase the book, wherever they are. No hidden costs, and no tricky calculations.

Shipping may take between several days or weeks, depending on your country of residence. href="http://shop.smashingmagazine.com/delivery-times">See the oveview of delivery times.

href="http://shop.smashingmagazine.com/smashingbook-dispatcher.php?utm_source=Smashing%2BMagazine&utm_medium=editorial&utm_content=release_announcement&utm_campaign=Smashing%2BBook"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/order-smashing-book-button.jpg" alt="Order-smashing-book-button in The Smashing Book Is Released: Buy Now!" width="461" height="286" />

What You Get For Your Money

The book has 313 pages in all, full of practical knowledge for designers and Web developers. It contains 10 chapters and is printed in full color. The book is a paperback and is 8.27 × 5.5 inches (21 × 14 cm). It contains colorful illustrations created by designers from the Russia-based SoftFacade (Anton Zykin, Dmitry Tsozik, Anna Myagkova).

Can’t wait any longer? Need an appetizer? Here’s the first chapter of the Smashing Book. You can download it as a PDF:

title="User Interface Design in Modern Web Applications (PDF)" href="http://media.smashingmagazine.com/cdn_smash/pdfs/sm-book-chapter1.pdf">Chapter 1: User Interface Design in Modern Web Applications

The book is available here exclusively. This first and only book from Smashing Magazine looks at Web design rules of thumb, color theory, usability guidelines, user interface design, best coding and optimization practices, as well as typography, marketing, branding and exclusive insights from top designers across the globe.

It was written by Jacob Gube (SixRevisions), Dmitry Fadeev (UsabilityPost), Chris Spooner (Spoongraphics), Darius A Monsef IV (COLOURlovers.com), Alessandro Cattaneo (with co-editing by Jon Tan), Steven Snell (VandelayDesign), David Leggett (UXBooth), Andrew Maier (UXBooth), Kayla Knight (a regular writer here), Yves Peters (Typographica.org), René Schmidt (the systems administrator for our servers) and the Smashing Magazine editorial team, Vitaly Friedman and Sven Lennartz.

style="margin-bottom: 10px;" src="http://creatives.commindo-media.de/static/smashing-book-pageview.jpg" border="0" alt="Smashing-book-pageview in The Smashing Book Is Released: Buy Now!" width="400" height="273" />

Preview Of The Book

Here are two previews of the upcoming Smashing Book. Please click on the images to see the enlarged versions.

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/preview2-large.jpg"> style="display: inline;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/preview2.jpg" alt="Preview2 in The Smashing Book Is Released: Buy Now!" width="530" height="376" />

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/preview-large.jpg"> style="display: inline;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/preview.jpg" alt="Preview in The Smashing Book Is Released: Buy Now!" width="530" height="371" />

Contents Of The Book

The Smashing Book contains the following chapters:

style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/chapter1.gif" alt="Chapter1 in The Smashing Book Is Released: Buy Now!" width="300" height="434" />

The Art And Science Of CSS Layouts

In modern Web design, developing a layout is a craft that requires patience, precision and solid knowledge of CSS. While design elements create flow and hierarchy in the design, Web layouts build up a skeleton of the website, providing a space and structure where design elements can breathe and serve their purpose. However, laying out a page is often a tricky and time-consuming matter that can be undermined by numerous browser inconsistencies and trade-offs between various types of layouts.

There are some practical guidelines to help you approach this issue in a manageable and effective way. This article throws light on various kinds of layouts, discussing their advantages and disadvantages and suggesting situations in which each would work best. It also talks about techniques and related issues that will help you gain a better understanding of CSS layouts in general.

style="clear: both" /> /> style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/ui.gif" alt="Ui in The Smashing Book Is Released: Buy Now!" width="300" height="311" />

User Interface Design In Modern Applications

User interface design isn’t just about buttons and menus. It’s about the interaction between the user and the application or device, and in many cases about the interaction between multiple users through that device. This means that user interface design isn’t about how a product looks, but about how it works. It’s not just about arranging buttons and picking colors, but about choosing the right tools for the job. Does a particular interface even need buttons? If so, what do they need to do? What do you need to provide for the user to figure out how your application works and accomplish what they want with ease?

style="clear: both" /> /> style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/typo.gif" alt="Typo in The Smashing Book Is Released: Buy Now!" width="300" height="414" />

Web Typography: Rules, Guidelines And Common Mistakes

Typography covers a wide range of topics and applications, even wider now with the Web and the digitization of information. Typography is not just about choosing a nice font. It is a complex meta-language that brings value to communication, that increases the readability and legibility of content, giving tone to a brand and corporate image, helping to sell products and making information better understood by the audience. However, the poor application of a few common rules of typography is enough to make readers turn away.

style="clear: both" /> /> style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/usab.gif" alt="Usab in The Smashing Book Is Released: Buy Now!" width="300" height="338" />

Usability Principles For Modern Websites

We don’t know a single Web designer who wouldn’t want an outsider’s opinion of their website. Bonus points if you find a designer willing to give you feedback. Keep in mind, though, that a designer’s opinion isn’t your user’s opinion. To identify with our users, we must focus on much more than the outward appearance of our websites, as difficult as that is to do. To complicate matters, modern websites quickly become huge multi-faceted structures. Competing websites often offer similar functionality, but one will win out because it provides a superior user experience. This is where the Web is headed, a sort of evolution of website design.

style="clear: both" /> /> style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/color.gif" alt="Color in The Smashing Book Is Released: Buy Now!" width="300" height="316" />

The Guide To Fantastic Color Usage In Web Design And Usability

Considering the cultural implications of the colors on your website is important, especially if you expect international traffic. Green, for instance, a popular color, is taken in Western society to mean environmental consciousness. In China, a green hat could imply that a man’s wife is cheating on him. The color is sacred in the Islamic world, and it has significance in Catholicism. In some African countries, green represents the natural richness of Africa. It has also been associated with money, jealousy, growth, sickness, inexperience, evil, fertility, hope, youth and death. This is just one example of the cultural and psychological implications that color can have for your website’s audience.

style="clear: both" /> /> style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/perf.gif" alt="Perf in The Smashing Book Is Released: Buy Now!" width="300" height="386" />

Performance Optimization For Websites

Slow and unresponsive websites are annoying. And if your website is annoying, your visitors are unlikely to buy goods or contact you, and you will lose money. Hence, optimizing your website to provide a good user experience is important. Yahoo’s Firefox plug-in YSlow provides tips on how to make websites more responsive. We will not settle for YSlow’s tips alone, though, but take two further steps by optimizing MySQL and PHP as well.

In this chapter, we get technical. You will require root-level access to your server machine. If you are in a shared-hosting environment, you may not have this level of access. But the section will still be useful to you because you can check if your Web host’s machine meets your requirements, and if it does not, you will know what to demand from your host.

style="clear: both" /> /> style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/designtosell.jpg" alt="Designtosell in The Smashing Book Is Released: Buy Now!" width="300" height="392" />

Design To Sell: Increasing Conversion Rates

Most websites are not works of art or things made to be appreciated solely for their beauty or expression. Websites are functional interfaces that serve a specific purpose. If you run an online store, the purpose of your website is to sell goods. If you run a Web application, your website is there to get people to sign up. Whatever industry you operate in and whatever type of business, organization or community you run, you want your website to perform by getting those sales, sign-ups, subscribers or clicks.

“Conversion” is an online marketing term that describes an instance of a visitor to your website performing an action that you deem to be desirable. The main question is, how do you turn a new visitor to your website into a loyal customer? To answer this, we’ll look at what it takes to sell effectively.

style="clear: both" /> /> style="padding: 0pt 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/brand.jpg" alt="Brand in The Smashing Book Is Released: Buy Now!" width="300" height="407" />

How To Turn A Site Into A Remarkable Brand

The term “remarkable” means being worthy of notice or attention or, in the context of Web development, naturally persuading the viewer to mention or recommend a website to a friend. Developing a remarkable brand for your website means that people will likely give credit or refer to your website voluntarily, which is a big bonus when you are starting to build and develop your website.

Any niche or industry has hundreds or thousands of websites all based on the same topic, but from the crowd always emerges a bunch of websites that re-appear time and again. These websites are often mentioned in conversation and cited in sources of information or are the homes of highly sought after products. Given their high profiles, they can all be classified as remarkable, but how did they manage to build this great reputation?

style="clear: both" /> /> style="padding: 20px 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/experts.jpg" alt="Experts in The Smashing Book Is Released: Buy Now!" width="300" height="337" />

Learning From Experts: Interviews And Insights

Many of the most successful and well-recognized designers are willing and eager to provide guidance to others who want to improve their own skills. We posed a series of questions to leading designers and developers in an effort to get some answers to common questions. The participants bring a great deal of diversity in skills and expertise, and all have valuable insight that can help those looking to grow.

This chapter contains ideas, insights and tips from Dan Rubin, Jason Santa Maria, Paul Boag, Jeff Croft, Andy Budd, Collis Ta’eed, Wolfgang Bartelme, Keith Robinson, Jonathan Snook, Elliot Jay Stocks, Khoi Vinh, Veerle Pieters, Chris Coyier, Dave Shea, Darren Hoyt, Henry Jones, Kiam McKay, Nick La, Jon Hicks, Larissa Meek and others.

style="clear: both" /> /> style="padding: 25px 0pt 15px 32px; float: right; display: block;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/the-smashing-book/sm.gif" alt="Sm in The Smashing Book Is Released: Buy Now!" width="300" height="384" />

The Smashing Story

How did Smashing Magazine come into existence? How do we work, and what happens behind the scenes? What is our secret recipe for success? Our readers are asking, and Smashing Magazine is answering.

The Smashing Magazine story is not the classic story of two guys coming up with a great idea in the right place at the right time. It is a story of dedication, patience and hard work… truly hard work. Perhaps the most unusual thing about Smashing Magazine’s birth is that we never actually sat down together to discuss the whole thing. We never threw up a whiteboard and brainstormed on a groundbreaking concept for a successful magazine with a solid marketing model. In fact, Smashing Magazine is the result of a random experiment, initiated by two like-minded Web workers with shared passion and knowledge, as well as valuable experience (Sven) and energetic motivation (Vitaly).

href="http://shop.smashingmagazine.com/smashingbook-dispatcher.php?utm_source=Smashing%2BMagazine&utm_medium=editorial&utm_content=release_announcement&utm_campaign=Smashing%2BBook"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/order-smashing-book-button.jpg" alt="Order-smashing-book-button in The Smashing Book Is Released: Buy Now!" width="461" height="286" />

Please Spread The Word!

We tried our best to make the book affordable and useful to every designer and Web developer worldwide. Please spread the word about the Smashing Book in your blog posts, on Facebook and href="http://twitter.com/home?status=The%20Smashing%20Book%20is%20finally%20available!%20-%20http://bit.ly/4IWllU%20-%20Buy%20now%20%21%20%28via%20@smashingmag%29">on Twitter. This book wouldn’t be possible without your tremendous support – and we are truly thankful for that. Thank you.

(al)

© Smashing Editorial for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/">Permalink | href="http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/#comments">401 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/&title=The%20Smashing%20Book%20Is%20Released:%20Buy%20Now!">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'The%20Smashing%20Book%20Is%20Released:%20Buy%20Now!'%20http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: