professional wordpress themes

Find The Right JavaScript Solution With A 7-Step Test

On January 21, 2010, In SEO, Web Design Tips, by Christian Heilmann

  

As Web developers and designers, we are spoilt for choice right now. To build a complex Web application or even just spice up a website with some highly interactive interface element, we have hundreds of pre-built solutions to choose from. Every library comes with widgets and solutions, and every developer tries to make a name for him or herself by releasing a funky JavaScript solution to a certain interface problem. We can pick from dozens of menus, image carousels, tabs, form validators and “lightboxes.”

Disable JavaScript with the web developer toolbar

Having this much choice makes it easy for us to pick and choose, which is where things go wrong. In most cases, we measure the quality of a solution by its convenience to us. Our main reasons for picking one solution over another are: Does it do what I need it to do? Does it look cool? Does it sound easy to use? Would I want to use it? Does it use the framework I’m committed to?

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Find The Right JavaScript Solution With A 7-Step Test" 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 Find The Right JavaScript Solution With A 7-Step Test" />  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 Find The Right JavaScript Solution With A 7-Step Test" />  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 Find The Right JavaScript Solution With A 7-Step Test" />

As Web developers and designers, we are spoilt for choice right now. To build a complex Web application or even just spice up a website with some highly interactive interface element, we have hundreds of pre-built solutions to choose from. Every library comes with widgets and solutions, and every developer tries to make a name for him or herself by releasing a funky JavaScript solution to a certain interface problem. We can pick from dozens of menus, image carousels, tabs, form validators and “lightboxes.”

Having this much choice makes it easy for us to pick and choose, which is where things go wrong. In most cases, we measure the quality of a solution by its convenience to us. Our main reasons for picking one solution over another are:

  • Does it do what I need it to do?
  • Does it look cool?
  • Does it sound easy to use?
  • Would I want to use it?
  • Does it use the framework I’m committed to?

The things you should really look for are different, though:

  • How stable is the solution? /> Is a good alternative available if this one doesn’t work?
  • How easy is it to customize? /> Do you need to be a JavaScript expert to modify the widget?
  • How usable and accessible is it? /> Are users who don’t have a mouse or are on a mobile browser blocked?
  • Do you understand what’s going on? /> Would you be able to fix a problem and explain it to others?
  • Is it a contained solution? /> Will other scripts be able to interfere with it, or would it contaminate the document?
  • How dedicated is the developer? /> Will the solution be maintained in the future?
  • What is supported, and how can you extend functionality? /> A new browser and client request is always around the corner?

In this article, we’ll show some ways to find out more about these issues. First of all, though, understanding what it means to develop for the Web is important.

It’s Not About You

Most of the reasons why we choose a particular solution right away are very much about us, and this is where we tread on thin ice. We don’t consume what we put on the Web; rather, people we don’t know do, and we can’t make assumptions about their ability, set-up, technical understanding or taste. We won’t make our product a success; we only build it, and thus we are the worst testers of it possible.

I’ve been developing for the Web professionally for over 10 years now, working on everything from personal blogs to multi-language enterprise CMS solutions to complex Web applications, and I’ve learnt one thing on the journey: never build for yourself or the client. Instead, build for the people who will use the product and the poor person who has to take over the project when you leave.

Much as we have to act now to minimize our massive carbon footprint, we need to leave a cleaner Web behind. To keep the Web a thriving market and sustainable work environment, we have to change the way we work in it and leave behind unmaintainable, bloated and semi-workable, albeit pretty, solutions. We have to make it easier for people to use Web applications and save other developers from wasting hours trying to understand what we did when they are asked to change or extend it at a later stage.

Introducing The 7-Step Test For JavaScript Widgets

To this end, I’ve put together a seven-step test to apply to any out-of-the-box widget you find. All of the recommendations have a rationale, so please ponder it before dismissing the arguments as “elitist” or “not really suitable to our environment.”

Let’s not forget that even when something is free, its developer will try to sell it to you for the fame, and many a solution is defended tooth and nail on mailing lists instead of being changed or updated. The reason is that, as developers we are always on the move. Maintaining and extending an old solution is not as sexy as creating a cool new one. This leads to ruins that once enjoyed love when they were state of the art but now rust away on the Internet.

To kick the tires of any out-of-the box solution, I mostly use one tool: the Firefox Web developer toolbar. It is available href="https://addons.mozilla.org/en-US/firefox/addon/60">on the Firefox Add-On website and gives you an easy way to test what’s happening in your widget of choice.

Okay, here goes: seven things to test when deciding on a JavaScript solution.

1. What Happens If JavaScript Is Turned Off?

The first test I do with any widget is turn off JavaScript… not after the document has loaded but before. Turning off JavaScript with the Web developer toolbar is very easy. Simply select “Disable All JavaScript” from the “Disable” menu and reload the page: /> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/litmus-disable-javascript.jpg" width="400" height="333" alt="Litmus-disable-javascript in Find The Right JavaScript Solution With A 7-Step Test" />

The rationale is that there are a lot of reasons why JavaScript may not be used: company proxies or personal firewalls could filter it out, other scripts could create errors and mess with yours, or the system in use could simply not have JavaScript enabled. Think of mobile environments, for example.

You don’t need full functionality when JavaScript is not available, just a working interface that doesn’t overload users and interactive elements that work. If a button does nothing when users activate it, those users will stop trusting you; after all, you haven’t kept your promises.

Overloading is another issue. A lot of widgets use CSS and JavaScript to squeeze a lot of content into a very small space: think tabbed content elements and image carousels. What should be their fallback? If you turn off JavaScript and have 50 pictures where you planned for 2, then that would be a good user experience. A better fallback would be a server-side solution for the same functionality or to show the first 2 and then offer a link to a gallery page with the remaining pictures.

Sometimes the JavaScript for a particular widget is actually very good but the demo websites have been done badly. Hiding elements with CSS and then revealing them with JavaScript, for example, is very common. But if JavaScript is turned off, the solution will break. Good demos and solutions use JavaScript to add a class to the body of the document and make all of the CSS dependent on that class.

The trick that any good JavaScript widget should do is to make any functionality depend on JavaScript by using JavaScript; that way, you never have any functionality that won’t work. This technique is called “unobtrusive JavaScript,” and I have href="http://onlinetools.org/articles/unobtrusivejavascript/">written a course on it and href="http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/">set a few rules for it a while back.

2. How To Change The Look, Feel And Content?

A widget whose look and feel are hard-coded is a pain to maintain. You cannot expect future designers to know how to change a certain color by hunting through your JavaScript files. This is how we end up with bloated CSS files, because people add random IDs and classes to enhance the specificity of their CSS selectors.

Good widgets have their look and feel contained in a CSS file and give you handles (i.e. dynamically applied classes) to apply your own styling. If you find yourself having to change JavaScript to change the look and feel, alarm bells should go off in your head.

This gets worse if you have content such as text labels in the JavaScript or if only a fixed number of elements can be displayed (as in the case of navigation menus). Labels and number of elements are what change the most in any Web product. For starters, you will probably roll out your product across different markets and will have to translate the buttons and menus.

Good gadgets have href="http://dev.opera.com/articles/view/json-configuration-for-javascript/">configuration objects that allow you to change the number of elements and define the text labels without having to change the main JavaScript. The reason for this is that the functional part of the widget should be separated from the maintainer. If the widget has a security or performance problem, you should be able to replace it without losing your configuration and localization work. Otherwise people would be very likely to keep insecure code on the Web, which is one of the reasons why our inboxes are full of spam.

3. How Usable And Semantic Is The Final Product?

A lot of widget creators are very happy to announce that their products are “Web-standards compliant” and accessible because of it. While Web-standards compliance is important, it does not indicate the quality or usefulness of the product. One cannot really validate semantics with an automated tool. For example, the following examples are both valid HTML:

<div class="menu">
  <div class="section">
    <span class="label">Animals</span>
    <div class="subsection">
      <div class="item">Giraffe</div>
      <div class="item">Donkey</div>
      <div class="item">Cheetah</div>
      <div class="item">Hippo</div>
    </div>
  </div>
  <div class="section">
    <span class="label">Stones</span>
    <div class="subsection">
      <div class="item">Diamond</div>
      <div class="item">Ruby</div>
      <div class="item">Onyx</div>
    </div>
  </div>
</div>

<ul class="menu">
  <li><button>Animals</button>
    <ul>
      <li><a href="giraffe.html">Giraffe</a></li>
      <li><a href="donkey.html">Donkey</a></li>
      <li><a href="cheetah.html">Cheetah</a></li>
      <li><a href="hippo.html">Hippo</a></li>
    </ul>
  </li>
  <li><button>Stones</button>
    <ul>
      <li><a href="diamond.html">Diamond</a></li>
      <li><a href="ruby.html">Ruby</a></li>
      <li><a href="onyx.html">Onyx</a></li>
    </ul>
  </li>
</ul>

The second example works without JavaScript and uses much less HTML. It also requires much less CSS for styling because you would simply take advantage of the cascade.

Furthermore, the HTML on which the widget is based is only half the story. What the JavaScript generates also needs to be valid, usable and accessible, and you can check this when you check the generated source in the Web developer toolbar.

To do this, right-click anywhere in the document and select Web Developer → View Source → View Generated Source: /> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/litmus-view-generated-source.jpg" alt="Litmus-view-generated-source in Find The Right JavaScript Solution With A 7-Step Test" />

Usability and accessibility (accessibility being, in essence, merely a more comprehensive understanding of usability) are harder to test. But one very good test is to check how keyboard-accessible a widget it. Keyboard-only users are on the rise, and widgets that work only with mouse-over events would not usable on a touchscreen mobile, for instance. Many widgets provide basic keyboard access (e.g. using the Tab key to jump from one link to another, and the Enter key to activate each), but this is not proper accessibility.

A menu, for example, should not be navigated by tabbing through each of the items because this would require far too many keystrokes. Instead, the user should be able to tab to the main menu bar and from there use the cursor keys to navigate.

A modal pop-up (commonly called a lightbox) should be able to be closed with a keyboard by hitting the Escape key or by tabbing to the “Close” button. If it is a multi-item lightbox, you should also be able to navigate the items with the cursor keys.

The href="http://www.w3.org/TR/wai-aria-practices/#kbd_generalnav">W3C’s WAI websites have some great examples of how widgets should react to keyboard use, and Todd Kloots of Yahoo does a href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">great job of explaining the techniques behind good keyboard usability (also href="http://developer.yahoo.com/yui/theater/video.php?v=kloots-a11y">as a video and href="http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y">using YUI3 and href="http://ericmiraglia.com/blog/?p=132">focusing on WAI-ARIA). Patrick Lauke of Opera also wrote href="http://24ways.org/2009/dont-lose-your-focus">a great article on the subject and href="http://www.splintered.co.uk/news/112/">gave a presentation at last year’s Future of Web Design. If you are a Mac user, make sure to href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">turn on keyboard access before declaring a widget faulty.

People also need to be able to resize the text in their browser. So test the widgets at several text sizes. Using Internet Explorer 6 for this is important because it is the main culprit in font-resizing issues. Newer browsers do a much better job of zooming the entire interface, but you cannot expect end users to know how to use them.

4. Do You Understand What’s Going On?

If you’ve read the Harry Potter books (or even seen the movies), you know that you shouldn’t trust magic without knowing what is going on. A book that responds to your writing is as suspicious as a widget that does something so amazing that you have no clue how it happened.

Remember, if the doo-dad stops working, you will be asked to fix it or explain what went wrong. Therefore, it is important to at least know the basics of what JavaScript spell was cast to transform a list of images into an all-singing, all-dancing carousel.

Good widgets have technical documentation for that kind of thing, and some even fire off custom events that tell you when something is happening. That way, you can debug the tool by waiting for these events and analyzing the current state of play. It also allows you to extend functionality, which we’ll come back to in step #7.

5. Does It Play Well With Others?

The biggest problem with any JavaScript on the Web right now is that its security model gives every script on the page the same rights. This means that one bad script can mess up the user’s whole experience because it may override parts of another script.

The places where scripts can clash are in variable and function names and events. If your widget does not protect its variables and function names or if it applies event functionality to elements without checking that other scripts are doing the same, you’ll have a problem.

Say you have an element with the ID menu, and you have one script that turns its HTML content into a drop-down menu and another that enhances the different links by showing a beautiful roll-over message. If neither of these scripts append to the existing functionality and just apply it, you’ll have either a beautiful roll-over or a menu, depending on which script is applied last.

The good news is that for widgets that are based on libraries, this “event clash” is very unlikely because libraries work around that out of the box. You can test for the problem of function and variable names that can be overwritten by other scripts. href="http://www.jslint.com/">JSLint is a tool and website where you can check JavaScript for syntactical problems such as unprotected variables. It is a very strict tool, though, and not all of its warnings are actually deal-breakers. But testing with JSLint is the hallmark of a professional Web developer. You do want your code to play well with others.

6. How Dedicated Is The Maintainer?

When choosing a widget, you want to be very sure that the maintainer is dedicated to keeping it up to date and to fixing the script for future browsers and environments. This is rarely the case, and a lot of software is released with an “as is” statement, absolving the creator of any liability for problems it may cause now or in the future.

Software, especially the kind that is executed in the browser and for Web consumption, has to constantly evolve. Things that were once state of the art might be clumsy now. Some software turned out to perform poorly or be outright security holes.

Whenever people claim that we have a great baseline environment on the Web for screen space and processing power, something comes along that debunks it. Right now, testing on dual or quad-core processors with resolutions starting at 1280 might be normal for us designers, but given the sales figures of smartphones and netbooks, planning for audiences other than these high-end ones might be a good idea.

For developers, maintenance is the most boring task. When we release awesome widgets to the world, we don’t want to think about that phase of software delivery. Granted, most widgets are released as open source, but sadly, not many developers fix or improve on other people’s work; building and releasing something almost identical but slightly modified is much more fun.

As the user of someone else’s widget, you don’t want this to fly back in your face, so you need to see just how dedicated the developer is. A few questions to ask are:

  • Is there a simple way to report bugs?
  • Is there trail of improvements and bug fixes?
  • Is there a history of comments and changes to the widget based on that feedback?
  • Has the widget been used in real scenarios, large projects or implementations similar to yours? What were the experiences of those who used it?
  • Does the solution have a community (i.e. are there a few people on mailing lists or in forums helping each other out, rather than overloading the original developer)?

If the developer has no big personal stake in the widget or there is no group of developers or commercial users, then there is a high chance that you will see few or no fixes or improvements in future, and you will be responsible for supporting the next browser version that behaves badly.

7. Is There A Testing Plan, And Is Upgrading And Extending Easy?

One last thing to consider is what will happen in future. Claims that the widget will “work in every environment” are bogus because that cannot be done. The great power of the Web is that software solutions can adapt to the environment they are being used in. If you use Netscape 4, you should see a few images; if you use the newest Webkit browser, you should see a fancy image carousel with animation and fading; that sort of thing.

A good widget will have a proven test report covering which browsers and environments it has been tested in and what the known issues are. There will always be issues, and claiming otherwise is arrogant or ignorant.

Upgrading your widget should be easy and painless, and there should be some versioning in place, with new versions being backwards-compatible.

Extending the widget should be easy. We spoke earlier about not being limited to a particular number of items or a certain look and feel. But if you really use a widget, you will find you have to override certain functionality and react to various changes. Good widgets either have an API (a programming interface to extend it) or fire custom events for you to listen to. Custom events are “interesting moments” in a user’s interaction with the widget. For example, a button will tell the script when you have activated it, and if you write the widget a certain way, you can tell the world (or in this case, other scripts) when something happens to it. You can notify that a container has been opened, that data has returned from the Web or that a menu was too large to be displayed to the right and had to be moved to the left.

Widgets built with the Yahoo User Interface library, for example, come href="http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#events">with a lot of custom events:

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/litmus-events.jpg" alt="Litmus-events in Find The Right JavaScript Solution With A 7-Step Test" /> /> This allows you to monitor what is going on (like for debugging purposes) and extend functionality. The href="http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr_log.html">demo page for the AutoComplete control, for example, displays in a logging console on the right what happens “under the hood” when you use the auto-complete field.

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/litmus-events-logging.jpg" alt="Litmus-events-logging in Find The Right JavaScript Solution With A 7-Step Test" /> /> By subscribing to these events in JavaScript, overriding the original functionality for something new is pretty easy; in this case, we have an href="http://developer.yahoo.com/yui/examples/autocomplete/ac_flickr_xml.html">auto-complete that returns photos and allows you to collect them.

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/litmus-event-override.jpg" alt="Litmus-event-override in Find The Right JavaScript Solution With A 7-Step Test" /> /> Custom events are a great way to extend a widget while keeping the core code easy to upgrade.

One Final Word On Size

One last thing to mention: some widget developers use a certain argument to advocate for their solution but which is totally irrelevant to your decision, and that is size.

Advertising-speak like “A drop-down menu in 20 lines of JavaScript” or “A full featured lightbox in under 2 KB” is fun and good for the developer’s ego, but in reality it is no measure of the quality of the solution. While you should avoid JavaScript solutions that are massive (let’s say 100 KB), code that has been written to be very generic and easy to extend will always be bigger than code that has been written to serve a single purpose. Any widget whose size is proudly trumpeted and is meant to be used by people who are not as good at developing as the initial owner will get bigger over time anyway. Developers like to play the numbers game, but maintainable code is different than extreme number-crunching.

And if you get your kicks from this sort of thing, try the demo scene in which Farbrausch proved with href="http://www.pouet.net/prod.php?which=1221">The Product in 2000 that you can fit a seven-minute animation with music and synthesized voices into 64 KB.

(al)

/>

