professional wordpress themes

Styling HTML Lists with CSS: Techniques and Resources

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

  

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.

Stepmenu in Styling HTML Lists with CSS: Techniques and Resources

If you’re new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design.

In addition, we’ll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists. All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Styling HTML Lists with CSS: Techniques and Resources" 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 Styling HTML Lists with CSS: Techniques and Resources" />  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 Styling HTML Lists with CSS: Techniques and Resources" />  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 Styling HTML Lists with CSS: Techniques and Resources" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in Styling HTML Lists with CSS: Techniques and Resources" border="0" width="1" height="1" />

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.

If you’re new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design.

In addition, we’ll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists. All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.

Available List Options

Unordered Lists: <ul>

Unordered lists are the most commonly used lists. Here is an image showing what an unstyled unordered list looks like in different browsers:

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/lists-browsers.jpg" alt="Lists-browsers in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="340" />

As you can see above, the default settings for unordered lists are somewhat different across various browsers. Of course, nowadays it is rare to see a naked unordered list on any website. Also, a good href="http://meyerweb.com/eric/tools/css/reset/">CSS reset will normalize those differences, bringing the list down to bare text with no bullets and no margins or padding.

CSS properties that are specific to unordered lists include list-style-type, list-style-position, and list-style-image. These properties set the type of marker (or bullet), the position of the marker, and an image to replace the marker. These three properties can be combined using the shorthand list-style property.

The list-style-type property can be set to a number of different values, some of which are shown in the chart below:

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/list-markers.jpg" alt="List-markers in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="181" />

Depending on the user’s browser and system, certain values for list-style-item may not appear correctly, often defaulting to decimal. Using an incrementing value for an unordered list is not recommended since that would take away the semantic value of the unordered list.

The list-style-position property specifies the position of the list marker, and can be set to either outside (the default) or inside. This property would also set the position of an image, if the list-style-image property is set.

The list-style-image property can be used to give the unordered list a custom look with unique “bullets”. Unfortunately, this method of adding a bullet to an unordered list is buggy in Internet Explorer, and is rarely used. A much better solution is to add a background image to the <li> elements on the list, adjusting the position of the background image accordingly, and setting it to no-repeat. This solution is explained through a series of steps at href="http://css.maxdesign.com.au/listutorial/introduction.htm">maxdesign.com, and works nicely in all browsers.

Ordered Lists: <ol>

Ordered lists are used when a list of items requires a visible incrementing value before each item. The value for the marker on an ordered list can be set to any of the values also available for an unordered list, as discussed above. In most cases, an ordered list would either have an incrementing marker on the list items, or no marker at all. So, it would be unlikely that you would change the marker from an incrementing one to a non-incrementing one on an ordered list, since that would remove the semantic value of the items.

Definition Lists: <dl>

Definition lists are used to mark up lists of items that have definitions. They consist of definition terms (<dt>) along with definitions (<dd>). The pairings for definition list items do not have to be exactly paired up. The following is perfectly valid in XHTML Strict:

<dl>
	<dt>calculator</dt>
	<dt>abacus</dt>
	<dd>A machine used for making numerical calculations.</dd>
</dl>

Thus, you could have more than one <dt> with a single <dd>, or even have multiple <dd> tags and only one <dt>.

The visual display of a definition list, by default, is virtually the same across all browsers, as shown in the image below:

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/definition-list.jpg" alt="Definition-list in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="128" />

Deprecated Lists: <menu> & <dir>

The <menu> and <dir> elements also, technically, qualify as “HTML lists”, but they are deprecated in XHTML, so I won’t discuss those in detail here.

Lists in HTML5

In HTML5, the unordered list has basically remained the same, although now it seems to be referred to simply as a “list”. The new <nav> element will be used to wrap a list that is used for navigation.

The <ol> element has slightly changed, gaining two new attributes: reversed, which is a Boolean that indicates if the list should be ascending or descending, and start, which is an integer that declares the starting point of the ordered list items.

Also, the <figure> and <details> elements have been added. Those new tags will have children that include <dt> and <dd> elements.

For further information on lists in HTML5, see the href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5 Draft Standard.

Browser Differences

There are some notable differences across the most commonly-used browsers when certain styles are applied to ordered or unordered lists. Let’s take a look at some of these differences. Of course, this assumes there are no other styles associated with the elements, including those in a CSS reset.

Adding “display: block” to List Items

In Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3, and Safari, adding display: block to the <li> elements in an ordered or unordered list will make the bullets or numbers disappear.

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/display-block.jpg" alt="Display-block in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="126" />

In IE6 and IE7 the bullets and numbers will still be visible, even with display: block applied to the list items.

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/display-block-2.jpg" alt="Display-block-2 in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="126" />

Adding “float: left” to List Items

In Internet Explorer 6 and 7, adding float: left to the list items (with no other styles present) will align the list items horizontally and the list bullets (or list numbers) will disappear. In IE8 and all other browsers, the list items will align horizontally, but the list bullets (or list numbers) will still be visible.

Another factor to keep in mind when the list items are floated is that the list container (the <ul> element) will collapse when it contains only floated elements. This occurs the same way in all browsers. Adding overflow: hidden to the <ul> or <ol> element is one way to resolve this issue.

To achieve virtually the same effect as float: left in all browsers, the best solution is to use display: inline.

Ordered List Items That Have “Layout” in IE

In IE6 & IE7, if the list items in an ordered list have “Layout”, the numbers in the ordered list will not increment, and will all show as “1″, as shown in the image below:

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/non-increment.jpg" alt="Non-increment in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="200" />

