Google screen resolution statistics overlay...

This is a useful, although it could be designed nicer, tool for seeing the percentage of users viewing web pages at a given resolution (illustrated by the coloured areas):




Further information on the development of the tool can be found here.

Dave White's GUID generator...

This is a great little tool for generating files full of randomised GUIDs... In Dave's words: "think index colums of databases and record IDs for user lists etc"

What the Font???

How cool is this? 

If you've ever been wondering what a certain font is you can upload an image of it at this URL and it comes back with some guesses. I tried it with an image of some Rotis Sans Serif characters at 25pixels height (25% of the recommended height of 100pixels) and it was spot on!

Loving it!

PX to EM...

Now this is good: 

I found the link to it on Dave White's blog and its pretty damn groovy. It is hailed as “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.

I like those apples :o)

Windows Live Writer Beta...

After trying to embed video into a blog entry earlier I soon discovered that this blog engine (BlogEngine – current version at the bottom of this page) won’t handle the <embed> code in the online editor. As quick as a Flash I was bending Dave’s (very patient) ear to this fact via MSN. He calmly suggested I download Windows Live Writer Beta. After a quick moan about Microsoft (which Dave cheerfully absorbed) I bit the bullet and installed WLW Beta from: 

I am using it now and I have to be honest – it seems fairly good. (My computer is running a little slow but I can’t be sure that's because of WLW or some of the other programs I have running – I am doing some very heavy vector work on multiple files this morning). After installing a simple wizard asked me for my blog URL, username and password and that was it – I was up and running.

WLW Screenshot

I am able to edit in rich text mode or the HTML source and can even switch to a full preview of the blog entry, using my CSS styles, during editing. It also features a spell-check and loads of other useful tools. Most importantly I can now embed the YouTube video code that the standard online editor wouldn't allow.

The only annoying thing I’ve come across so far is that adding an image seems to be unnecessarily complicated. It allows you to add all sorts of styles (drop shadows, margins etc) to your image but I would imagine any serious blogger has all that set up in their CSS. It also imported it at an odd size and I had to wade through some settings to get it to place it at the size I originally wanted.

Overall though – not bad. I’m sure I’ll work out the little annoyances in time. Seven out of ten.

Scaling embedded YouTube videos...

I posted my first blog entry with embedded video this morning. As you’d expect I simply copied the supplied embed code from the relative video on YouTube (with customised colour of course) and pasted it in my post*. As my blog text column is only 350pixels wide and YouTube’s default video width is 425pixels this meant that I had to resize the video whilst maintaining the videos width to height ratio. How? Easy...

In your YouTube embed code you will see TWO instances of:

width="425" height="344"

Simply change the BOTH the instances to the width and height you require. In my case the width="350". As the ratio of the YouTube window seems to be roughly 1.2:1 to find the height simply divide your width by 1.2

width / 1.2 = height
350 / 1.2 = 291.666 (I rounded down to 291)

Once you’ve plugged in your new numbers the video window will be nicely resized.


* Therein lay some problems leading me to have to download WLW Beta – but more on this later.

Online Lipsum generator...

Just remembered this - a site allowing you to generate random Lipsum (Latin) for use when laying out where text is going to go.

Scroll down a little and look to the right to see the generation tool. 

Adobe Kuler complimentary colour swatch creation tool...

This is a little online tool by Adobe that I've recently sarted using. Its pretty useful for picking out sets of complimentary colours and generating swatches:

You can also see sets created by other designers.