Full Feed

A Collection of Screen Patterns

Dave Child — Wed, 25 Aug 2010 14:46:27 +0100

Essential reading for any UI designer, this is a thorough and highly useful foray into different screen patterns.

A Collection of Screen Patterns (posted from ZooTool).

The Vertical Mouse

Dave Child — Mon, 16 Aug 2010 10:11:52 +0100

I've been using a computer daily since the early 1990s, and inevitably some parts of my body have reacted badly to this. My right wrist started hurting sometime in the 2000s, and last year that pain extended further up my arm. RSI had become a problem that I needed to deal with.

After a bit of digging around various ergonomics websites, I decided to try a new mouse. It was my mouse arm that was giving me grief, so that seemed to be a good place to start. On the recommendation of a fellow geek, I decided to try a Vertical Mouse from Evoluent. It's a weird looking contraption, that is basically a mouse on its side.

The idea is that you twist your forearm less with a vertical mouse. Your arm remains in a neutral, natural position when using it. I was dubious this would make any difference.

However, after a week using my first one at home, I bought a second for work. I've not had wrist or arm trouble since. It has changed my working life. I wouldn't go back to using a normal mouse.

Pongo - Screencasting for Linux

Dave Child — Mon, 16 Aug 2010 09:18:53 +0100

Pongo is an app for Linux (Ubuntu definitely, not sure about other distros) which allows you to record your screen, voice and webcam at the same time to create a smart-looking screencast.

Pongo - Screencasting for Linux (posted from ZooTool).

Typographic Sins

Dave Child — Sun, 15 Aug 2010 11:01:24 +0100

A poster (sadly, it appears, unavailable to buy) with common typographical mistakes.

Typographic Sins (posted from ZooTool).

Google Docs as a Drive

Dave Child — Fri, 13 Aug 2010 13:54:36 +0100

Martin Owen of DoctorMo.org has released a little app for Ubuntu users which allows you to mount your Google Docs account as a drive in nautilus. Open files with Open Office, work on them as usual, and they sync back to the cloud when saved. An excellent piece of kit.

Google Docs as a Drive (posted from ZooTool).

Page Load Metrics

Dave Child — Fri, 23 Jul 2010 11:16:07 +0100

A recent client wanted some specific information about performance and load times for an ecommerce store. There are best practices, of course, and lots of factors that can affect load time, and most ecommerce shop managers also want lots of imagery, so a more detailed breakdown of load times and items was required.

There are plenty of things you can measure, and a huge amount of detail you can go into. Historically, the aim would be to keep a page under 100kB, as that would equate to a rough download time of 30 seconds on a dial-up connection.

That 100kB limit is still a great rule of thumb. Yes, broadband is commonplace now, and yes, many pages are substantially over that. But dialup is still in use, mobile phones are being used more often (and are not as fast as desktop browsers), and people usually get broadband so they can get the same stuff faster, not so you can stuff pages with more pictures. Another important factor is that Google is now using page speeds in its search ranking algorithms.

Back in the commercial world, clients want large product photos and fancy JavaScript effects. These add up, and that 100kB limit can quickly start to look rather restrictive.

We needed a set of metrics that went beyond the simple 100kB limit and took into account the effects of caching on subsequent pages loads and showed us where bottlenecks were happening. One number just wasn't enough, so we ran through a large list of options and ended up with this list by which we now measure site performance:

Total page size (kilobytes) for homepage
(Assets included, uncached.) This indicates the likely volume of data needed for the first page view of a visit. This will give you a rough idea of how long a first page view landing on your homepage will take.

You can use a variety of sources for this, but I quite like this Web Page Analyzer - it gives you the total page size, but also breaks down what's being loaded by category (images, scripts, stylesheets etc).
Total page size (kilobytes) for a product page
(Assets cached.) The second will load size (kilobytes) for a product (or category) page, with shared assets (i.e., CSS, images and JavaScript) cached. This measures load for subsequent pages.