The hasLayout property cannot be set directly, but it can be changed if an element is given an explicit width or height, or the element is floated or absolutely positioned, among other things. For a thorough discussion of the hasLayout property, href="http://reference.sitepoint.com/css/haslayout">see this article.

Padding & Margins in IE 6/7

In most browsers, in order to remove the bullets or numbers from a list and push the list flush to the left, the left padding needs to be set to zero. But this has no effect in IE6 and IE7. Instead, the left margin needs to be set to zero for this to be achieved in those browsers.

src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/padding-left.jpg" alt="Padding-left in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="126" />

Achieving Consistent List-Styling in all Browsers

To avoid the issues that arise in the handling of list styles in the different browsers, the best method is to use a CSS reset. A CSS reset will set virtually all default browser settings to the bare minimum, and will allow you to work from a common ground in all browsers. There will still be differences after certain styles are applied, but they will not be as difficult to deal with after a reset is put in place.

Also, as mentioned earlier, it is best to completely avoid using the list-style-image property, and to instead set a background on the <li> elements. This will provide a cross-browser, easy-to-maintain solution for achieving custom bullets on an unordered list.

Showcase of Trends, Examples, & Tutorials

Now that we’ve reviewed the basics of HTML lists, as well as some browser inconsistencies, let’s look at a number of different examples and tutorials that display practical examples and uses for HTML lists.

Navigation Bars

By far the most common use for the unordered list is the navigation bar, whether vertical or horizontal. Ever since table-based layouts became obsolete, the unordered list has been widely implemented as a basis for navigation elements for a number of reasons, listed below.

  • An unordered list is a block-level element, and so does not need to be wrapped in an extra <div> to apply a background or other graphical enhancement
  • When styles are disabled, a styled list will degrade gracefully, ensuring the navigation items appear distinct from the rest of the page’s content
  • Although an unordered list might add more markup than just a plain list of <a> tags, having the extra <li> elements allows the navigation bar to be graphically flexible
  • Navigation divided into lists and/or sub-lists allows users with assistive technology (such as screen readers) to easily skip entire navigation sections

href="http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html">Pure CSS Fish Eye Menu />This vertical navigation menu that mimics the Apple “fisheye” effect on rollover is done with pure CSS and utilizes an unordered list to display the icons.

href="http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/fisheye.jpg" alt="Fisheye in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="150" />

href="http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites">Sliding Doors Meets CSS Sprites />An HTML list can also provide the foundation for a tabbed navigation bar using the famous href="http://www.alistapart.com/articles/slidingdoors/">sliding doors technique, as demonstrated in this example.

href="http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/tabbed-nav.jpg" alt="Tabbed-nav in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="271" />

href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">LavaLamp for jQuery Lovers />A “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery.

href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/lavalamp.jpg" alt="Lavalamp in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="208" />

href="http://webmuch.com/animated-navigation-bar-using-jquery/">Animated Navigation Bar Using jQuery />This tutorial on WebMunch uses list-based navigation to create an animated navigation bar powered by jQuery. The demo page displays four different variations of the animated effect.

href="http://webmuch.com/animated-navigation-bar-using-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/animated-bar.jpg" alt="Animated-bar in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="400" />

href="http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css">Apple’s Navigation bar using only CSS />This tutorial describes how to recreate Apple’s navigation bar, based on a list, with some CSS3 enhancements that degrade gracefully in IE and older browsers. The final result also includes an animated hover effect that works in Safari.

href="http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/apple.jpg" alt="Apple in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="61" />

Drop-Down Menus

Older drop-down menus, like Brainjar’s href="http://www.brainjar.com/dhtml/menubar/">Revenge of the Menu Bar used <div> elements to divide sections of anchor tags, implementing JavaScript to show and hide menus. Later, drop-down menus were developed that were more semantic, and more dependent on CSS.

href="http://www.alistapart.com/articles/dropdowns">Suckerfish Dropdowns />The classic Suckerfish dropdowns by Patrick Griffiths and Dan Webb were one of the earliest drop-down (or fly-out) menus to be based on nested lists.

href="http://www.alistapart.com/articles/dropdowns"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/suckerfish.jpg" alt="Suckerfish in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="317" />

href="http://www.stunicholls.com/menu/pro_dropdown_2.html">Professional Drop-Down />Stu Nicholls provides another list-based solution for drop-downs.

href="http://www.stunicholls.com/menu/pro_dropdown_2.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/dropdowns.jpg" alt="Dropdowns in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="289" />

href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/">Animated Drop Down Menu with jQuery />This tutorial demonstrates how to create a simple, single animated drop-down menu based on an unordered list, with jQuery.

href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/dropdown-animated.jpg" alt="Dropdown-animated in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="302" />

href="http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx">Create Dropdown Menus with CSS Only />This simple technique creates list-based drop-down menus without JavaScript.

href="http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/css-dropdowns.jpg" alt="Css-dropdowns in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="231" />

href="http://www.leigeber.com/2008/11/drop-down-menu/">JavaScript Dropdown Menu with Multi Levels />These multi-level, cross-browser, list-based drop-down menus include an animated slide and fade effect.

href="http://www.leigeber.com/2008/11/drop-down-menu/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/multi-fade.jpg" alt="Multi-fade in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="278" />

Photo Displays

HTML lists serve as an effective way to display a list of photos, for many of the same reasons that were mentioned above for navigation bars. Below are some examples of photo galleries and other photo-based widgets that are styled with HTML lists.

href="http://sorgalla.com/jcarousel/">jCarousel />The jCarousel photo carousel jQuery plugin applies customizable jQuery functionality to an unordered list that can display the carousel in a number of different ways.

href="http://sorgalla.com/jcarousel/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/jcarousel.jpg" alt="Jcarousel in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="305" />

