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 George and Dragon is one of the oldest pubs in Lancaster – it has been serving beer for longer than many coutries have existed! It was a great pleasure to work with Mike and Anne to develop this new website for them – allowing visitors to check what is available without crowding around the bar.

The new website is driven by a custom administration section that allows Mike to add new beers to his cellar, and put them on the virtual bar at the click of a button. The one-page site is built around Google’s ‘Rich Results’ platform, providing meta-data to help publicise opening times, current selection of beers, and events (when these become possible).

With the relaxation in COVID-19 rules, table service is no longer offered.

The George & Dragon pub, Lancaster

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.

Our work involved upgrading a set of templates developed a few years ago in Joomla 1.6, and changing the slideshow on the home page from being Flash driven to a Javascript feature that is compatible with most modern mobile browsers.

Our client added new banners and content, along with a number of Spotify links so visitors can listen in to snippets of Britten’s work as teasers for the series of concerts to be held in Sheffield in 2013.

Above right: Icon design for the new site – a ‘singing note’ in Sheffield blue on a white ground.

Rugged and extremely portable – how do you represent the world on a USB stick? The option finally chosen was based on that top left, and is used as an icon in the loader and system tray.

More about Portable GIS (download your free copy!):

Portable GIS v3 The Geographical Information System on a USB stick

Above – three from a set of twenty icons indicating types of dive site for Lochaline Dive Centre. The image shows the initial sketches, used to check concept art with the client, and the final icon. The final icons reflect the site colour scheme, and the the wreck dive icon is based closely upon the Dive Centre logo to reinforce brand image.

New dive site pages being prepared to extend the current single page description of sites in the Sound of Mull (linked below) – which will become the diving home page with map and links to all sites. The plan is that visitors will be able to click icons to visit all sites of that type, simplifying the job of planning a sequence of dives.

The client will be able to select the appropriate icons from the WordPress control panel, and add a map position for the dive site, making it very easy to add and update sites.

Diving the Sound of Mull / Lochaline Dive Centre

SMARTdiving conducted a feasibility study into sinking a decommissioned Royal Navy Frigate in the Sound of Mull. This was a really exciting project, partially because it raised a lot of issues, wqith a range of different stake-holders, which were covered on the project website.

The site itself was a variation on the current WordPress standard template – ‘twentyeleven’, which features a lot of really nice tricks straight out of the box. It was chosen to allow the client to use all of the features of WordPress to take on board comments and post progress reports. This will be an important part of the project as keeping divers and the local community informed and on side is vital to the project’s success.

Above right: We designed the icon (shown above right) and the banner for SMARTdiving site.

One of the interesting challenges has been to keep the twentyeleven flexible templates working through the design changes. The new templates are all HTML5, and make use of this to offer offer is mobile support, so the site automatically ‘appifies’ to display on iPods, Androids and RIM machines (other devices are available – the system relies on the device screen width, rather than being specific to any operating system). Being an old hand it is easy to forget and insert template images with fixed widths (previously best practice), w/o catching them in percentages in the stylesheet, that will allow them to shrink in proportion to the rest of the site when it is displayed on a small screen…

Anyway, the hope and expectation is that the new artificial reef will contribute an interesting and exciting new site for divers, and so bring additional employment to this part of the West Coast of Scotland. Having previously studied some of the existing sites in the Sound, I was particularly interested in how the site would have been colonised by marine life, and how this process influences the deterioration of the structure.

If successful, the project would have increased tourism to the area, as well as providing  a fascinating modern comparison to the existing wreck sites in the Sound.

bbCareers is a new business that aims to help people facing an uncertain career future. The new company offers 1:1 tailored support to help clients re-evaluate their life prospects, and get to grips with the nitty-gritty required to ensure they get the job and life prospects that we all want!

The project was built in WordPress, and employed the latest features available in the 3.1 templates. Many of the client’s own photographs are used in the site banners, and these can be switched or added to by the client. This allows the website to match the range of images shown on the client’s business cards (printed by Moo). The graphic bb logo (also developed by us) is superimposed on the main banner graphic, so the client does not need to worry about adding this to a new banner before it is uploaded.

There is a clear need for this type of careers help in these uncertain times, and we wish Bridget and bbCareers every successin the future!

bbCareers – careers advice for grown ups

We’ve just released the new Nanofolio feature on protein transduction (we spoke about some of the design issues in our last post). We developed four interactive Flash items for this feature. Two look at processes in the cell, and two follow development of the smart polymer agent that gets the protein based drug into the cell.
The interactive components of the Nanofolio features are highlighted by being inset in the screen – we are taking our audience behind the web page to view what is going on, at a microscopic, nanoscopic or molecular scale. In this instance we chose to go behind the web page through a view reminiscent of that through an optical microscope. This puts the action clearly in context.
To get the feel of an optical microscope we used some low contrast sketches of a cell and its internal structures, and overlaid these with a granular texture, created using Flash’s background tiling capabilities, to keep the file size small.
We retained the optical microscope view for following the activity of smart polymers, watching them change configuration with changing pH (clearly this is a conceit, but in context it is an effective means of visually indicating a degree of magnification). The chemical structure of the polymer, however, was a simple map, with appropriate portions lighting up when the visitor’s mouse tracks over them, along with the portion of the chemical name related to those portions.
There is a reduced scale image of the ‘cell under the microscope’ above right, along with the icon we developed for apoptin – the smart drug that is delivered by the smart polymer system.

Targeted drug release on the Nanofolio website

Web icons (‘favicons’) offer a simple graphical reminder for bookmarks, and have become very popular since they were introduced with IE 5. Most recently FireFox has introduced support for animated icons in .gif and .png formats. Currently these are only visible to people running FireFox, so we’ve taken a poke under the bonnet to check code that promises to offer a static icon as an alternative for visitors who don’t use this browser.

Our full review is available through the link below:

Testing animated favicons