scientific and technical website design projects news

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 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.

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

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 …

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.

Slide-shows have become commonplace on websites, and there are three reasons for this:

A slide show makes good use of our page, using the time dimension to tell our visitors about what we do lets us get over a lot of content easily without their having to scroll about the page, or navigate through the site. Well scripted slide-shows are, therefore really helpful tools…

Dependable Javascript libraries such as JQuery and Moo Tools, allows pretty much any web designer to script a simple show – and most browsers will display it!

Loss of Flash before the mobile browser, most designers would build a fancy website using Flash to create an immersive ‘experience’. Unfortunately, for a variety of reasons Flash is not supported on many mobile platforms, and as more people browse the web on their phone Flash has become less attractive. It is hard to script animation in Javascript to the same quality that you could achieve easily in Flash, so even well funded sites have opted for the slideshow!

What is the best technology to drive your slide show?

The question is, is a Javascript (or Flash) driven slideshow your best option? Whether you use Javascript or Flash you visitor needs either a third party plugin, or a third party Javascript library loaded into their browser before the slideshow will work.

Introducing CSS animations

The alternative, a CSS3 driven animation offers the advantage that the animation code is included in the page, no calls to anything external, so a faster page load. In principle this technology also offers better cross-platform implementation. Being part of the W3C specification for CSS3/HTML5, all browsers will someday be able to run this – the only remaining question is should you be using it now?

We’ve been very pleased to see how well CSS3 based animations are now implemented – our tests indicate that all current browsers support this technology [1].

We’ve found CSS3 animations to be quite easy to write – so we can focus on what we want to do, rather than how to do it (and keep costs down).

Being a core part of the HTML specification, it is quite easy to offer alternative content, if a visitor is using an older browser.

We’ve been working on the technology for a while, our first public implementation is now available on the Electronic and photonic molecular materials research group website:

Electronic and photonic molecular materials research group, University of Sheffield.

And the future?

CSS3 animation is good, and can take on the role of a simple slide-show without problem, as well as adding some nice interactive effects to the page. Clearly it is a technology that we will be developing with our clients over the coming years.

A more complete web animation platform, however, will rely on the integration of CSS3 with Javascript and SVG graphics [2]. These technologies are also in active development at CookandKaye.

[1] Current versions of Firefox, Opera and Internet Explorer support CSS3 animations as native, Chrome and Safari still currently require the proprietary -webkit- prefix.

[2] SVG or ‘scalable vector graphics’ are pictures based on mathematically defined curves. They need very little bandwidth – so they are quick to download, but they are also scalable – so you can expand a picture made up of them as much as you like without it breaking up. This is useful if you want to use the same graphic for a phone (perhaps 600px wide) and a wide screen monitor (2400px or more across).

At several times last week one of our hosting providers was hit by massive Distributed Denial of Service (DDoS) attacks, which were launched with the expressed aim of extorting money from the provider.

We are very grateful to our host, A2, for the professional way they handled this problem; information was available about the attack as soon as we realised there was a problem through our monitoring software. A2 have contracted for additional capacity to help protect their service in future, and reported the issue to the relevant legal authorities.

We in turn would like to reassure any customers who were effected that, given the nature and extent of the attack, the disruption was kept to a minimum by A2’s actions.

We have nearly a decade’s experience using A2 as a hosting provider, and have been very pleased with the service we have received over this time. We look forward to continuing to work with them in future.

You can help! DDoS attacks, while they are managed by a single group or individual, originate from many thousands of personal computers that have been compromised by downloading malicious software. Take care when downloading any software off the internet, NEVER open suspicious attachments to emails!

WordPress 4 is now available, this offers better integration with social media, and improved embedding of video and other content into your posts and pages. There are no known issues with the update from version 3 to version 4 for CookandKaye customers, so as long as you back-up before you start, you can use the auto-update feature to enjoy the improved performance! (Contact us if you need any assistance).

IMPORTANT NOTICE: If your WordPress version is before 3, you may require a couple of tweeks to your database settings to keep plugins running, please contact us before updating!

First frost: We have had a good end to the Summer, but it is now creeping into Autumn, and clear night skies are letting the temperature fall. Still I was a little surprised to see frost when walking our dog Cas this morning!