href="http://medienfreunde.com/lab/innerfade/">InnerFade with JQuery />This plugin allows an unordered list of images to serve as the basis for a fading image rotator that displays one image at a time. The screen grab below displays two of the images in mid-transition.

href="http://medienfreunde.com/lab/innerfade/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/innerfade.jpg" alt="Innerfade in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="355" />

href="http://joshuaink2006.johnoxton.co.uk/blog/206/css-photo-gallery-template">CSS Photo Gallery Template />This is a free photo gallery template that displays a caption on hover. This simple gallery uses an unordered list with floated list items.

href="http://joshuaink2006.johnoxton.co.uk/blog/206/css-photo-gallery-template"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/gallery.jpg" alt="Gallery in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="349" />

href="http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm">Definition Lists for Image Gallery />This demonstration on Max Design shows how to transform a definition list into an image gallery.

href="http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/def-photos.jpg" alt="Def-photos in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="207" />

Styling and Dividing Other Types of Content

In addition to displaying images, lists also come in handy for display of content in sometimes atypical fashion, as demonstrated by the examples below.

href="http://www.alistapart.com/articles/multicolumnlists/">Multi-Column Lists />A few years back, A List Apart demonstrated how to convert a single unordered list into a multi-columned display, without the need to divide the items into multiple lists.

href="http://www.alistapart.com/articles/multicolumnlists/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/multicolumn.jpg" alt="Multicolumn in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="256" />

href="http://css-tricks.com/style-a-list-with-one-pixel/">Style a List with One Pixel />Chris Coyier demonstrates a neat CSS trick — how to create a “depth-chart looking unordered list” using just a 1-pixel GIF.

href="http://css-tricks.com/style-a-list-with-one-pixel/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/1pixel.jpg" alt="1pixel in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="298" />

href="http://www.andrewsellick.com/31/accessible-html-forms-using-definition-lists">Accessible HTML Forms using Definition Lists />Andrew Sellick steps through the styling of a lengthy form with the help of definition lists to group sets of text boxes, radio buttons, and checkboxes.

href="http://www.andrewsellick.com/31/accessible-html-forms-using-definition-lists"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/form-def.jpg" alt="Form-def in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="305" />

href="http://www.drunkenfist.com/304/2007/11/29/a-three-column-css-layout-using-just-an-unordered-list/">A Three Column CSS Layout Using Just an Unordered List />Rob Larsen of DrunkenFist.com demonstrates how to create a 3-column page layout using an unordered list in place of the usual <div> elements.

href="http://www.drunkenfist.com/304/2007/11/29/a-three-column-css-layout-using-just-an-unordered-list/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/ul-layout.jpg" alt="Ul-layout in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="247" />

href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/">Animated Tabbed Content with jQuery />This tutorial on Gaya Design demonstrates how to create an animated tabbed content box with jQuery. The content is structured using unordered lists.

href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/tabbed-content.jpg" alt="Tabbed-content in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="436" />

href="http://www.queness.com/post/741/a-simple-and-beautiful-jquery-accordion-tutorial">A Simple and Beautiful jQuery Accordion Tutorial />This is a simple tutorial that uses nested unordered lists as a basis for a jQuery animated accordion menu.

href="http://www.queness.com/post/741/a-simple-and-beautiful-jquery-accordion-tutorial"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/accordion.jpg" alt="Accordion in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="244" />

Code Highlighters

Many blogs and tutorial sites include JavaScript-driven code highlighters that convert <pre> elements into ordered lists, as shown in the screen capture below. One such code highlighter is href="http://code.google.com/p/syntaxhighlighter/">Alex Gorbatchev’s SyntaxHighlighter

href="http://code.google.com/p/syntaxhighlighter/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/code-hilite.jpg" alt="Code-hilite in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="344" />

Blog Comments

Blog comments, including those on WordPress-driven sites, are structured with ordered lists, providing very flexible options for styling, and laying a foundation for nested comments. Nested, or “threaded” comments are now built into WordPress, as demonstrated below on href="http://www.noupe.com/spotlight/noupe-has-a-new-owner-smashing-magazine.html">Noupe.

href="http://www.noupe.com/spotlight/noupe-has-a-new-owner-smashing-magazine.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/nested-comments.jpg" alt="Nested-comments in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="452" />

Fancy Styles and Techniques with Lists

href="http://www.wil-linssen.com/jquery-sortable-lists-with-drag-drop-handle/">jQuery Sortable Lists With Drag Drop Handle />Will Linssen demonstrates, with jQuery, how to create an ordered or unordered list that allows the user to manually sort the list items.

href="http://www.wil-linssen.com/jquery-sortable-lists-with-drag-drop-handle/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/drag-drop.jpg" alt="Drag-drop in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="285" />

href="http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/">Sexy Ordered Lists with CSS />Soh Tanaka shows users how to add some fancy styling to an ordered list.

href="http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/soh-lists.jpg" alt="Soh-lists in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="472" />

href="http://veerle.duoh.com/">Veerle’s Block Hover Effect on List Items />In the “Approved” section in the footer of her home page, Veerle Pieters implements a cross-browser block-hover effect on an unordered list. Each list item contains a number of separate elements, but the hover effect works on the entire list item, and even works in IE6. The same effect is discussed in tutorials on href="http://www.smileycat.com/miaow/archives/000230.php">Smiley Cat and href="http://randsco.com/index.php/2009/05/21/beautify_a_resource_list">randsco.com.

href="http://veerle.duoh.com/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/veerle-list.jpg" alt="Veerle-list in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="472" />

href="http://www.cssplay.co.uk/menu/barchart.html">A Definition List Bar Chart />The ever-creative Stu Nicholls shows us how to display a bar chart (with very old browser stats!) with a styled definition list.