© Christian Heilmann for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/01/21/find-the-right-javascript-solution-with-a-7-step-test/">Permalink | href="http://www.smashingmagazine.com/2010/01/21/find-the-right-javascript-solution-with-a-7-step-test/#comments">24 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/01/21/find-the-right-javascript-solution-with-a-7-step-test/&title=Find%20The%20Right%20JavaScript%20Solution%20With%20A%207-Step%20Test">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/01/21/find-the-right-javascript-solution-with-a-7-step-test/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/01/21/find-the-right-javascript-solution-with-a-7-step-test/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Find%20The%20Right%20JavaScript%20Solution%20With%20A%207-Step%20Test'%20http://www.smashingmagazine.com/2010/01/21/find-the-right-javascript-solution-with-a-7-step-test/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/01/21/find-the-right-javascript-solution-with-a-7-step-test/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/javascript/" rel="tag">javascript

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 
0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 

45 Powerful CSS/JavaScript-Techniques

On January 12, 2010, In SEO, Web Design Tips, by Smashing Editorial

  

CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.

Building the New Visual Annotations

In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.

Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in 45 Powerful CSS/JavaScript-Techniques" 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 45 Powerful CSS/JavaScript-Techniques" />  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 45 Powerful CSS/JavaScript-Techniques" />  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 45 Powerful CSS/JavaScript-Techniques" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in 45 Powerful CSS/JavaScript-Techniques" border="0" width="1" height="1" />

CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.

In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.

Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don’t forget to href="http://rss1.smashingmagazine.com/feed/">subscribe to our RSS-feed and href="http://twitter.com/smashingmag">follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

We are aware that many readers are tired of “lists” floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful.

By the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1252__zoneid=0__cb=c3f655874b__oadest=http%3A%2F%2Ftwitter.com%2Fsmashingmag">follow us on Twitter.

Interesting CSS Techniques

href="http://www.zurb.com/article/304/behind-the-scenes-building-the-new-visual">Building the New Visual Annotations />These note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. A very interesting, yet simple technique by the ZURB Design Agency, designers who have written a href="http://www.smashingmagazine.com/author/dmitry-dragilev/">series of articles on Smashing Magazine as well.

class="showcase"> href="http://www.zurb.com/article/304/behind-the-scenes-building-the-new-visual"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/annotation.jpg" width="480" height="300" alt="Annotation in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/">Sexy Music Album Overlays />This aticle shows how to style your music streams and provides you some graphics to do so.

class="showcase"> href="http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-112.jpg" width="480" height="300" alt="Css-112 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://tutorialzine.com/2009/12/colorful-clock-jquery-css/">A Colorful Clock With CSS & jQuery />This tutorial describes how one can create a clock using basic CSS and JavaScript.

class="showcase"> href="http://tutorialzine.com/2009/12/colorful-clock-jquery-css/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-086.jpg" width="480" height="300" alt="Css-086 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.pvmgarage.com/en/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/">How To Create Depth And Nice 3D Ribbons Only Using CSS3 />We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

class="showcase"> href="http://www.pvmgarage.com/en/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-197.jpg" width="480" height="300" alt="Css-197 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/">Advanced Event Timeline With PHP, CSS & jQuery />This Advanced Event Timeline is used with the help of PHP, MySQL, CSS and jQuery. The result: a nice time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.

class="showcase"> href="http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-195.jpg" width="480" height="300" alt="Css-195 in 45 Powerful CSS/JavaScript-Techniques" />

CSS Navigation Menus

href="http://www.romancortes.com/blog/css-3d-meninas/">CSS 3D Meninas />“I’ve took the classic paint The Maids of Honour (Las Meninas) and created a CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash is involved. It has been tested and is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates, too.

class="showcase"> href="http://www.romancortes.com/blog/css-3d-meninas/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-006.jpg" width="480" height="300" alt="Css-006 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/">Sproing! – Make An Elastic Thumbnail Menu />“In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu. It magnifies menu items when they are hovered over and menu items expand upwards.

class="showcase"> href="http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-063.jpg" width="480" height="300" alt="Css-063 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na">How to Create Simple and Effective Sub Navs with Definition Lists />“When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a fast, lightweight method for how we’ll use CSS to do it.”

class="showcase"> href="http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-072.jpg" width="480" height="300" alt="Css-072 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://designm.ag/tutorials/sticky-sidenav-layout/">Sticky SideNav Layout with CSS />Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

class="showcase"> href="http://designm.ag/tutorials/sticky-sidenav-layout/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-056.jpg" width="480" height="300" alt="Css-056 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://css-tricks.com/unobtrusive-page-changer/">Unobtrusive Dropdown Page Changer />Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out there for creating a menu like this are this way. Bummer. Let’s make one that works with or without JavaScript.

class="showcase"> href="http://css-tricks.com/unobtrusive-page-changer/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-015.jpg" width="480" height="300" alt="Css-015 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://kntl.org/css-imageless-but-cool-javascript-and-jquery">CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip />CSS-based navigation / pagination bar without JavaScript. There is a tooltip on hover for the ‘previous’ and ‘next’ page’s bullets that makes navigation easier.

class="showcase"> href="http://kntl.org/css-imageless-but-cool-javascript-and-jquery"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-170.jpg" width="480" height="300" alt="Css-170 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.code-pal.com/how-to-code-an-overlapping-tabbed-main-menu/">How to Code an Overlapping Tabbed Main Menu />Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.

class="showcase"> href="http://www.code-pal.com/how-to-code-an-overlapping-tabbed-main-menu/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-187.jpg" width="480" height="300" alt="Css-187 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://css-tricks.com/long-dropdowns-solution/">Solution For Very Long Dropdown Menus />“I like to be confident with post titles, but the reality in this case is a possible solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).”

class="showcase"> href="http://css-tricks.com/long-dropdowns-solution/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-052.jpg" width="480" height="300" alt="Css-052 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/">Mega Drop Down Menu w/ CSS & jQuery />When used properly, mega drop down menus can be quite efficient for large scale websites. Let’s experiment with different ways of implementing this technique. A tutorial by Soh Tanaka, Smashing Magazine’s regular author.

class="showcase"> href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-053.jpg" width="480" height="300" alt="Css-053 in 45 Powerful CSS/JavaScript-Techniques" />

CSS Typography and Body Copy

href="http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css">How to Create a Cool Anaglyphic Text Effect with CSS />Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

class="showcase"> href="http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-193.jpg" width="480" height="300" alt="Css-193 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://csswizardry.com/2009/12/typographic-work-planner/">Typographic work planner />Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.

class="showcase"> href="http://csswizardry.com/2009/12/typographic-work-planner/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-199.jpg" width="480" height="300" alt="Css-199 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/">Thinning Text in Webkit (Safari) />Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, there is an alternative.

class="showcase"> href="http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-196.jpg" width="480" height="300" alt="Css-196 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://jackosborne.co.uk/articles/pseudo-drop-caps/">Pseudo Drop Caps />They’ve been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you’re now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven’t used text-indent. If you decided to go down on the inline style route then your are just bad, just very bad.

class="showcase"> href="http://jackosborne.co.uk/articles/pseudo-drop-caps/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-081.jpg" width="480" height="300" alt="Css-081 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://perishablepress.com/press/2009/11/09/perfect-pre-tags/">How to Create Perfect Pre Tags />If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the &tl;pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. This article explains everything you need to create proper <pre> tags.

class="showcase"> href="http://perishablepress.com/press/2009/11/09/perfect-pre-tags/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-090.jpg" width="480" height="300" alt="Css-090 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://forabeautifulweb.com/blog/about/improve_your_web_typography_with_baseline_shift/">Improve your web typography with baseline shift />The baseline is an invisible line onto which all type characters sit, although of course some characters (including ‘j’, ‘p’, ‘g’ and ‘y’) have descenders that hang below the baseline. Baseline shift involves moving characters up or down in relation to the baseline and using it effectively can make a huge difference to the professional look of your type. Although baseline shift has traditionally been a part of using tools like InDesign or Quark, there are ways to accomplish the same results using CSS.

class="showcase"> href="http://forabeautifulweb.com/blog/about/improve_your_web_typography_with_baseline_shift/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-109.jpg" width="480" height="300" alt="Css-109 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://lamb.cc/typograph/">Typograph – Scale & Rhythm />This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

class="showcase"> href="http://lamb.cc/typograph/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-085.jpg" width="480" height="300" alt="Css-085 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://tutorialzine.com/2009/11/fancy-quotes/">Fancy Quotes With jQuery, AJAX & CSS />Learn how to create a fancy quote rating system that will display a number of famous quotes and will enable site visitors to rate their favorites.

class="showcase"> href="http://tutorialzine.com/2009/11/fancy-quotes/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-156.jpg" width="480" height="300" alt="Css-156 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.cssnewbie.com/how-to-create-simple-stylish-and-swappable-image-captions/">How To Create Simple, Stylish and Swappable Image Captions />Most image caption solutions require a lot of excessive HTML, make it difficult to redesign or don’t communicate clearly that they belong to an image. Let’s see what we can do to address these problems.

class="showcase"> href="http://www.cssnewbie.com/how-to-create-simple-stylish-and-swappable-image-captions/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-189.jpg" width="480" height="300" alt="Css-189 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.devlounge.net/design/styling-photo-captions-with-css">Styling photo captions with CSS />Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS.

class="showcase"> href="http://www.devlounge.net/design/styling-photo-captions-with-css"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-183.jpg" width="480" height="300" alt="Css-183 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.cs.tut.fi/~jkorpela/www/captions.html">Image captions on Web pages />This document suggests three ways of presenting an image with a caption in HTML. Styling in CSS is also discussed.

class="showcase"> href="http://www.cs.tut.fi/~jkorpela/www/captions.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-176.jpg" width="480" height="300" alt="Css-176 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.sohtanaka.com/web-design/styling-post-headings-that-stick-out/">Styling Post Headings That Stick Out />“Recently, I’ve noticed a trend in blog post headings where it sticks out of its base layout. I would like to share this technique for those who would like to give their post headings a new style. One tip to keep in mind when designing this is to make sure it fits your target audience screen resolution size. Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects.”

href="http://www.electrictoolbox.com/ellipsis-html-css/">Using ellipsis with HTML and CSS />If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there’s more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn’t work for Firefox but there’s a workaround that can be done with jQuery.

href="http://www.jcargoo.org/2009/11/5-message-boxes-to-style-your.html">5 Message Boxes to Style your Notifications with CSS />This article presents free notification boxes to use/customize as well as a very simple technique to create your own ones inspired from this roundup.

CSS Lists

href="http://www.cssnewbie.com/word-style-outline/">Create a Microsoft Word-Style Outline with CSS />As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!

class="showcase"> href="http://www.cssnewbie.com/word-style-outline/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-188.jpg" width="480" height="300" alt="Css-188 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://mattbango.com/notebook/web-development/pure-css-timeline/">Pure CSS Timeline />“I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline.”

class="showcase"> href="http://mattbango.com/notebook/web-development/pure-css-timeline/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-106.jpg" width="480" height="300" alt="Css-106 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/">Automatic numbering with CSS Counters />When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. One word of note before we start is that CSS counters are not yet implemented in IE, although they are on the roadmap for IE8.

class="showcase"> href="http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-116.jpg" width="480" height="300" alt="Css-116 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.macworld.com/article/48296/2005/12/januarycreate.html">CSS tricks for custom bullets

class="showcase"> href="http://www.macworld.com/article/48296/2005/12/januarycreate.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-129.jpg" width="480" height="300" alt="Css-129 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://css-tricks.com/elastic-calendar-styling-with-pure-css/">Elastic Calendar Styling with CSS />A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit. /> You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. What is a calender, if not an ordered list of days? By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

class="showcase"> href="http://css-tricks.com/elastic-calendar-styling-with-pure-css/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-030.jpg" width="480" height="300" alt="Css-030 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://css-tricks.com/style-a-list-with-one-pixel/">Style a List with One Pixel />A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.

class="showcase"> href="http://css-tricks.com/style-a-list-with-one-pixel/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-017.jpg" width="480" height="300" alt="Css-017 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/">Style Your Ordered List />By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

class="showcase"> href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-029.jpg" width="480" height="300" alt="Css-029 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://blog.innovativethought.net/2007/06/11/simulating-a-table-using-an-unordered-list/">Simulating a Table Using an Unordered List />Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.

class="showcase"> href="http://blog.innovativethought.net/2007/06/11/simulating-a-table-using-an-unordered-list/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-031.jpg" width="480" height="300" alt="Css-031 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html">8 different ways to beautifully style your HTML lists with CSS />“The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we’re going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We’ll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).”

class="showcase"> href="http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-042.jpg" width="480" height="300" alt="Css-042 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://buildinternet.com/2009/09/quick-tip-simplify-list-margins-with-css/">Quick Tip – Simplify List Margins with CSS />Have you ever set default margins for a layout, and then had to go back and manually adjust all of your lists? By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else. Wouldn’t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, there’s a style to help do just that. Let’s see what can be done with the list-style-position property.

class="showcase"> href="http://buildinternet.com/2009/09/quick-tip-simplify-list-margins-with-css/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-068.jpg" width="480" height="300" alt="Css-068 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://perishablepress.com/press/2009/08/16/sexy-html-list-tricks/">Sexy HTML List Tricks />Behold the ubiquitous list elements, <ul> and <ol>. These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable.

class="showcase"> href="http://perishablepress.com/press/2009/08/16/sexy-html-list-tricks/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-091.jpg" width="480" height="300" alt="Css-091 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://iloveusability.com/usability-tip/clickable-list-item/">Clickable <li> />I originally coded the markup to be a table, but discovered a problem when I tried to make the whole row clickable. I ended up with a list of articles instead.

class="showcase"> href="http://iloveusability.com/usability-tip/clickable-list-item/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-061.jpg" width="480" height="300" alt="Css-061 in 45 Powerful CSS/JavaScript-Techniques" />

CSS Buttons

href="http://www.p51labs.com/simply-buttons-v2/">Simply-Buttons v2 />This technique presents buttons of the size that always fits the content. There are 3 states: inactive, active and hover. The technique works in all major browsers and doesn’t require JavaScript.

class="showcase"> href="http://www.p51labs.com/simply-buttons-v2/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-099.jpg" width="480" height="300" alt="Css-099 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">How to make sexy buttons with CSS />This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

class="showcase"> href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-173.jpg" width="480" height="300" alt="Css-173 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/">Liquid & Color Adjustable CSS Buttons />When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.

