scientific and technical website design projects news

CookandKaye News

West coast diving on film

One of our web clients, Lochaline Dive Centre, have been filming for a new TV program to air next year, covering diving off the west coast of Scotland. If you dive, it is a great place, I think they are focussing on the wrecks in the Sound of Mull, but there are also some cracking scenic dives – one within 50m of the accommodation!

Lochaline Dive Centre

New CBTE website

CBTE new design 2010.

We’ve just finished the first major changes to the CBTE website since it was launched in 2005. The old site was still a pretty good, but it was apparent that the Centre needed the ability to update and add their own copy to cut overheads.

To do this we’ve built a new site in WordPress. WordPress is probably the simplest-to-use content management system available, so it should enable staff to develop the site, keeping it up to date with its members’ research, and post useful information about seminars and so on.

While WordPress is an excellent tool for getting material online, it is not a full CMS. The CBTE, however, has a very extensive research portfolio, which needed to be moved into the new site. To cope with this requirement, we developed a simple plugin to produce sensible multi-layered menu structure for the site. The menu structure can cope with sites of a couple of hundred pages, in an easily navigable fashion, providing ample scope for the CBTE’s research.

The Centre for Biotechnology and Tissue Engineering at the University of Sheffield.

Google churn

Google churn - rapid movements in search rank.

Business must be quiet, because everyone is working on optimising their websites. We can see this because positions in search results are jumping by as much as five places per day with the same search term. This is occurring in quiet back-water areas, where a shift of one place in a month is unusual. This effervescent behaviour in search positions I’ve (re)christened* ‘Google churn’, after the dominant search engine in the market. This implies a lot of people running around adding new links to their sites rather than actively selling stuff (or they are paying a fortune to run SEO every day, I don’t think)…

SEO – is a long tall greasy pole”

It is a little frustrating, because a lot of the links being created are ‘spam’ – irrelevant comments added to blog posts in the hope that the URL will be included. This means that anyone running a blog (like this one) is getting deluged by faux comments. Sorry, I’m sure your business is deserving, but if the comment isn’t relevant to the post, it won’t get published…

“For small companies, Google churn is a bad sign, as it indicates of serious concern at the proprietor level.”

*I think this is a new compound adjective (or something) – at least according to Google…

Sheffield’s Gay Icons Project

Screenshot of the Gay Icons website.
Earlier this week (27th September 2010) we launched a site for Sheffield’s ‘Gay Icons Project’. The project attempts to define what a gay icon is, and invites visitors to nominate their own icons. Part of the project is a season of ‘gay-themed’ events, including lectures, music, parties. As the project says:

“Pioneering, tragic, martyr figures for homosexuality, gay icons who aren’t even gay…What constitutes a gay icon?”

This was an enjoyable project, perhaps I should say it still is an enjoyable project, as the client has really brought it to life, with thought-provoking (and occasionally humerous) icons and an active twitter feed!

The project brought us together with our old design partners at Eleven. For our part, we worked Eleven’s designs from paper into a Joomla! site, which we extended with a custom management facility for visitors to add their own gay icons. Aditionally, each page has the live Twitter API, which brings a frisson of excitement to the site, and encourages visitors to engage with the project.

For the home page we built a Flash display of photos of famous gay icons from the project, with an alternative static montage of photos for iPod owners. Less exciting technical stuff, the scrolling calendar to the right of all pages permits people to look through the entire events list, and is built using the MooTools library, which is pre-installed in Joomla. Joomla enables project staff to update content throughout the site.

Pity the project only ran to the end of December 2010, so if you have a gay icon, it is too late to register them!

Sheffield Solar Farm

The Sheffield Solar Farm aims to provide representative data about photovoltaic power output from test installations in the UK. It will help provide objective data on how efficient domestic Photovoltaic power might be in the UK, and so help to form policy, and provide a sensible body of knowledge for members of the general public interested in ‘doing their bit’ for the environment.

Sheffield solar farm detail from graph page showing data panel.

