Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Creating Inspired Design: Part 2: A Day In The Life

Last updated Oct 17, 2003.

By Andy Clarke

Last month, I set the scene for this series of articles, Creating Inspired Design, by talking about ways that visual designers can create new and exciting work for the web. What’s the secret? Designers need to look outside of the web for their ideas and search for inspiration from different media and from the world outside of a creative studio.

In this series of articles, I will take an inspirational item and transform it for the web. Starting with the item that inspired me, I’ll work through the various design stages and then show you the final result. This month, I’m looking at ways that you can breathe new life into perhaps one of the most taken for granted, overlooked elements in web design: sidebars.

Wakey Wakey

Contrary to what I said a little earlier, for this exercise I’d like you to start off the day by taking a look around the web. Pull up some of the sites that you visit on a regular basis, and then move onto others that you don’t visit so often; perhaps your online bank, travel service, or maybe your tax office. As you skip between sites, try to ignore the main content and any top navigation and focus instead on what you see happening at the sides of each page.

In most cases, sidebar content serves a purely functional purpose. It might include navigation links, suggestions as to where to visit or what to buy next, or perhaps supporting information for the main body of content. As useful as it is, sidebar content is often presented in ways that can be visually uninspiring.

Figure 1

Figure 1: Sidebar design can often seem uninspiring as shown in these examples taken from Skype, eBay, Amazon, and Play.

Sidebar design need not be purely functional; the web is not a power drill. There are many ways that you can improve both a sidebar’s usability and its visual appeal. For a little inspiration, take a look around your breakfast table.

Don’t Skip Breakfast

If you’re like me, you probably don’t function well early in the morning. Still, even before your first cup of coffee begins to perk you up, let your bleary eyes wander down the side of your cereal box. Does the layout of the nutritional information suggest a new way to style your nutritious sidebar content? What about the vertical layout of the information on the side of your juice or yogurt carton?

Often skip breakfast? Me too. But, don’t worry.

As a habitual keeper of scrapbooks and an avid collector of inspiration from print, I’ve become quite adept at quietly ripping out pages from magazines without attracting disapproving scowls from hairdressers, doctors’ receptionists, and dentists.

Figure 2

Figure 2: Collecting new ideas for sidebars in one of my scrapbooks.

This morning as I sat waiting for a haircut, I skimmed impatiently through the piles of dog-eared fashion and style magazines. Amongst the pages of fashion tips, shampoos, and hair treatments, this morning’s crop of cuttings yielded several suggestions for sidebar treatments. I snipped them out, took them back to my studio, and set them in my scrapbook.

They included product images that escape the confines of a traditional vertical sidebar and other ideas that break away completely from a conventional approach to designing a sidebar.

The Sweet Escape

If you’re getting hungry again, don’t worry, because lunch is on its way. But first, take the two examples in Figure 3 below. Both of these designs from my cuttings use images that escape their containers. This is a visual device that’s common in print, but not on the web, and one that can add fluidity and movement to a design. I’m going to show you how to create this effect on the web; thinking first about the most appropriate XHTML elements, and then the CSS techniques that you’ll need to use.

Figure 3

Figure 3: A common print design device: content that escapes the confines of a sidebar.

Before considering how to achieve this result using CSS, you need to think for a moment about how these two examples might be described using meaningful XHTML markup. What markup do you think would be most appropriate? Table elements? I hope not. Perhaps divisions? What about lists?

A common web design workflow starts with static designs such as Photoshop or Fireworks visuals or wireframes and moves on to choosing markup. Even in a more enlightened web, elements and source order are often still chosen to achieve a particular visual result. Even when valid markup is written, this can often lead to documents that contain markup that only makes sense to a visitor using a visual browser and overuse division elements for presentational ends.

Content-Out Markup

The "content-out" approach to markup starts at a more granular level. Using this approach, you’ll start by choosing elements or compounds of elements for their precise meaning and then build outwards. You should include additional elements incrementally and only when absolutely needed to achieve the desired visual result.