class="showcase"> href="http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-175.jpg" width="480" height="300" alt="Css-175 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/">Create a Button with Hover and Active States using CSS Sprites />Too many designers neglect the click state (active-property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.

class="showcase"> href="http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-159.jpg" width="480" height="300" alt="Css-159 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://stopdesign.com/archive/2009/02/04/recreating-the-button.html">Recreating the button />“I thought it would be interesting to provide a portion of the background on buttons here, and discuss some of the iterations we’ve been through so far to get to the current state.”

class="showcase"> href="http://stopdesign.com/archive/2009/02/04/recreating-the-button.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-134.jpg" width="480" height="300" alt="Css-134 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://aplus.rs/css/rounded-form-buttons/">Rounded form buttons

class="showcase"> href="http://aplus.rs/css/rounded-form-buttons/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/css-101.jpg" width="480" height="300" alt="Css-101 in 45 Powerful CSS/JavaScript-Techniques" />

href="http://stackoverflow.com/questions/520640/how-can-i-use-googles-new-imageless-button-how-could-i-reverse-engineer-or-rol">Google’s Imageless Buttons />An interesting discussion about various buttons design techniques to reconstruct Google’s imageless buttons.

Stay tuned!

This is the first part of our large round-up of fresh CSS/JavaScript-techniques. Don’t forget to href="http://rss1.smashingmagazine.com/feed/">subscribe to our RSS-feed and href="http://twitter.com/smashingmag">follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

/>

© Smashing Editorial for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/">Permalink | href="http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/#comments">64 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/&title=45%20Powerful%20CSS/JavaScript-Techniques">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'45%20Powerful%20CSS/JavaScript-Techniques'%20http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/css/" rel="tag">CSS, href="http://www.smashingmagazine.com/tag/javascript/" rel="tag">javascript, href="http://www.smashingmagazine.com/tag/js/" rel="tag">js

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 

The Case Against Vertical Navigation

On January 11, 2010, In SEO, Web Design Tips, by Louis Lazaris

  

In a recent article about unusable and superficial beer and alcohol websites, I made the claim that using left-hand vertical navigation is an out-of-date method in modern web design. In the comments, a few people wondered why I said this. I was surprised that it got any attention at all, because it was a brief comment in the article, and didn’t constitute a substantial part of the argument I had put forth. Nonetheless, I decided to write an article describing what I feel is a solid case against using vertical navigation in modern web design.

Poli Maraton

Naturally there are exceptions to every rule, and I’ll discuss those briefly at the end. But first I’m going to present five reasons why vertical navigation should not be used and why designers and architects should almost always construct their sites with horizontal navigation in mind.

It should be noted here that when I refer to “vertical navigation”, I’m talking about the top-level, primary means of navigating a website. This would not include left or right sidebars that have secondary links and call-to-action areas that are perfectly acceptable in many circumstances.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in The Case Against Vertical Navigation" 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 Case Against Vertical Navigation" />  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 Case Against Vertical Navigation" />  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 Case Against Vertical Navigation" />

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 Case Against Vertical Navigation" border="0" width="1" height="1" />

In a recent article about href="http://www.smashingmagazine.com/2009/12/07/the-unusable-and-superficial-world-of-beer-and-alcohol-websites">unusable and superficial beer and alcohol websites, I made the claim that using left-hand vertical navigation is an out-of-date method in modern web design. In the comments, a few people wondered why I said this. I was surprised that it got any attention at all, because it was a brief comment in the article, and didn’t constitute a substantial part of the argument I had put forth. Nonetheless, I decided to write an article describing what I feel is a solid case against using vertical navigation in modern web design.

Naturally there are exceptions to every rule, and I’ll discuss those briefly at the end. But first I’m going to present five reasons why vertical navigation should not be used and why designers and architects should almost always construct their sites with horizontal navigation in mind.

It should be noted here that when I refer to “vertical navigation”, I’m talking about the top-level, primary means of navigating a website. This would not include left or right sidebars that have secondary links and call-to-action areas that are perfectly acceptable in many circumstances.

It Discourages Information Architecture

Approximately eight to ten years ago when vertical navigation bars were much more prevalent, websites were created using a fairly simple process: The client gave the designer x number of pages, with page titles and content for each. The designer created a one-level-deep website with all pages linked to from the home page. In many cases, the only way to accommodate such a structure would be by means of a left-hand vertical navigation bar. Below is an example of a site created in that manner.

href="http://www.thoraplastics.com/">Thora Industrial Plastics

href="http://www.thoraplastics.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/thora.jpg" alt="Thora in The Case Against Vertical Navigation" width="500" height="371" />

Believe it or not, I designed the Thora website in the spring of 2001. It was one of the first sites I ever designed, and it hasn’t changed since — aside from a few small text updates. It was created using the exact method I described above, without any thought given to the purpose of the site, potential goals, or other architecture-related factors. Looking at the site now, it’s not really clear what this company does. Are they manufacturers? Are they a repair facility?

Only after reading some of the content on the site do we see that they manufacture, install, repair and otherwise service various types of industrial equipment. But those facts could have been communicated more clearly by including a simpler navigation bar with links like “Manufacturing”, “Repair”, and “Installation” — instead of the overly-specific “Wet Process Systems”, “Tanks”, and “Air Management”. This would then allow for a more aesthetically-pleasing horizontal bar that would serve to facilitate a more organized structure that’s not just one level deep.

Design Should be Based on Careful Content Analysis

Today’s web professionals have recognized the need for proper information architecture. Thus, before design work begins, a site’s content should be carefully analyzed so that the resulting design will produce a logical hierarchical structure that is readable, usable, and helps maximize conversions and click-through rates.

Jeffrey Zeldman href="http://twitter.com/zeldman/statuses/804159148">on content analysis before design.

href="http://twitter.com/zeldman/statuses/804159148"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/zeldman.jpg" alt="Zeldman in The Case Against Vertical Navigation" width="500" height="307" />

A site that uses a left-hand vertical navigation bar doesn’t require site architecture or related usability analysis because, as mentioned, sites built in that manner will often lack depth and fail to make their purpose clear.

The specifics and ramifications of advanced information architecture are certainly beyond the scope of this article, but advanced knowledge in such areas is not necessary in order to recognize the drawbacks and limitations posed by vertical navigation. A basic understanding of what makes a website successful in today’s market is all that’s needed in order to see the advantages of a simple, clear, and usable horizontal navigation bar.

It Wastes Prime Screen Real Estate

As discussed in the previous section, design in today’s market needs to be based on strong information architecture. The navigation paths taken by users should have clearly defined goals and outcomes. A vertical navigation bar that sits to the left of a page’s content on every screen wastes valuable space that could be used for more important things. Yes, it’s true that you want navigation to be easy to find, but you also don’t want navigation to unnecessarily crowd the left side of the page, which href="http://www.useit.com/eyetracking/">studies have shown will draw a user’s eyes more often.

In an online world where content is king, we don’t want our users to be fixated on pretty navigation bars — unless they’re navigating. But once they have started to navigate, we want their attention drawn to call-to-action areas and to primary content that will help them accomplish their goal on the website and help us make conversions.

Recognizing its Limitations

Examine the design and style of many of the sites showcased in CSS galleries, and you’ll notice a strong trend towards simplified horizontal navigation while allowing content areas to have strong visual focus. Below are a few screenshots from sites that would be drastically different if they had not designed their site based on horizontal navigation.

href="http://www.wakesomebodyup.com/">Dan Conaway

href="http://www.wakesomebodyup.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/wakeup.jpg" alt="Wakeup in The Case Against Vertical Navigation" width="500" height="424" />

Although the Dan Conaway website (above) has a few usability issues, the use of a horizontal navigation bar allows focus to be placed on the page’s content area and on the call-to-action sections (”Recent Projects”, “Consulting”, and “Ranting”). On this site, the user is drawn to these larger elements, while still being able to find the primary navigation bar at the top of the page.

href="http://webdesignguys.net/">WebDesignGuys

href="http://webdesignguys.net/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/webdesignguys.jpg" alt="Webdesignguys in The Case Against Vertical Navigation" width="500" height="405" />

The WebDesignGuys website (above) puts strong visual focus on the most important aspects of their business — their products and services. Immediately the user is visually and textually informed that this company provides affordable design, CMS and E-Commerce development.

Meanwhile, functions like browsing their portfolio or contacting them are available through the simple and non-obtrusive horizontal navigation bar at the top of the page. How would this site’s architecture and design be affected if they had opted for vertical navigation?

It Doesn’t Conform to Real-Life Reading

This is a problem related to the previous section on visual focus, and is probably debatable. There aren’t many areas in life where a person is asked to read something that has a “left hand menu” that resembles what we find on websites that feature vertical navigation. In general, people are accustomed to reading content that spans the entire width of the reading area, or else is broken up into boxes or columns within the reading area. In either case, the content is vertically sandwiched between a header and footer. Books and magazines are a good example of this.

href="http://www.flickr.com/photos/mikeweader/3010747256/">Magazine Spread on Flickr by mikeweader

href="http://www.flickr.com/photos/mikeweader/3010747256/"> src="http://farm4.static.flickr.com/3203/3010747256_b74ddf8fe2.jpg" alt="3010747256 B74ddf8fe2 in The Case Against Vertical Navigation" width="500" height="325" />

The magazine spread shown above displays its main content and photos between a simple header (”book review”) and footer (page numbering, etc). Although print design and layout are significantly different from that of web, modern web design and layout techniques are increasingly utilizing principles found in print design. The concept of a “header” and “footer” is simply a natural part of that current tendency.

Readers Aren’t Used to a Left-Side Menu

This header-footer tendency is a way of conforming to the user’s desire to read a web page in a familiar magazine format, rather than in a bizarre format that places a common distracting element on the left side of the page (i.e. vertical navigation).

Don’t misunderstand what I’m saying here. I’m not saying that a site will be more usable if it follows print magazine layout methods, nor am I necessarily advocating the recent href="http://www.smashingmagazine.com/the-death-of-the-blog-post/">blogazine trend; I’m saying that the vertical navigation bar is an unusual and unique element in web design that doesn’t conform to anything in the real world outside of the web, and thus can be a hindrance to a site’s usability.

Of course, as I pointed out, this issue is debatable. But I strongly feel that the current tendency towards horizontal navigation is partly due to the realization of many web designers and site architects that stronger focus on content will help create more readable and usable web pages.

Fly-Outs Aren’t as Usable as Drop-Downs

In whatever direction your navigation points, any sub-menus that you include in your navigation will point in the other direction. That is, if you opt for horizontal navigation, sub-menus will drop vertically, and style="white-space: nowrap;">vice-versa. Sub-menus are generally more usable as drop-downs than they are as fly-outs, the latter of which would occur in a vertical navigation bar.

href="http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/">Vertical Navigation Example with Fly-Out Menus

href="http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/flyouts.jpg" alt="Flyouts in The Case Against Vertical Navigation" width="500" height="193" />

href="http://www.brothercake.com/dropdown/">Horizontal Navigation Example with Drop-Down Menus

href="http://www.brothercake.com/dropdown/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/dropdowns.jpg" alt="Dropdowns in The Case Against Vertical Navigation" width="500" height="261" />

A site visitor’s natural tendency is to find common navigation elements near the top, and if there are sub-menus, they would drop down. Drop-down menus are more natural to use, are more common (therefore are easier to figure out), and do not clutter the middle-left side of the page where the user’s eyes are more likely to be focused.

Drop-Down and Fly-Out Indicators

Also, a properly designed sub-menu system will include a visual indicator of the sub-menus. For horizontal navigation, a downward-pointing arrow, or triangle, is the most common method, and a right-pointing triangle would be used for vertical. While the downward-pointing arrow for drop-downs is universally understood and generally does not provide many usability issues, the right-pointing arrow indicating fly-out menus is not be as easily understood.

A right-pointing arrow on a website does not usually identify fly-outs. In fact, a right-pointing arrow is often used for call-to-action buttons, sliding content areas, and external links. Look at the screen shot below from CNN’s website:

href="http://www.cnn.com/">CNN’s External Site Indicators

href="http://www.cnn.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/cnn.jpg" alt="Cnn in The Case Against Vertical Navigation" width="500" height="123" />

The “money” and “sports” links in CNN’s horizontal navigation bar (above) have small triangles pointing to the right, which I’ve indicated with blue arrows and circles. These triangles are evidently placed to tell us that those links point to differently-branded sections of CNN.com, indicating that these links are not directly related to CNN.

If these links were in a left-hand vertical navigation bar, the user would most likely think they pointed to fly-out menus — which would cause confusion when the fly-outs didn’t work. I think a href="http://en.wikipedia.org/skins-1.5/monobook/external.png">Wikipedia-style external link indicator would be better in either case, but the method chosen by CNN works better in a horizontal bar because no one is expecting a fly-out menu in a horizontal bar.

What does this all mean? If a site is ever going to incorporate sub-menus into its navigation, a vertical menu might cause momentary confusion, whereas horizontal navigation would provide a smoother user experience.

It’s Not as Successful, According to Studies

In a study called href="http://www.poynterextra.org/eyetrack2004/main.htm">Eyetrack III: What We Saw When We Looked Through Their Eyes, results showed that top navigation performed better than left-side navigation. Interestingly, according to the results, even right-side navigation had better success than left navigation.

Below is a quote from the published report on the study:

“While testing several homepage designs, we varied the placement of a navigation element: top (under the flag or logo), left column, and right column.

“Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.”

Left-Side Navigation Virtually Ignored

Related to this are the studies that have demonstrated the “F-Shaped” pattern for reading web content, shown below.

href="http://www.useit.com/alertbox/reading_pattern.html">F-Shaped Pattern for Reading Web Content

href="http://www.useit.com/alertbox/reading_pattern.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/eyetracking.jpg" alt="Eyetracking in The Case Against Vertical Navigation" width="500" height="222" />

Even though two of the screenshots above show sites that have left-hand navigation, those elements on the pages did not draw the users’ eyes as often. In fact, the top sections of the pages were more successful in drawing the eyes than were the left sidebars. Therefore, expanding the content area to fill the left side of the screen is usually a better approach, since the user’s eyes aren’t going to bother with the navigation bar anyways.

The Few Benefits Are Negligible

Those who would argue in favour of vertical navigation (or at least put it on equal ground with horizontal), usually argue for reasons that are not very strong. One reason to vouch for vertical navigation is that it allows the use of longer link names, even allowing the text for a single link to span multiple lines. So, you could have short link names like “Home”, “About”, and “Contact” as well as long ones like href="http://www.thoraplastics.com/wet.html">Wet Process Systems and href="http://en.wikipedia.org/wiki/Elderly_Woman_Behind_the_Counter_in_a_Small_Town">Elderly Woman Behind the Counter in a Small Town. Those last two would be difficult, if not impossible, to attempt to incorporate into horizontal navigation, but are quite feasible in vertical.

Another reason vertical navigation might be chosen is that it simplifies the ability to update primary navigation links. In other words, if you have a horizontal navigation bar with five primary links spanning the width of the site, you would have to restructure the entire navigation bar in order to add a new link. On the other hand, with vertical navigation, adding a new link is quite simple.

The mock images shown below illustrate this apparent benefit to vertical navigation:

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/horizontal-shop.jpg" alt="Horizontal-shop in The Case Against Vertical Navigation" width="500" height="453" />

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/vertical-shop.jpg" alt="Vertical-shop in The Case Against Vertical Navigation" width="500" height="412" />

The truth is, those two benefits (namely, the flexibility to use longer link names, and the ability to easily increase the number of primary links) may be indicators that a site lacks purpose, is poorly organized, and was designed without much thought given to content or site goals. Boasting about the maintainability of a vertical navigation bar is not a valid benefit if it is accompanied by a vague purpose and poor structure.

In most cases, the long-term benefits of using horizontal navigation will largely outweigh the potential benefits of vertical, making such benefits easy to disregard.

Exceptions to the Rule

If this article constitutes a “rule” that you should never use vertical navigation, then some exceptions to that rule would potentially be:

  • An information-heavy site that will often require changes to the primary links
  • A site whose primary links must have long names
  • A site that uses both horizontal and vertical navigation
  • An e-commerce site with a vertical display of product categories and sub-categories
  • A minimalist design
  • A client who insists on it

There may be other compelling reasons to use vertical navigation, possibly related to design choices or space limitations in the top section of the site, but they would be rare instances.

Of course, the fact that I’ve listed 6 reasons why vertical navigation could be justified doesn’t mean it necessarily should be used in all of those circumstances. In most of those cases, horizontal navigation could still provide a viable solution if the navigation section is designed and coded with flexibility in mind, and if drop-down menus (or even href="http://www.useit.com/alertbox/mega-dropdown-menus.html">mega drop-down menus) are incorporated.

Effective Use of Vertical Navigation

As discussed, there will be situations where vertical navigation will be chosen — and it has been used nicely on a lot of current websites. Below is a showcase of some sites that utilize a form of vertical navigation in a respectable way. Most, if not all, of these sites fall under one of the “exceptions” mentioned in the previous section, while they ensure that content has primary focus in the user experience.

href="http://www.porsche.com/usa/">Porsche

href="http://www.porsche.com/usa/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/porsche.jpg" alt="Porsche in The Case Against Vertical Navigation" width="500" height="286" />

href="http://www.yourauxiliary.com/">Auxiliary Design Co.

href="http://www.yourauxiliary.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/auxiliary.jpg" alt="Auxiliary in The Case Against Vertical Navigation" width="500" height="333" />

href="http://www.sensis-studio.com/">Sensis

href="http://www.sensis-studio.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/sensis.jpg" alt="Sensis in The Case Against Vertical Navigation" width="500" height="375" />

href="http://www.polimaraton.si/">Poli Maraton

href="http://www.polimaraton.si/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/poli.jpg" alt="Poli in The Case Against Vertical Navigation" width="500" height="378" />

href="http://rede316.com/">Resource Design [rede]

href="http://rede316.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/rede.jpg" alt="Rede in The Case Against Vertical Navigation" width="500" height="347" />

href="http://www.chapters.indigo.ca/">Chapters Indigo Books

href="http://www.chapters.indigo.ca/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/chapters.jpg" alt="Chapters in The Case Against Vertical Navigation" width="500" height="354" />

href="http://www.shophouseofspy.com/">House of Spy

href="http://www.shophouseofspy.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/spy.jpg" alt="Spy in The Case Against Vertical Navigation" width="500" height="386" />

href="http://buy.jodiarnold.info/">Jodi Arnold

href="http://buy.jodiarnold.info/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/jodi.jpg" alt="Jodi in The Case Against Vertical Navigation" width="500" height="285" />

href="http://www.mytheresa.com/">mytheresa.com

href="http://www.mytheresa.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/mytheresa.jpg" alt="Mytheresa in The Case Against Vertical Navigation" width="500" height="360" />

href="http://www.from-the-couch.com/">From The Couch

href="http://www.from-the-couch.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/couch.jpg" alt="Couch in The Case Against Vertical Navigation" width="500" height="431" />

href="http://enviramedia.com/">Envira Media Inc.

href="http://enviramedia.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/envira.jpg" alt="Envira in The Case Against Vertical Navigation" width="500" height="421" />

Conclusion

Zeldman said it best: “Content Precedes Design”. If site architects and designers keep that formula in mind, they will have a greater chance of producing a successful user experience.

Often when a website is redesigned, the switch will be made from vertical to horizontal navigation, but rarely does it occur the other way around.

In fact, designers and architects are increasingly creating user experiences focused so strongly on content that navigation starts to become indistinguishable from content. This type of seamless experience is more effectively created when a horizontal navigation bar is used because horizontal navigation does not intrude on the content area and it’s still easily accessible visually and otherwise.

More often than not, a horizontal navigation bar will be a clean, effective, and user-friendly choice that can help a site reach its goals without hindrance to the user experience.

Further Reading

  • href="http://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/">Horizontal Navigation Menus: Trends, Patterns, and Best Practices
  • href="http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/">The Challenges of Moving to Horizontal Navigation
  • href="http://www.welie.com/patterns/showPattern.php?patternID=main-navigation">Interaction Design Pattern Library: Main Navigation

By the way…

Smashing Magazine is href="http://www.smashingmagazine.com/student-trainee-position-in-smashing-magazine-s-office/">offering a student trainee position in Smashing Magazine’s Office in Freiburg, Germany. We are looking for a motivated trainee student who wants to learn about online publishing and editorial work. You can gather a first hand experience from one of the most successful blogs by working side by side with the Smashing Magazine’s editorial team. href="http://www.smashingmagazine.com/student-trainee-position-in-smashing-magazine-s-office/">Details.

And for our German readers: Smashing Magazine href="http://www.smashingmagazine.com/online-redakteur-m-w-gesucht/">sucht Unterstützung für die Redaktion — Stelle: (Online)-Redakteur m/w. href="http://www.smashingmagazine.com/online-redakteur-m-w-gesucht/">Details.

/>

© Louis Lazaris for href="http://www.smashingmagazine.com">Smashing Magazine, 2010. | href="http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/">Permalink | href="http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/#comments">128 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/&title=The%20Case%20Against%20Vertical%20Navigation">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'The%20Case%20Against%20Vertical%20Navigation'%20http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/navigation/" rel="tag">navigation

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 

Smashing Highlights 2009

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

  

2009 was a very successful year for Smashing Magazine. It was a year of ambitious goals and an intense time schedule, which brought many changes over the past year. In 2009 we published more posts than ever (on average, 8 posts per week). We broadened our areas of interest: for instance, we explored freelancing and the business side of web development, but also tackled user interface design and mobile web design. We also discovered new formats, such as the “Global Web Design” series and Q&A-Sessions — unfortunately, the latter (the Ask SM series with Chris Coyier) lasted only a couple of months.

A3 in 100 (Really) Beautiful iPhone Wallpapers Tt2 in 100 (Really) Beautiful iPhone Wallpapers

We have tried our best to improve the quality of our articles so as to increase their value for designers and developers. In this post, we’ll review what has happened on Smashing Magazine over the past year: smashing highlights, setbacks, and small sensations of 2009 — which we present in a month by month timeline. You can compare the highlights of 2009 with those of 2008 or 2007 (which, by the way, include links to some really useful articles).

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Smashing Highlights 2009" 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 Smashing Highlights 2009" />  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 Smashing Highlights 2009" />  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 Smashing Highlights 2009" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in Smashing Highlights 2009" border="0" width="1" height="1" />

2009 was a very successful year for Smashing Magazine. It was a year of ambitious goals and an intense time schedule, which brought many changes over the past year. In 2009 we published more posts than ever (on average, 8 posts per week). We broadened our areas of interest: for instance, we explored freelancing and the business side of web development, but also tackled user interface design and mobile web design. We also discovered new formats, such as the “Global Web Design” series and Q&A-Sessions — unfortunately, the latter (the Ask SM series with Chris Coyier) lasted only a couple of months.

src="http://media.smashingmagazine.com/cdn_smash/images/smashing-128.png" alt="Smashing-128 in Smashing Highlights 2009" width="128" height="128" />

None of this would have been possible without the tremendous support of our authors, contributors, and editorial staff. We express sincere gratitude to them for all the ideas and hard work they’ve put into articles published here on Smashing Magazine. We also want to thank you, the readers, for your attention, criticism, ideas, suggestions, emails, tweets, and links over the past year. Smashing Magazine is driven by your support which is why we are always listening to you and we truly appreciate every message we receive.

We have tried our best to improve the quality of our articles so as to increase their value for designers and developers. In this post, we’ll review what has happened on Smashing Magazine over the past year: smashing highlights, setbacks, and small sensations of 2009 — which we present in a month by month timeline. You can compare the highlights of 2009 with those of href="http://www.smashingmagazine.com/2008/12/22/smashing-highlights-2008/">2008 or href="http://www.smashingmagazine.com/2007/12/27/smashing-highlights-2007/">2007 (which, by the way, include links to some really useful articles).

January

The year starts with a rather lengthy post href="http://www.smashingmagazine.com/2009/01/06/100-really-beautiful-iphone-wallpapers/">100 (Really) Beautiful iPhone Wallpapers which actually doesn’t gain a lot of attention in January, but gains traffic significantly throughout the year. We start gathering material for this ultimate collection of iPhone wallpapers in early December and four writers help by selecting the most useful resources and the most beautiful wallpapers.

href="http://www.smashingmagazine.com/2009/01/06/100-really-beautiful-iphone-wallpapers/"> src="http://media.smashingmagazine.com/cdn_smash/images/iphone-wallpapers/a3.jpg" alt="A3 in Smashing Highlights 2009" width="250" height="375" /> href="http://www.smashingmagazine.com/2009/01/06/100-really-beautiful-iphone-wallpapers/"> src="http://media.smashingmagazine.com/cdn_smash/images/iphone-wallpapers/tt2.jpg" alt="Tt2 in Smashing Highlights 2009" width="250" height="375" />

By far the most popular article of the month is href="http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/">Web Design Trends For 2009. We carefully examine what’s happening on the web in 2008 and came up with a couple of trends that we think will appear in the web design landscape in 2009. Some of our predictions turn out to be correct. And yes, we’re already preparing a similar post for 2010.

href="http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/"> src="http://media.smashingmagazine.com/cdn_smash/images/web-design-trends-2009/letterpress6.jpg" alt="Letterpress6 in Smashing Highlights 2009" width="500" height="320" />

February

In February, Paul Boag reveals href="http://www.smashingmagazine.com/2009/02/10/10-harsh-truths-about-corporate-websites/">10 Harsh Truths About Corporate Websites. His article seems to speak from the heart of thousands of designers and developers. The article gets positive feedback and we even receive tweets from two corporate site owners who agree to keep the key points of the article in mind for future redesigns.

href="http://www.smashingmagazine.com/2009/02/10/10-harsh-truths-about-corporate-websites/"> src="http://www.boagworld.com/blogImages/Zeldman-20090123-095155.jpg" alt="Zeldman-20090123-095155 in Smashing Highlights 2009" />

Also, Alexander Makarov takes a couple of work days off, tests 9 popular PHP IDEs, and presents a very detailed review of popular PHP IDEs in the article href="http://www.smashingmagazine.com/2009/02/11/the-big-php-ides-test-why-use-oneand-which-to-choose/">The Big PHP IDE Test: Why Use One And Which To Choose. He also prepares an extensive spreadsheet for public review. An editable version is available as well (we hope that other developers will voluntarily add reviews to other IDEs), however we are forced to close editing because of vandalism.

href="http://www.smashingmagazine.com/2009/02/11/the-big-php-ides-test-why-use-oneand-which-to-choose/"> src="http://media.smashingmagazine.com/cdn_smash/images/php-ide-test/ides_best.png" alt="Ides Best in Smashing Highlights 2009" width="577" height="299" />

February is also a busy month for us and our readers. We announce a href="http://www.smashingmagazine.com/2009/02/23/hardware-giveaway-5000-comments-challenge/">Hardware Giveaway with almost 9000 comments — more comments than WordPress can handle at the time. Newer versions of WordPress offer comment pagination – probably added for that reason. We also href="http://www.smashingmagazine.com/2009/02/24/the-smashing-book-join-in/">announce the Smashing Book — our most important project in 2009. As you may know, there was a long road leading up to its final release in early December.

March

In March, we get technical. We publish articles related to href="http://www.smashingmagazine.com/2009/03/19/getting-started-with-ruby-on-rails/">Ruby On Rails, href="http://www.smashingmagazine.com/2009/03/25/mysql-admin-and-development-tools-round-up/">MySQL, href="http://www.smashingmagazine.com/2009/03/10/ultimate-round-up-for-version-control-with-subversion/">Subversion, and href="http://www.smashingmagazine.com/2009/03/24/10-useful-php-tips-revisited/">PHP. The latter is a first-ever rebuttal of one of our previous articles; it’s written by PHP gurus Chris Shiflett and Sean Cotes. They take a closer look at the previously published article, explain its errors and reveal what is right and wrong in its theory and practice. From this point on, we consider getting experts to technically review articles before they’re published.

The most popular post of the month is href="http://www.smashingmagazine.com/2009/03/08/70-new-useful-ajax-and-javascript-techniques/">70 New, Useful AJAX and JavaScript Techniques, prepared by Noura Yehia. We get back to our roots, to the good old days when we picked the best coding and design-related resources and present them in a well-researched round-up. Although many people have criticized the “list” article format, most readers still find such round-ups useful, so we continue publishing them. Over the course of the year we pushed lists back a bit, trying to publish more unique and thought-provoking content.

href="http://www.smashingmagazine.com/2009/03/08/70-new-useful-ajax-and-javascript-techniques/"> src="http://media.smashingmagazine.com/cdn_smash/images/ajax-js-techniques/ajax-js-techniques36.jpg" alt="Ajax-js-techniques36 in Smashing Highlights 2009" />

The most controversial inspirational post of the month is definitely href="http://www.smashingmagazine.com/2009/03/20/30-beautiful-surreal-and-dark-art-pictures/">Bizarre Surreal and Dark Art Pictures, prepared by Aquil Akhter. The post doesn’t seem to leave anyone unaffected; some readers hate it, some readers love it, and it brings a large spike in traffic.

href="http://www.smashingmagazine.com/2009/03/20/30-beautiful-surreal-and-dark-art-pictures/"> src="http://media.smashingmagazine.com/cdn_smash/images/dark-surreal-art/15.jpg" alt="15 in Smashing Highlights 2009" width="500" />

This month we also announce the href="http://www.smashingmagazine.com/2009/03/18/smashing-community-icon-set-join-in/">Smashing Community Icon Set where we ask readers what icons they need with plans to design the icons together with a professional icon design agency, then release them for free. Unfortunately, the winner — portfolio icon set — is still not ready (the design agency is working on some nifty features), but we hope to finally release the set in early 2010.

April

In March we start discussing with Jacob Gube what would be an interesting twist for April’s Fools Day and we come up with a nice idea. As a result, we publish Jacob Gube’s article href="http://www.smashingmagazine.com/2009/03/31/breaking-internet-explorer-81-eagle-eyes-leaked/">Breaking: Internet Explorer 8.1 Eagle Eyes Leaked. The article takes a look at the new version of Internet Explorer and claims that it has Mozilla Firefox extensions support, excellent performance against the Acid 3 test, and a server-side code decompiler. The news spreads across social media and the article gets a nice traffic spike through StumbleUpon.

href="http://www.smashingmagazine.com/2009/03/31/breaking-internet-explorer-81-eagle-eyes-leaked/"> src="http://media.smashingmagazine.com/cdn_smash/images/ie8-eagle-eyes/intro.jpg" alt="Intro in Smashing Highlights 2009" width="425" height="340" />

In April, Rob Morris presents href="http://www.smashingmagazine.com/2009/04/20/5-simple-tricks-to-bring-light-and-shadow-into-your-designs/">5 Simple Tricks To Bring Light and Shadow Into Your Designs. In general, April turns out to be one of the best months of the year. We publish 47 articles related to very different topics (freelancing, graphics design, typography, CSS, conversion rates, logo design) and thus manage to cover a wide variety of topics — resulting in much positive feedback. Many readers, however, complain that we publish too often, so in the following months we begin to publish at a more moderate pace.

href="http://www.smashingmagazine.com/2009/04/20/5-simple-tricks-to-bring-light-and-shadow-into-your-designs/"> src="http://media.smashingmagazine.com/cdn_smash/images/light-shadow-techniques/Fig_1.jpg" alt="Fig 1 in Smashing Highlights 2009" />

May

May turns out to be a practical month. We re-discover round-ups with very useful resources. We publish a round-up of href="http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/">useful glossaries, the ultimate general guide to industry terms that should get our readers well on their way to understanding what web designers are talking about. We also discuss href="http://www.smashingmagazine.com/2009/05/12/10-ways-to-put-your-content-in-front-of-more-people/">ways to put your content in front of more people.

href="http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/"> src="http://media.smashingmagazine.com/cdn_smash/images/glossaries/typeface.gif" alt="Typeface in Smashing Highlights 2009" width="482" height="337" />

The most popular posts of the month are href="http://www.smashingmagazine.com/2009/05/06/40-stunning-and-creative-graffiti-artworks/">graffiti artworks and href="http://www.smashingmagazine.com/2009/05/18/100-amazing-free-wordpress-themes-for-2009/">Free WordPress Themes for 2009. Inspirational posts work well, but the appetite of our readers is growing. Over the coming months we begin to see a rise of resistance against inspirational posts which are labeled “lazy content”. We listen and do our best to improve the quality of inspirational posts while reducing the number of such posts and making room for more practical articles.

href="http://www.smashingmagazine.com/2009/05/06/40-stunning-and-creative-graffiti-artworks/"> src="http://media.smashingmagazine.com/cdn_smash/images/creative-graffiti-art/loves.jpg" alt="Loves in Smashing Highlights 2009" width="500" height="375" />

June

June turns out to be a time for experiments. Because we observe a large number of Mac-users in our stats, we decide to publish a couple of Mac-related posts. We started slowly in May, and continued in June with href="http://www.smashingmagazine.com/2009/06/20/how-to-make-os-x-e2-80-99s-expose-work-5-productivity-tips/">Exposé tips and href="http://www.smashingmagazine.com/2009/06/04/30-must-have-tweaks-for-your-mac/">tweaks for your Mac. However, in the articles we’re not just praising Mac. As it turns out, if you want some traffic and discussions on your blog, banter Apple, its products, or fans. We do it and the article href="http://www.smashingmagazine.com/2009/06/10/why-web-developers-dont-need-a-mac/">Why Web Developers Don’t Need A Mac gets 655 comments. However, focusing articles on Mac is not a good idea — the feedback is very negative. After June we focus on more general design-related topics and let the Windows-Mac debate rest in peace.

href="http://www.smashingmagazine.com/2009/06/10/why-web-developers-dont-need-a-mac/"> style="display: inline;" src="http://media.smashingmagazine.com/wp-content/uploads/images/why-web-developers-do-not-need-mac/win.jpg" alt="Win in Smashing Highlights 2009" width="500" height="431" />

The most remarkable posts of the month are Inayaili de Leon’s challenge to href="http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/">take your design to the next level with CSS3 and Gareth Hardy’s discussion of href="http://www.smashingmagazine.com/2009/06/25/10-common-mistakes-in-logo-design/">common mistakes in logo design. One of the most useful posts of the year is Cameron Chapman’s round-up of href="http://www.smashingmagazine.com/2009/06/29/45-incredibly-useful-web-design-checklists-and-questionnaires/">web design checklists and questionnaires which performs fairly well in terms of traffic and user feedback.

href="http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css3-new-techniques/rgba.jpg" width="500" height="337" alt="Rgba in Smashing Highlights 2009" />

In general, through the first six months of the year, CSS-related articles perform best. We notice this and start looking for more professional CSS/JS-developers who have time for writing. We also intensify our cooperation with our current writers. The results are seen in the months to come.

July

July is another month with a wide variety of design-related topics. Our advanced readers learn about clever href="http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/">PNG optimization techniques. The most-discussed article of the month is href="http://www.smashingmagazine.com/2009/07/09/the-roadmap-to-becoming-a-professional-freelance-web-designer/">The Roadmap To Becoming A Professional Freelance Web Designer. We start to get more requests for freelance-related topics, ranging from pricing to organization to project management. We carefully write down the most promising ideas and assign topics to regular and new authors.

href="http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/jpg-optimization-techniques/8grid-bad.jpg" alt="8grid-bad in Smashing Highlights 2009" />

We try to take our inspirational posts to a new level, making them more extensive and less random. Our first result is Diogo Terror’s article about href="http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/">Lessons From Swiss Style Graphic Design. The article goes to extreme lengths explaining various techniques from the time as well as showcasing beautiful Swiss style artworks. Unfortunately, very few readers appear to be interested. Although the article takes a couple weeks to prepare, the traffic is very low and it gets just 75 comments.

href="http://www.flickr.com/photos/uppercaseyyc/3185771455/sizes/l/in/set-72157612416406180/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/swiss-graphic-design/52.jpg" alt="52 in Smashing Highlights 2009" width="480" height="473" />

We present the results of our Typographic Layout Design Contest in which we aim to collect beautiful typographic (X)HTML+CSS-based layouts created by the design community and release them for free. The response is overwhelming and we release href="http://www.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/">45 free typographic (X)HTML/CSS templates. Unfortunately, this is the last contest we offer in 2009. But no worries, new contests are coming in 2010!

August

In August we present the findings of our large href="http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/">study of typographic design practices in modern web design. We identify 13 general typographic problems and issues related to typographic design and present answers to them that we found through our research. Among other things, we discover the most popular typefaces, average font sizes, line height, and the number of characters per line. The study is extremely time-consuming, but we don’t care. The results are very useful and that’s what really matters.

href="http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/type-survey/aiga.gif" alt="Aiga in Smashing Highlights 2009" width="500" height="430" />

We publish a quite controversial article href="http://www.smashingmagazine.com/2009/08/27/if-famous-painters-were-web-designers/">If Famous Graphic Artists Were Web Designers… in which our author Francisco Inchauste explores inspirational paintings and artists who have influenced modern design. The article gains a lot of attention and instigates some rough discussions in the comments to the post.

href="http://www.smashingmagazine.com/2009/08/27/if-famous-painters-were-web-designers/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/art-paintings-designers/article_cover.jpg" alt="Article Cover in Smashing Highlights 2009" width="500" height="350" />

We explain how to code your first href="http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/">HTML 5 layout and your first href="http://www.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/">iPhone application. And, of course, we publish probably the most bizarre post ever: href="http://www.smashingmagazine.com/2009/08/13/10-unique-tv-series-episodes-that-inspire-creativity/">Unique TV Series Episodes That Inspire Creativity, written by Louis Lazaris. It’s a review of how particular TV episodes were different from what came before, and how this can serve as motivation for future designs. The article doesn’t make sense for some readers, but most are quite intrigued, which is a good sign.

September

September starts unpleasantly for Smashing Magazine. href="http://www.smashingmagazine.com/2009/09/04/smashing-goes-down-on-september-2nd-what-happened/">We are under siege. Someone attempts to infiltrate our main server and manages to manipulate some HTML data. The consequence: a new server (we moved from a cluster to the cloud), a new internal security policy (which still causes some problems for us and appears to be a bit too restrictive), secure FTP and, of course, more costs.

href="http://twitter.com/smashingmag/status/3718994026"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/twitter11.gif" alt="Twitter11 in Smashing Highlights 2009" width="573" height="398" />

We need a little time to recover, but get back on track quite quickly. We follow the attack with a few involved, thought-provoking articles: in the article href="http://www.smashingmagazine.com/2009/09/10/css-wishlist-new-ideas-debates-and-solutions/">CSS Wishlist: New Ideas, Debates and Solutions Kayla Knight discusses the current state of CSS and describes some alternative CSS syntaxes and CSS programming concepts as well as already-available techniques and tools. We reveal href="http://www.smashingmagazine.com/2009/09/03/professional-team-management-tips-for-creative-folks/">professional team management tips as well as the href="http://www.smashingmagazine.com/2009/09/17/portfolio-design-study-design-patterns-and-current-practices/">findings of our portfolio design study.

href="http://www.smashingmagazine.com/2009/09/03/professional-team-management-tips-for-creative-folks/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/team-management/banner.jpg" alt="Banner in Smashing Highlights 2009" />

Many coding articles on Smashing Magazine cover various WordPress-related tips, tricks and techniques. Almost every month we published at least two articles related to WordPress; in September we published one of the most popular WordPress-related posts of the year: href="http://www.smashingmagazine.com/2009/09/14/how-to-integrate-facebook-with-wordpress/">How To Integrate Facebook With WordPress, written by Thiemo Fetzer. You can bet that we will continue publishing more WordPress-related articles in 2010.

Also in this month, Jon Tan helps us to create the Smashing Experts Panel: because some articles were incorrect or contained factual errors, we invite experts and professional designers and developers to do paid reviews of Smashing Magazine’s articles before they’re published. As of this writing, we have over 25 experts in the panel. This turns out to be bittersweet news for our authors: editing and feedback now need more time and authors need to be more precise in their articles.

October

The last few months of the year are months of big changes for us and for our readers. In October, for the first time in our young history, we acquire an existing website, href="http://www.noupe.com/spotlight/noupe-has-a-new-owner-smashing-magazine.html">Noupe.com, created in 2007 by the Egyptian Blogger Noura Yehia. At the moment Noupe has a regular publishing schedule and is updated as frequently as Smashing Magazine.

In October, Louis Lazaris explains href="http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/">CSS Differences in Internet Explorer 6, 7 and 8 which is a new format for Smashing Magazine. For the first time, we’re publishing a useful reference article that can be looked up when our readers are handling browser inconsistency issues. And it works; the article has 238 comments and gains organic traffic from search engines. Also, in October we start our new series “Global Web Design” in which we feature web developers and web designs from different countries of the world and explore what’s happening in the web design scene worldwide. We start with href="http://www.smashingmagazine.com/2009/10/17/global-web-design-russia/">Russian Web Design. The new series is a success, so you can expect more exciting posts in the series in 2010.

href="http://www.smashingmagazine.com/2009/10/17/global-web-design-russia/"> width="500" height="377" alt="145-russian-web-design in Smashing Highlights 2009" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/145-russian-web-design.jpg" />

Apart from classic CSS and usability posts, the month brings many original articles. For instance, href="http://www.smashingmagazine.com/2009/10/24/brand-user-experience-the-interface-of-a-cheeseburger/">Brand = User Experience: The Interface of a Cheeseburger. Our readers share their excitement about the original content and want to see similar posts on Smashing Magazine in the future. We listen and start preparing other thought-provoking articles in the months to come. And, of course, it was pretty cool to put the image of a tasty cheeseburger on Smashing Magazine’s front page. We’re sure no design-related blog has done that before!

href="http://www.smashingmagazine.com/2009/10/24/brand-user-experience-the-interface-of-a-cheeseburger/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/brand-ux/cb.jpg" width="435" height="263" alt="Cb in Smashing Highlights 2009" Brand=User Experience: The Interface of a Cheeseburger" />

Important to us was title="Edit “Smashing Magazine’s Redesign and Smashing Network”" href="http://www.smashingmagazine.com/2009/10/31/smashing-magazines-redesign-and-smashing-network/">Smashing Magazine’s Redesign and the Smashing Network. The redesign is done by Liam McKay and his design agency, WeFunction. However, we subsequently tweaked a couple of things in the design (and Liam is still unhappy about these changes). Footer and sidebar illustrations are designed by Pasquale D’Silva. The idea behind the network is to promote high-quality content on the Web design scene and to make it worthwhile for publishers to produce useful and interesting design-related articles. We want our community to benefit from these articles and support the publishers with direct traffic from Smashing Magazine.

class="alignnone size-full wp-image-22991" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/editorial.gif" alt="Editorial in Smashing Highlights 2009" width="209" height="230" />

href="http://www.smashingmagazine.com/the-smashing-network/"> class="alignnone size-full wp-image-22706" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/sn-badge-250px-colour-3.png" alt="Sn-badge-250px-colour-3 in Smashing Highlights 2009" width="255" height="98" />

November

November is another important month for us. Finally, after 3 years of working in different cities, we move to our first joined office in Freiburg (Germany). This is also the reason why the rest of the year is a bit hectic: there are literally hundreds of things that had to be considered, discussed, and taken care of.

Probably the most practical article of the month is Kat Neville’s post about href="http://www.smashingmagazine.com/2009/11/05/invoice-like-a-pro/">invoice design. The article presents some general guidelines, best practices and examples that will help you make sure your invoices are up to spec. Some articles need tremendous work and vivid discussions before they finally get published. One of these is href="http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/">The Ails Of Typographic Anti-Aliasing by Thomas Giannattasio. Can you spot all the hours of work that were put into it?

href="http://www.smashingmagazine.com/2009/11/05/invoice-like-a-pro/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/invoice-design/nancyroy_thumb.jpg" alt="Nancyroy Thumb in Smashing Highlights 2009" width="480" height="367" />

In November we have quite a surprise for our readers. Together with Paddy Donnelly, we discuss creating a spectacular post that covers a recent trend in modern web design: magazine-style blog post designs, or art-directed blog posts. Paddy refers to it as a ‘blogazine’. After four weeks of preparation, the article href="http://www.smashingmagazine.com/the-death-of-the-blog-post/">The death of the boring blog post? finally goes live. The surprise is that when a user clicks on the link to the post, he lands on a page which has a layout and design that’s completely different from the rest of Smashing Magazine. According to our stats, many users reloaded the page wondering where the “usual” layout had gone.

href="http://www.smashingmagazine.com/the-death-of-the-blog-post/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/blogazine-layout/jason1.png" alt="Jason1 in Smashing Highlights 2009" />

The article is one of the best posts of 2009, as it manages to spark a huge discussion in the design community and gains over 550 comments. The readers are in disagreement about the design of the article, but the idea is inspiring and shortly after it’s published we start to see a couple of emerging new ‘blogazines’.

December

Finally. href="http://www.smashingmagazine.com/2009/12/03/smashing-book-its-out-now/">The Smashing Book is released. Announced in February, and discussed in several posts throughout the year, in December it finally arrives. Actually, 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, available exclusively from Smashing Magazine — all orders are now shipped right away. This one was really hard work and most things didn’t work out as we had planned, but the positive reactions and impressions of our readers are definitely worth it. We see huge involvement from our readers who post their images, videos, tweets and reviews in social media. Feedback is overwhelming and users’ expectations are high. The coming months will show how well we did our job with the book.

href="http://www.flickr.com/photos/agence-lunaweb/4203344441/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/sm-book.jpg" width="500" height="375" alt="Sm-book in Smashing Highlights 2009" /> /> href="http://www.flickr.com/photos/agence-lunaweb/4203344441/">Image source

Among other news, in December we hire our regular writer Cameron Chapman — she becomes the editorial manager on Smashing Magazine. Cameron is a professional writer, web- and graphic designer with over 6 years of experience. She will still be writing articles for Smashing Magazine, but now she also handles communication between many of our new and regular authors, discussing article ideas with them.

In terms of content, December turns out to be a slow month with less traffic and fewer comments — apparently, our readers have other things to take care of. Still, we keep publishing useful and original content. We explain how you can href="http://www.smashingmagazine.com/2009/12/02/pushing-your-buttons-with-practical-css3/">push your buttons with CSS3 and href="http://www.smashingmagazine.com/2009/12/01/how-to-support-internet-explorer-and-still-be-cutting-edge/">support IE and still be cutting-edge.

In December, we publish the most challenging article of the year: we encourage our readers to href="http://www.smashingmagazine.com/2009/12/22/design-something-every-day/">design something every day for the next 365 days. We encourage participants to tweet each new design along with #daily365 so that everyone will can see the progress of each project. Some designers are already participating! So are you up for the challenge?

What should you expect in 2010?

We’re planning some big changes in the coming months. Soon we will release the Smashing Network Widget for your website and a mobile version of Smashing Magazine. Well-known authors and experts are currently writing articles for us. You can also expect to see more new team members and newly released books in cooperation with a publishing house. Also, the translation of the Smashing Book to other languages (currently only Korean version) is being prepared. We also have some interesting plans for Smashing Magazine and the design community, so you better stay tuned to our updates in 2010.

class="alignnone size-full wp-image-22985" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/0470684151.jpg" alt="0470684151 in Smashing Highlights 2009" width="300" height="391" />

We’ll do our best to deliver useful and inspiring high-quality articles in the new year. We’ll come up with new ideas to keep Smashing Magazine an exciting place. And we’ll be listening to your ideas, suggestions, complaints and criticism. Have a truly smashing, successful, healthy and peaceful new year in 2010!

What was the most memorable Smashing Magazine post in 2009?

Your opinion has always been very important to us. Please share your impressions about our work over the last year and let us know what you would like to see changed on Smashing Magazine in 2010. Also, what was your most memorable Smashing Magazine’s post in 2009? We’ll do our best to improve Smashing Magazine in the new year!

(ll)

/>

© Smashing Editorial for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/12/29/smashing-highlights-2009/">Permalink | href="http://www.smashingmagazine.com/2009/12/29/smashing-highlights-2009/#comments">73 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/12/29/smashing-highlights-2009/&title=Smashing%20Highlights%202009">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/12/29/smashing-highlights-2009/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/12/29/smashing-highlights-2009/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Smashing%20Highlights%202009'%20http://www.smashingmagazine.com/2009/12/29/smashing-highlights-2009/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/12/29/smashing-highlights-2009/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/2009/" rel="tag">2009, href="http://www.smashingmagazine.com/tag/smashing/" rel="tag">smashing

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 
0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 

Design Something Every Day!

On December 22, 2009, In SEO, Web Design Tips, by Jad Limcaco

  

As designers, we’re all trying to get better at what we do. We surf the Web daily for hours trying to find useful tips and tricks to enhance our design skills. But what if we spent less time surfing the Web looking for inspiration and more time creating and designing things?

Someone once said, “Practice makes perfect“. While that statement might not be completely true, I do believe that practice makes you better. That is why in this blog post, I would like to propose something to every designer: Why not try to design something every day for one year?

Design Something Every Day!

Actors rehearse their lines until they learn them perfectly. Musicians practice their songs until every note is just right. Athletes practice their particular sport so they can excel. As designers, why can’t we do the same? Ask any successful designer in the community about how they have succeeded and they will attribute much of their success to practice. I challenge you today to design something daily. Take fifteen to twenty minutes that you would normally use to surf the Web today and devote it to designing something.

Most of you are probably thinking that I am out of my mind for proposing this. How can you, as a designer working either for a company or for yourself, find the time to design something daily? More importantly, how will I come up with design ideas for a whole year’s worth of projects? Well, to answer those questions, here are some practical tips.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Design Something Every Day!" 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 Design Something Every Day!" />  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 Design Something Every Day!" />  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 Design Something Every Day!" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in Design Something Every Day!" border="0" width="1" height="1" /> /> As designers, we’re all trying to get better at what we do. We surf the Web daily for hours trying to find useful tips and tricks to enhance our design skills. But what if we spent less time surfing the Web looking for inspiration and more time creating and designing things?

The Challenge

Someone once said, “Practice makes perfect“. While that statement might not be completely true, I do believe that practice makes you better. That is why in this blog post, I would like to propose something to every designer: Why not try to design something every day for one year?

Actors rehearse their lines until they learn them perfectly. Musicians practice their songs until every note is just right. Athletes practice their particular sport so they can excel. As designers, why can’t we do the same? Ask any successful designer in the community about how they have succeeded and they will attribute much of their success to practice. I challenge you today to design something daily. Take fifteen to twenty minutes that you would normally use to surf the Web today and devote it to designing something.

Most of you are probably thinking that I am out of my mind for proposing this. How can you, as a designer working either for a company or for yourself, find the time to design something daily? More importantly, how will I come up with design ideas for a whole year’s worth of projects? Well, to answer those questions, here are some practical tips.

Some Practical Advice

15 – 20 Minutes Daily

This challenge is for you to practice your skills. It doesn’t have to be a final, polished project, so you can limit it to a short period of time. Additionally, you can actually schedule this as part of your daily routine, which will make you more likely to follow through on your decision to design something daily.

And don’t worry or get discouraged if you miss a day due to other more important commitments. The key is to jump back into it as soon as possible. Keep doing it, and try your best to stay consistent. If you don’t find it reasonable to design something daily for a whole year, then you could try instead for one month, or another more manageable time period.

Design Ideas

You’re probably wondering how you will be able to come up with a fresh new design daily for 365 days. Actually, it’s quite simple. You can use a theme for your designs. Maybe for one month you can try to design something retro. For another month, you can try your hand at some typographic posters. The possibilities are endless. A good example is Jessica Hische. She started a project called the href="http://dailydropcap.com/">Daily Drop Cap, where she designs a href="http://en.wikipedia.org/wiki/Drop_cap#Types_of_initials">drop cap every day and makes her Drop Cap designs available for free download.

href="http://dailydropcap.com/post/227050517/orem-ipsum-dolor-sit-amet-consectetur-adipiscing"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/Z-1.jpg" alt="Z-1 in Design Something Every Day!" width="450" height="437" /> /> href="http://dailydropcap.com/">Daily Drop Cap is Jessica Hische’s personal project: she designs a drop cap every day and makes her designs available for free download.

Another thing you can do is href="http://designinformer.com/benefits-experimentation/">experiment with different ideas that you have. Maybe you’ve been thinking about doing a collage effect, for example. You might have an idea that you’ve been wanting to try, so this might be the perfect time for it. You can also use this “practice time” to try out different tutorials that have caught your attention.

Be Accountable

Some of us will have a hard time staying motivated during such a lengthy commitment. One way to stay motivated is to create a blog specifically for tracking the project’s progress during the year, and post the results daily. People will be expecting to see something from us and this will keep us motivated.

This method of blogging daily for one year has recently been popularized in the mainstream movie href="http://www.julieandjulia.com/">Julie and Julia, which follows American author Julie Powell’s year-long attempt to cook every recipe from a famous cookbook by Julia Child, while href="http://blogs.salon.com/0001399/2002/08/25.html">blogging about the experience each day. In Powell’s experience, her accountability was part of what kept her motivated for the 365 days.

Another way to stay accountable and keep motivated is to get a fellow designer to do the challenge with you. During the year, you can show each other what you’ve designed each day, allowing for some healthy, friendly competition.

It’s Been Done Before

As mentioned, the concept of blogging daily for a full year has been done before in a variety of contexts. It’s also been done successfully by a lot of great designers. Here are some designers that I have asked about designing something daily.

Stefan G. Bucher – The Daily Monster

href="http://344design.typepad.com/344_loves_you/">Daily Monsters Website

href="http://344design.typepad.com/344_loves_you/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/daily-monster.jpg" alt="Daily-monster in Design Something Every Day!" width="500" height="487" />

How long did you design / have you been designing daily? /> I filmed myself drawing href="http://344design.typepad.com/344_loves_you/">Daily Monsters for 100 days straight (including weekends and holidays). I capped it at 100 days since I also started animating the Monsters in more and more elaborate ways as the project grew. Since then I’ve done month-long bursts of Daily Monsters, and also documented the making of the book href="http://www.amazon.com/dp/1600610919/">100 Days of Monsters as a daily process. These days I usually do Monsters with lots of animation for special events or occasions.

What are some challenges associated with designing daily? /> The main challenge for me is integrating a daily practice with the demands of my regular work, and my occasional attempts at having a social life. There are just so many hours in the day, and it becomes a nerdy endurance challenge. The process itself is great, though. The real challenge is to not block out everything else.

Can you give me at least 5 benefits of partaking in this daily project?

  1. I got to draw every day again after almost stopping entirely for a few years.
  2. I’m getting better at creating characters every day.
  3. I’m teaching myself how to animate in the process.
  4. When I release the Daily Monsters daily it quickly attracts a great, active, and creative audience of kind, amazing people.
  5. Doing something every day short-circuits procrastination and self-doubt. There’s only time for doing, and doing = happiness.

Where do you get ideas for your daily designs? /> The Monsters are a process. As long as I sit myself down and do the work, I don’t have to worry about ideas; they simply appear. That’s the best part. You’d think I’d have learned that lesson now, but I still fall out of the habit, and get right back into my head. “What am I going to draw? Is this any good? What’ll I do next?” When you’re committed to putting something out there every day, you just don’t have the luxury of doubt. And if something comes out a little wonky, well… you know you can redeem yourself the next day.

Any advice for anyone who wants to get started doing this? /> Don’t think about it. Don’t plan for it. If I had thought about how much work the Daily Monsters would be, I’d have never started. If you get an idea for something, just sit down and start doing it. Also, you might consider not telling anybody about your daily project until you’re a few days or weeks into it. Commit to it, but allow yourself some privacy to work out the early kinks. Most importantly: Make sure you don’t ever skip a day. If you know you’re going out of town, or if you feel a cold coming on, create a few posts in advance. You mustn’t skip a day. As soon as you’ve skipped one day, it becomes so much easier to skip the second. And then you’re screwed. But here’s the thing: You won’t want to skip. Doing the Daily Monsters was completely addictive. I got to be proud of something I’d done every single day.

Matt Lyon

href="http://www.flickr.com/photos/c86/sets/72157611998305019/">Make Something Cool Everyday Flickr Group

href="http://www.flickr.com/photos/c86/sets/72157611998305019/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/matt-lyon.jpg" alt="Matt-lyon in Design Something Every Day!" width="500" height="549" />

How long did you design / have you been designing daily? /> I’ve been designing on a strictly daily basis since January 1st this year… It was one of my New Year’s resolutions.

What are some challenges associated with designing daily?

Most of the challenges centre upon either time or inspiration, but it’s these challenges that form the reason for doing daily work alongside other commitments.

Can you give me at least 5 benefits of partaking in this daily project? /> I’ve discovered plenty of benefits over the year, but I think that these have been the most valuable:

  1. Keeping the creative juices flowing
  2. Working in different ways as a means to overcome potential obstacles (e.g. creating a piece of work with limited materials or within a strict time limit)
  3. Daily work inevitably improves your skills / craft, be it in terms of drawing, using creative software, etc.
  4. Daily work creates its own momentum in terms of recurring themes, directions and ideas, that will feed into other work.
  5. The process instills and supports a sense of discipline to work.
  6. Allows for experimentation and unadulterated freedom to try anything out.

Where do you get ideas for your daily designs?

All of my work evolves from drawing, and for a while many of the themes and ideas in what I create have generated over time through the process of just letting things happen. Simply put, I take a line for a walk and see what happens, be it in response to something I’ve read, heard, or am just feeling. There are no rules – this is my time to do what I want.

Any advice for anyone who wants to get started doing this? /> I would recommend anyone and everyone with an interest in image-making to take up the challenge of creating something every day. My ‘drawing a day’ project has been so rewarding to me this year that I’ll be continuing it come 2010. Illustrators or character designers should keep a daily sketchbook to keep their ideas fresh… Alternatively, taking a photograph a day can prove just as valuable for others. Perhaps graphic designers or typographers could do a ‘layout a day’ project?! Who knows?! The sky’s the limit!

Joshua Wysocki – Wysocki Weekday

href="http://wysockiweekday.blogspot.com/">Wysocki Weekday

href="http://wysockiweekday.blogspot.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/wysocki.gif" alt="Wysocki in Design Something Every Day!" width="500" height="520" />

How long did you design / or have been designing daily? /> I started doing those dailies since November 25, 2007 — so over 2 years now.

What are some challenges associated with designing daily? /> The biggest is trying to keep at it on a normal pace. You probably noticed how I have missed a lot of days so far. Working a 10+ hour day-job wears me out and my brain can’t handle holding the pencil in my hand.

Can you give me at least 5 benefits of partaking in this daily project?

Benefits? Are there any? Maybe it’s the thought of continuing a project. Training yourself to be expressive and challenge yourself creatively. Making new friends and communicating with fellow artists. And hopefully eventually making some money from selling zines/books.

Any advice for anyone who wants to get started doing this? /> Just jump into it and doodle a small event that happened to you that day… from something as small as stepping into a puddle of mud, or watching your favorite TV show.

Brock Davis

href="http://itistheworldthatmadeyousmall.com/projects/msced/">Make Something Cool Every Day 2009

href="http://itistheworldthatmadeyousmall.com/projects/msced/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/7-12.jpg" alt="7-12 in Design Something Every Day!" width="500" height="487" />

How long did you design / have you been designing daily? /> In my job I think of ideas every day, but this project for 2009 is the first time I put to task /> making a new piece of art every single day for a year.

What are some challenges associated with designing daily? /> Coming up with ideas I feel are original. I always strive for originality — it is almost impossible to attain /> but the effort often conjures interesting results. Another challenge is simply finding the time to do it. /> I have a full-time job in a creative field, so I have to separate my professional ideas from my personal /> ideas. I have a family as well, so I tend to work late and think when my children are in bed.

Can you give me at least 5 benefits of partaking in this daily project?

  1. Keeps my brain fresh.
  2. Helps me identify my strengths, weaknesses and consistencies.
  3. Creatively challenging, and I love a challenge.
  4. Improves my ability to hone in on an idea and learn to execute it quickly as well as meticulously.
  5. Shows me creative sides to myself that i didn’t know I had.
  6. An interesting way to visually calendar my year; I can look at a piece and think more clearly about what was going on that day.

Where do you get ideas for your daily designs? /> From everything. I try to absorb as much from every day life as i can. Also, memories from childhood, pop culture, observations of how the world is always changing in all aspects (socially, technologically, economically, etc.).

Any advice for anyone who wants to get started doing this? /> Have fun and always be a student. No one can know everything, it’s better to absorb and learn all the time. Then apply that to your work and let it influence you to reshape it into something original.

Mike Duesenberg – 365 Album Covers

href="http://365albumcovers.tumblr.com/">365 Album Covers Tumblr

href="http://365albumcovers.tumblr.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/album-covers.jpg" alt="Album-covers in Design Something Every Day!" width="500" height="502" />

How long did you design / have you been designing daily? /> I’ve had the idea for quite a bit, but I didn’t start actually doing it till October 31st of this year.

What are some challenges associated with designing daily?

The biggest challenge is time. Some days are so busy, it’s hard to make time for this project. The idea is to dedicate an hour or two to the design, but sometimes the day flies by and you aren’t left with much time, which then affects the quality. So that’s been the biggest challenge. The second biggest challenge is trying to stay inspired. For href="http://365albumcovers.tumblr.com" >365albumcovers.tumblr.com, I use href="http://www.flickr.com/commons" >http://www.flickr.com/commons as my photo source. The problem I’ve been running into however is that after a while, all these vintage photos tend to direct each piece in the same direction. So to solve that, I’ve been brainstorming up some ways on how to add more variety.

Can you give me at least 5 benefits of partaking in this daily project?

  1. Daily projects keep your mind working.
  2. It’s a nice creative break from the typical day-to-day design work.
  3. It gives you a chance to experiment with ideas that you may not be able to use on other projects.
  4. It gets your name out there! For instance, like this interview. It can be good press for you, as a designer.
  5. It’s nice to share these with friends and see what their feedback is.

Where do you get ideas for your daily designs?

I usually wait to see what the photo, band name and album name will be. Usually one of those will automatically inspire me to go towards a certain direction.

Any advice for anyone who wants to get started doing this?

Just have fun with it. Think of an idea that you can manage to do every day. The main reason you should do this is for self progression. If it gets some attention from other people, awesome. The problem I ran into is keeping it fresh. You may notice that I haven’t posted something since mid-November. I consider the first entries a trial run. I learned from it. Now I’ve compiled a few ways to keep the concept new and exciting to myself, which I plan on launching January 1st. So stay on the lookout!

Tom Judd

href="http://www.tomjudd.co.uk/everyday/">Tom Judd’s Everyday

href="http://www.tomjudd.co.uk/everyday/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/tom-judd.jpg" alt="Tom-judd in Design Something Every Day!" width="500" height="360" />

How long did you design / have you been designing daily?

I spent 1 year from November 2004 drawing a page a day, then in July 2007 I repeated the process for another 365 days.

What are some challenges associated with designing daily? /> Keeping the motivation. Maintaining originality.

Can you give me at least 5 benefits of partaking in this daily project?

  1. It improved my drawing skills.
  2. It was a great way to generate ideas.
  3. It emptied my brain.
  4. It allowed me to fill empty time with something productive.
  5. It got me lots of work.

Where do you get ideas for your daily designs? /> Each day was different. I think that is one of the benefits. You never know what you are going to see on your way to work.

Any advice for anyone who wants to get started doing this? /> Make sure you are doing it for the right reasons. As soon as I became aware that other people were looking at my daily output, it started to affect the work I was producing in a negative way.

Daily Projects Showcase

Jessica Hische – Daily Drop Cap

href="http://dailydropcap.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/daily-dropcap.jpg" alt="Daily-dropcap in Design Something Every Day!" width="500" height="445" />

The Daily Drop Cap is an ongoing project by typographer and illustrator href="http://jhische.com">Jessica Hische. Each day (or at least each work day), a new hand-crafted decorative initial cap will be posted for your enjoyment and for the beautification of blog posts everywhere.

Thomas Fuchs – A Heart a Day

href="http://www.aheartaday.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/heart.jpg" alt="Heart in Design Something Every Day!" width="500" height="360" />

href="http://www.aheartaday.com/">A Heart a Day is a blog by freelance illustrator, Thomas Fuchs. His goal is to incorporate a heart into one of his illustrations every day.

Chow Hon Lam – Flying Mouse 365

href="http://flyingmouse365.com/shop/about-fm365"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/cow.jpg" alt="Cow in Design Something Every Day!" width="500" height="360" />

href="http://flyingmouse365.com/shop/about-fm365">The FM 365 Project is the result of Flying Mouse’s Project of doing one design per day for a whole year! Every week there are 7 new products available! These 7 new products are able for a quick pre-sale at a lower price for the entire week and once the week ends there are 7 newer products to replace them, and so on.

Mark Weaver

href="http://cargocollective.com/markweaver#130825/MSCED-Series-Eight"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/mark-weaver.jpg" alt="Mark-weaver in Design Something Every Day!" width="500" height="500" />

href="http://cargocollective.com/markweaver#130825/MSCED-Series-Eight">Mark Weaver is another designer/illustrator that decided to design something every day for one year. He has a plethora of styles in his designs.

Philip Tseng

href="http://www.flickr.com/photos/pilihp/sets/72157611976641503/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/jalapeno.jpg" alt="Jalapeno in Design Something Every Day!" width="500" height="500" />

href="http://www.flickr.com/photos/pilihp/sets/72157611976641503/">Philip Tseng has a unique style that he implemented into his daily designs. He chose a theme of fruits and vegetables and each day he designed something that started with a different letter of the alphabet.

Jonas Buntenbruch – DONE: Daily Design Workout

href="http://done.jbunti.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/workout.jpg" alt="Workout in Design Something Every Day!" width="500" height="355" />

href="http://done.jbunti.com/">DONE was the personal daily design workout of Jonas Buntenbruch for 2008. /> Every day he flexed his design skills by creating one piece in 30 to 60 minutes. The presented works range from scrap and sketches to photos, typographic experiments and random creative designs.

A New Year’s Resolution

Now that you’ve read interviews and seen some strong examples, I hope that you’re now inspired and ready to start on this wonderful daily design adventure. I want to propose a new year’s resolution to you: design something every day.

Each time you design something, you can submit it for everyone to see. Simply tweet the design along with #daily365 and everyone will be able to see your project. By the way, if you’re just starting out as a designer, this is an effective way to build your portfolio. The Smashing Editorial Team will monitor all submissions and present them in posts here at Smashing Magazine, every now and again. I guarantee that at the end of the year, you’ll be able to look back and say that, because of the daily design project that you completed, you’re a better and more well-rounded designer.

So who’s up for the challenge?

(ll)

/>

© Jad Limcaco for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/12/22/design-something-every-day/">Permalink | href="http://www.smashingmagazine.com/2009/12/22/design-something-every-day/#comments">192 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/12/22/design-something-every-day/&title=Design%20Something%20Every%20Day!">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/12/22/design-something-every-day/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/12/22/design-something-every-day/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Design%20Something%20Every%20Day!'%20http://www.smashingmagazine.com/2009/12/22/design-something-every-day/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/12/22/design-something-every-day/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags:

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • •
 

My Website Design Was Stolen! Now What?

On December 18, 2009, In SEO, Web Design Tips, by Cameron Chapman

  

Designers spend hours perfecting websites, whether their own or their clients’. When you’ve invested anywhere from a few days to months in a website, the last thing you want is for someone else to steal the design without even giving you proper credit (or compensation). And if you’re a template or theme designer, it’s an even bigger problem. After all, if your templates are available online for free, a lot of people won’t bother paying for them.

gavel

So what can you do if you’ve discovered that one of your designs has been ripped off? What should you do? Read on for a complete guide to steps you can take to protect your intellectual property.

I am not a lawyer, nor do I pretend to be one on TV, so the advice here should not be taken as legal advice. Before taking any of the actions mentioned below, check with a lawyer or other legal expert to see what is allowable in your state or country or to see if additional options are available to you.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in My Website Design Was Stolen! Now What?" 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 My Website Design Was Stolen! Now What?" />  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 My Website Design Was Stolen! Now What?" />  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 My Website Design Was Stolen! Now What?" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in My Website Design Was Stolen! Now What?" border="0" width="1" height="1" />

Designers spend hours perfecting websites, whether their own or their clients’. When you’ve invested anywhere from a few days to months in a website, the last thing you want is for someone else to steal the design without even giving you proper credit (or compensation). And if you’re a template or theme designer, it’s an even bigger problem. After all, if your templates are available online for free, a lot of people won’t bother paying for them.

So what can you do if you’ve discovered that one of your designs has been ripped off? What should you do? Read on for a complete guide to steps you can take to protect your intellectual property.

I am not a lawyer, nor do I pretend to be one on TV, so the advice here should not be taken as legal advice. Before taking any of the actions mentioned below, check with a lawyer or other legal expert to see what is allowable in your state or country or to see if additional options are available to you.

1. Why People Steal Designs

Not everyone who steals a design is out to rip you off. There are a variety of reasons; one of the most common is that many people just don’t understand that stealing someone else’s design is illegal and unethical. Of course, if you’re selling templates or themes, that probably isn’t the case, but if a one-off design of yours has been stolen, it’s always a possibility.

class="alignnone size-full wp-image-18848" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/copyright.jpg" alt="Copyright in My Website Design Was Stolen! Now What?" width="500" height="258" /> /> href="http://www.flickr.com/photos/mikeblogs/3020135605/">Image source

The myth persists that if content is put online, it’s fair game. Others think that if a copyright isn’t explicitly stated, then it doesn’t exist. In either case, the person who has taken your design likely doesn’t realize that they’ve done anything wrong.

In other cases, someone might take your design because they feel it’s an excellent example of what a website in their niche should look like or because the company behind the website is a leader in the industry. These people may or may not realize that what they’re doing is wrong or at least may not realize just how wrong it is.

Some people steal designs because they can’t afford to hire a website designer but have just enough technical know-how to copy a website themselves. These people rarely suspect they’ll be caught. The same sometimes happens with people who have been hired to design a website but lack the skills to do the job. And so they copy another website, hoping their client has never seen it.

Sometimes, someone will steal the bulk of your design but change small parts and then claim they were merely inspired by the design and didn’t really steal it. Unless they completely recreated the website from scratch and made significant changes (and even then…), this isn’t a good defense, and you can still treat them as though they they stole it outright.

If you sell templates, and someone has used one of them on their website, they may not realize that this is wrong. Plenty of forums and other websites out there make templates available for anyone to download, and some make no mention that these are not licensed to be distributed in this way. So don’t jump to the conclusion that someone intentionally stole your design. Of course, the people distributing your templates are probably guilty.

I tend to give people the benefit of the doubt when it comes to intellectual property theft. If it’s happening to you for the first time, then it can be tempting to go after them with full force, but in many cases you’ll have better luck educating the offender.

2. Initial Steps

So, you’ve discovered that someone has stolen one of your designs. Whether you’ve discovered it yourself or someone has reported it to you, it can be a jarring experience. Your first reaction might be to fire off an angry email, make a comment on their website or out them publicly. But step back for a moment and think through your options.

class="alignnone size-full wp-image-18847" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/magnifyingglass.jpg" alt="Magnifyingglass in My Website Design Was Stolen! Now What?" width="500" height="485" /> /> href="http://www.sxc.hu/photo/828198">Image source

The way you handle this situation will largely determine how satisfied you are with the resolution. If you attack the person, their immediate reaction will be to get defensive or dig in their heels and refuse to deal with you. They may even contact a lawyer to get you off their back, and that could result in expensive legal fees and even litigation for you: Not exactly what most designers want to spend their money and energy on.

Finding the Website Owner

The first place to check is the website itself. In most cases, you’ll find some kind of contact information there. If not (or you find only a contact form), you can usually find the website owner by looking up the Whois information about the domain. If the domain is privately registered, though, you may have to contact the Web host to obtain contact information. If that fails, your last option may be to use legal channels.

The First Contact

Remember, the person ripping off your design might not even know they’re doing something wrong. Your first contact is an opportunity to educate them on intellectual property rights. Don’t accuse. Let them know that the design they’re currently using is copyrighted and that unless they can prove they’ve paid for it, you’ll need them to take the website down immediately.

class="alignnone size-full wp-image-18846" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/email.jpg" alt="Email in My Website Design Was Stolen! Now What?" width="500" height="583" /> /> href="http://www.sxc.hu/photo/1215930">Image source

It’s possible that the website owner is unaware that their design is not original. If they’ve hired a less-than-reputable designer, they might have been led to believe that their design is completely original, and your email will come as quite a shock to them. Keeping your first email friendly and polite can make a huge difference in how they respond.

If You Don’t Hear Back

If you don’t hear back from the website owner after a few days, you can always contact their ISP to request that it take the website down. If you can provide proof that the design is yours and that they aren’t licensed to use it, many ISPs will suspend the website to avoid being sucked into litigation should you decide to sue.

Issue a DMCA Take-Down Notice

This only applies in the United States, but the Digital Millennium Copyright Act has provisions for dealing with intellectual property theft online. You can get a template of the formal notice, fill it out and send it to the website’s host. Most hosts will immediately comply, to protect themselves from litigation.

Call Them Out Publicly

If you’re 100% positive that the person has copied your website intentionally, and they aren’t responding to your requests to take it down, you could call them out publicly on your blog, in a forum or on another website.

This is riskier, though. First of all, they could sue you for libel. Whether they’d win or not is irrelevant: fighting a lawsuit is almost always expensive and time-consuming. They don’t have to be right to file a lawsuit; so even if everything you say is true and accurate, nothing is stopping them from following that course.

But this kind of action has its upsides. If your blog has a lot of readers or the forum has a lot of followers, you might get others to join your cause and act on your behalf to get the offending website taken down. The offender might relent, not wanting the negative publicity. But again, weigh the pros and cons carefully, and take this step cautiously.

Document Everything!

Document any actions you take regarding the theft. Note when you discovered the offending site, when you contacted the owner and whether they responded. This will help if you end up having to take further action.

3. Getting Legal Help

If you still aren’t getting anywhere on your own, it might be time to contact a lawyer. A lawyer will probably begin by sending an official cease and desist letter to the offender. The letter would likely state that the design they’re using is copyrighted material and that they need to take the website down immediately or face further legal action.

class="alignnone size-full wp-image-18845" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/gavel.jpg" alt="Gavel in My Website Design Was Stolen! Now What?" width="500" height="335" /> /> href="http://www.sxc.hu/photo/952313">Image source

In many cases, an official letter from a lawyer is enough to scare off just about anyone, and you’ll find the design is quickly changed or taken down altogether.

However, if there’s still no response, the lawyer might send a similar letter to the website’s host, demanding that the website be suspended due to copyright infringement. Hosts are usually responsive to this kind of letter, because they don’t want to be sued.

If neither action works, the next step may be a lawsuit. In many cases, though, it’s just not work the time, effort or money involved. This is when you should sit down and really think about how far you’re willing to go.

If the person who stole your design is simply using it on their own website, you probably won’t want to bother with a lawsuit. The effect on your income probably won’t be big enough to warrant this kind of action. But if the offender is redistributing your design or passing it off as their own (for example, in their portfolio), then the lawsuit might be worth it. Ask your lawyer what they think your chances of winning are and what the costs will be.

Depending on your country of residence, you may be able to get assistance from the government in taking down the design. Check with the office responsible for copyright and intellectual property rights in your country to find the proper authorities to contact.

4. Preventing Theft

You can do a number of things to prevent your designs from being stolen. Some are technical solutions, while others relate more to the front end.

class="alignnone size-full wp-image-18844" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/combinationlock.jpg" alt="Combinationlock in My Website Design Was Stolen! Now What?" width="500" height="333" /> /> href="http://www.sxc.hu/photo/883988">Image source

Non-Technical Solutions

Simply posting a copyright notice on your website will deter many would-be offenders, especially people who don’t realize that online content is copyrighted unless specified otherwise. It might also deter people who know it is illegal but hope they won’t be caught. It shows you’re more proactive than other website owners.

Technical Solutions

One thing you can do to prevent theft of your designs is to block screenscraper apps from accessing your code. While blocking every screenscraper out there is impossible, the article “ href="http://blog.webdistortion.com/2008/05/11/preventing-design-theft-a-few-tricks-of-the-trade/">Preventing Design Theft: A Few Tricks of the Trade” has both PHP and ASP code that can help you block most of them.

Use your .htaccess file to prevent images on your website from being hotlinked, because some thieves will go so far as to link images directly from your website, rather than use their own bandwidth.

Finding Out if Your Website Has Been Ripped Off

Usually, you won’t know that your design has been stolen unless you come across it on a website (which is very unlikely) or unless someone has reported it to you (only slightly more likely). Watchdog websites are out there, but the most popular one, href="http://www.pirated-sites.com/">Pirated-Sites, was hacked and has been taken offline.

By including unique text in your footer or elsewhere in the design, you might be able to find thieves by searching for those key phrases. This is not always effective, but you might get lucky.

One other option is to use a website such as href="http://www.copyscape.com">CopyScape, which looks for duplicate websites. Just enter your website’s URL and it looks for websites out there that have copied your content (and possibly your design).

5. If You Can’t Beat ’Em, Join ’Em

If you’re spending more time chasing down thieves than actually designing, you might want to consider making your designs publicly available. Releasing them under a Creative Commons license or other open-source license removes the temptation for many thieves.

class="alignnone size-full wp-image-18843" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/11/openpadlock.jpg" alt="Openpadlock in My Website Design Was Stolen! Now What?" width="500" height="333" /> /> href="http://www.sxc.hu/photo/913724">Image source

Even designers who make a living selling templates could benefit from open licenses, if only in part. Selling your templates under a non-commercial Creative Commons license and then offering additional services to customers who purchase the designs directly from you (such as set-up, customization and support) can prevent others from profiting from your work (and entirely remove the temptation for many). After all, if someone can get your template for free, why would they pay someone else for it? (This is different than paying you for it, because you’re offering added benefits and services, and many people believe in compensating the original designer or artist for their work).

If nothing else, a no-derivatives license can at least help ensure that you’re getting credit for your work. As strange as it sounds, a template released under a Creative Commons license is no longer a motivation for many pirates.

Further Resources

  • href="http://articles.sitepoint.com/article/theft-webmasters-recourse">Design Theft: The Webmaster’s Recourse /> An excellent guide from SitePoint on dealing with design theft.
  • href="http://onwired.com/blog/dealing-with-design-theft/">Dealing With Design Theft /> A fantastic article from OnWired about dealing with design theft, with practical solutions and info from their own experiences.
  • href="http://www.blissfullyaware.com/design/fighting-design-theft/">Fighting Design Theft /> An opinion piece on design theft from BlissfullyAware.
  • href="http://www.flickr.com/groups/designtheft/pool/">The Design Theft Pool /> A Flickr pool dedicated to calling out design thieves.
  • href="http://www.smashingmagazine.com/2007/07/07/copyright-explained-i-may-copy-it-right/">Copyright Explained: I May Copy It, Right? /> In this post we’ve collected the most important facts, articles and resources related to copyright issues, law and blogging. We’ve also put together most useful tools and references you can use dealing with plagiarism.

(al)

/>

© Cameron Chapman for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/12/18/my-website-design-was-stolen-now-what/">Permalink | href="http://www.smashingmagazine.com/2009/12/18/my-website-design-was-stolen-now-what/#comments">98 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/12/18/my-website-design-was-stolen-now-what/&title=My%20Website%20Design%20Was%20Stolen!%20Now%20What?">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/12/18/my-website-design-was-stolen-now-what/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/12/18/my-website-design-was-stolen-now-what/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'My%20Website%20Design%20Was%20Stolen!%20Now%20What?'%20http://www.smashingmagazine.com/2009/12/18/my-website-design-was-stolen-now-what/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/12/18/my-website-design-was-stolen-now-what/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/copyright/" rel="tag">copyright, href="http://www.smashingmagazine.com/tag/stolen/" rel="tag">stolen

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • •
 

50 Beautiful Free Icon Sets For Your Next Design

On December 14, 2009, In SEO, Web Design Tips, by Vitaly Friedman

  

Round-ups of beautiful and useful icons are almost legendary here, on Smashing Magazine. While some readers complain about the annoying “list”-style of some of our articles, we are confident that useful round-ups of relevant resources are very valuable and useful for designers. This is why over months we collect useful links and then present them in posts in the magazine. Like it or hate it, but the feedback that we get from the design community when we publish such posts is mostly positive which is why we keep doing it.

Free High Quality Icon Sets - Leica Camera Icon

This round-up covers 50 beautiful and useful icons that may turn out to be life-savers for your next design. We present photorealistic icons, mini icons and pictograms, symbols and signs, free templates as well as Christmas icon sets and desktop replacement icons. Please make sure to read the license agreements before using the icons – they may change from time to time. Did you find this post useful? Would you like to see more similar posts in the future? Let us know in the comments to this post!

You may be interested in the following related posts:

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in 50 Beautiful Free Icon Sets For Your Next Design" 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 50 Beautiful Free Icon Sets For Your Next Design" />  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 50 Beautiful Free Icon Sets For Your Next Design" />  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 50 Beautiful Free Icon Sets For Your Next Design" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in 50 Beautiful Free Icon Sets For Your Next Design" border="0" width="1" height="1" />

Round-ups of beautiful and useful icons are almost legendary here, on Smashing Magazine. While some readers complain about the annoying “list”-style of some of our articles, we are confident that useful round-ups of relevant resources are very valuable and useful for designers. This is why over months we collect useful links and then present them in posts in the magazine. Like it or hate it, but the feedback that we get from the design community when we publish such posts is mostly positive which is why we keep doing it.

This round-up covers 50 beautiful and useful icons that may turn out to be life-savers for your next design. We present photorealistic icons, mini icons and pictograms, symbols and signs, free templates as well as Christmas icon sets and desktop replacement icons. Please make sure to read the license agreements before using the icons – they may change from time to time. Did you find this post useful? Would you like to see more similar posts in the future? Let us know in the comments to this post!

You may be interested in the following related posts:

  • href="http://www.smashingmagazine.com/2009/09/16/50-fresh-free-hiqh-quality-icon-sets/">Fresh Free High Quailty Icon Sets
  • href="http://www.smashingmagazine.com/2009/06/07/50-fresh-useful-icon-sets-for-your-next-design/">50 Fresh Useful Icon Sets For Your Next Design
  • href="http://www.smashingmagazine.com/2009/02/16/50-beautiful-useful-and-free-icon-sets/">50 Free High-Quality Icon Sets

Free High Quality Icons

href="http://babasse.deviantart.com/art/iMod-for-Dock-102546179">iMod />146 freely available PNG-icons in the resolutions 256×256px and 512×512px.

class="showcase"> href="http://babasse.deviantart.com/art/iMod-for-Dock-102546179"> width="500" height="759" alt="Icons-07-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-07-icon-sets.jpg" />

href="http://seedling-design.deviantart.com/art/Leica-Camera-Icon-141776615">Leica Camera Icon />A Leica rangefinder camera icon, available in the resolution 512×512px. Mac- and Win-versions are available.

class="showcase"> href="http://seedling-design.deviantart.com/art/Leica-Camera-Icon-141776615"> width="500" height="293" alt="Leica-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/leica-icon-sets.jpg" />

href="http://templay.de/Downloads/45/Geschenk-Box-Icon.html">Gifts boxes (Registration required) />9 various gift icons in the resolution 256×256px, .PNG. Free for private use; for commercial use a link to the designers’ site is required.

class="showcase"> href="http://templay.de/Downloads/45/Geschenk-Box-Icon.html"> width="457" height="487" alt="Icons-12-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-12-icon-sets.jpg" />

href="http://www.templay.de/artikel_details.php?p_id=48&topnav=1">Musicons Icon Set (Registration required) />A set of 8 music-related icons. Available in the resolutions 256×256, 128×128, 48×48, 32×32, 16×16 as png, .ico, .hqx and .icns. Free for private use; for commercial use a link to the designers’ site is required.

class="showcase"> href="http://www.templay.de/artikel_details.php?p_id=48&topnav=1"> width="500" height="852" alt="Music-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/music-icon-sets.jpg" />

href="http://vezok.deviantart.com/art/Gamble-icons-146409069">Gamble icons

class="showcase"> href="http://vezok.deviantart.com/art/Gamble-icons-146409069"> width="500" height="833" alt="Free-high-quality-icon-sets-134 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-134.jpg" />

href="http://mannmitdertarnjacke.deviantart.com/art/PixelShop-Icon-126562500">PixelShop Icon />Remake of Pixelmator icon in three different variations for Photoshop (or any other application).

class="showcase"> href="http://mannmitdertarnjacke.deviantart.com/art/PixelShop-Icon-126562500"> width="500" height="476" alt="Brush-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/brush-icon-sets.jpg" />

href="http://vandelaydesign.com/blog/site-news/portfolio-icons/">Free Portfolio Icon Set />A set of 5 icons with portfolio sites in mind. The set includes PNG files of 512 pixels and 256 pixels, plus the source files (Illustrator). The icons are free for use in both personal and commercial projects.

class="showcase"> href="http://vandelaydesign.com/blog/site-news/portfolio-icons/"> width="500" height="421" alt="Icons-08-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-08-icon-sets.jpg" />

href="http://macthemes.net/forum/viewtopic.php?id=16800037">MacBook

class="showcase"> href="http://macthemes.net/forum/viewtopic.php?id=16800037"> width="514" height="298" alt="Icons-05-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-05-icon-sets.jpg" />

href="http://blog.cocoia.com/2009/pre-desktop-goodie/">Pre Desktop Goodie />They’re not amazingly detailed or even polished at their maximum size of 512 pixels, but that wasnít my intention, either. Consider that a disclaimer before you start commenting that they donít look nice enough to you at that size ;).

