Thinking inside the box

While doing my routine check of the latest user experience and design blogs I ran across this gem from Smashing Magazine. It breaks down the inner workings of the new flexbox model provided by the latest CSS3 specifications. This is definitely a must read if you care at all about the flexible box model

Some of the key features worth keeping an eye on include

  • Automatically adjusting relative widths of children elements
  • Controlling the presentation of elements purely with CSS
  • Borders that span entire columns without ugly hacks

Like most of you I have done my fair share of battles with CSS floats, trying to get proportional formatting right, and doing complex mathematical gymnastics to get to a final goal. While this is still under development and I am certain subject to many iterations before it is properly supported at least it is a move in the right direction. I know that I for one will be playing around with it this weekend so I can add it to my toolkit.

Common sense defaults

Over the years I have read a large number of pieces advocating the use of sensible defaults. Stephen Anderson's book Seductive Interaction Design devotes two pages to the topic with proof about the why and how (one of many reasons to order a copy as soon as you can).

Today Jared Spool provides even more validation. By performing a simple experiment with Microsoft Word he found that less than 5% of users change any settings. In other words 95% of people touching your product will assume there is a reason that the default settings are configured the way they are. Rather than fix them they'll go with the status quo.

I highly recommend reading the piece when you get a minute. The questions it asks apply not just to those of us trying to design the experience but the people actually writing the code. You may be surprised at all the assumptions that sneak through into the final design.

Web animation with CSS and jQuery (Part 2)

Last time two pure CSS approaches were used to fade an article when it was hovered. Unfortunately this approach works well in Firefox and Webkit based browsers (Chrome and Safari) but is dead on arrival in even the newest version of Internet Explorer. Despite the fact that its market share is decreasing it is never a good idea to lock out 35%+ of your user base. Let's use jQuery to create a truly cross platform approach.
Read More

Web animation with CSS3 and jQuery (Part 1)

When all you have a hammer everything looks like a nail. What happens when you have an entire bag at your disposal? Let's take a look at a case where a multitude of options exists for a simple task. That task is to animate a page element to bring an interactive experience to an otherwise static layout.

This is a comparison of two approaches to a simple animation problem - how do you draw attention to a section of the page? The first two methods rely on CSS3 techniques. The third leverages the power of an open source Javascript library to create a truly cross browser compatible experience at the expense of a little bit of processing power. Each way has its own benefits and drawbacks. Read on to learn more.

Read More

Thoughts on a 'Digital Nation'

Recently I ran across a fantastic documentary called Digital Nation. An hour long look at the changes hat have occurred over the last ten to fifteen years it seeks to answer the question of what technology has done to our lives. Put under the lens of the user experience it raises some very thought provoking threads for designers of all interfaces. What are we actually creating through the explosion of desktop, web, and mobile bssed interfaces that surround us now on a daily basis?
Read More