href="http://www.cssplay.co.uk/menu/barchart.html"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/bar-chart.jpg" alt="Bar-chart in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="201" />

href="http://www.webdesignerwall.com/tutorials/jquery-sequential-list/">jQuery Sequential List />This tutorial on Web Designer Wall will show you how to use jQuery to add sequential CSS classes to list items to create a graphical list.

href="http://www.webdesignerwall.com/tutorials/jquery-sequential-list/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/sequential.jpg" alt="Sequential in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="437" />

href="http://www.stevenyork.com/tutorial/creating_accessible_tag_cloud_in_php_css_mysql">Creating an Accessible Tag Cloud in PHP and CSS />This tutorial describes how to create an accessible, standards compliant tag cloud with simple code. The resulting HTML output is a simple unordered list.

href="http://www.stevenyork.com/tutorial/creating_accessible_tag_cloud_in_php_css_mysql"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/tagcloud.jpg" alt="Tagcloud in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="143" />

href="http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs">Simple Scalable CSS Based Breadcrumbs />Veerle Pieters describes how to create a breadcrumb navigation section using an unordered list.

href="http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/breadcrumbs.jpg" alt="Breadcrumbs in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="295" />

href="http://codylindley.com/CSS/325/css-step-menu">CSS Step Menu />A demonstration of a “step menu” that’s based on unordered lists.

href="http://codylindley.com/CSS/325/css-step-menu"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/stepmenu.jpg" alt="Stepmenu in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="442" />

href="http://www.cssbake.com/cookbook/overlap-that-menu/">Overlap That Menu! />A tutorial that describes how to create overlapping menu items using a styled unordered list.

href="http://www.cssbake.com/cookbook/overlap-that-menu/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/overlap.jpg" alt="Overlap in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="290" />

href="http://www.thewojogroup.com/2008/12/css-stacked-bar-graphs/">CSS Stacked Bar Graphs />A fancy stacked bar graph in CSS that uses an unordered list and a definition list.

href="http://www.thewojogroup.com/2008/12/css-stacked-bar-graphs/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/bargraph.jpg" alt="Bargraph in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="426" />

href="http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/">Nested Side Bar Menu />Using the same principle as drop-down menus, this demonstration shows a cross-browser vertical menu with fly-outs, based on nested unordered lists.

href="http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/flyouts.jpg" alt="Flyouts in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="231" />

href="http://www.ogilvydurham.com/allTags.php">OMG Durham’s Tag Popularity Graph />OMG Durham’s website displays popular tags using a bar graph that is based on an unordered list.

href="http://www.ogilvydurham.com/allTags.php"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/css-li-styling-techniques/tag-graph.jpg" alt="Tag-graph in Styling HTML Lists with CSS: Techniques and Resources" width="500" height="141" />

Conclusion

A beautiful, CSS-styled, cross-browser HTML list has the power to resolve thousands of potential layout or design challenges. Although dozens more uses and techniques could be discussed in this article, the above material should be enough to give a thorough overview of HTML lists, demonstrating how powerful and flexible they are in the hands of an experienced coder.

Further Resources

  • href="http://css.maxdesign.com.au/listamatic/">The Listamatic
  • href="http://www.alistapart.com/articles/taminglists/">CSS Design: Taming Lists
  • href="http://www.w3schools.com/CSS/css_list.asp">CSS Lists on W3Schools
  • href="http://www.maxdesign.com.au/presentation/definition/">Definition lists – misused or misunderstood?
  • href="http://www.noupe.com/css/css-styled-lists-20-demos-tutorials-and-best-of.html">CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices
  • href="http://reference.sitepoint.com/html/elements-list">List Elements on Sitepoint’s HTML Reference
/>

© Louis Lazaris for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/">Permalink | href="http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/#comments">42 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/&title=Styling%20HTML%20Lists%20with%20CSS:%20Techniques%20and%20Resources">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Styling%20HTML%20Lists%20with%20CSS:%20Techniques%20and%20Resources'%20http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/">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/lists/" rel="tag">lists

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

Free High-Quality Magento Theme: Sigyn SM

On November 14, 2009, In SEO, Web Design Tips, by Smashing Editorial

  

We love our readers. We respect the hard work of designers and developers across the globe. And we do our best to make the web design community stronger and the Web a little bit prettier. Therefore we work with talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community. And in the end truly impressive works see the light of day.

Magento Theme

Today we are glad to release Sigyn SM — a free high-quality Magento theme created by Silverthemes.com especially for Smashing Magazine and its readers. The theme has a unique grungy design that stands out and can serve as a good baseline for your Magento-powered online shops.

width="650">
width="650"> style="width:650px;"> src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Free High-Quality Magento Theme: Sigyn SM" 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 Free High-Quality Magento Theme: Sigyn SM" />  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 Free High-Quality Magento Theme: Sigyn SM" />  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 Free High-Quality Magento Theme: Sigyn SM" />

src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in Free High-Quality Magento Theme: Sigyn SM" border="0" width="1" height="1" />

We love our readers. We respect the hard work of designers and developers across the globe. And we do our best to make the web design community stronger and the Web a little bit prettier. Therefore we work with talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community. And in the end truly impressive works see the light of day.

Today we are glad to release Sigyn SM — a free high-quality Magento theme created by href="http://www.silverthemes.com">Silverthemes.com especially for Smashing Magazine and its readers. The theme has a unique grungy design that stands out and can serve as a good baseline for your Magento-powered online shops.