class="showcase"> href="http://blog.cocoia.com/2009/pre-desktop-goodie/"> width="500" height="416" alt="Icons-10-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-10-icon-sets.jpg" />

href="http://nemone.deviantart.com/art/STACKS-70894340">STACKS

class="showcase"> href="http://nemone.deviantart.com/art/STACKS-70894340"> width="500" height="297" alt="Free-high-quality-icon-sets-205 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-205.jpg" />

href="http://azuresol.deviantart.com/art/Sketchy-Icons-134668163">Sketchy Icons />…I’ve been doing this for quite a while. I’ve recently bought a tablet, and it turned out that my hand isn’t listening as it used to. So I’ve been doing this for practice. I designed some of the icons, modified some and just redraw the ones that i found pleasing. These are all the Icons I use at the moment, so if you want some other icons, just let me know.

class="showcase"> href="http://azuresol.deviantart.com/art/Sketchy-Icons-134668163"> width="500" height="376" alt="Free-high-quality-icon-sets-215 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-215.jpg" />

href="http://blog.cocoia.com/2009/iworkcom-goodie/">iWork.com

class="showcase"> href="http://blog.cocoia.com/2009/iworkcom-goodie/"> width="495" height="354" alt="Free-high-quality-icon-sets-181 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-181.jpg" />

