scientific and technical website design projects news

Articles on Popular science

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’)…

Alloy research in the UK

DARE alloys research splash screen.

The United Kingdom has a long history of industrial metalworking, and even though a lot of our heavy industry has moved overseas, there is still a significant steel industry, and strategically important industries engaged in high tech alloy manufacture. It has therefore been a great pleasure to work with the DARE research project, which combines the strengths of some leading UK Universities in alloy research with key industrial interests to look into the development of the next generation of alloys. My brief exposure to their research programme, writing copy based on the submitted brief to EPSRC, was also quite a learning experience, as the scientific development of new alloys depends on control of non-equilibrium crystallisation dynamics from atomic to macro-scale – which explains why this process is so demanding (for which we can also read slow and expensive!).

The website includes a logo designed by Sebastian Conran Associates, which is base on a crucible, and employs the orange Pantone 151C – that closest to the melting colour temperature of Titanium (1941K or 1668°C). The logo design informs the colour choice throughout the site.

The site itself is rather different to other recent sites by CookandKaye, in that we are using a splash page, screenshot above right; this features a reduced menu, a brief strap line for the project, and a large logo overlying a full screen background image of metal turnings from a lathe. The whole combines to give an instant picture for visitors to the site, letting them know that they have got to the right location (or not!). This is particularly useful on mobile devices, as the simple message can be readily scaled down to whatever real-estate the visitor has to hand.

DARE optimise the alloy manufacturing process.

Interior pages (as above) can carry banner featured images, which are derived from DARE project partners and from stock photos – reflecting the wide scope of the research outcomes. These images give interior pages a strong visual impact, whilst keeping the message simple and easy to read. These pages have a traditional ergonomic menu down the right hand margin of the page at full size, but this folds away to a drop down menu at the top of the page on mobile devices. This allows us an extensive, but easily navigated menu system, while allowing us to devote the full page width to content on narrower screens.

Taking the trial and error out of alloy design.

The image above is a mobile view of an interior page of the site, one that describes the project objectives. The production of modern alloys still depends a great deal on the craft approach of trial and error, and approach that the DARE project aims to put on a sounder scientific basis…

DARE, designing alloys for resource efficiency

New site for Noahgene

Noahgene provide state-of-the-art molecular genetic services to animal and plant breeders, conservationists, and researchers worldwide. Their new site has been some months in development, but its now live, and making good progress up the search engines!


As normal with a website, we had a separate test version, visible to the client and her employees, where each proposed development could be viewed and adapted before being made live. We first looked at developing a DNA movie for them, but this did not work well given the requirements for getting information about the business over easily; the animation was too distracting…

In the end site we made some developments with our Javascript based slide show, to pause when the visitors mouse (or finger) hovered over a slide, so that the content could be easily read. Additional content appears in the hover state, so as not to distract from the slide image when this is in auto-run mode. This makes a change from our previous shows, where text content was normally shown in full to one side or below the relevant slide.

The slide background was a custom development, and is a codon-coloured DNA sequence from Arabidopsis (one of the species that Noahgene have worked on). To create this we built a small application that read (short) DNA sequences, and spit out the appropriately coloured codons.

The site is fully mobile compatible, offering easy viewing and navigation on screen sizes larger than 360px in width.

To see the final site, please visit Noahgene’s website.

DNA structure

3D interactive model of DNA. Move your mouse over the model to rotate it. Sorry, your browser is not able to display the 3D interactive molecular model (requires Flash).

We’re currently working on a new site where our client wants a simplified DNA model (which we will probably build in HTML CSS3) but we wanted to check out a molecular model first to aid with design. The above is a fairly accurate molecular model rendered in Flash (so most visitors should be able to see the model without running Java). The perspective is slightly emphasised to give a greater feeling of depth as the molecule is rotated.

COSHH – Managing Safety

COSHH 2014 screenshot

Management of safety protocols in a modern chemistry lab is fraught with problems. The safety officers have to ensure that work flows are kept as simple as possible, whilst ensuring that workers have:

  • Completed any requisite training before undertaking a procedure – and that this training is up-to-date
  • Evaluated any problems that might be attendant on a procedure they are about to undertake
  • Set in place robust measures for when something does go wrong

This is complicated in the Universtiy environment due to the wide range of skill levels that must all be safely managed, from undergraduate student to Post Doctoral level researcher.

