If you look at the features promised by Google Chrome there’s precedent for all of them:

• One Box for everything - Opera 9.5 / Firefox 3
• New Tab page - Opera 9.5
• Application shortcuts - Mozilla Prism
• Dynamic tabs - Opera 9.5
• Crash control - Internet Explorer 8
• Incognito mode - Stealther Firefox extension, InPrivate mode in IE8
• Safe browsing - Firefox 2, IE7…
• Instant bookmarks - Firefox 3
• Simpler downloads - Ok, I don’t know of a suitable precedent for this.

But that’s not really the point. What Google have done is cherry-picked the features to adopt in order to paint a clear picture of the way they see the web developing (and they are probably right, not least because they are pouring money into making it develop that way).

I wrote a webrunner (to borrow terminology from Mozilla) way back in 2001 or thereabouts, embedding the Internet Explorer component CHTMLView in a chromeless frame. The merit of the site-focused approach was obvious then even though my implementation was mainly just an exercise in MFC, and it was merely for a forum I used to frequent. The point is that not all webpages are equal. People don’t spend most of their web time “browsing”: 90% of the time they are just logged into the same sites and applications. Chrome’s user interface, architecture, and selection of features seem better prepared for this than any other browser on the market.

Google Chrome is a leap towards a much more minimal browser that knows you aren’t running it so that you can use a browser, you’re running it so that you can use websites. This web-centric future has been predicted so often, it comes as a shock to see that this is what it feels like, and that other web browser manufacturers have never taken the initiative to fully deliver on this promise.

It’s actually possible to create a similar effect using SVG filters:

The field is created using Gaussian-blurred circles. Where these soft edges overlap, the alpha channels are composited and this creates the necking effect which is key to blobby shapes like this.

The thresholding is done using a high-contrast filter on the alpha channel. The specular highlight was added just to emphasise the gooey, ketchup-y effect.

If you have a copy of Inkscape, it’s fun to play with dragging the circles. Feel free to download the SVG.

One of the reasons designers like to use fixed rather than fluid website layouts is because of the difficulty in providing attractive images at unknown aspect ratios. This technique offers a really beautiful solution.

The presentation shows that all that is needed to apply the effect is an image plane containing the priority of each pixel or effectively in which seam removal it is to be eliminated.

I demand that:

1. There be a PNG extension chunk defined to encode this plane.
2. Web browsers support this new chunk when non-proportionally scaling images.

In my current project, however, I’ve found a fairly convincing use case. I can do all of the basic listing and manipulation with the base class, and I only need the superclass for one particular operation.

Rather than writing this in a different way, which would be less intuitive, I pushed ahead with the conceptually simple approach and fought with Django to make the inheritance polymorphic. The way I did this was brute force it: check all of the relations for one that exists.

from django.db import models
cls = inst.__class__ #inst is an instance of the base model
for r in cls._meta.get_all_related_objects():
    if not issubclass(r.model, cls) or \
        not isinstance(r.field, models.OneToOneField):
        continue
    try:
        return getattr(inst, r.get_accessor_name())
    except models.ObjectDoesNotExist:
        continue

There are faster ways of doing this if you do it at the database level (left joining all tables in the inheritance hierarchy and sorting out the mess into the correct subclasses), but this is simple and self-contained and forces me to think about when I need this. And looking at the query cache, the overhead is not too bad anyway.

There are social networks that tell you where friends have been, some that tell you where they are, some that tell you what they are doing right now and some that tell you where they will be. But very few, it seems, that tell you where to be.

Taking Facebook as an example (as it’s the only social network I’m using heavily at the moment), it does not make it easy to set up things to do. Creating events is a very laboured process. It takes perhaps 15 minutes to set up an event. It’s an individual rather than a collaborative task. Invitations to events get ignored because of the way they are delivered. People get blanketed with invitations that they don’t want. And I can’t even set up an event until I’ve set up a group to arrange the event.

