The Unusable and Superficial World of Beer and Alcohol Websites

Advertisement

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 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.

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

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 Corona401 website:

Corona Age Verification Screen2

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:

Christiania Vodka3

Christiania Vodka4

JETT VODKA865

JETT VODKA6

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 Labatt Breweries of Canada7 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 Anheuser-Busch8 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 Budweiser9 landing page:

Budweiser10

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 Samuel Adams11 website goes beyond ridiculous in who it allows to enter. Initially the user is presented with this screen:

Samuel Adams12

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:

Samuel Adams13

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 Rémy Martin14 website. When you first visit, you’re presented with this screen, unnecessarily created with a barely usable Flash-based date picker:

Rémy Martin15

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

Rémy Martin16

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 ZIMA17 website. Try to find your year of birth in this unnecessary mess:

ZIMA18

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 Busch Beer19 site is one of a few sites that expects the user to enter the year in just two digits:

Busch Beer20

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:

Busch Beer21

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 Worlds of Discovery22, “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. Kids websites23 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 Seagram’s Gin24 website is one of many examples of a full Flash website, an extremely common practice in this industry.

Seagram's Gin25

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 Finlandia vodka26 website has a mostly-Flash interface with promo boxes that could have been done with plain HTML and JavaScript:

Finlandia vodka27

Another site that overused Flash is the Three Olives Vodka28 website. Take a look at the screen capture below:

Three Olives Vodka29

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 BACARDI30 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:

BACARDI31

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”.

ZYR Vodka32

ZYR Vodka33

Bombay Sapphire® Gin34

Bombay Sapphire® Gin35

Mount Gay Rum6236

Mount Gay Rum37

Even worse, after verifying your age, the Jameson Irish Whiskey38 website loads up a Flash intro of a super-fancy animated 3-D cube that does not even have a “skip” button:

Jameson Irish Whiskey39

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 Corona401 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.

Corona41

The Bud Light42 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.

Bud Light43

The Blue Moon Brewing Company44 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 Auld Lange Syne45 — with no apparent method to disable the song.

Blue Moon Brewing Company46

The Michelob47 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.

Michelob48

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 SKYY Vodka49 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.

SKYY Vodka50

And now for the Russian Standard Vodka51 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.

Russian Standard Vodka52

They weren’t the only ones to implement this bad practice, however. The Hennessy53 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.

Hennessy54

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 mystery meat navigation55 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.

San Miguel Beer56

San Miguel Beer57

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?

Widmer Brothers Brewery58

Widmer Brothers Brewery59

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.

Malibu Rum60

Malibu Rum61

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.

Mount Gay Rum6236

Mount Gay Rum63

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 Miller Lite64 website is too small for modern screen resolutions.

Miller Lite65

The Martell Cognac66 website has tiny font sizes and other small elements.

Martell Cognac67

Beefeater Gin68 has small navigation text and even smaller drop-down menu text.

Beefeater Gin69

The 4Copas Tequila70 site is somewhat old-looking, uses small typography all over its pages, and has an outdated vertical navigation bar.

4Copas Tequila71

The Jack Daniel’s72 site is too dark, and many sections are almost unreadable because of the small typography.

Jack Daniel's73

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.

Guinness74

Guinness75

Coors Light76

Coors Light77

Sleeman Breweries Ltd.78

Sleeman Breweries Ltd.79

Molson Canadian80

Molson Canadian81

Deschutes Brewery82

Deschutes Brewery83

SVEDKA84

SVEDKA85

JETT VODKA865

JETT VODKA87

Mike’s Hard Lemonade Co.88

Mike's Hard Lemonade Co.89

Aviation Gin90

Aviation Gin91

Silver Oak Cellars92

Silver Oak Cellars93

Chateau Ste. Michelle Winery94

Chateau Ste. Michelle Winery95

Rombauer Vineyards96

Rombauer Vineyards97

el Jimador Tequila98

el Jimador Tequila99

Jose Cuervo100

Jose Cuervo101

1800® Tequila102

1800® Tequila103

Bushmills Irish Whiskey104

Bushmills Irish Whiskey105

Tullamore Dew Irish Whiskey106

Tullamore Dew Irish Whiskey107

Admiral Nelson’s Rum108

Admiral Nelson's Rum109

Captain Morgan Rum110

Captain Morgan Rum111

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…