The website project is in three stages – to make public the results from the solar panels in real time, which we have now achieved. This is to be followed by displaying data from test installations using new photovoltaic materials, to allow comparison in real performance under a range of conditions. This is important because photovoltaic panels are rated at 1000 W/m2 solar power input – wheras the UK more commonly only manages a few hundred W/m2 sunlight. Unfortunately photovoltaic panel response is not linnear, so less sunlight input can mean a lot less electrical power output, as a consequence the array you’ve planned may not provide the power you are expecting! In the third stage people from around the UK will be invited to submit their own photovoltaic data, so providing a real measure of how panels perform ‘in the wild’ e.g. after being outside for a few years… This is the kind of data that many householders will need before making a commitment to the expense of an installation themeselves.

The site had a small graphic display showing what solar power is currently available, and what the electrical power output from the panels is on every page. The display is in Flash, but driven by an XML datafile generated on demand from the database. The alternative for people who do not have Flash is a static bar chart graphic that reflects the situation at the time the page was loaded.

In addition, there are graphs of solar power available and electrical power output, which currently display data for the last 24hrs. We evaluated two graphical packages for the project:

Flot is a nice Javascript based plotting system, that takes data in a list and spits out a pretty graph to order. It is not able to offer x and y axis labels, however…

jpGraph is a fully featured graphical package running in PHP. It takes a while to get it as pretty as Flot, but it is very flexible, and includes x and y axis labels. The ability to label axes neatly and correctly was a deciding factor in this instance, as the site is being developed by the Department of Physics and Astronomy, they wanted their graphs to be as clear as possible!

As general notes for the two packages, jpGraph places considerably more load on the server than Flot, as the graph is prepared as a graphic file for insertion into the page. This also means that the actual data is hidden from the visitor’s web-client.

The website is built in WordPress, where we adapted the latest Twenty_Ten templates to create our first production HTML5 website. We are still evaluating the new standard (which will not be fully released for many years – so we are not a long way behind the times!), and I think it fair to say that its reception is mixed. In many ways it is a regression, permitting the sloppy code that XHTML was intended to eradicate. At present the new graphical capabilities are not reliably realised in user’s browsers, however, so the trumpeted advantages of the new standard (which seem to centre around ‘Flash bashing’) are yet to emerge.

The Sheffield Solar Farm was visited by Nick Clegg, then Deputy Prime Minister, on the 20th August 2010.

New website for Mobility Nationwide

It has been a pleasure for us to work with Mobility Nationwide, a leading supplier of wheelchair accessible vehicles in the UK, over the last few years. We inherited an excellent website following the untimely death of their original web developer, and have until now simply worked to optimise this existing site.

At the end of last year, however, it became clear that the market was becoming more competitive. In response to the downturn in the economy, just about every garage in the UK was looking at wheelchair accessible vehicles as a higher margin product, and there are now a lot of cheap websites pushing metal. As a consequence, we felt that we needed to look at developing the website to put some clear water between the competition and ourselves.

Site optimisation helps ensure your site is close to the top of the search list on Google, which is vital to ensure people find your website. Having already placed the site close to the top of the search rankings, however, we now had the opportunity to look hard at how our site could improve customer service. What we wanted was a simple-to-use site that would help our customers find the vehicle they were looking for.

Improved customer experience

Increased choice of vehicles on the home page: Mobility Nationwide has one of the largest stocks of wheelchair accessible vehicles in the UK – and we need to be able to demonstrate this to visitors on our home page. Given that that space on a home page is limited, we used a Flash animation that runs through the entire stock in groups of four vehicles. Flash gives us a lot of control over how quickly the page displays, as it can load images in the background, but not all devices can show Flash, so we also have a static view for visitors using these devices.

Improved vehicle display: The new vehicle display offers more information about each vehicle – including power and fuel consumption (important in cost-cutting times). In addition, we can now show more, and larger, photographs of each wheelchair accessible vehicle. We used the excellent Lightbox JavaScript application for photo libraries to place more pictures into the page. The application is fairly intuitive to use, and offers redundancy if JavaScript is not available on the visitor’s browser.