Social calendaring is not a new concept as the promise of electronic calendars has always included ease of scheduling, via e-mail invitations of some sort. Google Calendar and 30 Boxes represent the state of the art in this regard, which is simply calendar sharing and event invitations.

The thing social calendars really should address is scheduling of events, because I’m lazy and also busy and I always say things like “we really should …” but it never happens.

My ideal social calendar could fulfil these user stories:

• Find me something to join in with on any given day.
• Schedule things with the knowledge of when I’m most likely to be free or busy, even when nothing is scheduled.
• Arrange online games with my brother in Australia (7 hours ahead in summer or 9 hours in the winter).
• Pick a date and time to do a thing I want to do, with friends who want to and who may have to travel to do it.
• Remind me to book the venue for an event.
• Book out an event I’m hosting.
• Nail down the fuzziness inherent in saying something like “Let’s have dinner on Thursday evening” so that we can say “Dinner at 8pm, and Alice will be joining us at around 10pm for drinks”.
• Suggest when to actually go to bed so that I can get up next morning.
• Pin-point exactly where an event is so that I can work out how to get there.
• Don’t keep trying to schedule things my skint friends can’t afford to do.
• Suggest things I might like to do.
• Mildly favour a schedule where I can watch my favourite TV programmes.
• Create entirely new groups of local people with similar tastes (say Buffy, or Linux) in such a way as to be actually kind of fun and neither awkward or annoying.

As is perhaps evident, I’m a strong believer in heuristic tools that do really innovative stuff. What are the chances that all of the above are possible in a calendar application that doesn’t automatically book me to go pole-dancing in Alaska moments before it has me watching Mork and Mindy with total strangers in my home on a Friday night? Hmm.

I stumbled across this while browsing Google for references while writing a proposal for a client. I was writing my usual set of caveats about the Web Content Accessbility Guidelines (WCAG), in which I lament how rubbish they are in practice. My usual spiel goes along the lines of “WCAG 1.0 informs all of our work at Mauve Internet. However, because the WCAG is subject to intepretation, and is now somewhat dated, we do not warrant conformance.” I would like to make a clearer statement of how and why but a specification isn’t really the place to challenge sections of the WCAG.

Happily, I can now get rid of this kind of non-committal note when writing specifications, and offer a firm commitment to WCAG+Samurai.

I will also be revising my company website - indeed, my company policy - to recommend conformance to the WCAG guidelines as amended by the WCAG Samurai Errata where possible.

While I do encourage people to take nice, artistic photographs, and include them on a website perhaps in a frame, this is ultimately limiting. If you would like to end up with photos you can use within the design of a website, you need to take a different approach to setting up your shots. The composition will be done using graphics software at a later date, so you need to avoid doing the composition when you’re in the field.

The following guidelines are based on the main reasons I have to rule out a particular photograph as suitable for a piece of graphic design.

Don’t crop the subject

It may look artistic if the subject extends out of the frame, because it places the subject better in frame and leads the eye in the opposite direction. But it’s the number one reason for ruling out photographs from a layout. With no cropping of the subject, the designer can place a photo anywhere and composite the subject into the layout. With one edge running through the subject, the designer is constrained to place that edge along a natural edge in the layout, or failing that, hide it behind something else. With each additional edge that runs through the subject, the designer is more and more constrained with what can go where.

Don’t take black and white shots

It’s easy to convert colour photos to black and white on a computer; the opposite is not possible. Take colour photos just in case you need them.

Use a mixture of different shots

Most photographers will take multiple shots of a subject, but often this will just be a process of refinement - to try and capture one excellent photograph. You should aim for a much more varied mixture, of portrait and landscape, wide-angle and close-up, different angles and so on.

Try and take the same shot of different subjects

Designers will often be creating a suite of graphics to work together, so take similar shots of different but related subjects.

Include acres of background in your shots

In artistic photography you’re told to put the subject off-centre in the picture, roughly a third into the frame.