Footnotes

  1. 1 http://www.corona.com/
  2. 2 http://www.corona.com/
  3. 3 http://www.christianiavodka.com/
  4. 4 http://www.christianiavodka.com/
  5. 5 http://www.drinkjett.com/
  6. 6 http://www.drinkjett.com/
  7. 7 http://www.labatt.com/
  8. 8 http://www.anheuser-busch.com/
  9. 9 http://www.budweiser.com/
  10. 10 http://www.budweiser.com/
  11. 11 http://www.samueladams.com/
  12. 12 http://www.samueladams.com
  13. 13 http://www.samueladams.com
  14. 14 http://www.remy.com/
  15. 15 http://www.remy.com/
  16. 16 http://www.getinteresting.com/
  17. 17 http://www.zima.com/
  18. 18 http://www.zima.com
  19. 19 http://www.busch.com/
  20. 20 http://www.busch.com/
  21. 21 http://www.busch.com/
  22. 22 http://www.worldsofdiscoveryblog.com/
  23. 23 http://www.smashingmagazine.com/2009/11/27/designing-websites-for-kids-trends-and-best-practices/
  24. 24 http://www.seagramsginlive.com/
  25. 25 http://www.seagramsginlive.com/
  26. 26 http://www.finlandia.com/
  27. 27 http://www.absolut.com/
  28. 28 http://www.threeolives.com/
  29. 29 http://www.threeolives.com/
  30. 30 http://www.bacardi.com/
  31. 31 http://www.bacardi.com/
  32. 32 http://www.zyrvodka.com/
  33. 33 http://www.zyrvodka.com/
  34. 34 http://www.bombaysapphire.com/
  35. 35 http://www.bombaysapphire.com/
  36. 36 http://www.mountgay.com/
  37. 37 http://www.mountgay.com/
  38. 38 http://www.jamesonwhiskey.com/
  39. 39 http://www.jamesonwhiskey.com/
  40. 40 http://www.corona.com/
  41. 41 http://www.corona.com/
  42. 42 http://www.budlight.com/
  43. 43 http://www.budlight.com/
  44. 44 http://www.bluemoonbrewingcompany.com/
  45. 45 http://en.wikipedia.org/wiki/Auld_Lang_Syne
  46. 46 http://www.bluemoonbrewingcompany.com/
  47. 47 http://www.michelob.com/
  48. 48 http://www.michelob.com/
  49. 49 http://www.skyy.com/
  50. 50 http://www.skyy.com/
  51. 51 http://www.russianstandardvodka.com/
  52. 52 http://www.russianstandardvodka.com/
  53. 53 http://www.hennessy.com/
  54. 54 http://www.hennessy.com/
  55. 55 http://en.wikipedia.org/wiki/Mystery_meat_navigation
  56. 56 http://www.sanmiguelbeer.com.ph/
  57. 57 http://www.sanmiguelbeer.com.ph/
  58. 58 http://widmer.com/
  59. 59 http://widmer.com/
  60. 60 http://www.malibu-rum.com/
  61. 61 http://www.malibu-rum.com/
  62. 62 http://www.mountgay.com/
  63. 63 http://www.mountgay.com/
  64. 64 http://millerlite.com/
  65. 65 http://millerlite.com/
  66. 66 http://www.martell.com/
  67. 67 http://www.martell.com/
  68. 68 http://www.beefeatergin.com/
  69. 69 http://www.beefeatergin.com/
  70. 70 http://4copas.com/
  71. 71 http://4copas.com/
  72. 72 http://www.jackdaniels.com/
  73. 73 http://www.jackdaniels.com/
  74. 74 http://www.guinness.com/
  75. 75 http://www.guinness.com/
  76. 76 http://www.coorslight.ca/
  77. 77 http://www.coorslight.ca/
  78. 78 http://www.sleeman.com/
  79. 79 http://www.sleeman.com/
  80. 80 http://www.molsoncanadian.ca/
  81. 81 http://www.molsoncanadian.ca/
  82. 82 http://www.deschutesbrewery.com/
  83. 83 http://www.deschutesbrewery.com/
  84. 84 http://www.svedka.com/
  85. 85 http://www.svedka.com/
  86. 86 http://www.drinkjett.com/
  87. 87 http://www.drinkjett.com/
  88. 88 http://www.mikeshard.com/
  89. 89 http://www.mikeshard.com/
  90. 90 http://www.aviationgin.com/
  91. 91 http://www.aviationgin.com/
  92. 92 http://www.silveroak.com/
  93. 93 http://www.silveroak.com/
  94. 94 http://www.ste-michelle.com/
  95. 95 http://www.ste-michelle.com/
  96. 96 http://www.rombauer.com/
  97. 97 http://www.rombauer.com/
  98. 98 http://www.eljimador.com/
  99. 99 http://www.eljimador.com/
  100. 100 http://www.cuervo.com/
  101. 101 http://www.cuervo.com/
  102. 102 http://www.1800tequila.com/
  103. 103 http://www.1800tequila.com/
  104. 104 http://www.bushmills.com/
  105. 105 http://www.bushmills.com/
  106. 106 http://www.tullamoredew.com/
  107. 107 http://www.tullamoredew.com/
  108. 108 http://www.admiralnelsonsrum.com/
  109. 109 http://www.admiralnelsonsrum.com/
  110. 110 http://www.captainmorgan.com/
  111. 111 http://www.captainmorgan.com/

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertising
  1. 1

    Why the hell is wrong to make a full flash based website?
    It’s up to the developer/company if they gonna make it in flash or html/css/javascript.
    Who are you to tell others what technology to use?
    If you think that javascript is better than acrionscript it’s a very personal matter. i don’t care.

    Some sites insist to enter your country because in some countries alcohol is illegal from 18 and above and some others from 21. That’s why. It’s not useless at all.
    If the user enters false details the company holds no responsibility. They just can’t let you enter if you don’t have the appropriate age.

    You asked who? From Where? Canada?
    Each country has it’s own laws. But the internet is global.
    So the company has to be protected to all countries and laws.

    -1
  2. 52

    Although I don’t regard many websites as “outdated”, I think that the overall tone of this article is well put. Critique on the overuse of flash, video intro’s, audio players etc.. is something that needs to be said more often !

    I get too many clients, esp.at work who want some multimedia flashing thingy site, but don’t have a clue what to communicate…
    SM is a reference on the web, as they raise their voices on this subject, that may convince those “I want a full flash site”-people..

    1
  3. 103

    author of the post… http://www.impressivewebs.com/

    what can I say?

    0
  4. 154

    This was a fun article, I tend to prefer it when you guys show BAD examples of design to teach people what NOT to do.

    0
  5. 205

    “Why Not JavaScript-Based Animation?”

    I got the answer: Because JavaScript sux. Its an unusual script language for the web.

    -1
  6. 256

    Great article! I just agree 100%.

    0
    • 307

      By the way …stop the fake comments… the Article is not great and share only his own opinion that is full of fail.

      -1
  7. 358

    Thank you for tackling this. I have the very same gripes when I enter these websites. I’m over the U.S. legal drinking age and still just pick any numbers to enter the site. “How would they know I’m not 99 years-old? The “hidden-egg” technique was cool YEARS ago and I found it annoying then. And overuse of Flash is unacceptable.

    I would like to point out that the focus of “blame” for these poor practices, while executed by designers, is the final choice of the CLIENTS. More than likely, these designers have done the best they can with the little options they were given.

    0
  8. 409

    Very funny reading!

    0
  9. 460

    Svedka is my favorite vodka, which I bought the first time because I liked their font/packaging! Monday morning, I could use a drink! ;)

    0
  10. 511

    unbelieveable! 4 Irish drinks and nothing not even one single beer brand from Germany!

    0
  11. 664

    Louis my compliments, i hope some of these designers will read this article and take your advice in there next alcohol projects :)

    Asking for a date of birth can also to do with marketing, it is a way to know how old there consumers are.

    Keep up the good work

    0
  12. 715

    I wonder if the people creating these sites were sampling the products they were promoting?

    0
  13. 766

    Funny the Blue Moon site got a bad nod and Coors got a good nod. The Coors company makes Blue Moon. Another marketing trick to make people think a product is not made by another huge conglomerate.
    Either way, Flash is way overused. Cool intros but when the whole site is Flash, bad practice and usability. Not to mention bad on the search engines.
    What ever you views on alcohol itself is not relevant to the article. The article is about a specific industry and their designs and usability. Not promotion of alcohol. Whether you drink or not or choose to design for a specific industry or not is your own decision, but don’t make these comment areas about your personal views about a personal choice people decide to make.
    Design is design. This article focuses on a specific industry. It is much more engaging to focus on an industry, rather than to pull and compare layouts from 10 different industries. It doesn’t work. That is what research is. If you have a client who is in a specific industry you research their competition to get a feeling of what others in their area have done. This works the same for alcohol companies, furniture companies, toy companies, etc.

    0
  14. 817

    Nice post, very funny like STPo said. I too hate the date-of-birth-picking pages ;-).

    I don’t fully agree on your point regarding using flash. Personally I’m not a great fan of full Flash websites, but I do think beer and alcoholic drinks are the perfect products for these type of sites. These products/brands are in essence quite generic, thus the brand itself, or the brand experience (and in this case user experience) has to have a huge impact on the (potential) user. Also, I think most users don’t visit the website to get information, at least it’s not their primary goal. These two arguments make it acceptable to make full Flash websites.

    I think you’re right about the other two situations in which Flash websites are acceptable.

    0
  15. 868

    Why Guinness is on top of best sites showcase if they also made the first mistake said: painfull age verification screen?

    0
    • 919

      Even the “good” sites have weaknesses, which I mentioned. Also, the good sites were not in any particular order, that was just a coincidence.

      0
  16. 1021

    Helge-Kristoffer Wang

    December 7, 2009 8:58 am

    I love how Smashing Magazine only publish fullhearted articles, and they are actually thought trough. I mean, you give alot of effort into your articles and I LIKE that!

    I enjoyed reading this, and I learned of others mistake! Long live Smashing Magazine.

    And btw, I’m going to buy that book soon. :-)

    0
  17. 1072

    Great article wich shows good references of wht to do – or not to do!

    0
  18. 1123

    We tried to take a different approach with one of the alcohol website’s we designed by making it more of a game. The product is no longer available, but the site still exists here: http://archive.cgcraft.com/voltavodka.com/
    We also did these two, which have more basic yes/no age verifications:
    http://www.jackrums.com
    http://www.spicedjack94.com

    0
  19. 1174

    Great and interesting article! Thanks!

    0
  20. 1225

    @Jables – I sighed at your post, I’ve had that many times, and have disassociated myself with each and every project that has been bastardised.

    I like this site by Adnams, a brewery in East Anglia, UK: http://www.beerfromthecoast.co.uk
    It’s one of a few sites about the brewer which vary in styles and approach, but this one is a simple, no nonsense, blog based site, that doesn’t have any flashy stuff, nor an age check, as folk who drink their ales probably aren’t underage, nor want any fancy crap.

    Just the job I reckon. Their ales are damn fine too.

    0
    • 1276

      Thanks Birks,
      I will check this site out. I have a scout here at work so I gotta wait for home but, its funny you mention its a brewery in the UK. And a UK agency probably tackled the job right? Which is why it came out so great. Not saying all UK agencies set the Client aside and do what they want, but where I work we have a Division based in the UK… Sheffield I believe. And the Artwork that comes out of that department is fantastic. Our Creative Director is in awe of the work they do over there, and she is having the hardest time getting our board of directors to jump aboard here in the U.S.. With the limits they put on us it makes it hard for the client to see what we can really do. But your right its the job i guess. (I love Fine Ales I’ll have to order some or track it down from this site and give it a try.)

      0
  21. 1327

    Good useful post! As someone who has had to implement the age verification for sites for other vendors, I’m not sure there’s always a choice with doing auto country detection and age verification checks. It may be a complete legal matter, or a companies stance to always do it the same way, which doesn’t take into account usability.

    0
  22. 1378

    Hi, I’m the creative director that worked on the corona site. I think your frustration is one shared by many of the designers and digital creatives that have produced the above sites, including myself. There is nothing I would have liked more than to get people into the site experience as quickly as possible. However, your solution is a little naive and US centric. Unfortunately the age verification gates are a mandate from the various global governing bodies of alcohol. If you have a single global hub (which many .com’s are) and have content that is targeted to specific countries than you need to abide by the laws of that country. Obviously the legal age for drinking is NOT 21 around the world, and varies, additionally an IP sniff on a users computer is not considered accurate enough to circumvent country selection. It’s easier for smaller brands to bend these laws as they arent globally distributed or their content and promotions are purely US focused.z

    Also, if you havent figured out how to turn down the sound on your computer, you might want to look into that.

    -1
    • 1429

      That’s what I figured. When I had to implement those verification boxes, I wasn’t given a choice in how it was done.

      0
    • 1480

      Cyrus,

      I just want the sites to simplify the age verification screen, that’s all. I don’t see any reason, legal or otherwise, even in light of what you just said, to ask the user to enter their exact birth date. It’s a waste of time, and provides no better entry than simply saying “are you of drinking age in your country of residence?”

      But thank you for that info, I hope more people involved in these sites will comment here, and I’ll be glad to correct any statements.

      1
      • 1531

        How is anyone in that much of a hurry that putting in their date of birth is a waste of time?

        Alcohol sites are required by law in most cases to have the users go through this step to verify their age. Similarly age gates are required by the ESRB (video games) and the MPAA (movies). Simply having a “are you 21″ yes or no link isn’t sufficient for legal requirements. Yes, it can be forged and in many cases metrics show that a majority of people are born on January 1, 1900, but it’s all apart of the due diligence process that the brands have to go through.

        All of the comments regarding usability, poor design, and “too much” Flash come across as someone ignorant and naive to digital advertising and marketing. The choice to use Flash and interactivity is a business and strategy decision that drives the creative and execution. Have you ever considered what method better tells the brand story and engages the user? As much as you’re opposed to Flash and interactivity the fact doesn’t change that it engages FAR more users for FAR longer than HTML counterparts.

        Your assumptions about what should and should not be simply don’t hold up to what is reality.

        -1
        • 1582

          Could you link the law that specifically says putting an age verification with date, month and year is required?

          0
    • 1633

      Your closing sentence was a little snippy was it not Cyrus?

      Having sound auto-play is horrible for many reasons. But the reason it annoys me most is if I have music playing while I am surfing/working. Its nothing to do with speakers being up too loud.

      If I want to hear sound from a website, I’ll press play.

      Auto playing sound/video is only acceptable on pages you expect to get it from, like youtube or last fm for example.

      0
  23. 1684

    You hate alcohol? Oh man…

    1
  24. 1735

    I agree with you in most of the points, Flash is out of date nowadays, I think it just should be used in really-necessary interactive designs, but most of the clients have not the same mentality, they believe flash makes their sites more attractive when it makes them less visible.

    0
  25. 1786

    The Jett Vodka site asks if you are 21 years of age, not if you are over 21. I’m 28 and I still can’t get in their site. But then again, I hit the back button and lied. Oh to be 21 again.

    1
  26. 1837

    I can’t stand articles where people spew their highly informed and educated opinions without actually knowing why things are the way they are.

    Having been the art director on the Budweiser age gate, I know a little bit about why it is the way it is. It is 100% the client. We did usability and focus testing on a great variety of simpler, more “usable” age gates. The solution you see live is not the one we recommended. Legal departments and alcohol governing bodies cannot be budged from their policies. Design is NOT the issue.

    Also, I agree with Daemon. Not every single site has to follow every usability Commandment. If you want to pick on true usability abominations, try sites like eBay.

    0
    • 1888

      Carl, thank you for your thoughts on this.

      If you read the article in full, you’ll see that I acknowledged the possibility that there were legal issues involved, and that the designers were not necessarily to blame. Also, as I mentioned in the article, I interviewed someone from a couple of different beer makers, and they did not indicate that there were legal issues involved, just company policies — which I suppose are linked to “legal departments”, as you mentioned.

      But regardless of who made the decisions for these terrible user experiences, they still provide an excellent case study of “what not to do”.

      0
  27. 1939

    Well, the article itself was pretty nice but I don’t think it was necessary. We all know that there are sites with poor usability. What will we see next? A showcase of blogs focusing on lemons or sites of shoe stores?
    Too many showcases of sites you don’t want to see in my opinion.

    -1
  28. 1990

    This is the best beer site I have seen in a long time: http://narragansettbeer.com (Narragansett Beer). It has a dead simple age verification system, a cool blog updated regularly, good usability and awesome graphics.

    0
  29. 2041

    The thing that really confuses me about the age verification on the web site is that these sites are essentially extended advertisements. There are no regulations where television commercials are concerned – “You must be 21 or over to watch this commercial. Leave the room if you’re too young.” Nor are there age regulations in print advertisements. Just what do they think they’re protecting minors from with age verification on the web site if they openly advertise on television and in print?

    1
    • 2092

      That’s a very good point, kelly, thank you.

      And yes, many of the age verification screens had huge bottles and other forms of advertisements right there, so they’re still technically risking advertising to minors with the initial screen.

      Thanks, I could have used you in my research. :)

      0
      • 2143

        Your talking about Corporate responsibility, not web site design, and it is an area you both seem to have very little knowledge on well as far as the Alcohol industry goes any way.

        While there is no strict regulation (i.e. as part of law) there are plenty of guidelines in the US and the UK for the advertising of alcohol. Most of the major brands/companies abide to these rules (as failure would result in bad press). For example in the US alcohol advertisements can only be placed in media where 70% of the audience is over the legal drinking age.

        While it may seem futile to have these age gateways on web sites, that kind of solution is not appropriate in other media, and so other restrictions/measures are in place.

        This whole area is separate to the discussion of web design as it is a requirement set out by the industries governing bodies, its probably wise to take it up with them rather than slating the designers.

        0
  30. 2194

    Hugely popular beer in northern Germany, site was last updated in 2004

    http://www.astra-bier.de/

    0
  31. 2245

    I really disagree with the author! And like I understand, I have maybe the same opinion like other users. He’s being very petty about it. Yes you can find always little failure, but there are a lot of great and interesting design ideas.

    -1
  32. 2296

    Warning: bad engrish follows.

    I agree with most of what was said in the article. Overuse of flash, intros, annoying music, bad usability…but “Rombauer Vineyards” and “Tullamore Dew Irish Whiskey” showcased as one of the best, while “4Copas Tequila” seems “old”? I’m sorry, but I have to disagree there.

    Besides, what’s wrong with vertical navitagion bars? If you have ten or more links, (wich in itself could be a symptom of bad information architecture, but that’s another story) you actually improve the usability by chosing vertical navigation. Anyway, I’m curious to know why you think it’s bad.

    1
  33. 2347

    It’s an alcohol based company’s website …. of course it’s not going to follow the same basic usability rules. These sites are driven by campaigns. They do not have a standard flow or traffic.

    Also, does anyone care whether or not you drink alcohol. Focus on a topic and skip useless personal details.

    0
  34. 2398

    I’m surprised dosequis didn’t get a mention in this article

    0
  35. 2449

    In most countries; users consent must be collected meaning that user has to select his/her location, age etc. so that the company eliminates any potantial legal liabilities. This is therefore requıired although I agree with you. Bu something are as simple as that.

    If you ask me; most of these sites do not even sell alcohol. The kids can see alcohol on supermatkets why can’t they see them online. And again if you say someone that he/she drinks and he/she drinks therefore; to me it’s his/her liability. No one places a gun on your head; or do they? :)

    0
    • 2500

      That’s why the person that I spoke to from Labbat (a Canadian company) said that it had nothing to do with laws, it was just a company policy. I don’t think there are legal issues, it’s just that the companies are trying to portray a positive and responsible image.

      So again, I ask: Why not simplify the age verification process, like a few sites do?

      0
  36. 2551

    Hello Louis, Nice article! However, I don’t have a critic at all on your project but more on how you deal with your critics. I recommend you to accept critics and know that you are not always right.

    I agree with Evgeniy that Vertical menus are not outdated, but even though I don’t share some of other user’s opinion I don’t try to AGAIN say what “I” think is right.

    Just a recommendation, if somebody doesn’t agree with you, do not “defend” your point of view, try to understand what the other person is saying. If you see all YOUR REPLIES have been quite negative to Smashing Magazine’s users.

    In any case nice article, congrats for your research!

    0
    • 2602

      Ricardo,

      Thanks for the comment.

      My responses are just for the purpose of continuing the conversation and get people thinking, that’s all. Smashing Magazine is trying to encourage more constructive discussions nowadays, so I’m complying with that.

      I didn’t mean any offense to anyone, so I apologize for that. We’re all entitled to an opinion, and I’m expressing mine. No harm intended.

      0
  37. 2653

    These sites have to be discus compliant, which requires the age gate. the country information is used to see both if the reader is of age in one’s own country and to customize the information presented in recipes to make sure that measurements and ingredients are correct for that country. So when they are giving away a Bacardi Mojito “Hamper” in the UK, it’s not the same as what a “Hamper” is thought of in the U.S. The industry is highly regulated, so to complain about something that is required of every site in the U.S. seems a waste of space.

    http://www.discus.org/responsibility/code.asp

    0
    • 2704

      Christopher Anderton

      December 7, 2009 8:02 pm

      Yes, but the question is why not do it easier? Some of the sites do have a dead simple “age gate”. While some is just annoying in it’s implementation.

      1
  38. 2755

    Nice article!
    I can think of so many other kinds of websites that have these problems, too.
    Anybody else having problems with the background on this page being #000?

    0
  39. 2806

    According to the following article the age verification issue seems to have been mostly resolved for the US. http://www.pbs.org/mediashift/2009/01/us-supreme-court-finally-kills-online-age-verification-law029.html While the now defunct law dealt mostly with sexual explicit material it seems to cover any age restrictive activity.

    You mentioned not knowing what US (and Canadian) laws required and contacting a few breweries to find out. I found this article using Google. It’s great for that kind of research.

    0
  40. 2857

    check out this site, it makes great use of CSS …..
    http://www.hpnotiq.com/

    0
  41. 2908

    Hiya Louis,

    I really got a sense of a moany and negative vibe running through your article. I’m sure the points you are making are very valid but perhaps they would reach more people if you presented your arguments in a positive way, rather than simply saying ‘what NOT to do’.

    Cheers,

    Barry

    0
  42. 2959

    Just wanted to thank the author for a great article with substance, and not just style. A lot of people really have no idea how much effort goes into writing an article of this length and scope.

    I’m disappointed to see how many so-called “web designers” still cling to Flash like it’s some great new thing. Unless used sparingly and wisely, it’s a nightmare for usability, bandwidth, SEO, and versatility. In addition, a lot of these beautifully designed Flash sites with complex animations and video run like a slideshow on my work computer, connection speed aside.

    Dozens of people seem to have felt the need to let everyone know that the age and country selectors are to make sure users are over the local drinking age (which is obvious and doesn’t really need to be pointed out), but they all seem to be overlooking the fact that a simple yes/no choice accomplishes the same goal, and that these checks aren’t even necessary in many countries. If nothing else, the developers should use IP info to set the initial choice to the user’s country, and set the initial age choice to something legal so that the user can simply click the button and be on their way.

    Anyway, hopefully web designers and marketing teams will soon realise that full screen videos and animations are for TV, not the internet, and a combination of HTML/CSS, JS and sparingly used Flash really make for the best websites, and that the less barriers between the users and the content, the better.

    Cheers.

    0
  43. 3010

    Nice article. Well researched and written too. Got to agree with the ‘Flash’ mind set.

    0
  44. 3061

    lots of good bad things said in bothartcile and comments… But I do agree with this : Don’t blame designers or developpers because they aren’t the ones who decide what’s to be done.

    And I’ve tried this one : http://www.heineken.com/

    Funny thing, I’m redirected to a page where I can’t even put my date of birth although I have to… Anyone has the same problem?

    0
    • 3112

      Actually, I made a small “strikethrough” correction in the 2nd paragraph so as not to incorrectly target the designers and developers.

      0
  45. 3163

    I came across this Australian beer website recently, and was suprised to discover it was all animated in JavaScript: http://www.jamesboagspure.com.au/

    Now drop the whole idea of Flash like effects, and we’re there!

    0
  46. 3214

    I did enjoy parts of this article, but there are some things I would have to disagree with. I won’t go in to them as many already have, however I was disappointed to see the author include himself so much in the comment conversations. While I think a comment or two is fine (usually to correct something in the article), I think participating in the discussion is something an author should avoid as they come off defensive and in this particular case that is what I’ve seen. I see it as a good article with some valid points, and some not so much such as the vertical menu comment, but it left a sour taste in my mouth after reading through the discussion.

    Personally, I would recommend SM make it a rule that their authors do not participate in article discussions.

    0
  47. 3316

    While most of these sites are quite unusable (especially from an accessibility standpoint), they actually do quite well to hit their intended audience.

    0
  48. 3367

    Using a vertical list of links for navigation is outdated? How uncouth. Seriously, stick to design fundamentals and skip the fashion critiques. You were doing good up until you started letting your personal preferences substitute for objective assessment.

    0
  49. 3418

    I have to say that I agree with most of what is said in the article, not finding a mute button or a volume control in a website with music can drive me mad.
    But on the other hand I also like “flash” sites, and couldn’t help imagining you shouting through the reading of the article : )

    0
  50. 3469

    Blue Sail Creative

    December 7, 2009 3:17 pm

    This article is great, and I think it exposes a huge market opportunity for websites of this nature that take UI and UX into effect.

    Next on my call list! CORONA!

    ;)

    0

↑ Back to top