Online sales assistant: We have always offered a competent search engine (a feature which distinguishes us from simple out-of-the-box websites), but many visitors will not use search engines. Our online sales assistant is there to help in these cases. By looking at the current choice of vehicle, the assistant can suggest a range of similar vehicles that might also be of interest.

Online sales assistant showing similar vehicles.

Previously you viewed these vehicles.

Back-history retention: This shows on each page the last few vehicles the customer looked at. It is a really simple concept, commonly used on larger sales sites, and allows the customer to quickly compare vehicles they might be interested in (without having to set up those dreadful comparison tables!), and keep these vehicles in sight while they look at the help, finance or contact page if they want to enquire further.

Improved search: The search allows visitors to find vehicles based on price, fuel, mileage, transmission, size and access options. Refinements include intelligent prices – if there are no vehicles available for £3000, the site doesn’t offer prices less than £3000 as a search option; so reducing time wasted searching for things that do not exist! As with the back-history, the search parameters are now retained, so the visitor can easily browse vehicles, and adjust search parameters in-flight.

Back-end improvements

If the front end sells to customers, it is the back end that assists your sales force, and helps the company itself be more focused and efficient. What this reports to you can help you understand what your customer wants! In many ways this is at least as important as the glossy sales pages…

Popular vehicles: What are people looking at? – Now! This simple feature just keeps a tag on how often each vehicle has been viewed – so you can quickly and easily spot a problem with your stock.

Improved data entry: With more data carried on each vehicle it was important to speed up data entry, so we have a fast model look-up which allows all of the basic information about the vehicle to be entered from a single selection.

Easier photo upload: Introducing a web-based photo-upload to replace the old FTP system. This automatically re-sizes and optimises images for the site, so no more mis-sized images! It also suggests standard image captions – so the site is well optimised for the search engine!

Online archive: A facility continuously monitoring your sales history to see how well (or badly) different vehicles have sold in the past. Are red cars more popular this year? – You should know – you sell them!

Technical specifications

We have worked hard to build a device independent site to current HTML standards. We don’t know what is around the corner (will the iPad with its under-powered browser wipe out the laptop?), but we’ve future proofed as well as we can. As long as our visitors use a browser that understands current standards, they can use our site!

Badges displaying that the site has valid HTML

There is room for improvement, there always is, but hopefully the new site will offer solid performance for Mobility Nationwide, both the business and its customers!

Visit the Mobility Nationwide website if you need a wheelchair accessible vehicle – or if you would just like to check out our latest commercial site!

Why your server software is important (and why it needs to be open source)

If you are in the market for a website, you’re priority concern is to address your intended audience (and maybe identifying who this audience is before even that stage). You probably wont think too much about the nuts and bolts of the software your site will be using – this will be the responsibility of your web-designer, after all. Think again.

Successful websites are organic creations – your audience is going to change, and you are going to want to change with them. The last thing you need is to have your website integrated with a server technology that is no longer supported. Can’t happen? – Think again (again).

On April 15th 2010 Microsoft pulled Live support from its original X-boxes – not a very old piece of kit. If you’ve got one, it is now obsolete (at least for online multi-player stuff).

Your problem with any piece of proprietary software is that you can never own all of it, and when there is not enough money to be made out of selling new copies…

Live support ends, Slashdot documents the last online game of Halo 2

New Nanofactory website

The Nanofactory site presented a number of interesting problems. The new site was to replace an existing website that had a lot of content that was both difficult to navigate, and had very little to engage a visitor. The new program of work for Nanofactory, however, required a site that would engage visitors, and encourage them to contact the team.

We started by preparing a consultation document that covered how the site might be improved: the type of content that might be included that would help engage visitors, and ideas as to how we could re-work the existing material so that it was accessible. Following the consultation, Eleven design took the lead in visualising both the new propotional material, then the new look site, just leaving us to ‘make it so’.

Meanwhile we transferred the existing content from the worst ever CMS (eventually we had to cut and paste the stuff out by hand, as the client had not been given backend access to their own website!) into a MySQL database. This was then compressed into a single page that employs an interactive filter system. This allows visitors to drill down through the available resources and expertise in nanotechnology in the Yorkshire region to find the technique or expert of interest. At each stage a contact form is available to permit the visitor to send a message to Nanofactory identifying the area of interest.

