realtime graphics software website

More of a face-lift than a complete site re-structuring, nonetheless they are very happy with their new look.

The site itself is built on a bespoke (i.e. not Wordpress) content management system, and the code was very clean with enough class and ID selectors to play with, so in the end I managed to give the entire site a complete make-over by changing CSS only, and then uploading a few new images that are referenced by the new style-sheet.

See : www.rtsw.co.uk

holiday apartment web design

If you view the site in Internet Explorer you’ll see that all the boxes (including the heading banner image) have square corners, but if you use a proper browser like Firefox, you should see rounded corners. I know it’s a bit of a cop out, and I did (briefly) investigate JQuery rounded corners, but in the end I opted for a IE conditional comment to replace the heading strap with an alternate (square cornered) image so that at least the look and feel is consistent depending on which browser the site is viewed in.

I’m also now a big fan of Parallels Desktop for the Mac. While I was doing a quick check for cross-browser compatibility I was able to run Firefox and Safari and Explorer versions 6, 7 & 8 all at the same time on my laptop. Possibly the subject of a future blog post I think…

Tolkien Fonts - cufon text replacement example

So, the plugin is called WP-Cufon and you can get it at wordpress.org/extend/plugins/wp-cufon/

It’s quick to install, has good documentation, and it’s easy enough to specify some rules to control the text replacement on your site.

So for example I’ve used :

Cufon.replace('h1', { hover:true });
Cufon.replace('h2', { hover:true });
Cufon.replace('h5');
Cufon.replace('#navbar a');

which replaces the font for h1, h2, h5 headings and any link text within the ‘navbar’ div with a special font of my own making. All of the subsequent styling is covered by CSS. It really is very simple to set up.

You need to convert your font first into a format that Cufon can handle – there’s a Cufon generator that does the whole thing very neatly. It also, importantly, allows you to limit usage to certain domains to protect the font from use elsewhere.

I’d previously looked at Scalable Inman Flash Replacement (sIFR) but I have to say I think Cufón may have the edge if only for ease of set-up – although, granted a lot of the hard work has already been done by the plug-in. Oh, and Cufon doesn’t use Flash.

I don’t claim to understand exactly how Cufon works, but if you’re interested in that kind of thing have a look at http://wiki.github.com/sorccu/cufon/about which goes into all the nitty-gritty.

And here’s a link to the creator of the wp-cufon plugin, Tobias Battenberg

OK, Tolkien fans

So this next bit is only really of interest to fans of The Lord of the Rings… (look away now if hobbits and dragons aren’t your thing!). No really.

The site I’ve used Cufon on is a Tolkien book collecting site – and I created a special font that brings to mind the calligraphy of the author J.R.R.Tolkien – I was pretty pleased with the end result, so if anyone’s interested they can buy a copy of Tolkienesque Regular (in Truetype font format) from my store.

I also ended up tackling another Wordress theme design from scratch – so the entire site has a kind of ‘Tolkienesque’ feel to it. That’s the name I gave to the theme too.

Tolkien Wordpress theme

The Wordpress theme makes heavy use of categories to organise the 400-odd entries, and has a neat ‘Random Item’ widget that I made to pull a text link and the first thumbnail image from a random post. Anyway, I was quite pleased with the end result. It’s been a labour of love built in spare minutes snatched here and there over the last few months.

But I’m most pleased by the fact that I can now use any old font I like in Wordpress, subject of course to EULAs and other legal niceties, or at least until the legal quagmire surrounding @font-face, font embedding and linking gets sorted out.

Like the original set, they’re designed to have a kind of ‘TV Graphics’ feel to them, while keeping a safe distance from the ‘old style’ classic BBC Weather symbols which were their inspiration. They were originally designed from scratch in response to an increasing number of requests for the real BBC ones which are, of course, protected by copyright.

My new set of Weather Icons consists of 32 individual symbols :

1. sunny
2. sunny intervals
3. white cloud
4. black low cloud
5. hazy sun
6. mist
7. fog
8. clear sky (night)
9. light rain showers
10. heavy rain showers
11. light snow showers
12. heavy snow showers
13. sleet showers
14. light hail showers
15. heavy hail showers
16. thundery showers
17. cloudy with light rain
18. cloudy with heavy rain
19. cloudy with light snow
20. cloudy with heavy snow
21. cloudy with sleet
22. cloudy with light hail
23. cloudy with heavy hail
24. thunderstorms
25. light rain showers (night)
26. heavy rain showers (night)
27. light snow showers (night)
28. heavy snow showers (night)
29. sleet showers (night)
30. light hail showers (night)
31. heavy hail showers (night)
32. thundery showers (night)

Here is an example icon at 256×256 pixels to give an idea of what you’d be getting…

Weather icon : Thundery Showers (night-time)

Links:
Weather Symbol (set 1)
Weather Symbol (set 2)
see all products

Blackheath Village website

A quick redesign for the local website for Blackheath – a lovely little village in Surrey.

Visit the site at www.blackheathsurrey.co.uk

If you have a website of your own – maybe one that was built years ago and in need of a quick ‘refresh’ – please do get in touch. We can copy your existing content over to a fresh new design in no time at all.

As well as a cleaner look, your new site will be optimised for faster loading and better search engine placement. So if your site is looking a bit tired and worn out, contact us for a bit of ‘website spring cleaning’.