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

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Creating Inspired Design: Part 5: We Can Work It Out

Last updated Oct 17, 2003.

By Andy Clarke

Think of what you’re saying.
You can get it wrong and still you think that it’s all right.
Think of what I’m saying,
We can work it out and get it straight, or say good night.

— Lennon-McCartney, 1965

"We Can Work It Out" is one of the classic examples of the brilliance that came from Lennon and McCartney's early collaborations. As Lennon himself explained to Playboy magazine in 1980, "You’ve got Paul writing, 'We can work it out,' real optimistic, and me, impatient: 'Life is very short and there’s no time for fussing and fighting my friend.'"

Part of what I find so fascinating about designing for the web is not only the collaboration between people with different sets of skills and areas of specialty, but also the possibilities for the fusion of ideas and influences from many different art and design media.

I've often heard it said by web designers, developers, and usability specialists, that "the web is not print." Top marks for that. But in arguing that the web should be a different medium from print, a new medium that's dynamic and flexible, often we forget that print and other media still have a tremendous amount to offer the web and web designers.

Many of print's ideas, techniques, and conventions have developed over many decades and often much longer. They offer web designers an enormous resource of inspiration that can be particularly important for designers who have grown up with the web or who've never designed for print.

The topic of this month's article sums up for me one simple area where web designers can learn and be inspired by the lessons of the past. That area is web forms.

If you're a visual designer as I am, I can imagine that you probably share my loathing of web forms. They're often tricky to implement using CSS for all but the most basic of designs and contain elements that can easily lack visual interest.

However, by looking outside the web for inspiration, and combining this with effective use of modern CSS techniques, even the most humble of meaningful markup can be styled into something that looks amazing.

Take this example of a cutting from a young children's activity magazine. I find its use of background images and light-hearted typography fun and refreshing. It makes me wonder why web forms on sites that are aimed at children and young people often look so dull.

Figure 1

Figure 1: An interesting approach to web form checkboxes and their labels could be derived from this children's magazine cutting.

To me, forms are not simply functional tools; they are opportunities for a site to improve common tasks by making them more fun or more enjoyable. The visual appearance of a form matters just as much as AJAX functionality. So why do so many web forms look the same? Why do so many leading brand sites not use their forms imaginatively to help enhance their brand?

Figure 2

Figure 2: There are many inspiring ways of presenting form elements that you can find in print.

As a designer, I do find form design challenging, but in the best of ways. Having been inspired to find new sources of ideas for form design I've become obsessive about collecting cuttings from magazines, newspapers, and more and filling my scrapbook with page after page of ideas for inputs, legends, and buttons.

I came across one such cutting several months ago and it sums up for me the possibilities that we can achieve in form design when we think a little differently. This cutting from a teenage magazine contains everything every good web form should have, and yet looks little like the forms we commonly see on the web.

Figure 3

Figure 3: Scan of a printed form layout that I find to be inspiring

My self-set challenge was to adapt the above design for a web form. The results were inspiring! This month, we'll create a web form using this magazine cutting as our inspiration.

Content Out Markup

Take a look back at the inspiring layout that we've chosen as the basis for our own form design. Now look closer, squint a little. Now stand on your head. OK, ignore that last part, but if you look closely enough you should begin to see the fundamental elements of any meaningful and accessible form: fieldset, division, label, and input.

To implement this design, you will look at each block of form content in turn to see both the meaningful XHTML markup and then the CSS that you will need to accomplish it.

Figure 4

Figure 4: Form design with only browser default styling applied

Reset Styles

Before we get going on developing the CSS that's going to transform the plain browser rendered form into our stylish creation, let's first take a moment to discuss the benefits of resetting browser styles.

In a recent series of articles on his highly popular web site, CSS expert Eric Meyer discusses his take on how and why to reset the differing default styles that each web browser applies to any document. As Meyer explains:

"The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. But there are all kinds of inconsistencies, some more subtle than others."