In web design we often have very long or tall regions to fill, quite different dimensions that you might encounter in print design. The aspect ratio of the photos that we might be putting on a website is rarely 16:9 let alone the traditional 4:3. We’re more likely to deal with aspect ratios of 10:1.

To successfully frame photos that can be cropped to a very wide or tall aspect ratio, your subject should be much smaller and nearer the edge.

Don’t use depth of field effects

A short depth of field can really 3D effect to a photograph. But it is difficult to cut out something that’s blurry, and sometimes that’s what designers want to do. A blurry background isn’t a problem, as part or all of the background may be removed, but when parts of the subject extend out of focus it’s impossible to separate the subject from the background.

A designer can fake a depth of field effect if the subject is in focus.

Don’t strive for contrast

As a rule of thumb, artistic photos look best with dark darks and bright highlights. Nearly all B2B and the majority of B2C websites are dark text on a pale background, and the dark darks contrast too much with the light and airy environment of the average website. That’s something that you can’t actually fix with colour curves as you can only produce murky greys. A subject that is mostly well lit but fades to black is as hard to work with on a pale website as one that is blurry or cropped: there’s no good way to blend the dark bit into the site.

If your website is on black or dark grey, you’re in luck. These are ideal for publishing artistic photography and really good contrast will look stunning.

What this entails is that it’s possibly to take very simple vector shapes, bung on a filter, and get some very pretty artwork which can still be edited as paths.

Inkscape’s 0.45 release saw the implementation of its first filter: Gaussian blur. On its own, Gaussian blur was an incredible useful filter, offering soft edges and powerful shading techniques. But with the collection of other filters provided, it also provides a building block for constructing some very complicated and useful graphical operations that could previously only be done with a raster tool like The Gimp.

Unfortunately, you will need a fairly deep knowledge of 2D image processing to make use of SVG filters. Fortunately I have one of these. Allow me to walk you through creating a filter in Inkscape 0.46.

I want to start with an example of a graphic I created way way back with Inkscape 0.38.

I created this graphic by drawing a blob, adding some text (in a font called “Balcony Angels”) and then painstakingly drawing out the highlights (specular lighting) as partially-transparent white paths. It’s also got a drop shadow.

Let’s start again in Inkscape 0.46. I’m using the star tool with a bit of randomness to start me out with a blob. The wording is just normal text but I’ve tweaked the kerning a little this time. Also notice the gradient. Depending on how you wire up your filters you can preserve the colours and using a bit of gradient will always help to give a word-art logo like this a bit more richness.

To add lighting, you need a height map. The simplest way to create a height map is by applying a gaussian blur. SVG uses the alpha channel to represent the height map. Without a blur you can imagine that the height is 0% outside the shape and 100% inside - like a cliff or a plateau. With a blur you have a partially transparent edge, so it smoothly rises from the 0 to the 100%, like rolling hills. I usually apply the blur to the alpha channel as the colour channels aren’t relevant.

You can only see a 3D shape appear when we wire up a lighting filter. Specular lighting is what we’re shooting for. The output of specular lighting is just the highlights so make sure the document background is set to opaque black before you start experimenting.

Specular lighting is very sensitive to some of the settings you’re using.

• Surface scale - here’s where we say what the 100% height of the height map actually is. Generally you should stick to small positive numbers. Try 10. The gradient of the bumpy edges can be thought of as this number over the blur radius. If you’ve got 10px of blur, and a surface scale of 10, your bumpy edges should have a 1:1 gradient.
• Constant - this number combines two ideas: how bright the light source is, and how much light the object reflects. 0 means that the light is off, so that’s not what you want. Numbers between 0 and 1 mean the object reflects a fraction of the light, or the light is dim. Numbers over 1 mean that the light is brighter. It’s all relative, obviously.
• Exponent - this is the glossiness of the surface. The higher the exponent, the tighter the highlights. Metals have quite low exponents - say 10. 30ish gives a soft plastic. Higher gives the effect of ceramics and polished surfaces.
• Light Source - start with distant light, azimuth 225, elevation 25 and experiment from there. That will give you the kind of lighting from the top-left that mimics the user interface of most computers.

