Good Usability has two very useful articles about validation and preventing issues on web forms, well worth a read.

• Preventing issues on web forms
• Form validation

Alistapart has an article regarding inline validation that shows us the wonderfulness of using real-time inline validation vs. validating by submission. By giving people an indication that their input is correct (or not) while they are filling in a form results in a far greater success rate and of course there is a much better experience for users.

I also came across an excellent article at UX Matters about not putting hints inside text boxes. In a nutshell: when a text field has content — whether example content or actual content — users will often perceive that field to be filled in and skip over it.

Some other excellent websites to read where UX/Usability is concerned:

• Boxes And Arrows
• UI Scraps
• UX Booth
• Smashing Magazine has a few articles about usability and user experience that are worth reading.

There isn’t enough room to display this data

• There is enough room, but it’s all crammed in to a small space (Who needs white space, right?)
• There is too much on the screen for the user to absorb
• Etc.

We’ve all seen Accordions and the like that help display lists with lots of information nicely. What about if we could take that to the next level and use it in a grid, not just a horizontal or vertical execution.

Grid Accordion does just that

http://css-tricks.com/examples/InfoGrid/

Just thought I would throw a solution to a reasonably common problem out there.

Validness

It’s always a good idea to try and keep your CSS as valid as possible. On occasion you might need to put some hacks in there for IE6 or IE7 – if there are many, it’s probably a good idea to separate those out to stylesheets that are then loaded in with conditional comments.

To validate your CSS, head over to http://jigsaw.w3.org/css-validator/ – there you can point to a stylesheet URL, upload a file, or directly input CSS and have it validated.

Formatting

To format CSS you can use the “Clean CSS” service at http://www.cleancss.com/.

Input the CSS you want to format and choose from several options, hit submit, and voilà, out comes formatted CSS – it also lets you know the code changes that it made.

The options

From the dropdown select the type of formatting you want. For a production output you should probably choose “High (moderate readability, smaller size)”, if you want to make CSS more readable, use the “Low (higher readability)” option.

Unless you know what you’re doing – you should probably leave “Sort selectors” and “sort properties” unchecked, as these have the potential to break the cascade of styles in your stylesheet.

I personally prefer to keep the “Compress font-weight” option unchecked – (e.g. this changes font-weight:bold; to font-weight:700; doesn’t quite read the same).

I build quite a few emails at work for a variety of clients, and time and time again I have to do some creative image slicing, and then build with nested tables in nested tables in nested tables, etc. just to get emails to work in Outlook 2007.

Building emails should be as easy as building a simple HTML page with some standard HTML and CSS. Since outlook 2007 uses the Microsoft Word rendering engine, email developers are now forced to write bad, bloated code to make sure that emails work correctly. Not only do we need to adjust our code, we need to adjust the designs as well, because guess what, Outlook 2007 (or rather the Microsoft Word rendering engine) has no support for background images.

There is a campaign over at fixoutlook.org – if you’re on Twitter, you can send a tweet to your account from there to help send a message to Microsoft.

After seeing some of the drawbacks, and the advantages of using Less, I’ve decided that it should be put through it’s paces and I’ll be trying to use it in a project in the near future so I can see if it will be a benefit.

A quick breakdown of what Less is

Less adds variables, mixins, operations and nested rules to CSS. This will enable us to treat our CSS a bit more like a programming language rather than a style descriptor language.

Compiling

You write Less in to a .less file and use the Less compiler to turn it into a .css file.

Worried about having to compile all the time? With the Less compiler, simply set the ‘watch’ option on the command line and it will keep tabs of your .less file and compile it whenever there are changes.

To do a quick compile:

$  lessc styles.less my_styles.css

You can leave the name of the css file off, if you do, Less will use the same filename as the .less file, with a .css extention of course. To watch a file:

$  lessc styles.less --watch

Variables

Variables in CSS are an fantastic concept, I can’t believe that they weren’t part of the CSS spec in the first place! For example, by being able to define a colour or width in a variable, you can save yourself a lot of time and hassle. Seriously, who wants to remember that the brand colour for your current client is #0062fc? Consider the following CSS that you would normally write:

p { color:#0062fc; }
h2 { color:#0062fc; }

You would write this in Less as follows:

@brand_colour: #0062fc;
p { color:@brand_colour; }
h2 { color:@brand_colour; }

This is of course a very simple example, I’m sure that if you think about the implications of this, that you’ll see how powerful having variables in a language like CSS really is.

Mixins

Mixins are essentially rules that are included in other rules. Instead of doubling up on writing the same bit of code for several items, you include the code that is generic in the other class. Think of it a very simplified extending of classes in OO languages.

.bordered {
  border:1px solid #000;
}
.box {
  .bordered;
  width:200px;
  height:200px;
}

Nested rules

You can also nest rules with Less, meaning that you’ll have to write less code and you can write code that is cleaner to read. For example:

#sidebar {
  color:#000;
  p {
    color:#00c;
  }
  q {
    font-style:italic;
  }
}

This would be compiled to:

#sidebar { color:#000; }
#sidebar p { color:#00c; }
#sidebar q { font-style:italic; }

Operations

You can perform all sorts of operations on numbers, colours, pixel values. This will allow you quickly do things like set something to the same width as the main wrapper minus an arbitrary amount.

@main_page_width: 800px;
@sidebar_width: 200px;
 
#content {
width:@main_page_width - @sidebar_width;
}

As you can see Less can be very helpful in writing CSS, rather, writing less CSS to achieve more, quicker. Since you don’t have to spend a lot of time learning the syntax of the language, you can get right on with coding!

Make sure you check out the Less website for more information.

Less runs on Ruby, and has to be installed as a Ruby gem. I have had a play around with this on my Macbook, I have yet to give it a whirl on my Windows machine to see how easy this is to use on that platform. You don’t need to build your website using Ruby, or Ruby on Rails, you only need to have Ruby installed on the computer that your are using to build your site.

I have also seen 2 other CSS pre-processors, dtCSS and CSS Cacheer. Both are PHP based, and might be worth a look if Less isn’t what you’re after.

Collections is an essentially an awesome way of grouping a bunch of add-ons for Firefox. You can then subscribe to these “Collections” and manage them using the “Add-on Collector” add-on for Firefox.

You can make your own collection or select one that’s already made filled with the add-ons of the author’s choice.

This is going to make installing all those add-ons on a fresh copy of Firefox just that much easier. You can use this for your own personal installation(s) of Firefox, but think also of the Sys Admins here, they can make a collection of default add-ons that they want all users in the organisation to have installed – handy, I think so.

At the moment you need a Mozilla account (you can register for free) to create collections and subscribe to them, you do not need an account to browse through the publicly available collections and download the add-ons within.

Naturally I couldn’t resist and I made a collection of Web Dev add-ons that I frequently use.

Recently, I stumbled across Klok. It is an Adobe AIR application which will run on Mac/Windows/Linux. Not only will it run everywhere, it’s also free. Bonus.

But what does it do?

Klok is a time tracking application. It allows you to enter projects, and sub projects/tasks within those. This is obviously a major plus over other time trackers that only allow you to enter a task and track time for that task. You can also enter comments for each time you’re tracking work on a task

Klok features a ‘Project View’ in which you have an overview of the project details and time entries. There is also ‘Week View’ – a calendar like view that allows you to get a nice visual representation of what you’ve worked on.

Sadly the reporting and exporting in Klok isn’t anything to get excited over, at the moment it only seems to be able to show a pie chart of projects in the root of the project list, exporting of weekly timesheets is really just what it says on the label, you can only see a timesheet for 1 week and export that to an Excel document. This is something being addressed in future versions.

For those of you keen to give it a try, I recommend the latest Beta (1.5.1 RC1.1) – it has both weekly and monthly timesheet exports.

http://klok.mcgraphix.com/klok/index.htm

The plan is to have 2 or 3 designs for the site – 1 of them is largely done already, 1 exists half in Photoshop, half in my head, and the last, so far only exists in my mind. In the meanwhile, as the site moves along, I thought it might be a good idea to give the blog a new theme and move it to the new domain (it will still be available from the old one at blog.afterlight.net.au for a goodly while).

Another thing I really need to get a handle on is this very blog, I tend to post a few things every now and then, and often don’t post for weeks after. I’ve set myself some reminders so that I might actually remember to post here regularly

via Carrer Blog: 1 line CSS Grid Framework.

I wouldn’t mind giving a simple grid framework like this a try, quite often we do have to deal with columns of similar widths. If only designers would follow some simple rules, like actually making sure that they have everything line up with a grid.

via Advanced docking using jQuery.

<

p>I wouldn’t mind using something like this on a website sometime. On the right site, this could be an invaluable tool.