Clearly, resetting all browsers' default style sheets would help you battle browser inconsistencies by creating a level playing field onto which you could build your own styles. While Meyer himself states that, "this is not a case of 'everyone must use these styles in a certain way without alteration.' Nor am I saying that everyone must use them or else be cast into darkness," his reset styles are more complete than other solutions I've used and they've been developed with active collaboration from readers of his web site.

So let's begin by applying Meyer's reset styles to our document. Again, don't worry about copying and pasting any of the CSS line-by-line. I've made all of the source files for this example available online at http://transcendingcss.com/inspireddesign.

/* =reset.css */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0; padding : 0; border : 0; outline : 0; font-weight : inherit; font-style : inherit; font-size : 100%; font-family : inherit; vertical-align: baseline; background : transparent; }

:focus { outline : 0; } 
ol, ul { list-style : none; }
table { border-collapse : collapse; border-spacing : 0; }
caption, th, td { text-align : left; font-weight : normal; }

With the reset styles applied, it's time to set the stage for this design. Begin by applying some initial styles to the body element of your page. You'll be using Calibri, one of the latest typefaces recently introduced with Windows Vista.

/* =body */
body 	{ 
width : 460px; 
margin : 0 auto; 
padding : 100px 0; 
background-color : #fff; 
font : 88%/1.4 Calibri, "Lucida Grande", Verdana, sans-serif; 
color : #333; }

Here, the combination of width and auto left and right margins provides a simple and elegant method of centering the body horizontally within its parent html to frame our form design.

With your basic styling in place, you can now work from the top of the form to the bottom, applying styles to each of the form's components in turn. Start by looking again at the top of the inspirational design.

The Introduction

Look beyond the visual look and feel, the colors, imagery, and typography and what meaningful content do you see? Our introduction contains a welcome message about joining the club, plus a young girl talking. You can translate that into markup by using a heading, a paragraph, and a blockquote element to describe what the girl is saying.

Of course, in our example form, you'll be changing the wording to suit our very own Ace Face Club.

<div id="introduction">
<h3>Wanna be part of the Ace Face Club</h3>
<p>Fill in this form and press <strong>Join</strong>. <em>We can’t wait to hear from you.</em></p>

<blockquote>
<p>You could be an Ace Face too!</p>
<p><a href="http://www.stuffandnonsense.co.uk">Andy Clarke</a></p>
</blockquote>
</div>

This markup is simple, structured, and meaningful and is the perfect foundation for laying on our styles.

Start by adding styles to the division element that contains the introductory content. Simple background and border colors give this area immediate impact. As you've seen in previous articles, applying position : relative; but no off-sets establishes this division as a positioning context for any of its positioned children; more on that in a moment.

#introduction { 
position : relative; 
margin-bottom : 20px; 
padding : 15px; 
border : 5px solid #080100; 
background-color : #971213; }

Next, the simple but effective, Phark image replacement technique visually replaces the browser text of the heading with a background image by moving the text off the left edge of the view port.

#introduction h3 { 
width : 230px; 
height : 55px; 
background : url(introduction_h3.png) no-repeat 0 0; 
text-indent : -9999px; }

To create space into which to place the blockquote welcome message, apply 100px of padding to the right of the paragraph and then add font-weight and color.

#introduction p { 
padding : .5em 100px .5em 0; 
font-weight : bold; color : #fff; }

Now, finally to the blockquote that is visually represented by the 'Mod' and his bunch of roses. To create the effect this element has of "breaking out" of its containing block, use CSS absolute positioning to precisely place the blockquote outside to the top and right. Once again, the Phark method visually replaces the browser-rendered blockquote with a decorative image.

#introduction blockquote { 
z-index : 3; 
position : absolute; 
top : -120px; 
right : -100px; 
width : 225px; 
height : 265px; 
background : url(introduction_blockquote.png) no-repeat 0 0; 
text-indent : -9999px; }

Notice the z-index property? This enables the replaced blockquote image to appear visually at the top of the stacking order and closer to the viewer than any other positioned elements that follow it in the source order of the document.

