Should you use QR codes on your website?

QR code

Scan me!

There is a debate running within the Web team at St Andrews just now about the value of using QR codes on web pages.

Our feeling here is that QR codes are most useful on print publications and where used on websites for contact information, for example, they should be an unobtrusive option (accompanied by a tasteful 16 x 16 QR icon QR code icon perhaps) rather than splashed across the page.

Our feeling is also that there are better ways to enable people to import contact details into their address book software, such as microformats.

What are your thoughts? Please use the comments below and answer the poll. Thanks!

Silk icons

FamFamFam Silk Icons

FamFamFam Silk Icons

I was recently needing a number of small (16 x 16 pixel) icons for a project and came across the Silk Icons collection from FamFamFam, which I can thoroughly recommend.

“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you’re sure to find something that tickles your fancy. And all for a low low price of $0.00. You can’t say fairer than that … This work is licensed under a Creative Commons Attribution 2.5 License.

The only icon that I couldn’t find amongst that positive smörgåsbord of iconic loveliness was one for a QuickTime movie, but apart from that it’s served me well for what I’ve required.

Shopping cart icon

While on the topic of icons if you’re looking for an icon for a shopping cart (and let’s face it, who isn’t these days?) there’s an attractive one on offer for free at Bartleme Design.

My fold isn’t your fold

At the moment at St Andrews we’re working on some design tweaks for our website, based on user-feedback from current staff and students, to make the pages easier to read (more white-space, better line-height, etc.).

As part of this redesign we’ve grouped the news and events information on the homepage at the bottom of the page; below the so-called “fold”.  Similar to what the University of Louisville have done.

We’ve had a few people comment on this, that although they like the design they’re worried that people won’t scroll and that everything should be “above the fold”.

But that’s the thing: we can’t put everything at the top of the page.  Surely there have to be some design trade-offs that make it easier for the user once she has scrolled to understand what she’s looking at. That involves grouping similar items together, and using good labels, and so that’s what we’ve tried to do.

Besides, what is the fold anyway? Surely it depends entirely on the user’s screen resolution, the browser used and how many extra toolbars are displayed? My fold will likely be different to yours.

I’ve just checked the Google Analytics stats from when we launched the new university website and the site has been viewed with 849 resolutions, ranging from 0x0 (!!) to 240 x 240 up to 6400 x 5120 pixels.

Resources

A few good resources about this:

Meanwhile I’m getting on with our redesign, which should go live sometime in the summer.

University Web resources

A couple of useful websites pointed out to me by a member of the Information Architecture Institute:

  1. University Web Developers
    A social network for anyone involved with implementing and maintaining web sites in a University environment. Mostly US-based, but still a good resource.
  2. eduStyle
    Inspiration for Campus Web Designers. Again US-biased but collects together all the .edu website designs into one place.

Font matrix

Western fonts matrix

Richard Rutter of 24 ways has “put together a matrix of (western) fonts showing which are installed with Mac and Windows operating systems, which are installed with various versions of Microsoft Office, and which are installed with Adobe Creative Suite.”

The fonts matrix can be downloaded (XLS or CSV) or printed for handy reference.

Typography

The Elements of Typography applied to the Web is another really useful resource (still a work in progress), also from Richard Rutter, that gives a good grounding in the ‘rules’ of typography.

Interaction Design Pattern Library

Stuck for how best to display your navigation? Needing to present your data in a usable way? Need help deciding how to enable users to make a choice?

Great online resource for design patterns: Interaction Design Pattern Library.

Also check out The Usability Kit from SitePoint, which includes magnetic “Web Widgets” that you can stick on a magnetic whiteboard and design user-interfaces in half the time. Only US $197.

Pixel ruler for Visio 2003 … and everything else

Visio

Oddly, Microsoft Visio 2003 doesn’t support pixel measurements, which for me is about as annoying as Microsoft Publisher not supporting colours specified in hex.

Information architect Gene Smith has developed his own simple pixel ruler for Visio.

Everything else

So, for Visio there’s Gene Smith. For everything else I recommend Cool Ruler by FabSoft.