Some years ago we developed our first COSHH (‘Control of Substances Hazardous to Health’ – a process for the safe management of chemicals within the workplace) management system in conjunction with the Department of Chemistry at the University of Sheffield. This has subsequently been adopted by two other departments within the university.

More recently we have extended the original system to manage ‘Special Permissions’ within the same COSHH framework. These include application to work out of hours, or with certain categories of chemicals, and types of apparatus. This extension simplifies the safety interface for workers, so it is always clear how they need to manage their activities to help ensure safe working practices are maintained within the department.

A further extension opens a common space for the management of ‘Standard Operating Practices’ within the department. These demonstrate ‘best practice for a range of processes where hazard has been identified, from lifting heavy objects, transport and storage of chemicals, through to the safe use and maintenance of vacuum pumps. The common editorial framework allows all members of the department to contribute to the development of these best practices.

The original COSHH system was built in 2009, and has survived 5 years in the wild, building up a database of safety data for over 12,000 chemicals. It was updated in 2012 to accommodate changes in chemical hazard classifications adopted under European law.

Previously – original post on the COSHH system – note the screenshot at the top of this post shows an updated site design to more-closely match the latest University styling, and also incorporates elements of flexible design to cope with smaller mobile device screen sizes.

Sprucing up an old site – upgrading to HTML5/CSS3

The C60 model was first developed for the Nanotechnology Masters program in 2007. The course was run jointly by the Universities of Leeds and Sheffield, and is sadly no longer available. An updated model of C60 or Buckminsterfullerene, that is compatible with mobile browsers, is available in our post:

3D modelling of C60 in Javascript/HTML

3D interactive model of the structure of diamond

Sorry, there are no versions available for your browser, this interactive animation requires the Flash plugin.

The interactive animation to the right depicts the structure of diamond.

Diamond adopts a cubic lattice, but if you rotate the structure (run your mouse over it) so that one of the corners of the cube points upward, you should be able to see the tetrahedral relationship between closest neighbour carbon atoms quite clearly (I’ve re-drawn this below the animation so you know what to look for).

The semiconductors silicon and germanium adopt the same structure – but we are used to thinking of these as solid state structures rather than an over-bonded organic molecule, so the model is less of a surprise.

The side of the cube above is approximately 0.357nm and the space group is Fd3m(Oh7) (Space Groups for Solid State Scientists 2nd Edition, Burns and Glazer, Academic Press 1990, p152-4)

The structure is built in Flash using our molecular modeller (previous post); it was derived from a larger 3D diamond structure built for an update to What is Nanotechnology? for the Nanofolio MSc courses.

The new project calls for dynamic atoms within the structure, which we will use to explore the differences between matter in bulk (diamond) and ‘soft matter’, that is the basis of most molecular nanotechnology.

As a first stage towards this you might have noticed here that the atoms gently fade in when the structure first loads – the final animation has atoms appearing, disappearing and changing their nature on command – but more about that in a future post…

Chemistry Map of Scotland

Chemistry Map Of Scotland

The Chemistry Map of Scotland was built for the Royal Society of Chemistry as part of their International Year of Chemistry celebration (2011). It was presented at the Science and the Parliament meeting in Edinburgh on Wednesday 9 November 2011 (our previous blog post).

The purpose of the site is to encourage school children to explore the chemistry by looking at how it impacts their local area. I had thought it would be mostly a historic project, but the children’s submissions show that it is anything but – they see chemistry as very much a part of a living and working landscape; the local galvanising works, offshore wind-farms and whiskey distilleries are at least as important as the work of Joseph Black (1728 – 1799)!

The site design is very simple, you won’t get lost anywhere here! We are particularly proud of the logo – even if it does conflate a couple of stereotypes – the thistle (for Scotland) and the benzene ring (for chemistry). The logo was designed to inject a bit of fun and movement into the site, along with the defiantly off-square page corners! In discussion with the client we selected the ‘Short Stack’ font by James Grieshaber, one of the free Google Web Fonts. The font is quirky, friendly without being MS Comic Sans, which has been rather over-exposed.

At the start of the project it was evident that Google were bringing in new charging policies for the use of mapping, so we chose to look at the Open Source alternative. The mapping program we used is OpenLayers, while the base mapping is provided by OpenStreetMap. OpenLayers can use any base mapping (for example Google, Bing or the Ordnance Survey) or satellite/aerial photography layers (Google and Bing are the most commonly seen examples on the web). This choice provides a great deal of flexibility to the project, as mapping sources can be changed as need or expediency dictate.