Now it's time to preview your progress by viewing the introduction in your development web browser. The most minimal markup has been styled to create an attractive result.

Figure 5

Figure 5: The final result of our form's introduction

The First Fieldset

With the introduction area in place, it's time to move down the form to style the first fieldset. One of the most striking features of this design is the way that the headings break out of their fieldset and overlap other elements on the page to create a more organic, fluid design.

The visual effect may look complex, but the markup and CSS that you need to accomplish that effect are not. All of the fieldset elements in this design contain only meaningful, accessible markup, with only one added division element added to achieve the rounded corner effect.

<fieldset id="form_info">
<h3>Tell us about yourself</h3>
<div class="inner pres">
<label for="req_name"><span>Your name:</span>

<input type="text" id="std_name" /></label>
</div>
</fieldset>

Once again, add position : relative; to establish the fieldset as a positioning context for its positioned heading element. Adding a background image positioned at the top of the fieldset starts our rounded corner design.

#form_info { 
position : relative; 
margin : 0 0 20px 0; 
padding-top : 0; 
background : url(form_info.png) no-repeat 0 0; }

At the time of writing, only Apple's Safari browser and others built using its Webkit engine support the multiple background image properties that are part of the W3C's CSS3 Backgrounds and Borders Module. This is unfortunate, as multiple background images are one facet of CSS3 that designers would find immediately useful.

In the absence of support for more than one background image per element, you'll need only one extra division per fieldset onto which to set a second background image to complete the rounded corner effect. I've chosen to add a class of pres to this division to highlight its presentational function.

#form_info .inner { 
padding : 40px 0 20px 0; 
background : url(form_info_div.png) no-repeat 0 100%; }

With your rounded corners now in place, use the absolute positioning and Phark image replacement techniques to position the graphical heading outside and slightly above its containing fieldset. I've chosen a top position of -40px so that the heading also overlaps the bottom of the introduction area above it.

#form_info h3 { 
position : absolute; 
top : -40px; 
right : 0; 
margin : 0; 
padding : 0; 
width : 308px; 
height : 90px; 
background : url(form_info_h3.png) no-repeat 0 0; 
text-indent : -9999px; }

It now only remains for you to style the form inputs and their labels into a tight, grid-like layout. Let's use this as an opportunity to set some basic styling for all form inputs and their labels in our form.

label, label span { display : block; font-size : 100%; }
label { overflow : hidden; padding-bottom : .5em; }

label span { float : left; width : 30%; font-weight : bold; }

By wrapping each form input inside its label, you create a handy block of markup that can be reused reliably in many different instances of form design. The span around the label text adds yet another element onto which you can bind your style rules and adds little to the weight of the markup.

For this first fieldset, I've chosen to float each of the input elements so that they sit neatly alongside their associated label text. You could then also add a dotted bottom border to give these inputs their distinctly different look.

#form_info label { 
margin : 0 20px; 
color : #fff; }

#form_info input { 
float : left; 
width : 200px; 
background-color : transparent; 
border-width : 0; 
border-bottom : 2px dotted #fff; 
color : #fff; }

Preview the result in your web browser. Your first fieldset is now complete and the positioning lessons that you've learned will stand you in good stead. You'll be using variations of these same techniques for all of the following components in your form.

Figure 6

Figure 6: The first fieldset with a positioned heading

Inline Form Elements

One little known fact about form markup is that a label need not be adjacent in your markup to its associated input, textarea, or select. It need not even sit within the same fieldset and can be placed anywhere in the body of your document.

You'll put this knowledge to good use in the next example by placing the "What is your age?" input into a sentence paragraph.

<fieldset id="form_age">
<h3>I wanna be an Ace Face</h3>
<div class="inner pres">
<p>I’m <input type="text" id="std_age" /> years old and I wanna be in your gang. <strong>(Don’t forget to ask your Mum or Dad)</strong></p>

<label for="std_age">What is your age?</label>
</div>
</fieldset>

Once again, start by laying the foundations for the fieldset design. The CSS that you'll use to accomplish the rounded corner background and the positioned heading should be second nature to you by now.

