scientific and technical website design projects news

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.

Developed with the School of Medicine at the University of Sheffield; the Online-Safety System provides a gateway to safety management for members of the School. It includes CoSHH, which has been adapted to make it more relevant for biological agents. There is also an on-line substance safety data catalogue, and the Standard Operating Procedures library. The Risk Assessments system (STAR), developed for the University, is linked from within OSS.

Recent itterations of the CoSHH system, upon which OSS is based, have included a great deal more focus on the evaluation of exposure to substances during a procedure, though each lcient is viewing this requirement in different ways, and have evolved different procedures for capturing this information as part of their assessment process.

The update also introduced provision for the establishment of standardised processes. In this users could opt to electronically sign an existing CoSHH assessment, rather than publishing a new assessment for each process they wished to undertake. This change ties in well with the operation of the School of Medicine, where most users only encounter potentially hazardous substances as part of a well documented procedure, such as fixing histology slides.

The ability to sign existing, approved, COSHH assessments greatly simplifies the management of CoSHH. The administrator has fewer procedures to evaluate, but can be more thorough in ensuring that a full and accurate process is described in them. The balance of the work of managing safety within the laboratory environment is that of checking that the user wanting to undertake the procedure is sufficiently trained and competent to do this. This task can generally best undertaken by the academic supervisor in the first instance, as she will have direct experience of working with the student involved.

The OSS system can only be accessed by members of the University of Sheffield:

On-line Safety System

Developed with Health and Safety at the University of Sheffield, the online safety audit system provides a uniform evaluation procedure for safety across the University. The system is based on a large set of standard questionnaires targeted at different aspects of the management of health and safety issues within each constituent school and department within the University.

The online software allows auditors to create standard questionnaires concerning aspects of safety management, along with scores and guidance notes. The software is mobile compatible, permitting the auditor to report findings directly into the database. As the auditor works their scores are translated in real time into an overview of policy within the client department, that reports both good practice, and any failings, immediately to the lead auditor.

Failings are automatically ranked by criticality, and indicate a timescale required for compliance. This ranges from ‘stop all activity immediately’, to resolve over the next 6 months. The lead auditor can, therefore, show the client exactly where any problems lie extremely quickly. In this way many issues can be resolved quickly and amicably.

The software goes further, providing a standard scoring and reporting system for the questionnaires plus templating for the balance of the report. This allows the audit team to set up an audit quickly, but also produce a final, published report with a minimum of fuss and inconvenience.

Access to the safety audit software is restricted to auditors within the University of Sheffield.

Developed with Health and Safety at the University of Sheffield, the STAR (Stop, Think, Act, Review) risk assessment (RA) system attempts to harmonise risk management across the University. It has four access levels providing fine-grain control over user capabilities within the system, from student users working under the supervision of an academic member of staff (or junior colleague working under their line-manager) in a single department through to super administrators with an overview of the activity at a University wide level.

The system allows for the creation of a new assessment by any user, who selects their perception of the risk involved. This perception is divided into to components likelyhood and severity. A low likelyhood, low severity incident being one of least concern. If the users perception is that the hazard is significant (high likelyhood and severity), then the user is prompted to add further control measures that would mitigate this. The hazards are then colour coded in the final assessment, which can be produced as a PDF document for printing and signing by co-workers.

The assessment can be readily updated, a process which automatically archives the earlier version. The administrator (departmental safety officer OR super administrator at University level) can stop an assessment if they feel that it is incomplete, or inaccurately evaluated.

STAR is available to University of Sheffield employees here.

The Stores Purchase Management (SPM) system allows the in-house management of inventory while helping ensure that users have the required safety and operational training. The system has been used for managing central (Grubbs) dry solvent supplies, gas cylinders, liquified gasses, and general stores items.

Users can see current stocks on any computer in the department, and make reservations (to the end of the day) to save wasted journeys to pickup points. Purchases are linked to user’s accounts, and permit users to specify grant codes against which purchased should be charged. Gas cylinder rental periods are recorded within the database, facilitating accounts management.

Collection of materials can only be recorded at the stores locations.

The system manages gas cylinder inventories and locations while in use, through to returns. Users can update locations as neccessary, whilst the administrator can view inventories by location, and so assist portering or emergency services, if required.

The system was developed in collaboration with the University of Sheffield’s Department of Chemistry in2015. An updated version just manageing gas cylinders was developed for the Faculty of Science for introduction 2019.

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.

Part of our remit for designing the Spine repair training website (SPINNER) was to develop a new logo and icon for them. Their initial ideas had focussed on a web spinner in medical greens – which was quite attractive, and reflected the name of the programme, but not its role…

We therefore looked at introducing a more’spinal’ quality to the logo design: Our initial design sheet investigated using ‘s’ shaped spine as the initial ‘S’ in spinner, printing the spinner name with each letter on a separate vertebra, and placing the initial ‘S’ on a single vertebra.

Through discussion with the client, and many itterations, we came to the final design, in which the spine is used as the body of the ‘i’, with the dot at the head.

Above: the final version of the SPINNER logo.

