Monthly Archive for July, 2010

The fold: 5% of users’ total time is spent past the 2,000-pixel mark

Even though 5% of users’ total time is spent past the 2,000-pixel mark, they tend to scan information that far from the top fairly superficially: some pages are very long (often 4,000+ pixels in my sample), and thus this 5% of user attention is spread very thinly. In our study, user viewing time was distributed as follows:

  • Above the fold: 80.3%
  • Below the fold: 19.7%

We used an eye tracker with a resolution of 1,024 × 768 pixels. These days, many users have somewhat bigger screens, and we’ve conducted many (non-ET) usability studies with larger resolutions. Although using a bigger monitor wouldn’t change my conclusions, it would somewhat increase the percentage of user attention spent above the fold simply because more info would be available in the initially viewable space.

Form input labels with (HTML5) placeholder attributes

Update 16/12/2010

I used this jQuery placeholder plugin to do the job today and it worked nicely.

The new HTML5 specification introduces the form input placeholder attribute, which allows us to define a hint to help users fill out input fields. If you’re using a WebKit-based browser right now you should find working examples of the new input placeholder in use on this page.

Working with form elements, especially labels, can present a dilemma for many…

Proportionator (alpha 1.0)

Update 26/11/2010

Pending feature requests for v1.1 (beta):

  • Custom aspect ratios
  • Default radio input
  • Full form entry validation
  • Height to width conversion
  • Outputs image place holders
Update 30/11/2010

Proportionator gets a new home: http://www.proportionator.co.uk/. The project also welcomes the very talented @_alanshaw on-board to help get some of these feature requests out the door. Boo yar!

Try Proportionator?

Proportionator (beta 1.0)

Proportionator (beta 1.0)

Problem:

Simply put; you’d like to be able to insert media (notably images) into your new WordPress 3.0 posts and pages – and any other website page – and ensure the dimensions fill the column width, helping to:

The Motion Family killing game

I can’t speak highly enough of these guys at the moment. Documenting quality beats with quality lenses.

IE6-8 CSS3 border-radius support with CSS3 PIE

I received a wonderful tip-off from one of my colleagues this week via Slashdot. My dreams had come true and along with it sanctimonious giggles for all the people I’ve known in the past who’ve worshiped Internet Explorer enough to waste time and money on supporting the browser’s lack of CSS support, rather than engaging with – let’s face it – more useful and engaging tasks; tasks we should all justify and convince to our clients before a project begins.

Making Money vs. Quality Work

I want to make beautiful things, even if nobody cares.

Saul Bass

What the 80/20 Rule Tells Us about Reducing HTTP Requests

Most performance optimization today are made on the parts that generate the HTML document (apache, C++, databases, etc.), but those parts only contribute to about 20% of the user’s response time. It’s better to focus on optimizing the parts that contribute to the other 80%.

Yahoo! Interface Blog

html5homi.es

Like I need any more encouragement: http://html5homi.es/

^ html5homi.e

^ html5homi.e

html5readiness.com

A wonderfully visual HTML5/CSS3 browser support resource I revisited this evening, buried in my bookmarks:

http://html5readiness.com/ screenshot

HTM5 Readiness screenshot

http://html5readiness.com/

Umbrellas before clouds

"I'm Balloon Fighter" logo by Polygraph Studios

"I'm Balloon Fighter" logo by Polygraph Studios

So over the last few months I’ve been cautiously experimenting with putting in place processes to handle dealing with the routine tasks us deselopers have to handle on a regular basis. I’m not talking new tools, dope apps, or revolutionary sleep techniques, but simple client correspondence.

I would often find myself spending tens of hours on a weekly basis answering emails that didn’t need to be answered

Stuff like:

  1. Acknowledging new clients with new projects and work proposals.
  2. Acknowledging friends with new projects and work proposals (they’re very different).