Nanofactory website screen shot.

The visual Eleven came up with for the site was (as ever) very clean and attractive, but offered a number of technical challenges, for instance requiring a rolling gallery of images to advertise the region’s nanotechnology expertise. Developing a content management system to manage the site, the interactive gallery and the interactive filter page was an interesting project in its own right. While WordPress offers increasing challenge on the CMS front, we used Joomla! as the core for this system due to its proven competency with larger, complex websites.

As a bit of a departure for us, the client required ‘pop up’ Javascript based contact forms on all of the core pages in the site. We developed these based on the available Mootools Javascript library packaged with Joomla!, so there was no additional download overhead for visitors using the site.

Currently the gallery is still populated by older work by Nanofactory, but can handle 50+ project images and links to project writeups in blog form within the Joomla! CMS, offering essentially limitless room for expansion.

New site for Eleven Design

Eleven Design are a company that we have worked with on a few projects in recent years – Eleven produce really clean designs, that tend to work well in a web setting. It was therefore a great pleasure to be asked to work with them bringing their design for their own website to life within the Joomla! content management system.

Joomla! is not (in my opinion) the easiest CMS system to use, but it does offer very solid performance and a lot of features that permit you to really build a distinctive site that doesn’t look like a ‘website in a box’. For Eleven we used Joomla’s templating flexibility to develop a home page with background images selected from file at random. We wanted a simple system that Eleven could update easily, the solution was an automatic file picker, so all Eleven needed to do was to upload the new cover photo into a designated folder for front page images to be added to the selection – job done!

A real challenge for us were the project and archive pages. Joomla is driven by menus, but the design here called for using a gallery of images as the menu. This is very visually striking, and easy to navigate – simply picking out pictures that look interesting or fun to find out more about the project that generated them. Getting it to work without great unsightly text menus cluttering the page up, however, required a little lateral thinking. The nice side of the solution we came up with was that it worked within the core Joomla! installation – so keeping the site easy to manage.

Finally, working with Eleven, we developed a manual that covered the functional parts of Joomla! that they needed to add and edit content on the site. The aim here was to codify processes so that even if they were not working with the content management system every day, they could quickly pick up the information they needed to carry out a change or other update.

The site went live in December 2009, and has been extended by Eleven from a core of 6 project and archive pages to cover 36 projects now – reflecting some of the skills of this dynamic and enterprising design company!

Email phishing – Gmail not the only target!

Recently I got the following email from alertsATmy_domain.

Dear user of the cookandkaye.co.uk mailing service!

We are informing you that because of the security upgrade of the mailing service your mailbox (my_email_address) settings were changed. In order to apply the new set of settings click on the following link:

http://cookandkaye.co.uk/owa/service_directory/settings.php?email=info@cookandkaye.co.uk&from=cookandkaye.co.uk&fromname=info

Best regards, cookandkaye.co.uk Technical Support.

I knew that this email could not be genuine, but it was very believable.

This phishing attack works on a number of assumptions that people make about email messages and URL’s, assumptions that you must challenge to stop other people assuming your online identity. These are:

  • That the From email address is genuine. In fact it is very easy to set the ‘from’ email address in a message, so email messages are in practice annonymous (you cannot be sure where any message comes from).
  • That a link goes where it says it does the only way you can check this is by looking at the raw code of the message (or web page). On doing this it was apparent that the link was not quite what it appeared – the correct domain was there, but configured as a sub-domain of a site somewhere in the co.kr TLD. Where ‘technical support’ would presumably have taken my email access details.

Configuring the link in this way makes it quite difficult to check by eye in the raw form, and I guess most people don’t do that! – We’re not a big (or particularly prestigious) company, so I don’t think we are high on anyone’s hit list, if we are getting these phishing attacks, the implication is that it is rife…

We hope you don’t get caught out – if you do you should speak to your technical support as soon as you can, perhaps in person…