href="http://cwilliams.me/downloads.php">Icons by Chris Williams />Various icons designed by Chris Williams and available for free download. Among them is this Jack Daniels icon in .ico and .icontainer.

class="showcase"> href="http://cwilliams.me/downloads.php"> width="339" height="512" alt="Icons-11-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-11-icon-sets.jpg" />

href="http://www.littleboxofideas.com/blog/freebies/exclusive-free-icon-set-for-designers">Exclusive Free LBOI Icon Set For Designers />A little while back Iconshock contacted me and offered to do an exclusive icon set for LBOIís readers. So I set off to browse their website and their work. They do some amazing work in the icon industry. Their website boasts of 803824 unique icons in 232 categories. That is pretty impressive in itself. What I really liked was their active design community and blog where they offered significant number of free high quality icons for downloads every week, featured interesting articles about design and icons and showcased great designer talent. Go check out IconShock ís royalty free icons and custom icon design services.

class="showcase"> href="http://www.littleboxofideas.com/blog/freebies/exclusive-free-icon-set-for-designers"> width="500" height="741" alt="Free-high-quality-icon-sets-217 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-217.jpg" />

href="http://indestudio.deviantart.com/art/Stock-icons-113866631">Stock icons

class="showcase"> href="http://indestudio.deviantart.com/art/Stock-icons-113866631"> width="500" height="588" alt="Free-high-quality-icon-sets-218 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-218.jpg" />