The easiest way to measure this (that I found) was to use the "Net" panel in Firefox's FireBug extension. Clear your cache, load the website homepage (to cache basic assets), and then load a product page - you will see the total page size at the bottom of the Net panel.
Page load time (seconds) for homepage HTML
(Uncached.) This metric, unlike the others, will give you an idea of how quickly the website server can build and send out a page. This can be measured with FireBug as well, and should be measured several times, at different times of day, to ensure a reasonably accurate value.

What this gives us is an idea of how a page will load for first-time visitors - a hugely important factor in any ecommerce shop - as well as subsequent page views. It identifies whether slowness is caused by the server or by volume of data. It helps to identify where improvements might have the greatest impact.

And what can you do if your page is too slow?

Fewer Files
It seems obvious, but it's not always easy to do. Consider removing and concatenating files where possible. If you can, ensure that files that are not needed on every page are not loaded on every page. Every extra connection a browser needs to make to a server increases the load and the time it takes for your site to appear.
Smaller Files
Smaller files mean faster load times, so optimise your images, remove unnecessary JavaScript and CSS, and trim your HTML cruft.
Use a CDN
Using jQuery? Great, but get Google to serve it for you and if your user has visited another site using Google content delivery network, then jQuery will already be cached. Even if not, Google's servers are dead fast, and it will lighten the load on your own server. (Link will follow but it appears the Google CDN introduction is down at the time of writing.)
Use Caching
A dynamic site can do lots and lots of repeated work. You can cache almost everything on a website, from includes to database query results to full web pages. I've written a guide to caching output in PHP.
Zip Output
GZip is a simple method of compressing output before sending it to the user. It's built in to most servers, so just switch it on for an instant speed boost.

Want to know more? Try these resources:

A New Site for Hart Reade

Dave Child — Wed, 14 Jul 2010 10:45:17 +0100

One of the projects we have had in the pipeline at GSBA for a few weeks is a new website for Eastbourne-base solicitor Hart Reade, and we've just launched it into the wild.

It's another MODx site (our first-choice CMS for small content-driven sites like this), and Adam and Shaun have done a great job on the design and build.

A New Site for Hart Reade (posted from ZooTool).

Icon Reference Chart

Dave Child — Tue, 13 Jul 2010 11:37:26 +0100

An excellent piece of reference material - almost a cheat sheet, in fact. All the sizes, formats and related information you need to be able to create favicons, iphone icons, android icons and more.

Icon Reference Chart (posted from ZooTool).

Redesign: The Ultimate Travel Company

Dave Child — Thu, 08 Jul 2010 12:02:16 +0100

One of my favourite clients at GSBA, The Ultimate Travel Company have lots and lots of information about lots and lots of destinations. We have just completed a reskin of their (MODx) site, aiming to make that information a bit easier to get around.

The big problem we were looking to address was one of nesting. With so many destinations, and destinations within destinations, it could take 6 to 10 clicks in some areas to find what you were looking for. The new site drops that to 3 to 5. We also added a search engine, something we all felt was conspicuous by its absence in the earlier incarnation of the site.

We refreshed the design as well, with a new homepage (with giant photos - we wanted to make more of their imagery), new news page, new destinations pages and a new colour scheme to replace the previous brown and orange.

The main addition, other than the search engine, was the new "Destinations" dropdown menu, which has gone from a simple styled list to an HTML/Flash hybrid, with a styled list and flash map working in harmony (we had lots of fun making the JavaScript and Flash talk to each other).

Redesign: The Ultimate Travel Company (posted from ZooTool).

How Not to be Viral

Dave Child — Wed, 07 Jul 2010 10:57:07 +0100

An excellent look at viral vs organic and some great analogies to the real world. Now added to my online marketing patter: r-Strategy and K-strategy. Also: "If you behave like a disease, people develop an immune system".

How Not to be Viral (posted from ZooTool).