Question

At work we had a situation in which a client required a web front for one of our products. None of use are web developers but since I was finishing up on my previous project I volunteered to give it a base.

I have spent the last week or so reading up on best practices and asp.net web forms. Based on requirements we settled on HTML 4 / ASP.NET / CSS 2.1. The customer is going to use the latest browsers so I got to concentrate on nice clean layout.

I have been working on samples using the 960.gs system and I am finding it pretty handy to lay out content without too much trouble, but, I have a major issue.

With all of the tutorials I have seen, they tend to stop or become quite vague as soon the inner most content layout is reached.

Is there any best practices here? or is there any tutorials regarding laying out the inner most content.

What I am talking about for instance is laying out the following:

<div id="question_1" >
  <asp:Label runat="server">Question 1</asp:Label>
  <asp:Label runat="server" >What is the name of the guy from the other thing?</asp:Label>
  <asp:RadioButton runat="server" Text="Yes"></asp:RadioButton>
  <asp:RadioButton runat="server" Text="No"></asp:RadioButton>
  <asp:DropDownList runat="server"></asp:DropDownList>
</div>  

The above html represents a fictional question object. This would be on a list of questions page, much like a survey. Currently, because I can’t find the info I am pretty much using css to absolutely position the elements since, because I am using a grid system, I know the width of the box that this div is contained in.

EDIT: By absolutely positioned I mean within the containing element not the page as a whole… Just to clear that up.

Answer 1

From a form layout perspective there are two things to consider: usability and accessibility. Usability defines things like labels going on the left, fields on the right. The exception in this case being with radio buttons and check boxes when the label goes on the right.

Accessibility, defines that each field should have a label tag; fields should be logically grouped etc.

The RNIB have a collection of articles on web design which touch on accessibility and usability. Personally I think they are a great place to start.

EDIT:

Meat & veg answer: The ideal coders (should) try and achieve to style the form but maintain the flow, i.e. ensure that labels for text fields are styled to appear to the left but appear before the field in the HTML.

So, yes it is good practice to:

• Wrap each label/field pair in a div, allowing you to clear/position this separate to other pairings.
• Make the label display:block with a fixed width and float:left
• Don’t forget to add required * – I usually use a span within the label so I can control the style of the required * separately.
• Use <fieldset> tags to group and style sets of label/field pairings
• Unless you are trying to create a highly stylized form, avoid absolutely positioning anything you don’t have to. I find that as soon as I absolutely position one thing, I have to absolutely position others for consistency so you should always first try and find a solution which allows elements to control the position of subsequent elements
• I know developers who still use tables to arrange their forms. Is this bad? Yes, but it works and for a temporary solution or small, rarely used form this might be an appropriate trade-off.

Scott on Writing has a nice article on basic form styling. This guys is awesome and knows what he is talking about.

And also there are jQuery tools for creating nicer more responsive controls:

• jQuery UI
• Multi select