href="http://psd.tutsplus.com/freebies/icons/free-set-of-25-icons-from-turbomilk-courtesy-of-graphicriver/">Graphic River Webset Icons />Designed by Turbomilk, this set contains various social media icons that are available for free personal and commercial use. However, you must link back to the release page if using these icons in a commercial project. Available as .png in the resolutions 16×16px – 48×48px.

class="showcase"> href="http://psd.tutsplus.com/freebies/icons/free-set-of-25-icons-from-turbomilk-courtesy-of-graphicriver/"> width="500" height="450" alt="Turb-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/turb-icon-sets.jpg" />

href="http://kalmichael.com/icondesign/">Kal Michael’s Icons />Various icons in various resolutions, designed by Kal Michael, available for free download and use.

class="showcase"> href="http://kalmichael.com/icondesign/"> width="500" height="500" alt="Worlds-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/worlds-icon-sets.jpg" />

href="http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/">178 Amazing Web Design Icon />The WooFunction Icon Set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available as 32?32 pixel PNG files and we can assure you that they are indeed pixel-perfect. If you have an in-depth look at the individual icons, youíll notice that Liam has spent a lot of time paying attention to the finer details, which means that this is a really classy icon set. Here; have a look for yourself:

class="showcase"> href="http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/"> width="458" height="328" alt="Icons-01-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-01-icon-sets.jpg" />

