A window is essentially just a floating div. We can make the div draggable using the Script.aculo.us Javascript library.

First, we need to create the window div. Here is the CSS I used.


.window {
  background: #d8e7fe;
  position: absolute;
  top: 200px;
  left: 200px;
  width: 350px;
  padding: 1px;
  -moz-border-radius: 7px;
  border: 2px solid #21416d;

}
.window h1 {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  padding: 6px;
  display: block;
  background-color: #9cc6ff;
  font-size: 13px;
  margin: 0px;
}


And here is the HTML markup.


<div id="mywindow" class="window">
  <h1>Example Window</h1>
  <p>Click and drag this window around the webpage.</p>
</div>


I’ve used ‘-moz-border-radius‘ for rounded corners because I’m lazy. You’ll need to use corner images if you want rounded corners that work in more than one browser.

Now all that’s left to do is the javascript. As I said before, we’ll use the Script.aculo.us library which includes a handy Draggable function. Theres a quick guide on how to install the library here.

Once you’ve got the library installed, add this short Javascript snippet to the head section of your document.


<script type="text/javascript">

</script>

When the page loads, the init() function is called, which tells the library to make the div ‘mywindow’ draggable!

View the finished product.

Since my last web design article was so popular, I decided to write a similar one.

This time we’ll start with an ordinary looking login form. The usability experts reading this will immediately notice a few design flaws.

For small forms like this one, field labels should be aligned to the right to minimize the distance your user’s eyes must travel. I’ve also moved the link and submit button directly under the input boxes.

I’ve encapsulated the form in a fieldset (<fieldset></fieldset>) and replaced the title with a legend (<legend></legend>). This isn’t normally nessesary but it helped define the form within all the surrounding white space.

Styling the legend…

I’ve added a yellow background and border to the fieldset and given it some rounded corners. I also moved the submit button to the bottom right so less eye movement is required by the user.

I wrote the following article for the latest AussieHQ newsletter.

Message boxes are a great way to inform your users but can often be the cause of much confusion. If your user fills out a form with incorrect input and your error message is displayed at the bottom of the page, there’s a good chance your user will be left sitting there wondering why nothing happened.

To design an effective message box, I suggest following these guidelines:

• Use icons
• If it’s important, make sure it’s eye catching
• It has to be short, to the point and readable
• Use Colour coding

Using the above guidelines, we can design a great set of message boxes for a website. I’ve used free icons from the silk icon set at famfamfam.com.

Information

Displaying helpful information to users is a great idea, but it shouldn’t distract the user from their main goal. This is why information boxes are generally a washed out blue colour.

Success

Green is a friendly colour, so we use it to report success.

Warning

Yellow is great for invalid input messages, because it attracts attention, but it’s not necessarily a “bad” colour.

Error

In theory, a user should never see this box. Red is often used to indicate danger or emergency, so it’s the perfect colour for a fatal error.

Here is the CSS used to create a message box (thanks to bioneural.net.)


.warning {
   background: #fff6bf url('img/warning.jpg') center no-repeat;
   background-position: 15px 50%;
   text-align: left;
   padding: 5px 20px 5px 45px;
   border-top: 2px solid #ffd324;
   border-bottom: 2px solid #ffd324;
}


And the HTML:

<div class="warning">Invalid input message here.</div>

I would also like to point out, that an effective error message should be placed above the fold, so it’s the first thing the user reads.

If you would like to learn how to write good error messages, check out Error Message Guidelines by Jakob Nielson.

Looking at big-boards.com, a website which “tracks the most active message boards and forums on the web.”, we can easily see that the most popular community on the web right now is Gaia Online, with over 7 millions members!

I’m sure there are other factors which contributed to the success of Gaia Online, but I bet a lot of it had to with it’s distinct registration process.

New users can customize their own avatar by changing their gender, hair, eyes, mouth and outfit. Once the user is happy with their character/avatar, they continue to the contact details page.

This is a great way to layout a registration process, because the user is not confronted with a boring form after deciding to register. The user won’t be hesitant when asked to fill out a small form after they’ve just spent 10 minutes customizing their avatar.

If you’re not getting your desired sign up rate, have a look at your site’s registration page, imagine if it was that fun.

I’ve come up with a list of my favourite login pages with screen shots. If you’re creating your own web application, you may find this interesting.

Continue reading…

[END]

Feel free to add your own!

CSS Diagrams via CSS-Techniques You Couldn’t Live Without.

“I wanted the diagrams to contain links to other diagrams, and since the rest of the text was in a fluid layout where the user could alter the text size, it would be nice to have the same features in the diagrams. But you can’t draw diagrams with HTML and CSS, right? I mean, right?”