The outer halo, if you’re wondering, is where the light catches off the bottom of the slope. We can clip that away at the same time as we apply it to the shape. To do this, we use an atop filter. The top input is the highlights, the bottom is the source graphic. Atop draws the highlights only over the source graphic. This is equivalent to (specular in source alpha) over source grahic.

We can also add the outline from the original. If we added it before the filtering, it would have also been shaded because the outline would be part of the alpha channel that we bumpmapped. We need a raster outline. We can do this using the morphology filter.

We dilate the source alpha channel and composite the original over the top. Voila:

And then there’s a slight drop shadow. Gaussian blur the same morphology filter, add a couple of pixels of offset. Then composite the previous stage back on top of it.

If the shadow - or indeed the highlights are too bright, you can make them slightly transparent with a colour matrix filter. The fourth row of the colour matrix is the alpha channel, and the fourth column of that row is how much of the alpha channel to pass through. Change it to any number between 0 and 1 to make it partially transparent.

I’ve got one last trick up my sleeve, and it’s the most complicated one.

I’m going to decrease the exponent on the specular filter a little to give me bigger highlights. Then I want to increase the contrast on the alpha channel. This can be done with a colour matrix filter. I set the last row to (0, 0, 0, 4.0, -1.5). This means that the alpha channel will be mapped a -> 4a - 1.5. This will to some extent remove the partial shades in the specular highlight and give me a more cartoon effect:

This is how the final filter is wired:

Websites don’t usually include credits other than an attribution in the footer. So this is a list of the websites I have personally been involved in (that I can remember at the moment).

• Abacus Marketing
• Active Fire Management
• Ad Media Cover
• Aldershaw Tiles
• A M Skips
• Ashdown Leisure
• A&S Tooling
• AV Electronics
• Beautycube
• Benalcosta
• Best Magnets
• Blah Blah Blah Lifestyle Management
• Cambridge Garage
• Charles Peck
• Chichester Cinema
• Chris Dawson Associates
• Cliffords of Brighton
• Cobasco
• CUSC
• Cyprop
• Decoration By Design
• Demolition Paintball
• Design LSM
• Dijon Miniatures
• Direct AIM
• DK Beer
• Duropal
• Echit
• EMS Medical
• First Finance
• Fitness First
• Freestyle Off-road
• Gary Richard Homes
• Glenn Freight
• Global Guidebook
• Gold Arts
• Go Letting
• Guitar Junction
• Harbour Freight
• Heritage Photo Albums
• Hildenborough Volvo
• Hybrand
• Impact Promotional Workwear
• Impact Uniforms
• In-House Design
• Joe Macari Cars
• Just Computing
• Kingscroft Volvo
• Kylie Kanga
• Lara Marketing
• Limpio Group
• Limpio Office Solutions
• Locations In The Sun
• London Property Finders
• Lucy In Paris
• Marshalls Volvo
• MICE Intranet CMS
• MICE IT
• Motor Trade Link
• Neal Smith
• Northshore Yachts
• Nutravida
• Parkside Cars
• Peter Taylor Associates
• Peugeot Express
• Photography2You
• Pick A Point
• Picture Find
• Point 2 Point
• Pope Consulting
• Port Agric
• Portsmouth Grammar School
• Protech Component Consultants
• Provincial & Western Homes
• Railtrack Plc. Intranet
• RROOPP
• Saje uPVC
• Shoes 4 All
• South East Labels
• Southern Counties Fuels
• Southern Counties Glass
• Stickwise
• Tempcon
• Temple Mews
• The Icon
• The RM2 Partnership
• The Top Edge
• Top Brass International
• Top Sinks
• Trinity College, Cambridge
• Turbosound
• Urgent Fuel Oils
• Wadhurst Country Services
• Weybridge Group
• Wood Wharf
• Yacht Solutions

A lot of web usability is common sense, but when you compile all that common sense into a book, it’s an extremely valuable reference.