Butterfly lightbox, now with gallery support

Posted on

7 June 2011

by Andrew Ramsden

By popular demand (thanks Ray) the butterfly lightbox has been extended with new functionality.

The biggest new feature is the addition of support for galleries. Specify a gallery using either a container element to wrap the related links, or by using the same rel attribute on related links allows a series of lightbox links to work together, with ‘next’ and ‘previous’ controls presented beside the lightbox content to allow navigation between each gallery item.

Try it out here:

  • Cairns Birdwing
  • Orange butterfly
  • Blue butterfly
  • Green butterfly

See full examples, downloads and changelog for more detail.

Posted in

Leave a comment

Cached images have no width or height in webkit (e.g. Chrome or Safari)

Posted on

5 June 2011

by Andrew Ramsden

Stackoverflow (SO) has always been a handy resource. Today I noticed a particularly valuable comment with 0 votes.

I created an SO account with the explicit purpose of voting this comment upwards, but unfortunately, I have no reputation on SO, and am not able to do this (yet).

For lack of a better way to credit JKS for his insightful solution I thought I’d recognise it here.

Problem

In webkit browsers (e.g: Chrome or Safari) the onload event fires for both cached and non-cached images, but images loading from cache seem to return dimensions of 0—for both width and height.

Solution

JKS proposes a simple solution, a seemingly redundant setTimeout before taking your measurements seems to magically restore cached image dimensions. In jQuery, that would look like this:

$('img').load(function(){
    setTimeout(function(){
        // do something based on $('img').width and/or $('img').height
    }, 0);
});

Thanks

Thanks again to JKS for the tip!

Posted in

2 Comments

Cache manifests and Firefox

Posted on

20 March 2011

by Andrew Ramsden

I’ve been playing with offline web applications this afternoon. Generally, it’s pretty straightforward:

  1. Reference your manifest file in the <html> tag of each page.
  2. Fill out your .manifest file with the relevant resources you want to be cached and available offline.
  3. Configure your server to serve .manifest files at text/cache-manifest.

Most browsers picked this up fine (tested: Opera 11, Chrome 7, Mobile Safari iOS 4.3), but unfortunately I ran into…

Firefox issues

Firefox (tested: 3.6.13 and 4.0b11) refused to pull resources back from appCache—even though it reported successfully caching 175kB of data—or request any resources that weren’t cached. Firefox just presented the plain HTML for each pages without loading images, stylesheets, scripts or any other assets.

After much searching and trial and error, I came across a recommendation on stackoverflow to use http://* within the NETWORK section of the manifest for the sake of Firefox, and sure enough…

It works!

Final code samples as follows…

HTML (/index.html)

<!DOCTYPE HTML>
<html manifest="/path/to/my.manifest">
<body>
...
</body>
</html>

Manifest (/path/to/my.manifest)

CACHE MANIFEST
#ver0.08

CACHE:
images/bg-noise-tile.png
images/site-name-bg.png
images/menu-bar-divide.png
# etc ...

NETWORK:

http://*

*

Apache configuration (/.htaccess)

# Ensure manifests are served using the correct mime type
AddType text/cache-manifest .manifest

Thank you

Thanks to dalibor for pointing out that http://* is required for Firefox.

One other handy resource is Mark Pilgrim‘s Let’s take this offline, and if it had mentioned http://* it would have been perfect!

Posted in

Leave a comment

unrecognized expression: #

Posted on

15 November 2010

by Andrew Ramsden

I’ve tried to use one of my own jQuery plugins—that I know works—only to receive the following console messages without any reference to a code line number, hence no way to track down the culprit:

uncaught exception: Syntax error, unrecognized expression: #

I’m sure this has caught me out a number of times. Each time is far enough apart that I have forgotten how I debugged the issue previously. And each time I search the interwebs in vain. No one seems to have clearly explained what causes this exception!

Next time I encounter this problem, hopefully I remember—or find—this post, solution follows…

Solution

This exception is thrown by jQuery when you ask it to resolve the selector '#' without an id following. In my case it is often caused by my plugin code assuming an element has an id. If the element doesn’t have an id, the exception is thrown, for example:

...
var storedID = $(this).attr('id');
...
$('#'+storedID).doSomething();
...

When this doesn’t have an id, I’ve essentially asked jQuery to resolve the following:

...
$('#').doSomething();
...

Which jQuery doesn’t like to do, hence the exception.

HTH

Posted in

2 Comments

For Science! Aperture and the user experience

Posted on

9 September 2010

by Andrew Ramsden

I’ve been thinking lately about how best to communicate the different aspects of user experience (UX).

In the process I’ve been reading different books and articles on UX and in amongst the many and varied interpretations (For example: 1, 2, 3), I have started to see a trend.

Mike Kuianvsky talks about “functionality”, “efficiency”, and “desirability”. Don Norman uses “utility”, “usability” and “emotion”. Christian Rohrer’s simple model of user experience is similar with “utility”, “usability” and “brand experience”.

Whatever you call them, the consensus seems to be that UX is generally about the product:

  • meeting user needs
  • being easy to use, and
  • being desirable and appropriate in appearance or form.

There is sometimes disagreement about exactly where to draw the line between the three, but these general divisions certainly make a lot of sense to me, especially if we are discussing web products—and I often am.

Interestingly, in his book Emotional Design, Norman also discusses three levels of processing in the human brain: reflective, behavioural and visceral. I find this interesting because although there’s not a direct parallel to the three aspects of UX—the reflective level can be used to contemplate all aspects—there does seem to be strong linkages between visceral–emotion and between behavioural–usability. I would also say only the reflective level can truly evaluate the utility of a product.

With the general breakdown more or less sorted, let me share where I consider the lines are drawn between them.

Utility

As a sweeping generalisation, I believe this aspect is most often overlooked by web professionals and even UX professionals. I suspect this is true only because “utility” seems so self-evident that it passes by largely un-acknowledged:

Every product should serve a valuable function and meet the needs of it’s users.

This is so elementary, that often times we don’t question the value of a new product or feature. It’s possible to jump right into optimising how easy the new feature is to use before considering whether it is worth using at all!

I would say that a business analyst is well equipped to ensure a product has good utility, although they would need to bring their skills to bear on user analysis rather than business analysis.

Usability

This is the aspect I believe we all tend to know well. It covers how easy functionality is to find, how straightforward functionality is to use and how easy content or instructions are to read and understand. There are many sets of heuristics around to help guide interaction designers in optimising a product for user behaviour—my favourite are Ben Schneiderman’s—and there are many practitioners who are very good at finding usability issues through scenario-based user testing.

I would say that accessibility can affect all aspects of the user experience, but most accessibility issues will initially be issues of usability. From there, less-than-universal access can affect the utility and identity of the product for some users.

Identity

This aspect seems to be the most prone to grey areas in it’s definition. It covers aesthetics and desirability but also brand treatment and the emotional profile of the product. It even covers issues related to the personal identity of the person using the product (i.e: what does my ownership or use of this product say about me?).

Identity design takes the black magic out of graphic design. Once a visual treatment is chosen, it can be iteratively tested and refined like the other aspects of UX until it closely reflects the brand values and emotional profile that has been determined to be appropriate for the product.

Aesthetic treatment can also be used to smooth over some utility and usability issues. For example: If I am using an attractive product and experience frustration I am more inclined to give the product a second chance and keep trying than if the product is ugly. I reason that if the designers have put a lot of thought into the identity design I trust that they are more likely to have put similar thought into the product’s other aspects, so I will give them the benefit of the doubt… for now.

Don Norman presents the case that attractive things work better because an aesthetically pleasing product can help to relax the user, giving the brain a greater ability to perform creative problem solving and work around issues we encounter.

As customers, we may even be willing to make a compromise on utility or usability if the product makes a fitting statement about who we are or who we would like to be. Such displays of—very natural—vanity lead some people to decry “form over function!”—but as we know, aesthetics can have a more valuable impact than vanity alone.

Regardless of how it helps, good identity design can only compensate so far for deficiencies in other aspects of a design. Serious utility or usability issues will generally result in a useless or unusable product—unless it’s so attractive that it functions as art in it’s own right.

For science

So, where does Aperture come into this discussion? Well, I’ve hinted before that I enjoy the odd game. This odd game is one I have enjoyed immensely. The game’s developer—Valve—has user experience down to a science, so their Aperture Science Weighted Companion Cube® seemed a fitting example for the aspects of UX. A 1920×1200 pixel wallpaper version is available. Enjoy!

Posted in

Leave a comment