Adobe Edge demo - first impressions...

Had a play with Edge over lunch - just a simple keyframe animation (which is all it can really do). First impressions:

  • fairly easy to use if not a little cumbersome – adding keyframes/tweens is a little on the convoluted side
  • no ability to add interaction
  • no scripting ability
  • as you'd expect it outputs a lot of files (.js, .css, .html, image files) - in the very simple animation I did the weight of these files was about 250kb. That's about 240kb more than doing the same in Flash. Flash would only be one file (maybe two if you use swfobject.js to embed).

Final verdict – good but I hope for a lot more features in the final release of the software. However – I still can't see how HTML5 will ever take over from Flash for high quality, interactive, rich media delivered via a browser.

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"

How to force Internet Explorer to ignore the cache and reload a SWF...

Dave of and I have just put the finishing touches to a very* simple voting form on a website I have been developing. Users can vote from six choices and the results get picked up by a SWF file that displays the results as an animated bar graph.

The problem, as ever, was Internet Explorer. After casting your vote you would be redirected to a new page containing the SWF file showing the new vote standings (including your vote). This worked fine in Firefox and Safari but, for reasons best known to some useless Microsoft techy, IE saw fit to just load in the SWF with the old data. I tried all sorts of work arounds including meta-tags that (supposedly) prevent IE from caching the webpage but to no avail.

In the end I created a new SWF file, the same shape and size that loads the original one in using the following code:

theDate = new Date();
// this number will always be unique
nocache = theDate .getTime();

The random number *should* prevent IE from just loading in the previous version from cache. Some testing will tell...

Oh - and you can do the same if you are loading in other files, such as txt, too.

* No really - VERY simple.

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)

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.

Removing the dotted border on active links in FireFox...

I was involved in a discussion earlier today about the dotted boxes / borders that appear around links in FireFox once clicked. The initial question was how to remove them which simply involves adding a line of code to your CSS similar to this one:

a:focus {outline: none}

However - the topic soon turned to why they were there and should we be removing them. The argument was that they provide accessibilty for user that need it and should not be tampered with. In my eyes removing them is no worse that setting the size of text to a small font - it shouldn't be done but many, many sites do it regardless. Designers should be mindful of usability of their sites as well as the look.