cookandkaye

scientific and technical website design projects news

Soft Matter Physics website

Soft Matter Physics - polymer diffusion

We have just completed our update of Mark Geoghegan’s research website. Or original design from 2007 was extremely clean and distinctive. Much of this is retained in the new site, offering visual continuation. The main additions have been to improve mobile compatibility, which is essential for a modern site, and back end updates to make it easier to maintain. The new mobile interface is particularly approachable, with icons offering a choice of menu, and quick links to the main site pages…

An important part of the update has been to convert Flash based animations to browser native formats. At one point Google offered an adequate translation service for simple animations, but unfortunately this is no longer available, and we found that none of the online translation services available at present could manage complex movies with Actionscript driven interactivity.

As you might expect, translating ‘linearised’ animations into video formats resulted in both large file size and a pixelated, poorly resolved movie. As a consequence we spent some time developing a CSS/Javascript framework that would allow us to re-write the features making use of current technology, with no third party script libraries. An instructive example, the linearised (simplified) Flash movie for ‘Single Polymer Diffusion‘ weighed in at 125kB, its .mov standard (raster) movie equivalent was over 10MB!

Converting the moving items into GIF or PNG sprites got the raster version down to 1.5MB – a massive improvement, but moving items showed significant graininess, and the file size was large enough to result in noticeable delay before the movie could be played.

The final movie (see Prof Geoghegan’s website: Single Polymer Diffusion) has a raster (JPEG) background (33kB) with HTML native sprites (~0kB) and 70kB of Javascript to position and move the sprites over the image. The final movie was, therefore, slightly smaller than the equivalent Flash file*.

* Technical note: In most instances Flash files would be smaller than the equivalent HTML/CSS/Javascript application, because they can be delivered in compressed binary format. In this instance, however, text is handled by the HTML page (so no overhead for downloading fonts), and the moving items could be represented by duplicating a simple HTML native shape, so the shape of the moving item could be coded in perhaps 200 bytes – leaving us with the task of positioning these shapes on our back-drop using Javascript (which is consequently quite ‘windy’)…