cookandkaye

scientific and technical website design projects news

SPINNER logo design

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.

The final SPINNER logo
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.

Spine repair training website (spinner)

Spinner home page screenshot

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.

Member Newsletters

Screenshot of the DARE Newsletter at Mobile screen dimensions.
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.

Mobile version of the ESB Newsletter.

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…

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

3D modelling of C60 in HTML/Javascript


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.

High Polymer Research Group update

Screenshot of the high polymer website on a wide screen device.

The High Polymer Research Group (HPRG) has been running polymer science and technology conferences annually since 1960. Over this time polymer science has changed dramatically, from Flory’s Nobel address to the group in 1972 on polymer conformation, to functional materials and nanoparticles in this year’s conference.

We had the pleasure of re-designing the High Polymer Research Group website in 2007, and have subsequently managed the site for the trustees. A lot has happened in the WWW since 2007, with the development of CSS3 and HTML5, and the increasing stability of Javascript as a client side scripting language. The adoption of these web technologies has been driven by the move from desktop to mobile browser platforms, necessitating the adoption of ‘adaptive website design’ – web designs that allow the same content to be displayed across a wide range of display types and sizes (see, for example Websites for smart phones take centre stage (2013)).

The High Polymer conference site has a simple advertising role to members, it needs to be robust, and good for a few years service! We therefore looked at organic styling changes to the existing site, rather than following the latest design trends (which will likely look quite passe this time next year) while working in mobile-device compatibility.

Navigation designed with the user in mind

From the array of site enhancements now available, we selecting simple features that would assist the visitor in getting about on the page, and navigating the site as a whole. The fixed top banner provides context sensitive links to the top of the page and the home page, and opens the full screen width menu for mobile devices, if it detects a narrow screen device.

Flexibility – adapting the site to each year’s theme

The new site banner is designed to be replaced to match each year’s theme, while permitting old program listings to retain this identity. Banners based on the conference location were added to old conferences on the site (which did not have individual banners). This will allow the site to change a little each year, and help avoid it becoming ‘stale’.

Crisper graphics

The final change was to re-master logos and line art in SVG (Scalable Vector Graphics) format. This has been around for a few years now, and all current browsers can now support it (we offer PNG’s as fall backs if you are still running IE7 or 8!). The SVG format, being a vector file, rather than a pixelating bitmap, adds crispness to each graphic. Its use ensures that visitors with newer ‘retina’ or similar high resolution displays see cleanly defined logos with no blur or distortion. SVG has been a long time coming, but looks set now to displace Adobe’s ‘Flash’ platform where high resolution coupled to a small file size is required.

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

Mobile statistics

In the headlines today (6th August 2015) is the Ofcom report on the Communications Industry in the UK (Their data summary is here). This shows that 61% of people in the UK used a mobile device to access the internet in the last year.

Going beyond this statistic to a meaningful measure of how important mobile compatibility might be for your web site is a little more tricky. Global statistics (from Statcounter) indicate that data access through mobile devices (including tablets) is now at around 35% of all traffic.

This data does not tie in well with other statistics – including probably your own server statistics. A ‘typical’ website, such as that run by W3C Schools indicates that 5.4% of all visits are from mobile devices (W3C schools). This figure shows a slow but steady year-on-year increase of about 1%…

So, what is going on? Explanations range from the mundane (people watch a lot of video on their phones) to the apocalyptic (independent websites are dead!). The lesson, however, is clear. While desk or lap-tops are still the most used devices on the internet, nobody can afford to ignore mobile devices …

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!

noahgene

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.