The logo was built as a vector format (SVG) image, and is used on all pages of the site. The logo is also used in the site icon, and the apple-touch-icon. The best format for the latter is a subject of some debate amongst web professionals (see Apple touch icon: The Good, the Bad and the Ugly from Favicon’s blog), we create a 120x120px square icon as a standard for our website clients.

The vector format allows us to scale the image without distortion, permitting us to easily create versions for high resolution print work.

The new SPINNER-EID website is the online presence of a European training network focussing on Numerical and Experimental Repair strategies for the human spine. Training focusses on developing new materials and techniques, and brings together the Universities of Bologna and Sheffield, the leading medical manufacturers from around Europe, and the National Centre for Spinal Disorders in Hungary. The SPINNER group is currently (April 2018) recruiting suitable students for their doctoral training programme; for more details visit:

SPINNER-EID website

The site is built in WordPress, to enable the management team to add new content and develop an online community for students working in a number of locations accross Europe. The site itself has a modern appearance, and most design houses achieve this by adding packages such as ‘Bootstrap’ to the core WordPress package. This generally results in a site that has a very large number of download dependencies – the site cannot be displayed until a large number of libraries have been downloaded. As you might expect from the name ‘library’, each of these downloads adds a lot of cuntionality to the site, unfortunately the designer is usually only employing a few lines of code from each…

Lean design improving the visitor’s browsing experience

In contrast, our own approach is one of ‘lean design’, functionality is supported by the minimum amount of code possible, and this is deployed in as few download packages as we can manage (two style sheets, one for site styling, the other providing the Open Sans font used for text on the site). Ths obective is to improve the browsing experience for visitors, by reducing page load times, which is particularly an issue over mobile networks (especially if you are paying by the MB for your data connection!).

The philosophy is carried over to the custom home page slide show. This downloads a low resolution image in the first instance, so the page can be rendered quickly. Once the page has been loaded, code checks the display width – if you are on a mobile device, nothing more will happen, so you will not stack up bills downloading big photos that your phone cannot display anyway…

If you are on a wide screen desktop, however, the site will offer a high resolution image to replace the initial quick download. If you look carefully, you will see the banner image snap into focus as this happens. The ‘focus snap’ effect is subtle, but quite pleasing in itself (take a look)…

Code standards are to W3C HTML5 and CSS3/SVG.

Most societies make use of Newsletters to keep in contact with membership; to let them know what their society is up to, and advertise up-coming conferences or other events. The mechanics behind getting this information out are varied, but for small and medium-sized groups the Emailed Newsletter is the most cost-efficient. The mechanics of actually getting the Newsletter out, however, are very varied, with a number of excellent online services.

Here, we will look at an entry level option, ALO Newsletter. This is a plugin available for WordPress users that allows you to compose your Newsletter using the tools you are familiar with. I have used ALO Newsletter for a number of years now for Lancashire MCS, so suggesting it as an option to clients was quite natural, and I felt pretty confident that the plugin was both up-to-the-job, and well maintained!

ALO handles the basic mechanics of an Emailed Newsletter very well, offering HTML and text versions, and throttling the mailing process to help prevent your mail server getting shut down as a spam source. This latter process allows you to use the Newsletter on a standard commercial hosting package without too many problems. Finally, ALO offers a report, giving you feedback on how successful your mailshot was, with estimates as to how many people actually read the Newsletter.

Clearly it is quite important to make the Newsletter both attractive, and easily readable! Normally, you would also want the Newsletter to reflect your society’s branding, and this will require the development of a custom template for the Newsletter. Generally a Newsletter works better with a simplified layout (as email clients are not as clever as web browsers overly complicated styling is punished), so development costs can be kept down.

Here we will just look at a coupe of new and updated designs for Newsletters. The main recent change is to design them so that they display well on a mobile device. Here the HTML based newsletter offers massive advantages over say an emailed PDF version of your print or Word Processed Newsletter. Font sizes stay at a legible size, and in a mobile-friendly design the content will re-flow automatically to work with the narrow screen!

The DARE newsletter (top right, shown in mobile view, but links to a full-screen image) is a standard Newsletter design (as is our MCS Newsletter). Visitors to your website can be invited to subscribe to the Newsletter, and the copy in the Newsletter offers offers the usual ‘view in browser’ and unsubscribe links, plus customisation, referring to the subscriber by name. This example was a test put together by Jean at DARE, and is very clean, attractive (and easily read), with short articles offering links for more information on the main website.

We have also recently updated the European Society of Biomaterials (ESB) Newsletter (right). This serves the membership of the society, and takes its subscribers directly from the membership database (as a member of the public you cannot subscribe to it). As a consequence we are able to do some clever tricks in the back end.

This Newsletter has sender groups determined by membership type (Academic member, student, industrial member), and by status (whether or not the member has paid the current subscription), and by mailing preference (the member can ask only to receive essential society news concerning their membership). This allows the Society to remind members when their subscriptions are due (without having to badger members who have already paid), as well as do the usual communication jobs required of a Newsletter…

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