Skyrocket.be

Vertically aligned homepage items. These kind of horizontally aligned blocks is something we are seeing more and more these days. There are several sites that use this kind of positioning of elements for various goals. Blogger.com uses it to navigate through their quick tour feature on their homepage. Boltfolio.com and Flickr.com uses it for a similar goal. Musicstrands even integrated it’s whole navigation structure in horizontally aligned blocks. There are hundreds of sites using this layout method, properly or not.

Why am I blogging about this? Well because i’ve found another website making use of the technique, this time in an original and effective way. Take a look at the Squarespace Signup page. They applied this method to their subscription form.

At first it felt a little awkward but after taking a closer look it works wonderfully well. The steps are visually separated by numbers, followed by a small description below and then just a simple input field after which you automatically proceed to the next step. Clever and easy to use. The submit button is a big button below the form flanked by information about submitting the forms.

The only thing that bothers me as a webdesigner is that they didn’t use semantics to implement it. Properly use of list tags and styling and positioning with CSS would have made this technique perfect. If i find the time i’ll give it a try and see if this can be acomplished by semantically using <ol> tags and styling it with CSS.

But what with larger forms? Well … this technique obviously won’t work with big forms in which case the vertically aligned elements is still the way to go but personally i’m conviced that you should always reduce the number of elements of a form to an absolute minimum. Nothing is more annoying that filling in long forms, not to talk about validating the whole data after you hit the submit button.

I’ll be soon working out a tutorial on how to achieve this effect with pure CSS and semantics. Stay tuned and subscribe to my RSS Feed if you want to keep track of the new items on my blog.