post-cringe

I’m setting up an ad-sense account with Google. I figure it could help pay for some of my adwords expenses. As an extra, they offer html coding tips. Well, I’m not one to pass up the opportunity of some good advice. The link takes you to a google search for great website design and this is the wonderful page that tops the list: http://www.unplug.com/great/

I’m not going to put a link to it, I don’t want to help this site gain any more prominence in Google.

Ouch, the tips are out of the stone-age. There’s even a link to a ripped off summary of an ancient David Siegel tip ala 1997.

In the interest of sanity, I thought it would be a good idea to googlebomb the world with a more appropriate link. So, here it is: great web site design. I think alistapart.com would be the better answer to great web site design. Feel free to follow with your web sites.

post-bio

Portrait of Ted Drake ca. 1993
About me. It’s a strange place to begin. In fact, it’s just a strange place.

Skipping the traditional third person voice…”Ted was a perfect child…”

Let’s just say that I’m a creative person that got into web site design because we needed a web site and the fools that we paid to build one were darn idiots.

I started with My Website Builder from MySoftware Co. This thing makes frontpage look like a gem. But it got me started. I went on to Net Objects Fusion then to hand-coding in Homesite and Dreamweaver. I still like my Dream…. what a boring biography! tools and history?! Boring.

Here’s what I like and try to do.

I believe the internet should be for everyone. I believe we should do what is possible to make that information accessible. Standards-based design has brought the challenge and creative interest back to web design. So, I’m a Zeldman follower that is trying to bring accessibility and standards-based design into the world, one page at a time.

That’s getting closer….

I am also a photographer and eventually this site will be filled with my photographs. My photographs are often out of focus, blurry, unclear, and mysterious. I’m not interested in one liner jokes and the same goes with art. Make me think.

While I respect copyright laws for others, I don’t care if someone uses one of my images. I’d like to get credit and would love to know where they are used, but I don’t put watermarks on them. The internet is for sharing, not hording. However, I do respect copyright for those that depend on intellectual property, such as museums, and don’t steal or download without giving credit.

post-design

I have found the cure for design-block. You know, like writer’s block only with coding. Just create one seriously ugly style sheet and stare at it for a while. You’d be amazed how quickly the artistic juices begin flowing. We’re talking really damn ugly.

I thought it would be nice to do a blog with primarily grey tones and few colors. Well, what better than a sharpie on white paper. and… do it quickly, really artsy and rushed. Oops, when I scanned the drawing, the background image took 83 seconds to download. So, I chopped it up and threw it in the style sheet and voila… a really ugly site!

I visited css zen garden, thinking it would inspire me. Actually, I was desperate and thought I could rip off some hard work from somebody else. Did I say that?

Seriously, I just perused the pages waiting for something that was an inspiration. While none of them said, hey Ted, here’s your blog design, I did like the way a few of them used huge header images.

Recently, I scanned some black and white images from Paris, so the search was on for something nifty. This image on the top of the home page is from Paris. I was walking along the road next to the Seine and saw this guy watching a television float by. Yes, a guy watching a television float by. So, that is what this is, a slow shutterspeed photograph in Paris of a man watching a television float by in the Seine. I’ll add new images to the other pages in the near future.

I’ve been busy writing new posts about standards-based programming. It’s a pain to do coding examples. I have gained much new respect for those that have taken the time to write stories with coding in them. I welcome any suggestions and comments on these posts. They will be combined for a paper I will be delivering at the upcoming Museums on the Web 2005 conference.

Now, I need to finish modifying the code to remove excess markup.

Building a standards-based form

Most web sites will require a form or two. Purchases, weather requests, contact forms, and even “Guess the number of dust bunnies under David’s desk” contests. In the past, forms were set up with the miracle table and that worked just fine. After all, they looked pretty. What more could we want?

How about an accessible form that can be navigated with a keyboard instead of a mouse? How about a form that can be used by the blind? How about a form that allows people to purchase stuff on their cell phones? How about all of this and more in a format that is sooo much easier to build and maintain, not to mention faster download times?

Does this sound impossible? Miraculous? The answer, once again is semantic coding. Let’s go back to the beginning of the HTML history books and look at some simple tags and how they should be used properly.

A form can include one to many inputs. On larger forms, these inputs can be grouped into similar subjects, such as personal information, address information, credit card information, etc. Somehow, we need to label the inputs to give users an idea of what they should tell us. These basic demands are the building blocks of an accessible form.

The Wrapper

Forms use a <fieldset></fieldset> tag to group similar inputs. The entire set of inputs can be grouped inside one fieldset and sub groups can be nested within the fieldset, creating one big set of fieldsets. Think of it as a box inside a box inside a box… Or, the form could have one or more fieldsets that are not nested within each other. It all comes down to the subject matter of the inputs.

Here’s a good example of nested fieldsets

flow of information in a form with nested fieldsets

Here is an example of non-nested fieldsets

flow of information in a  form with individual fieldsets

Look at your information and decide if there should be one or multiple fieldsets. Visually, there is a border around the fieldset by default. This border can be removed with style sheets. Avoid using background colors, Internet Explorer will not show them correctly.

Fieldsets have a convenient <legend></legend> tag that goes directly after the opening <fieldset> tag. The legend tag is used for adding a short descriptive header to the fieldset. The default styling features a square box around the text. The border can be removed with the style sheet.


<fieldset>
<legend>Describe the Form</legend>
</fieldset>

The Inputs and Labels

To make a form comply with accessibility standards, each input needs a label. Conveniently, there is a label tag. When a visitor sees a form with the label tag,A form isn’t of much use if there are no input fields. These are very easy to work with.

There is a <label></label> tag to give a label to each input.

These are really cool. The label could go anywhere on the page and it would still be associated with the input field. If someone were to click on the label, it activates the input field, this makes it much easier for someone with limited mobility to activate a check box or radio button. To do this, we add a for=”xxx” attribute to the label and the input gets an id=”xxx”. This tells the label to look for the input with the same value.

<label for=”name”>Enter your Name</label>

<input type=”text” id=”name” size=”15”>

Let’s put together a simple form


<form action=”” class=””>

<fieldset>
<legend>Join our mailing list</legend>
<label for=”name”>Your Name<label>
<input type=”text” size=”25” id=”name”/>

<br />
<label for=”email”>Your E-Mail Address</label>
<input type=”text” size=”25” id=”email” />

<input type=”submit”/>
</fieldset>
</form>

Pretty simple, huh? The <br /> tag will keep the fields from running together. Style sheets can give the form the look desired.

Visit www.picment.com and www.stuffandnonsense.co.uk for more information.