scientific and technical website design projects news

The UK’s Engineering and Physical Science Research Council has provided £2M of funds to form the TFI Network+, which has the objective of connecting scientists and UK foundation industries (glass, concrete, ceramics, paper and chemicals) to remain competitive whilst simultaneously facing challenges from environmental legislation.

The website offers a membership section, within which members can find partners, and submit proposals for funding. Each proposal consists of two uploaded documents – the personal details of the applicants, and the annonimised application itself. Within the administration section proposals to each funding call can be viewed, and proposals can be scored to easily rank them prior to making funding decisions.

The membership section is based on our well established work for Society websites, while the proposal upload section is a custom development for this project. We also developed the Network logo and site design in consultation with the clients.

The original home page featured an interesting application of the CSS ‘stick’ class, but the TFI Network administrators have taken on content managment very pro-actively; reflecting the dynamic nature of this are of research. TFI Network administrators typically publish several articles a week covering all aspects of energy and resource efficiency in the foundation industries, demonstrating what you can do in WordPress with a dedicated and talented group of content providers. (Updated February 2022).

The Wilkinson Charitable Foundation was established under a Trust Deed made by the late Professor Sir Geoffrey Wilkinson in 1978. Sir Geoffrey Wilkinson needs no introduction to fellow chemists, being the 1973 Nobel Prize winner for his work developing Organometallic Chemistry, but also as the co-author of ‘Cotton and Wilkinson’ the standard undergraduate inorganic chemistry text for many years.

The Foundation has been acting behind the scenes for many years, offering studentships and prizes for chemiatry related activities. Recently the board decided that the Foundation would be better served by having an online presence.

We used a standard WordPress template (‘Twenty Seventeen’), minimising development costs for the Foundation whilst providing a fully featured website. Our role was in helping to prepare content for inclusion in the site, including images and video hosting.

The UK Society for Biomaterials (UKSB) is a non-profit organization working to develop novel biomaterials to tackle current clinical needs for medical devices, prosthetics and for regenerative medicine. Their membership interests include medical materials science, biosensors, biomechanics, biocompatibility, tissue engineering, and many other subjects.

The site is fully mobile compatible. It is built in WordPress, to permit the society to add and edit content, and includes a separate membership section, where members can add a brief profile and gallery of work to illustrate their scientific activity.

The WordPress installation has a custom Newsletter (see our previous post on society newsletters), and facility for uploading banner images. Banner images are automatically saved at multiple resolutions to optimise site performance – lowe resolution images being served initially, and for mobile devices, to ensure the site responds quickly to visitor requests. Higher resolution banners download after the page has been displayed, and quietly replace the low res. version, giving the appearance of the image snapping into focus. On mobile devices the iinitial low res. version is adequate for the smaller display area, and a high res. version is not downloaded to save the visitor’s bandwidth costs.

Membership payments, including a reminder system, are automated. Payments are made through PayPal.

We created the Electronic and photonic molecular materials website a number of years ago. The design was based on that used at the time by the University of Sheffield, of which the research group is a part, and is still quite visually striking and effective (a lot more easily used and navigated than a modern ‘bootstrap’ site!) – on a desktop browser…

Over the decades the underlying mechanics of the web have changed – today sites need to be mobile friendly! There was a need for an inexpensive site update that would make the site accessible to mobile/phone format browsers, and work with a new HTTPS certificate.

The original home page had a series of eye-catching full page images displayed in a slide-show. The new home page serves one of three full page images tailored to wide screen, tablet and phone screens*. This reduces the bandwidth needed on mobile devices, which do not need to pull down the large format photographs, and so makes browsing the site a lot less painful on these devices. The low budget meant that we have lost the slide-show, so different banner images are served at random, with a new image being selected each time you visit the home page.

Above: A screenshot of the new Mobile-friendly EPMM website. The items in the menu bar were just a little too wide to fit comfortably accross a smaller mobile screen, so the link to the Department of Physics and Astronomy has been disguised as a shorter (but well known) equation (where else would you expect to go with the link F=ma?) …

* This used the HTML5 ‘picture’ element with artistic direction; so we have carefully chosen sections of the large image that give best impact at successively smaller screen sizes. The picture element is not available on Internet Explorer (note, this browser is now obsolete), or on older iOS devices. In these instances the visitor gets the rather over-large banner image.

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

With the expected demise of Flash as a vector graphics and animation platform for the web we have been looking at a few alternatives for some of our ‘fun’ projects. One of these was a simple 3D animator for Protein Data Base (.pdb) files. This widely used format provides XYZ coordinate data for molecules, and in our early Flash based models we translated these coordinates into something that sensibly fitted onto your display, and applied 3D transform matrices to allow you to manipulate the ‘molecule’, with each atom rendered as a simple disc.

Given the simplicity of the system, it seemed obvious to translate the code into Javascript. Indeed, we had the added advantage that we could render each ‘atom’ as a HTML primitive with CSS3 gradient shading to give it the appearance of 3 dimensions. As a result, there is no need for vector graphics or little .gif or .png images for each atom.

As you can see above, in our model of Buckminsterfullerene or C60, the process can be quite effective – simply roll your mouse across the model (or swipe your finger if you are on a mobile device) to rotate it. It has to be stated that this process is less effective for larger molecules. We could effectively animate and control molecules with up to 250 ‘atoms’ in Flash, the number is rather lower in HTML/Javascript, perhaps 100 atoms or points being a sensible practical limit, beyond which the model becomes unresponsive.

Older posts in this category have been removed, as the technology they relied on is no-longer available.

Our website for the Tissue and Cell Engineering Society is the second site we have built for a learned society (the first being the site for the European Society of Biomechanics, back in 2012). As with the ESB, this site features membership pages allowing new members to join, and existing members to see ‘premium content’ and to pay their subscriptions (through PayPal, the website does not store or process credit card details).

The site is quite distinctive; using banner images provided by TCES members, capitalising on the visual nature of the subject. The banners, in consequence, include some stunning images taken using modern microscopy and tissue visualisation techniques. The design is based on ‘mobile-first’ principles, using hide-and-reveal menus at all screen resolutions (home page screenshot at mobile size shown above left).

The ‘mobile-first’ design approach focuses on the issues facing mobile-only users, usually the majority of visitors. It stands in direct contrast to the ‘designer first’ option, followed by a fudge to convert the panoramic display into a small container as an after-thought!

The site is built in WordPress, allowing the board to add content as required. Membership management functions are available within the WordPress administration system, offering a one-stop-shop for managing the Society’s online presence. Features track new applications, memberships in arrears, and allow an administrator to update a member’s record as required. They also provide an overview of payments made through the website.

Most modern sites should be secured using HTTPS, this is going to become increasingly important as people become more protective of their online privacy.

Completion of the site coincided with our host (A2) offering free HTTPS certificates, so we were able to secure the site at no additional cost (over the standard hosting fee) to the Society. Many visitors (notably Firefox users) will now be warned explicitly by their browser if they attempt to enter details into a form on an unsecured page. Even if you are not using Firefox, however, you should be aware that anything you submit through an unsecured form might be intercepted by third parties.

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.

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.

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

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.

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.