Download the Magento theme for free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish.

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/promo-full.jpg" title="Visit the demo"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/magento-free-theme.jpg" width="446" height="392" alt="Magento-free-theme in Free High-Quality Magento Theme: Sigyn SM" />

  • href="http://demo.silverthemes.com/sigynsm">live demo (currently offline)
  • href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/promo-full.jpg">large preview 1
  • href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/categories-full.jpg">large preview 2
  • href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/product-full.jpg">large preview 3
  • href="http://www.silverthemes.com/wiki/doku.php?id=sigynsm">installation and configuration guide
  • href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/SigynSM-magento-theme.zip">download the theme (0.2 Mb)

Screenshots

Below you’ll find more screenshots of the theme. You can click on an image to see the enlarge version.

Promo area

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/promo-full.jpg"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/promo.jpg" width="526" height="421" alt="Promo in Free High-Quality Magento Theme: Sigyn SM" />

Checkout page

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/checkout-full.jpg"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/checkout.jpg" width="500" height="430" alt="Checkout in Free High-Quality Magento Theme: Sigyn SM" />

Product page

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/product-full.jpg"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/htc.jpg" width="500" height="425" alt="Htc in Free High-Quality Magento Theme: Sigyn SM" />

Categories page

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/categories-full.jpg"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/categories-small.jpg" width="500" height="533" alt="Categories-small in Free High-Quality Magento Theme: Sigyn SM" />

Search bar

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/product-full.jpg"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/searchbar.jpg" width="434" height="104" alt="Searchbar in Free High-Quality Magento Theme: Sigyn SM" />

Tabs

href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/product-full.jpg"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/magento-free-theme/tabs.jpg" width="500" height="240" alt="Tabs in Free High-Quality Magento Theme: Sigyn SM" />

Thank you, guys! We appreciate your work and your good intentions.

Last but not least…

We are regularly looking for creative designers and artists. You may not know it yet, but we might feature you in one of our upcoming posts.

If you would like to release a high-quality free font, a WordPress-theme, some wallpapers or an icon-set please href="http://www.smashingmagazine.com/contact/index.php/form">contact us — we would like to support you with the broad coverage on Smashing Magazine.

/>

© Smashing Editorial for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/11/14/free-high-quality-magento-theme-sigyn-sm/">Permalink | href="http://www.smashingmagazine.com/2009/11/14/free-high-quality-magento-theme-sigyn-sm/#comments">30 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/11/14/free-high-quality-magento-theme-sigyn-sm/&title=Free%20High-Quality%20Magento%20Theme:%20Sigyn%20SM">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/11/14/free-high-quality-magento-theme-sigyn-sm/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/11/14/free-high-quality-magento-theme-sigyn-sm/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Free%20High-Quality%20Magento%20Theme:%20Sigyn%20SM'%20http://www.smashingmagazine.com/2009/11/14/free-high-quality-magento-theme-sigyn-sm/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/11/14/free-high-quality-magento-theme-sigyn-sm/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/freebies/" rel="tag">Freebies, href="http://www.smashingmagazine.com/tag/magento/" rel="tag">magento

0 Comments
Leave A Response

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

Green manufacturing company to unveil new product in Phoenix

On November 13, 2009, In SEO, by Phoenix Business News - Local Phoenix News | The Business Journal of Phoenix

Upcycle Living, a fledging green manufacturing company, will unveil its signature product this evening at the City of Phoenix’s Green Street Festival, a showcase for local green companies that couldn’t afford a display at the national Greenbuild conference held this week at the Phoenix Convention Center.

Upcycle Living, a fledging green manufacturing company, will unveil its signature product this evening at the City of Phoenix’s Green Street Festival, a showcase for local green companies that couldn’t afford a display at the national Greenbuild conference held this week at the Phoenix Convention Center.

0 Comments
Leave A Response

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

Getting Clients: Approaching The Company

On November 9, 2009, In SEO, Web Design Tips, by Peter Smart

  

A defining factor in any freelancer or agency’s success in gaining new business is their ability to market their skills effectively. In this series of articles, we will explore ways in which designers can strategically promote themselves to get new clients. Securing new business by approaching companies can be a very challenging process, full of pitfalls. Here, we will look at 10 steps to impressing potential clients and avoiding the most common mistakes.

Getting Clients: Approaching The Company

A focused approach to work is paramount for success. Freelancers often take on every job opportunity that presents itself. Although this would rapidly expand your showcase of work, more often that not it leaves you over-stretched, with a portfolio of odds and ends instead of specialized results. Focus instead on who you would like to work with.

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

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

A defining factor in any freelancer or agency’s success in gaining new business is their ability to market their skills effectively. In this three-part series, we will explore ways in which designers can strategically promote themselves to get new clients. Securing new business by approaching companies can be a very challenging process, full of pitfalls. Here, we will look at 10 steps to impressing potential clients and avoiding the most common mistakes.

Step One: Be Focused

alt="Step One: Be Focused" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/one.jpg" width="500" height="229"/>

A focused approach to work is paramount for success. Freelancers often take on every job opportunity that presents itself. Although this would rapidly expand your showcase of work, more often that not it leaves you over-stretched, with a portfolio of odds and ends instead of specialized results. Focus instead on who you would like to work with. This could be based on a several factors, such as:

  • Industry />By specializing in a particular industry, such as health care or retail, you build a portfolio of relevant experience. Although this could limit your workload initially, you will be actively working towards identifying yourself as someone with expertise in your chosen field.
  • Media />Deciding which media and platforms to specialize in is important for any firm or individual. For many, the choice is between specializing in print and digital communication. This distinction will, again, allow you to focus and build relevant knowledge that you can then to offer your clients.
  • Geographical location />You may also wish to focus your efforts on a particular geographical location. This could be a neighborhood, city or region. By doing so, your advertising in local media can be more personal and targeted, and you ensure easy traveling between you and clients.