#form_age { 
position : relative; 
margin : 0 0 20px 20px; 
padding-top : 0; 
background : url(form_age.png) no-repeat 0 0; }


#form_age .inner { 
padding : 60px 0 30px 0; 
background : url(form_age_div.png) no-repeat 0 100%; }

#form_age h3 { position : absolute; 
top : -40px; left : 20px; 
margin : 0; 
padding : 0; 
width : 308px; 
height : 90px; 
background : url(form_age_h3.png) no-repeat 0 0; 
text-indent : -9999px; }

#form_age p { 
margin : 0 20px; 
padding : .5em 0; 
font-weight : bold; }

Now, to create the distinctive look for the inline age input, turn the background color to transparent and add a dotted bottom border. This is a simple, but extremely effective, technique for creating a different look for form inputs.

#form_age input { 
width : 40px; 
background-color : transparent; 
border-width : 0; 
border-bottom : 2px dotted #333; }

In order for the form to remain accessible, the label for the age input must remain in the markup, although it's unlikely that you'll want it to remain visible. Positioning this label above the top of the view-port will effectively render it invisible.

#form_age label { position : absolute; top : -9999px; }
#form_age strong { display : block; color : #5d1117; }
Figure 7

Figure 7: Places input elements inside a paragraph for a different approach

More Inline Form Element Design

Once you've mastered the concept of placing form elements "inline" within paragraphs, you can extend that concept to include select elements or even a textarea. You'll do this in this final fieldset that rounds off your stylish new form.

<fieldset id="form_transport">

<h3>My fave method of transport is:</h3>
<div class="inner pres">
<p><input type="text" id="std_vehicle" /> because 

<textarea id="std_transport" cols="10" rows="8"></textarea></p>

<label for="std_vehicle">What is your favourite vehicle?</label>

<label for="std_transport">Explain why this is your favourite.</label>
</div>
</fieldset>

Once again, the styling of the fieldset and the positioned heading follows exactly the approach that you've taken so far.

#form_transport { 
position : relative; 
margin : 0 0 20px 5px; 
padding-top : 0; 
background : url(form_transport.png) no-repeat 0 0; }

#form_transport .inner { 
padding : 60px 0 20px 0; 
background : url(form_transport_div.png) no-repeat 0 100%; }

#form_transport h3 { 
position : absolute; 
top : -40px; 
left : 40px; 
margin : 0; 
padding : 0; 
width : 308px; 
height : 90px; 
background : url(form_transport_h3.png) no-repeat 0 0; 
text-indent : -9999px; }

#form_transport p { 
margin : 0 20px; 
padding : .5em 0; 
font-weight : bold; 
color : #fff; }

Now, add a distinctive dotted border to the input and textarea and use the display : block; property to force the textarea to sit underneath and on a new line.

#form_transport input { 
width : 200px; 
background-color : transparent; 
border-width : 0; 
border-bottom : 2px dotted #fff; 
font-weight : bold; 
color : #fff; }

#form_transport textarea { 
display : block; 
margin-top : 10px; 
width : 300px; 
background-color : #8c9767; 
border : 2px dotted #fff; 
font-size : 99%; 
font-weight : bold; 
color : #fff; }

Once again, hide the associated labels by moving them off the top of the viewport and your final form component for this design is complete.

#form_transport label { 
position : absolute; 
top : -9999px; }
Figure 8

Figure 8: Combining input and textarea elements inside a paragraph

Ready To Submit?

Fire up your development web browser and preview the completed new form design.

Figure 9

Figure 9: The final result of our inspired form design

To accomplish this design, you used a combination of CSS relative and absolute positioning, plus floated form elements, and a popular image replacement technique. These techniques combined to create a distinctive look based on minimal, accessible form markup.

Some of the CSS concepts that you used can be hard to grasp for newcomers to CSS, but once mastered, they become powerful creative tools. Combined with inspirational ideas from print and other interactive media, you should be ready to create stunning new form designs for the web.