Now, look at the cuttings in Figure 3 again, what do you see? Underneath their headings, both of the panels contain a list of products. Each product shown contains a name, a descriptive paragraph, and an image.

While both their visual "title and description" formatting might suggest using a definition list element (dl), neither panel of content is strictly terms and their definitions. Using a definition list here would be inappropriate. More appropriate, perhaps, would be an ordered (left) or unordered (right) list.

Inside each of the lists are list items, each of which contains a heading, paragraph, and product image. Many newcomers to meaningful markup are often unaware that it’s perfectly valid and appropriate to include other markup elements such as headings, paragraphs, blockquotes, and even other lists inside list items. These XHTML Compound combinations are powerful building blocks for meaningful markup. They also contain ample styling "hooks" to implement a design using CSS.

Figure 4

Figure 4: Overlaying markup onto a design creates a markup guide.

Look at the markup below: low in fat, nutritious, and full of delicious elements ready to add flavor with CSS.

<img src=”shampoo.png” alt=”” />
<h3>Boots Specialist Build-up remover Shampoo, £2.99</h3>
<p>Developed by hair experts to spring clean your hair and leave it silky. <strong>Cosmo Verdict: </strong> <q>This fragrance-free shampoo isn’t powerful enough to cut through strong hair wax but would suit sensitive scalps.</q> <em title=”Rating 6 out of 10”>6/10</em></p>

Such minimal markup deserves minimal CSS. Now, it’s time to start implementing this design.

Implementing The Design Using CSS

In CSS, designers already have many of the tools that are needed to style simple, meaningful markup in ever more creative ways. Now, let’s recreate this design using a combination of CSS floats and positioning. Individually, these techniques are powerful, but when used together they can give you truly amazing results.

Start by floating all of the product images to the right.

ol, ul { margin : 0; 
padding : 0;
width : 24.5%; }

img { 
float : right; }

Next, add relative positioning to move the images outside of their parent-ordered list.

img { 
position : relative;
left : 75px; }

The concept of relative positioning can sometimes be hard to grasp for newcomers to CSS, but is one that will become a powerful creative tool when mastered.

More suitably called offset positioning, relative positioning visually offsets an element from its natural place within the normal flow of a document, while at the same time retaining the space that the element would normally have taken.

To achieve this design, you are offsetting each image to the right by 75px. This will move the image visually, but any content that follows it in the normal flow will not move in to occupy that space. In this design, the resulting "empty" space is a desired visual result, but is one that can easily be rectified using negative margins to draw the following text into the space that the image would have occupied.

img { 
margin-left : -75px; }

The result is a design that appears more fluid and less constricted.

Combining The Effect With Alpha Transparent Images

Of all of Microsoft’s improvements to its Internet Explorer 7 browser, perhaps the decision to implement alpha-transparent PNG images will open up most avenues for designers to create layouts that have less emphasis on the box.

While the example on the right of Figure 3 could easily have been accomplished for older versions of Internet Explorer, using PNG images with alpha transparent backgrounds opens up a whole new realm of creative possibilities.

Why Stop There?

Why not also allow your thinking about the nature of sidebars to break out of a mental box? Taking meaningful markup and visually transforming it using CSS need not always result in vertical stacks of products, news articles, or links.

Figure 5

Figure 5: A new take on presenting sidebar content.

Look at the cuttings in Figure 4. To achieve the design on the left, why not style the whole sidebar with a montage of images used as a background image on either a division or list? You can then overlay the list items and anchors using CSS positioning to create either a stack of large, invisible clickable areas or a "clockwise from top-left" style links box.

Fancy setting a new fashion trend? On the right, try adding a background image to a list and then use transparent images as anchors over the background to create a very different visual result.

So today, look around you for new and different ways to style the sidebar content that you’re adding to your sites. And, remember, sidebar design need not look purely functional. There are many different ways to improve usability while adding a touch of visual flair. Be on the lookout for inspiration, it’s everywhere.