The public site provides an interactive map with clickable icons leading to students essays (stored in PDF format, to simplify administration). It also has a smart search facility, automatically checking date ranges for articles if a number is input (again my preconception that most of the content would be historic – but it is nice to see what chemistry was going on in Scotland in the year 1850). When search results are displayed they automatically update the thumbnail map, so it centres on the relevant place as your cursor hovers over each result.

We re-visit the Cookies debate with this site. Cookies enable us to create bookmarks to previously viewed pages for you, making it easy to jump between different essays on the same subject (or whatever you like!). Here we looked at an explicit permission system, as required by European Law – you have to click before we can create a cookie. This is the most satisfactory (and legally correct) way of dealing with this problem, which we have previously addressed. Mixed messages are coming from government though, so despite the fact that there is a lot of good in this law for the e-proles, it seems increasingly unlikely that the UK will ever enforce it.

Finally, the site is driven by a custom administration interface, permitting the RSC to add and edit points on the map. Hopefully this will ensure that the site can be kept going and expanding for a long time to come…

Visit the Chemistry Map of Scotland

Science and the Parliament

Science and the parliament 2012.

It has been a busy week here, with a visit to the Royal Society of Chemistry’s (RSC) ‘Science and the Parliament’ meeting in Edinburgh. Here our latest project, the ‘Chemistry Map of Scotland‘ was launched by Prof. David Phillips (OBE), President of the Royal Society of Chemistry.

The project allows local schoolchildren to put chemistry on the map, and was created for the Scottish branch of the RSC as part of the celebration of the International Year of Chemistry (2011). The site is also, in part, a memorial to an old friend of mine, Dr Nigel Botting of St Andrews University.

The launch meeting itself, while sponsored by the RSC, is intended to raise the profile of science more generally in parliament, and there were a number of august speakers, including Scottish Parliamentarians at the event.

The short of the story from the meeting is that the Scottish higher education system performs very strongly in pure research metrics, but this does not benefit the economy – at least out-with the very important higher education sector! My feeling was that the meeting lacked the weight that a leading industrialist or entrepreneur might have provided on the main panel, but was none-the-less quite thought provoking.

Above right: Photo taken at the Chemistry and the Parliament meeting immediately after the main panel discussion, with a screen-shot from the Chemistry Map of Scotland in the background.

3D molecular structures in Flash

A number of years ago we created a simple website for the Polymers and Biomaterials Chemistry Laboratories research group, and as part of this we used Flash to show a chain of atoms that could be viewed from a restricted range of angles using our ‘pop-up’ 3D effect – much like the bathymetry of the Stirling Castle. As part of our recent update of this site we thought we’d go one better, and create a full 3D molecule of a real polymer chain…

3D molecule staticAbove, a still taken from the 3D interactive. Sorry, you really do need Flash to get much out of this!

Above: ‘Frogspawn’ or electron cloud molecular model, an early version of the 3D molecule we built for PBCL. Elements are not distinguished in this model (C, N and O are all represented by the same grey blob), and hydrogens have not been included, making the model rather smaller and easier to manipulate (see link at the foot of this story for the final version).

The modelling is done entirely in Flash, so unlike the existing Java-based molecular viewers such as Jmol and RasMol, there is no need to download an application before the molecule appears! For the site we used a molecule consisting of over 300 atoms, which seems to be a sensible upper limit, as older machines are beginning to gasp a bit at rotating the thing in real time! Clearly in creating this we’re using smoke-and-mirrors to keep the project manageable within the confines of the Flash environment. So, while the positions of the atoms are mapped in 3D, they are represented by 2D graphics. This results in a small amount of flicker as the molecule rotates, and atoms jump in front of each other along the z (out of plane) axis (the frogspawn model above was an early attempt we made to escape this effect, unfortunately plotting semi-transparent atoms takes more processing power, so we hit the molecular size limit sooner with this approach). In creating this molecular viewer as a one-off, we have unashamedly used artistic license to foreshorten the image to give it a more dramatic depth of field.

In the final version the XYZ information for the molecule is imported into Flash in a simple XML file, so whist the process is still restricted to molecules of small to medium size, we look forward to taking it further and seeing how well it can model a wider range of structures…

The final 3D structure can be found on the home page of the Polymer and Biomaterials Chemistry Laboratories website:

Polymer and Biomaterials Chemistry Laboratories

Is it a world first? – No, unfortunately not, see 3D crystal viewer !