href="http://lazycrazy.deviantart.com/art/Gentle-Romantic-icons-142375324">Gentle Romantic icons />This set contains 5 .png-icons in the resolution 512×512px. The icons are tiara on royal pillow, rose, champagne glasses (looks good on black and white background), heart with ribbon, Tiffany key.

class="showcase"> href="http://lazycrazy.deviantart.com/art/Gentle-Romantic-icons-142375324"> width="500" height="367" alt="Icons-15-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-15-icon-sets.jpg" />

href="http://www.woothemes.com/2009/07/hand-drawn-social-media-icons/">Hand-Drawn Social Media Icon />The set comprising of 24 different icons, should cover most of the social networks that you frequent regularly and the default icon size has been set at 64 x 64 pixels.

class="showcase"> href="http://www.woothemes.com/2009/07/hand-drawn-social-media-icons/"> width="333" height="365" alt="Icons-02-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-02-icon-sets.jpg" />

href="http://www.cutelittlefactory.com/freebies/soda-pop-caps/">Soda Pop Caps Icons />Together with the obvious Coca Cola, Fanta, Sprite and Pepsi caps (including Pepsiís horrible redesign), the set features Vita Cola, a Coca Cola knockoff created in Eastern Germany in the mid-Fifties under the Communist regime.

class="showcase"> href="http://www.cutelittlefactory.com/freebies/soda-pop-caps/"> width="500" height="375" alt="Soda-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/soda-icon-sets.jpg" />

href="http://leon-gao.deviantart.com/art/Castle-105114183">Jacal’s Castle (Win) />This castle icon is available as .ico and .icontainer. Free for personal use, free for public use with a link to the designer’s site. href="http://www.jacal-team.com/">Mac-version.

class="showcase"> href="http://leon-gao.deviantart.com/art/Castle-105114183"> width="500" height="349" alt="Free-high-quality-icon-sets-178 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-178.jpg" />

href="http://leon-gao.deviantart.com/art/Jacintosh-119519900">Jacintosh (Win) />This castle icon is available as .ico. Free for personal use, free for public use with a link to the designer’s site. Only Win-version is available.

class="showcase"> href="http://leon-gao.deviantart.com/art/Jacintosh-119519900"> width="500" height="327" alt="Free-high-quality-icon-sets-179 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-179.jpg" />

href="http://lazycrazy.deviantart.com/art/Designer-s-tools-icon-WD2-144014050">Designer’s tools icon – WD2

class="showcase"> href="http://lazycrazy.deviantart.com/art/Designer-s-tools-icon-WD2-144014050"> width="500" height="500" alt="Free-high-quality-icon-sets-110 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-110.jpg" />

href="http://lazycrazy.deviantart.com/art/Shopping-bag-icon-WD1-143701656">Shopping bag icon – WD1 />This time it’s only one png icon, but it have 3 colors of ribbon handle and 5 sizes. I decided to do new icon series but this collection is called “weekly delicious”, which means will be new icon every week, so here is №1 – shopping bag, it’s easy in photoshop to change colors of ribbons so shopping bag will fit in your design. Add logo or company style graphic elements on it and it will fit anywhere

class="showcase"> href="http://lazycrazy.deviantart.com/art/Shopping-bag-icon-WD1-143701656"> width="500" height="500" alt="Free-high-quality-icon-sets-112 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-112.jpg" />

href="http://mickka.deviantart.com/art/Switch-icon-145997284">Switch icon

class="showcase"> href="http://mickka.deviantart.com/art/Switch-icon-145997284"> width="500" height="244" alt="Free-high-quality-icon-sets-115 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-115.jpg" />

href="http://cargo.hrvoje-bielen.com/">Hrvoje Bielen’s Icons />Various icons, designed by Hrvoje Bielen: crankset icon, propeller engine, jet engine turbine, aircraft, Twitter egg, Gibson Les Paul Guitar and othes. Resolutions: 16×16px — 512×512px, .ico, .png, .tif, .icns.

