HexaClock Part One

posted on February 7th, 2011 by Anthony

A screenshot of the HexaClock running on my iPhone 3G

Before I go anywhere with this I’ve got to give full recognition to Jack Hughes (@jabble) for the total inspiration for this little project. I loved his Colour Clock as soon as I saw it. It was one of those “damn, I wish I’d thought of that” moments.

The only thing about it is that it’s Flash. There’s nothing wrong with that, and to quote Brendan Dawes “…nobody died!”, but it does mean it won’t run on iPhones and iPads. That, as mentioned in a Twitter conversation with Si Jobling, is a bit of a shame “as it would make a perfect iPad desktop”.

So that got me thinking again. Surely it wouldn’t take much to recreate it in HTML, CSS and a bit of JavaScript? So that’s what I did, therefore creating the HexaClock.

Building the HexaClock

Another thing I have to say is that I can’t really do JavaScript. I can potter my way around JQuery if I need to, but for proper powerful stuff, well I leave that to someone who really knows what they’re doing. Fortunately I work with the very talented Chris Weedall. In about 20 minutes he’s got the basis for the HexaClock up and running.

I’d love to give you a run down of how it was all achieved, but quite honestly I don’t really know the answer. Maybe I could persuade Chris to write something for me if anyone is interested. What I can do, however, is talk about the rest of the stuff that makes it display nicely.

The HTML

Primarily the HexaClock is aimed at being used on iOS devices, so I decided to use HTML5 – albeit nominally. There isn’t really a whole lot of structure to the page, in fact it is essentially just one big article. There are also a few divs (which on reflection could possibly articles too) used for the modal info display.

Apart from that the only other vaguely interesting things are a few id hooks to show and hide paragraphs based on the media queries, which I’ll come to in a later post. There is also an implementation of offline storage, which is part of HTML5. Again I’ll write about that in a later post.

The CSS

This is possibly where some of the more interesting things are for this part of the build. I’d already established that this was primarily an iOS project, so I know I’m going to be working primarily with a Webkit based browser. Therefore there are a few -webkit prefixes in use, though I don’t think there is anything that couldn’t also be -moz’d etc.

The borders

*UPDATE* Something seems to have changed with the webkit rendering engine which causes this feature not to work anymore – at least on desktop versions. For the moment it still works on iOS Mobile Safari.

One of the design features of Jack’s Colour Clock is the border around the perimeter regardless of the browser side. That’s the sort of thing that in the past was quite difficult, but these days with modern browsers and use of the :before and :after pseudo selectors we can get something similar up and running.

A while back I read about ‘Simplified page borders in pure CSS’ on CSS Wizardy and filed it in the useful bank. It was almost perfect for the look I wanted to achieve.

The only issue I had was that example was a block, opaque colour. That would jar quite horribly with the ever changing background of the HexaClock. So I set the colour as a semi-transparent white with rgba. This has effect of making the borders ‘take on’ the colour underneath – but paler.

However using the original code also means you can see where the blocks overlap, ruining the illusion of the continuous background. Fortunately with some tweaking of the absolute positioning you can achieve that seamless look. Here’s the finished code:

 html:before, html:after, body:before, body:after { content:" "; background:rgba(255,255,255,0.4); position:fixed; display:block; z-index:-2; } /* top */ html:before { height:15px; left:15px; right:0; top:0; } /* right */ html:after{ width:15px; top:15px; right:0px; bottom:15px; } /* bottom */ body:before { height:15px; right:0px; bottom:0; left:15px; } /* left */ body:after{ width:15px; top:0; bottom:0; left:0px; } 

Gradient

Another feature I wanted to take from the original was the radial gradient in the background. It just gives the page a much more finished feel than just a block colour. Fortunately Webkit has radial gradients built in, and all it took to achieve the look was attaching a background gradient to the article, fixing it to fill the page, then wrestling the awkward webkit gradient syntax into something that worked well. Again I used the alpha channel in rgba to allow the ‘black’ background to take on the HexaClock colour.

 article { position: absolute; background: #faf; background: -webkit-gradient( radial, 50% 50%, 10, 50% 50%, 700, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.4)) ); width: 100%; height: 100%; content: ''; left: 0; top: 0; } 

Webfonting

I also felt the HexaClock would benefit from a little bit of web font goodness, so once again (see my last football fixtures experiment) I turned to Googles Font Directory to get things up and running. There isn’t a massive choice of typefaces to choose from, and a lot are a bit amateurish, but there are a few well crafted gems among them. Plus it only takes a few seconds to get them up and running.

I’ve gone for the very lightweight Lato font (Polish for Summer apparently) for the body copy. It is actually a very complete font family that comes in a variety of weights. I’ve no idea how well Windows renders it mind.

I did intend to use a webfont for the clock digits, but I ran into a problem finding a font that had the correct spacing for the job. Everything I tried resulted in the clock constantly moving to centre itself on the page, which totally ruined the effect. In the end good old Helvetica proved to the best choice.

More to come

That pretty much sums up most of the bare bones form and function of the HexaClock.

However, there is still a lot of development that I haven’t covered yet. Mostly about tailoring the experience to the iPhone – including media queries, making it a ‘web app’ and offline storage. So stay tuned for more info on that lot very soon.