Step Two: Be Insightful

alt="Step Two: Be Insightful" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/two.jpg" width="500" height="229"/>

Once you have established the kind of organizations you would like to work with, learn how their businesses work. Visit a range of websites in the field and ask yourself some key questions, such as:

  • Who do they work with? />Knowing who your clients work with will give you an indication of how you can be of service to them. For example, an insurance firm looking to target university students might need to refresh its flyer and leaflet campaign in time for the beginning of term.
  • What are the company’s ethics? />Most established organizations put a vision statement on their website. This will give you key insight into a company’s values, history, growth and future direction. This information is invaluable because it will help you better understand how the business operates and, thus, how you can tailor your approach to it. For example, if the company has a progressive stance on sustainability and the environment, you could approach them with ideas for paperless advertising and communication.
  • Does it have an advertising budget? />Although this will not be explicitly stated, by reviewing a business’ prior advertising, you will be able to estimate how much capital it typically invests in design per annum. Again, this allows you to tailor your marketing proposal to its budget.

These kinds of questions will give you important insight into the services that an organization requires and, therefore, what services you can offer.

Step Three: Be Personal

alt="Step Three: Be Personal" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/three.jpg" width="500" height="229"/>

The power of face-to-face contact should not be underestimated. A common temptation for graphic designers is to manage their small empire from behind a desk over the Internet. Although work can be found online, the relationship between client and designer is often fleeting. Build strong links with your clients, which will increase the likelihood of repeat business.

One of the most important skills to learn, then, is face-to-face meetings. Meeting a client face to face forces them to give you their undivided attention. You will be able to convey your passion much more effectively and personally.

Actively seek out opportunities to meet potential clients face to face. Cold-calling or emailing can be a tiring and disheartening experience and may give you limited results. Instead, when approaching a business for the first time, find out the name and contact details of the marketing director, which you can often find on the company’s website. If it’s not there, make a quick phone call to to ask for it.

Before making your first contact with a client, do your research. Familiarize yourself with their business and understand of what they do. When you’re ready to make contact, have a few short sentences prepared that summarize the specific information you wish to communicate. This should include your:

  • Introduction />Explain who you are and why you are calling. Although this may seem obvious, establishing these facts is crucial to presenting yourself clearly and memorably. This could be as simple as: “Good afternoon. My name is Peter Smart, and I am calling on behalf of Roam Design…”
  • Hook or pitch />Once you have established who you are, engage your potential client. Mentioning that you specialize in their particular industry and that you offer a range of tailored services is an attractive proposition and good way to begin. Alternatively, you could begin with a hook. A hook is a one-off special offer that makes your services more attractive. This could be offering 50% off the cost of design work in November or a free hour of consultation.
  • Call to action />Establish the next step your client should take. Offer to meet them and consult in person, at a time and location suitable to them.

Step Four: Be Prepared

alt="Step Four: Be Prepared" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/four.jpg" width="500" height="229"/>

Once you have arranged your meeting, research the company more extensively. Make notes on key areas of interest to develop later. For example, you could look at the company’s:

  • Advertising />The company’s media presence is a good indication of its capacities in communication. Look at where it advertises, how it does it and where it doesn’t advertise. If it does not advertise online, you could present this as a possibility.
  • Branding />If possible, source a variety of the company’s marketing material. Examine it and note anything you would do differently.
  • Website />Does the company have a website? If not, this could be a great opportunity to expand its online presence. If it does, look at the structure, content and presentation. Note areas for improvement and, more importantly, why they could be improved.

Having an informed opinion on the strengths and weaknesses of the company’s current marketing and perceived identity allow you to guide it to services that would benefit it. You may also find it helpful to compare its advertising to that of its competitors.

Also, prepare your “elevator pitch,” which is a brief summary of your business, its aims and how it helps clients. Being able to explain what you do concisely demonstrates that your business goals are clear and your approach targeted.

Step Five: Be Unique

alt="Step Five: Be Unique" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/five.jpg" width="500" height="229"/>

Standing out from the crowd is difficult, especially if you are an emerging talent. To stand out, come up with original ideas on how the company can market itself. Suggest options it may not have yet considered, such as viral marketing, Web-based promotion or targeted leafleting, and demonstrate how they would improve business.

Impress the client and exceed its expectations. If you are going to propose a website redesign, take time before your meeting to produce a few drafts of what it could look like. You could present alongside a concise wireframe showing how the information could be better presented. Alternatively, if you will be proposing to refresh the company’s branding and identity, bring some visual stimuli to support your argument. Don’t present a whole new identity, but rather suggest colors, layouts, typefaces and advertising formats that could guide the conversation.

The client will want evidence of your skill to deliver on your ideas, so bring your portfolio along to impress them, along with references and endorsements from previous clients.

Step Six: Be Professional

alt="Step Six: Be Professional" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/six.jpg" width="500" height="229"/>

Your first meeting with the potential client is of paramount importance because it will determine whether you gain their business. To make a good impression, be meticulous in your preparation. Research and plan you presentation well so that you are confident in your delivery and can support your proposals with facts. This means you should have a firm grasp of the figures and costs associated with your proposal.

For example, if you will be proposing an inner-city billboard and bus-stop marketing campaign, know the costs involved in producing large-format printing and renting advertising space. Find out the number of people who will see the advertisements daily. This will give the client a balanced appreciation of both the outlay and the benefits of your proposal.

Equally important is your appearance. Invest in a suit or smart business-wear. This will impress upon them that you are serious about what you do, which will make them take you seriously, too.

Step Seven: Be Attentive

alt="Step Seven: Be Attentive" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/seven.jpg" width="500" height="229"/>