class="showcase"> href="http://cargo.hrvoje-bielen.com/"> width="500" height="630" alt="Air-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/air-icon-sets.jpg" />

href="http://www.webiconset.com/">Cute Blogging Icon Set />This set contains 10 freely available icons. You can use these icons on your blog. Cute Blogging Icon Set inclides Design, Download, Freelance, Part-time, Hire Me, Not Available, About Me, Services, My Blog, Contact.

class="showcase"> href="http://www.webiconset.com/"> width="500" height="513" alt="Cute-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/cute-icon-sets.jpg" />

href="http://www.tutorial9.net/resources/sketchy-web-icons-30-hand-drawn-icon-pack/">Sketchy Web Icons: 30 Hand Drawn Icon Pack />This Icon Pack includes 30 Hand-Drawn Web Design Icons. This is the perfect set for adding that handmade feel to your own creations online.

class="showcase"> href="http://www.tutorial9.net/resources/sketchy-web-icons-30-hand-drawn-icon-pack/"> width="500" height="672" alt="Free-high-quality-icon-sets-142 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-142.jpg" />

href="http://www.chethstudios.net/2009/01/gorgeous-mini-social-networking-icon.html">Mini Social Networking Icon set />This set includes 45 social networking Icons: Blogger / Blogspot, Delicious, Digg, Designmoo, Facebook, Design float, Linkedin, Mixx, Myspace, RSS, Technorati, Twitter, WordPress, Yahoo, Windows, Openid, Orkut, Skype, DeviantArt, FriendFeed and many more. Dimensions: 32×32px and 64×64px; .PNG icons.

class="showcase"> href="http://www.chethstudios.net/2009/01/gorgeous-mini-social-networking-icon.html"> width="271" height="347" alt="Icons-19-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-19-icon-sets.jpg" />

href="http://colaja.deviantart.com/art/Extreme-Grunge-Garments-Icons-137666117">Extreme Grunge Garments Icons />This high quality, hand made, icon pack is full with 9 Extreme Grunge Social Media Garments. Each icon is in .png format with transparent backgrounds, sized at 256×256px.

class="showcase"> href="http://colaja.deviantart.com/art/Extreme-Grunge-Garments-Icons-137666117"> width="500" height="710" alt="Free-high-quality-icon-sets-147 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-147.jpg" />

href="http://ncus.deviantart.com/art/Videobox-68626678">Videobox />This is the app icon for Videobox, the successor of FLVR.

class="showcase"> href="http://ncus.deviantart.com/art/Videobox-68626678"> width="500" height="432" alt="Free-high-quality-icon-sets-148 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-148.jpg" />

href="http://www.cutelittlefactory.com/freebies/breakfast-icons/">Breakfast Icons />Featuring a genuine Moka Express coffee maker, coffee cup, chocolate chip muffin, toast and sugar pot in three versions: open empty, open full and closedóuse it as a trash can replacement!

class="showcase"> href="http://www.cutelittlefactory.com/freebies/breakfast-icons/"> width="500" height="307" alt="Free-high-quality-icon-sets-153 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-153.jpg" />

href="http://iconcubic.deviantart.com/art/Classic-Cameras-PNG-Version-48951715">Classic Cameras (PNG) />A set of camera icons in the resolution 128×128px. Versions: href="http://iconcubic.deviantart.com/art/Classic-Cameras-Win-Version-48952201">Win version (ico), href="http://iconcubic.deviantart.com/art/Classic-Cameras-Mac-Version-48951222">Mac Version.

class="showcase"> href="http://iconcubic.deviantart.com/art/Classic-Cameras-PNG-Version-48951715"> width="402" height="419" alt="Free-high-quality-icon-sets-155 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-155.jpg" />

href="http://bigkobe.deviantart.com/art/Moleskine-Helvetica-Icon-B-127178975">Moleskine Helvetica Icon

class="showcase"> href="http://bigkobe.deviantart.com/art/Moleskine-Helvetica-Icon-B-127178975"> width="500" height="375" alt="Free-high-quality-icon-sets-168 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-168.jpg" />

class="showcase"> href="http://bigkobe.deviantart.com/art/Moleskine-Helvetica-Icon-R-122702258"> width="500" height="375" alt="Free-high-quality-icon-sets-169 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-169.jpg" />

href="http://mazenl77.deviantart.com/art/Generic-Controller-2-146321723">Generic Controller 2 />Another generic controller icon, based on the PlayStation controller. Also with a folder this time.

class="showcase"> href="http://mazenl77.deviantart.com/art/Generic-Controller-2-146321723"> width="500" height="250" alt="Free-high-quality-icon-sets-172 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-172.jpg" />

href="http://leon-gao.deviantart.com/art/Capsule-145254696">Capsule />The inspiration comes from comic book : ” DragonBall ” , capsule is an amazing stuff in this book.

class="showcase"> href="http://leon-gao.deviantart.com/art/Capsule-145254696"> width="483" height="296" alt="Free-high-quality-icon-sets-173 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-173.jpg" />

href="http://blog.cocoia.com/2009/photoshop-replacement-icon/">Photoshop Icon Goodie />A quick replacement icon for Photoshop. Free for personal use and customization only.

class="showcase"> href="http://blog.cocoia.com/2009/photoshop-replacement-icon/"> width="508" height="338" alt="Ph-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/ph-icon-sets.jpg" />

href="http://leon-gao.deviantart.com/art/Usercenter-Calendar-74925092">Usercenter Calendar

class="showcase"> href="http://leon-gao.deviantart.com/art/Usercenter-Calendar-74925092"> width="484" height="379" alt="Free-high-quality-icon-sets-177 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-177.jpg" />

href="http://www.jankoatwarpspeed.com/post/2009/09/17/sixpack-status-icons.aspx">Sixpack status icon pack />Sixpack status is a small set of high quality icons which can be used for status messages. It is completely free for personal and commercial use. Icons are available in four sizes, 32×32, 64×64, 128×128 and 256×256px. They are also available in vector (SVG) format, which can be edited using applications such as Inkscape (they are actually made in Inkscape).

class="showcase"> href="http://www.jankoatwarpspeed.com/post/2009/09/17/sixpack-status-icons.aspx"> width="500" height="287" alt="Free-high-quality-icon-sets-192 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-192.jpg" />

href="http://playground.ebiene.de/2316/free-ecommerce-icons/">Free E-Commerce Icons />10 e-Commerce icons, available as the Adobe Illustrator source file (.ai). They may be used in any projects, whether commercial or private nature.

class="showcase"> href="http://playground.ebiene.de/2316/free-ecommerce-icons/"> width="474" height="474" alt="Free-high-quality-icon-sets-196 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-196.jpg" />

href="http://www.vagrantradio.com/2009/04/gaming-icon-set-free-download.html">Gaming Icon Set />A set of 21 free gaming icons for you to use in any projects, on your application dock, desktop or whatever you like.

class="showcase"> href="http://www.vagrantradio.com/2009/04/gaming-icon-set-free-download.html"> width="382" height="361" alt="Icons-23-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-23-icon-sets.jpg" />

href="http://juliensagot.com/download.html">Voodoo Folder Icon Set />Voodoo system folder icon. Dock and Wallpaper included. Including sizes: 16×16px — 512×512px. Available in .png, .icns, .ico and iContainer.

class="showcase"> href="http://juliensagot.com/download.html"> width="500" height="177" alt="Free-high-quality-icon-sets-202 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-202.jpg" />

href="http://hotiron.deviantart.com/art/folios-142712968">folios />8 Adobe desktop replacement icons; .png in resolutions 16×16px — 256×256px.

class="showcase"> href="http://hotiron.deviantart.com/art/folios-142712968"> width="500" height="411" alt="Icons-25-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-25-icon-sets.jpg" />

Pictograms, Symbols and Mini-icons

href="http://www.freshpixel.fr/downloads/">Freshpixel.fr />Freely available icons in vector format by French designer Mister Size. Released under the Creative Commons Attribution 3.0 License.

class="showcase"> href="http://www.freshpixel.fr/downloads/"> width="500" height="500" alt="Vector Icons Pack02-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/vector_icons_pack02-icon-sets.jpg" />

class="showcase"> href="http://www.freshpixel.fr/downloads/"> width="500" height="500" alt="Pack4-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/pack4-icon-sets.jpg" />

class="showcase"> href="http://www.freshpixel.fr/downloads/"> width="500" height="500" alt="Pack6-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/pack6-icon-sets.jpg" />

href="http://www.designworkplan.com/design/symbol-signs.htm">DesignWorkPlan />This is a collection of 50 common used signage symbols, professional designed. The symbols signs are free of charge available as an OpenType font format, allowing you to easily add symbols & icons to your sign and wayfinding design. All the symbols have been designed & created by Sander Baumann and set to the proportions of a regular typeface, so you no longer need to copy/paste the symbols into your designs.

class="showcase"> href="http://www.designworkplan.com/design/symbol-signs.htm"> width="500" height="425" alt="Free-high-quality-icon-sets-106 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-106.jpg" />

href="http://www.ecomo.or.jp/barrierfree/pictogram/picto_top.html">125 Public Information Symbols />This Japanese website made a collectio of public information symbols available for free download. The available formats are PDF, EPS and GIF. The set contains symbols of public facilities, transport facilities, commercial facilities, tourism, culture, sport facilities, safety, prohibition, warning and mandatory.

class="showcase"> href="http://www.ecomo.or.jp/barrierfree/pictogram/picto_top.html"> width="379" height="179" alt="Free-high-quality-icon-sets-107 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-107.jpg" />

href="http://brsev.deviantart.com/">brsev />128 unique icons for apps, folders, settings, and the desktop. Each icon has two color variants, dark and light. Each color variant is available as a 128×128 PNG or a Windows ICO. The ICO combines 16×16, 32×32, and 256×256 resolutions; each icon was carefully tweaked in shape and style for the best display quality at the three resolutions listed.

class="showcase"> href="http://brsev.deviantart.com/"> width="435" height="466" alt="Free-high-quality-icon-sets-108 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-108.jpg" />

href="http://www.androidicons.com/">Android Icons />All icons are distributed under a Creative Commons Attribution Share Alike license. Feel free to use them in any form in you projects or even remix them. No need to link back to this page, but it would be nice.

class="showcase"> href="http://www.androidicons.com/"> width="500" height="205" alt="Free-high-quality-icon-sets-140 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-140.jpg" />

href="http://designyoutrust.com/2009/12/13/149-icons-of-scary-celebrity/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+dyt+(Design+You+Trust.+World%27s+Most+Famous+Social+Inspiration.)">149 Icons of Scary Celebrity />149 icons of horror and fantasy gridded up on large sheet and served up on a wall. Chop Shopís The Horror & Fantasy Collection screened print featuring 62 monsters, 35 vampires and 51 various icons of the undead all referenced from various sources of film, television, gaming, music, literature, legend and more. Perfect for taking to work, and killing productivity for an entire day.

class="showcase"> href="http://designyoutrust.com/2009/12/13/149-icons-of-scary-celebrity/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+dyt+(Design+You+Trust.+World%27s+Most+Famous+Social+Inspiration.)"> width="500" height="666" alt="Free-high-quality-icon-sets-149 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-149.jpg" />

href="http://www.cutelittlefactory.com/freebies/cafeteria-icons-freebie/">Cafeteria Vector Icons />These are vector pictograms rather than icons but all the more useful for that. You can scale them to any size, change their colors and mess with them any way you want.

class="showcase"> href="http://www.cutelittlefactory.com/freebies/cafeteria-icons-freebie/"> width="500" height="311" alt="Free-high-quality-icon-sets-154 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-154.jpg" />

href="http://code.google.com/p/google-maps-icons/">google-maps-icons />Map icons collection is a pack of 600 free icons for your placemarks. You can put them manually in your Google Maps with the “My maps” feature, or automaticly with the Google Maps API.

class="showcase"> href="http://code.google.com/p/google-maps-icons/"> width="501" height="198" alt="Icons-04-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-04-icon-sets.jpg" />

href="http://www.customicondesign.com/free-icon/172-final-flag-icons/">172 Country Flag Icons />172 final country flag icons which rendered at 256×256, 128×128, 64×64, 48×48, 32×32, 24×24, 16×16 pixels and formats are png, ico and icns. License: Free for non-commercial use.

class="showcase"> href="http://www.customicondesign.com/free-icon/172-final-flag-icons/"> width="490" height="321" alt="Flags-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/flags-icon-sets.jpg" />

href="http://www.customicondesign.com/free-icon/american-states-icon-set/">United States Flags Icons />American states Icon set which rendered at 256×256, 128×128, 64×64, 48×48, 32×32, 16×16 pixels and format are png, ico and icns. License: Free for non-commercial use.

class="showcase"> href="http://www.customicondesign.com/free-icon/american-states-icon-set/"> width="480" height="300" alt="Icons-22-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-22-icon-sets.jpg" />

href="http://adriankenny.deviantart.com/art/Fun-142762083">Fun />A set of small 16×16px icons: Wacom tablet, Dresser, iPhone, iMac, Dresser.

class="showcase"> href="http://adriankenny.deviantart.com/art/Fun-142762083"> width="200" height="300" alt="Free-high-quality-icon-sets-206 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-206.jpg" />

href="http://macthemes.net/forum/viewtopic.php?id=16800332">Mini Icon Set />A set of various mini icons: included sizes are 48px, 32px and 16px.

class="showcase"> href="http://macthemes.net/forum/viewtopic.php?id=16800332"> width="500" height="284" alt="Free-high-quality-icon-sets-207 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-207.jpg" />

Christmas Icons and Vectors

href="http://lazycrazy.deviantart.com/art/Silent-Night-Christmas-icons-146501718">Silent Night Christmas icons

class="showcase"> href="http://lazycrazy.deviantart.com/art/Silent-Night-Christmas-icons-146501718"> width="500" height="374" alt="Free-high-quality-icon-sets-109 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-109.jpg" />

href="http://www.smashingmagazine.com/2009/12/08/free-smashing-christmas-icon-set/">Smashing Christmas Icon Set

class="showcase"> href="http://www.smashingmagazine.com/2009/12/08/free-smashing-christmas-icon-set/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/smashing-christmas-icon-set/release.jpg" alt="Release in 50 Beautiful Free Icon Sets For Your Next Design" width="450" height="450" />

href="http://vladstudio.com/de/free_christmas_photoshop_graphics/">Free Christmas Photoshop Pack />Need to decorate your website or banner with Christmas elements? Vladstudio Christmas Photoshop Pack will help!

class="showcase"> href="http://vladstudio.com/de/free_christmas_photoshop_graphics/"> width="500" height="106" alt="Free-high-quality-icon-sets-203 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-203.jpg" />

href="http://fasticon.com/freeware/index.php/santa-claus-icons/">Santa Claus Icons

class="showcase"> href="http://fasticon.com/freeware/index.php/santa-claus-icons/"> width="393" height="306" alt="Icons-03-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-03-icon-sets.jpg" />

href="http://enhancedlabs.com/index.php/labnotes/comments/the_real_christmas_05_reloaded/">The Real Christmas ë05 Reloaded />As a christmas Gift from Enhanced Labs, We decided to Add 7 Bonus Icons to the package, and Re-Release this icon set on christmas day. This icon set now includes 20 holiday icons.

class="showcase"> href="http://enhancedlabs.com/index.php/labnotes/comments/the_real_christmas_05_reloaded/"> width="500" height="757" alt="Free-high-quality-icon-sets-158 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-158.jpg" />

href="http://www.iconarchive.com/category/christmas/christmas-icons-by-artdesigner.html">Christmas Icons

class="showcase"> href="http://www.iconarchive.com/category/christmas/christmas-icons-by-artdesigner.html"> width="500" height="155" alt="Free-high-quality-icon-sets-144 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-144.jpg" />

href="http://www.iconarchive.com/category/christmas/christmas-icons-by-archigraphs.html">Christmas Icons />Archigraphs Christmas icons Icons Set created for free use. For MacOs X, and Windows Vista. PNG files included.

class="showcase"> href="http://www.iconarchive.com/category/christmas/christmas-icons-by-archigraphs.html"> width="500" height="201" alt="Free-high-quality-icon-sets-143 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-143.jpg" />

href="http://zeusboxstudio.com/icon/">Shiny Social Balls />Freeware. Social Christmas Icons. Available for Windows and Mac.

class="showcase"> href="http://zeusboxstudio.com/icon/"> width="328" height="318" alt="Icons-18-icon-sets in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/icons-18-icon-sets.jpg" />

href="http://iconka.com/">Xmas 2009 Icon Set

class="showcase"> href="http://iconka.com/"> width="399" height="245" alt="Free-high-quality-icon-sets-137 in 50 Beautiful Free Icon Sets For Your Next Design" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/free-high-quality-icon-sets/free-high-quality-icon-sets-137.jpg" />

Would you like to see more similar posts on Smashing Magazine?

Related posts

You may be interested in the following related posts:

  • href="http://www.smashingmagazine.com/2009/09/16/50-fresh-free-hiqh-quality-icon-sets/">Fresh Free High Quailty Icon Sets
  • href="http://www.smashingmagazine.com/2009/06/07/50-fresh-useful-icon-sets-for-your-next-design/">50 Fresh Useful Icon Sets For Your Next Design
  • href="http://www.smashingmagazine.com/2009/02/16/50-beautiful-useful-and-free-icon-sets/">50 Free High-Quality Icon Sets
/>

© Vitaly Friedman for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/">Permalink | href="http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/#comments">105 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/&title=50%20Beautiful%20Free%20Icon%20Sets%20For%20Your%20Next%20Design">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'50%20Beautiful%20Free%20Icon%20Sets%20For%20Your%20Next%20Design'%20http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/icons/" rel="tag">Icons

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 

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.

Corona Age Verification Screen

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

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 Unusable and Superficial World of Beer and Alcohol Websites" border="0" width="1" height="1" />

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

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

0 Comments
Leave A Response

Tagged with: • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
 
Page 1 of 212

Seth Godin: Sliced Bread

Malcolm Gladwell: Outliers

Anthony Parinello: Your Price is Too High

©