Listen to the client. This step is often missed by designers who are overly keen to explain their innovative ideas.

Listening is a powerful tool. It shows you truly care about what the client has to say. Take notes on any information they offer about the company, its plans and immediate requirements.

Step Eight: Be Resourceful

alt="Step Eight: Be Resourceful" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/eight.jpg" width="500" height="229"/>

Every meeting with a client is an opportunity and should not be taken lightly. Approach meetings resourcefully and demonstrate your professionalism. You could even prepare a package of materials to leave with them, including:

  • Business card />Always have a business card on hand. It should have your name, contact details and, ideally, a website where they can see samples of your work.
  • Samples of work />You might also want to leave a mini-printed portfolio of some of your best and most relevant work. Even if you don’t win that particular project, your details and experience will be in their file for future reference.
  • Curriculum Vitae />A CV is a useful record of relevant work experience and is a good place to list your previous clients and technical competencies.

Remember, the decision about which freelancer to hire may not rest with one person in the organization. By adhering to this simple step, you allow others who are involved in the process to see your work at their convenience, making your application even stronger.

Step Nine: Be Committed

alt="Step Nine: Be Committed" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/nine.jpg" width="500" height="229"/>

If you do not hear from the client immediately, don’t panic or give up hope. Wait a few days, and then send a polite email, thanking them for their time. In the email, reiterate in brief your proposal and mention how you would love to work with them. Then wait. If you receive no response within three weeks of your meeting, you may wan to re-inquire by telephone. Chances are, they have not forgotten about you; moreover, your call will demonstrate your enthusiasm and commitment.

Step Ten: Evaluate

alt="Step Ten: Be Evaluative" src="http://media.smashingmagazine.com/wp-content/uploads/images/approaching-clients/ten.jpg" width="500" height="229"/>

Whether or not your meeting was successful, you can learn something from it. Evaluate your performance, what you did well and, importantly, what you could improve. Learn from your mistakes, and rectify them for your next venture. Your ability to do this plays a vital role in your future success.

Conclusion

These are just ten of the key steps to consider when approaching a company. Remember: be bold, be proactive and don’t be afraid to make mistakes. Every person has their own methods of finding work, but learning these steps could be the difference between realizing a dream and settling for second best.

Related Posts

The following articles may be of interest:

  • href="http://www.smashingmagazine.com/2009/09/16/how-to-find-time-for-everything/">How To Find Time For… Everything! />A useful article on time management and structure.
  • href="http://www.smashingmagazine.com/2008/03/04/creating-a-successful-online-portfolio/">Creating a Successful Online Portfolio />Advice on how to create an impressive Web presence.
  • href="http://www.smashingmagazine.com/category/know-how/page/5/">20 Time-Saving Tips to Improve Designer’s Workflow />Some tips on how to increase productivity and speed up common design tasks.

(al)

/>

© Peter Smart for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/11/09/getting-clients-approaching-the-company/">Permalink | href="http://www.smashingmagazine.com/2009/11/09/getting-clients-approaching-the-company/#comments">36 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/11/09/getting-clients-approaching-the-company/&title=Getting%20Clients:%20Approaching%20The%20Company">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/11/09/getting-clients-approaching-the-company/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/11/09/getting-clients-approaching-the-company/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Getting%20Clients:%20Approaching%20The%20Company'%20http://www.smashingmagazine.com/2009/11/09/getting-clients-approaching-the-company/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/11/09/getting-clients-approaching-the-company/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags:

0 Comments
Leave A Response

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

Glassical: A Free WordPress Theme

On November 7, 2009, In SEO, Web Design Tips, WordPress, by Smashing Editorial

  

We love our readers. We respect the hard work of designers and developers across the globe. And we do our best to make the web design community stronger and the Web a little bit prettier. Therefore we ask talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community. And when designers agree, impressive works see the light of day.

Screenshot

Today we are glad to release Glassical — a free professional Wordpress-theme created by Abdullah Ibrahim. This theme was designed with the main focus being on typography, clean look and simplicity. Hopefully, you will be able to use it in your projects or at least use it as a foundation for your next projects. The theme is released especially for Smashing Magazine and its readers.

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

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

We love our readers. We respect the hard work of designers and developers across the globe. And we do our best to make the web design community stronger and the Web a little bit prettier. Therefore we ask talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community. And when designers agree, impressive works see the light of day.

href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/glassic-fullpreview.png" title="Visit the demo"> src="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/glassic-release.jpg" width="450" height="500" alt="Screenshot" />

Today we are glad to release Glassical — a free professional WordPress-theme created by href="http://www.symmetricweb.com/">Abdullah Ibrahim. This theme was designed with the main focus being on typography, clean look and simplicity. Hopefully, you will be able to use it in your projects or at least use it as a foundation for your next projects. The theme is released especially for Smashing Magazine and its readers.

Download the theme for free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish. The theme supports the WordPress 2.8 nested comment system and it is also customized for the WP Pagenavi plugin. Also, Cufón is used for embedding the Nevis font into the theme.

href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/glassic-fullpreview.png" title="Visit the demo"> src="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/preview.jpg" width="450" height="548" alt="Screenshot" />

  • href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/glassic-fullpreview.png">large preview 1 (front page)
  • href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/post-preview.png">large preview 2 (post page)
  • href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/glassical-wordpress-theme.zip">download the theme + PSD source (.zip, 2.1 Mb)
  • Blogger version: href="http://glassical-blogger-template.blogspot.com/">Demo, href="http://bloggerfaqs.blogspot.com/2009/11/glassical-free-blogger-template.html">Release post (incl. download link)
  • href="http://dcing.net/theme-release-post">release post

Screenshots

Below you’ll find more screenshots of the theme. You can click on an image to see the enlarge version.

“Filed under” and “Comments”-section

href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/post-preview.png"> src="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/filed-under.jpg" width="572" height="746" alt="Wordpress Theme" />

“Categories”-section

class="showcase"> href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/glassic-fullpreview.png"> src="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/categories.jpg" width="399" height="490" alt="Wordpress Theme" />

Design of a <blockquote>

class="showcase"> href="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/glassic-fullpreview.png"> src="http://media.smashingmagazine.com/wp-content/uploads/images/glassical-wordpress-theme/post.gif" width="572" height="624" alt="Wordpress Theme" />

Last but not least…

Thank you, Abdullah! We appreciate your work and your good intentions.

We are regularly looking for creative designers and artists. You may not know it yet, but we might feature you in one of our upcoming posts.

If you want to release a high-quality free font, a WordPress-theme, some wallpapers or an icon-set, please href="http://www.smashingmagazine.com/contact/index.php/form">contact us — we would like to support you.

You may be interested in the following free WordPress-themes as well:

  • href="http://www.smashingmagazine.com/2008/09/08/agregado-a-free-wordpress-theme/">Agregado: A Free WordPress Theme
  • href="http://www.smashingmagazine.com/2008/08/08/infinity-a-free-wordpress-theme/">Infinity: A Free WordPress Theme
  • href="http://www.smashingmagazine.com/2008/07/16/wordpress-fun-a-free-wordpress-theme/">WordPress.Fun: A Free WordPress Theme
  • href="http://www.smashingmagazine.com/2008/08/05/fervens-a-free-wordpress-theme/">Fervens: A Free WordPress Theme
  • href="http://www.smashingmagazine.com/2007/12/21/dilectio-a-smashing-wordpress-theme/">Dilectio: A Free WordPress Theme
  • href="http://www.smashingmagazine.com/2007/09/07/smashing-freefont-and-wordpress-theme/">Smashing: A Free WordPress Theme
/>

© Smashing Editorial for href="http://www.smashingmagazine.com">Smashing Magazine, 2009. | href="http://www.smashingmagazine.com/2009/11/07/glassical-a-free-wordpress-theme/">Permalink | href="http://www.smashingmagazine.com/2009/11/07/glassical-a-free-wordpress-theme/#comments">59 comments | title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2009/11/07/glassical-a-free-wordpress-theme/&title=Glassical:%20A%20Free%20WordPress%20Theme">Add to del.icio.us | title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2009/11/07/glassical-a-free-wordpress-theme/">Digg this | title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2009/11/07/glassical-a-free-wordpress-theme/">Stumble on StumbleUpon! | title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Glassical:%20A%20Free%20WordPress%20Theme'%20http://www.smashingmagazine.com/2009/11/07/glassical-a-free-wordpress-theme/">Tweet it! | title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2009/11/07/glassical-a-free-wordpress-theme/">Submit to Reddit | href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags: href="http://www.smashingmagazine.com/tag/themes/" rel="tag">themes, href="http://www.smashingmagazine.com/tag/wordpress/" rel="tag">wordpress

0 Comments
Leave A Response

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

Ten Outstanding Free WordPress Themes

On October 27, 2009, In SEO, WordPress, by David

There are litterally hundreds of thousands of Word Press themes floating around on the web, I wanted to showcase some that didnt suck and and really highlighted what can be done in the “Free” theme niche. I specificly looked for themes that were well structured, clean and elegant. I hope you enjoy some of these themes and visit the respective sites.

There are litterally hundreds of thousands of Word Press themes floating around on the web, I wanted to showcase some that didnt suck and and really highlighted what can be done in the “Free” theme niche. I specificly looked for themes that were well structured, clean and elegant. I hope you enjoy some of these themes and visit the respective sites.

The Sky Was Blue

A lovely clean Word Press theme called “The Sky Was Blue”. This Word Press theme was built using the 960 grid system, it comes packed with JQuery effects, contact form and Twitter integration.

The-Sky-Was-Blue

RockStar

A bold well structured design, called RockStar. This Word Press theme would be perfect for a personal blog, made by WOO Themes, you will get great support and Word Press tips from their site.

Rock-Star

Colourise

This Word Press theme is called Colourise, it provides a great foundation layout on which you can add to in the future. A great example of this Word Press theme being used on a professional design blog is at http://www.psdvault.com/.

Colourise

Selecta

This Word Press theme is a bold and bright video blog style design, it slightly reminds me of the Vimeo design. I love how the centerpiece of the design is the video, it really grabs your attention.

Selecta

Magazeen

I really am surprised this Word Press theme is FREE, it is a high quality design and build and is packed to the brim with “out the box” features.

Magazeen

Elegent Designs Simplistic 4

Whilst this Word Press Theme does not immediately grab your attention with fluffy, bouncy graphics it does provide a solid layout for you to design on in the future. The layout is well structured and flows very well.

Elegent-Designs

 

The Morning After

I particularly like the black and white minimalism of this Word Press Theme, “The Morning After” provides a slick and clean blog layout.

The-Morning-After

WPESP Professional Word Press Theme

This Word Press theme would provide a great theme for a design or photography portfolio. It has a JQuery content slider and I am again in shock that this is a free theme.

WPESP

Notepad Chaos

A very colorful and vibrant design, what more can I say !

notepad-chaos

 

Infinity

A lovely use of images, gradients and transparencies in web design, the Word Press theme ticks all the boxes for the creative design somewhere in you !

Infinity

0 Comments
Leave A Response

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

Seth Godin: Sliced Bread

Malcolm Gladwell: Outliers

Anthony Parinello: Your Price is Too High

©