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.

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/m² solar power input – wheras the UK more commonly only manages a few hundred W/m² 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 (Sheffield Solar Farm) has 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 will be visited by Nick Clegg, Deputy Prime Minister, on the 20th August 2010.

Sheffield Solar Farm

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.

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 focussed 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!

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!

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.

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. Find out what is going on in nanotechnology in Yorkshire through the link below:

Nanofactory website

A single image from a modern camera (5+ mega-pixels) has a file-size equivalent to 50-100 text pages. Not unsurprisingly, therefore, the use of large images can slow your web-pages down to a crawl. Thankfully you don’t need large images to decorate a web page, your photos will be so much larger even than the largest modern displays, that putting them up full-size will normally just be a waste of time…

Right: ShrinkPic automatically reduces image sizes – the default setting has reduced the 3.6MB original to 85kB, which is easily handled by WordPress, where I’ve processed to a 150px square thumbnail. Click image for 800×600 full uploaded file-size.

The problem is then, how do you get the file size down? For a long time we have recommended IrfanView as a free (PC based) image processor, for cropping and re-sizing images for use online. While pretty straightforward, this package does need a little practice to use it effectively, so is not ideal for many people managing CMS systems, for whom the occasional image can be a bit of a nightmare…

Shrink Pic is ideal for anyone who finds image management on the web a nightmare!

Over Christmas we became aware of Shrink Pic, a new system that shrinks photos automatically when you upload them (via LifeHacker). So, is this solution going to work for you?

• First up, the software only runs on PC’s. We are not aware at present of an equivalent program for Macs or Linux.
• The basic premise of the software is that it runs in the background, and automatically re-sizes and compresses any image you want to upload to a website (Flickr, your blog, CMS etc.) – or email – before it is sent.
• You can set your default image sizes or set the amount of compression to fit a file size range (as I did here).
• Your original image is not changed.

What the software does not do is edit your images. The most recent versions of WordPress will allow you to do a bit more fine tuning after the upload – cropping and creating thumbnails. If you need to process your pictures, then you should look at doing this BEFORE uploading, in which case you might as well resize ready for upload, so you may not need Shrink Pic.

If you are want large images on your website (larger than 1000px in any dimension), then you should look at more advanced processing packages to optimise them.

Conclusion: this software is really easy to use, and I was pleasantly surprised at how well it works with WordPress here!

Resource links:

OnTheGoSoft’s Shrink Pic

For free hands-on image processing:

IrfanView

We’ve been working with Mobility Nationwide for a couple of years now, taking on the day to day maintenance following the untimely death of their web developer. Over the last year we’ve been brought the site up to the latest HTML standards – important in ensuring accessibility (not to be neglected for older web users, which is the case with many of Mobility Nationwide’s clients), but most recently we looked at updating the banner to improve its visibility to search engines.

Well, looks like the work has paid off, with the site now hitting the #1 place on Google, so:

See Mobility Nationwide, for your wheelchair accessible vehicle!

Over the summer we have been busy developing a system for managing COSHH information for the Department of Chemistry at the University of Sheffield. This has been a particularly interesting and complex project. The requirement was to permit students and research workers at the department to prepare and submit proposals for working with chemicals, as required under UK/EC COSHH legislation.

To help ensure the system was easy to use, it was coded to allow access for the administrative staff from very early in the developmental process. As a result the client was able to provide feedback into the design and implementation at every important stage:

The COSHH form interface the information going into a COSHH form is exceptionally complex, covering the nature of the procedure, the chemicals involved, hazards and proposed mitigation. To be intelligible, however, the user needs to see the entire form at a glance. To do this a master form was built, that displayed key data, and this linked to total of nearly 20 sub-forms where the user could change parameters whilst being able to view existing selections in the master form.

Above: Screenshot of the COSHH form, with a sub-form inset showing radio-buttons allowing the user to select the type of containment required for their procedure.

The chemical search interface building a simple and useful chemical search interface is a problem of itself. Users must be able to find the chemicals they are proposing to use, and this must be linked with the relevant health and safety information so that they can prepare an informed safety assessment. We developed a system based on chemical names and CAS numbers (the latter to help prevent duplication of chemicals on the database). Chemical searches can be performed by CAS number, name, name fragments or names starting with. In addition, at the request of the client we extended this to show a ‘most likely’ selection of chemicals at the top of any search results. The latter was important as there are many chemicals starting sodium – and if you are searching for sodium itself you don’t want to browse through all of them to find it!

The user interface was secured by IP address and login, as it is neccesary to identify users uniquely. Several levels of user were included, from clerical staff (with look up privileges to permit them to check that any chemical ordered had been subject to a COSHH assessment) to administrators, who had final say as to whether or not the assessment was acceptable on behalf of the department.

Completed COSHH assessments for each user were listed in their home section of the site. Additionally, each user could see assessments prepared by members of their group, or search for any assessment on the system by chemical or assessment number. This greatly simplifies the process of preparing a COSHH form, as existing forms can be imported to the user’s work-space and used as the basis for their own work. A simple security feature enables users to hide chemical information if required.

Safe working in an emergency it is important to be able to get access to COSHH information, so a brief output providing the salient safety information is available publically (protected by IP address) so rescue staff within the department can access the required information without having to login to the system.

Integration with existing information chemical and user data were imported from the existing system, and cleaned before insertion into the new web-based interface. Cleaning included checks for valid CAS registry numbers and valid user email accounts.

The administration interface is easy to forget given all of the rest going on – for a system of this complexity, however, the admin interface must be competent. The one we developed is capable of managing users, chemicals and COSHH information, as well as keeping tabs on how old the information is, and whether or not it is due for review!

With so much going on in the system, it was a great relief to find that users had few problems getting to grips with it. “The new users have had no complaints and the users who were familiar with the old system have had nothing but good things to say about the new one.” (Elaine Frary, COSHH administrator, University of Sheffield Department of Chemistry).

We’re just in the process of launching a new website for Mobility Vehicles Ireland; this cross Irish Sea venture brings together one of the leaders in supplying wheelchair accessible vehicles in the UK with an established Irish partner with many years experience customising commercial vehicles. The partnership will make a lot more wheelchair accessible vehicles available to people in Ireland – at competitive prices. To give an idea of the size of the venture, Mobility Vehicles Ireland currently offers a selection of nearly 30 wheelchair accessible vehicles.

It has been quite an interesting experience developing a site for the Irish market. We have found a couple of technical hurdles to overcome, one of which has been a very slow update of the Irish domain name servers. This makes for problems with domain management, as any maintenance or movement of the domain may cause many weeks of disruption to web services. In fairness, it is not clear whether or not the problem here is Ireland wide, or just restricted to Eircom. If the latter, the issues of near monopoly suppliers not being terribly agile is common accross the globe!

Anyway, we hope we are now past our teething problems, and wish JJ and Dave all the very best in this new venture, please visit their new site at:
Mobility Vehicles Ireland – quality used wheelchair accessible vehicles!

The new Polymer Centre research map has been built on an existing staff CMS that stores keywords and a précis of information about staff research interests. To create the map the keywords were first grouped into superordinate terms – for example the keywords ‘Rheology’ and ‘Optical properties’ falls under the generic class of ‘Polymer Analysis’ (or just Analysis).

To make the system as flexible as possible, the link between keywords and superordinate terms is done through a ‘plug board’ programming interface. In this, each keyword is assigned to a number of generic categories through selecting check boxes – easy!

The results are stored in a MySQL database, and this is used to power the research map itself. On first sight the map provides a coarse list of the superordinate terms – polymer analysis, characterisation and so on. On selecting one of these terms the list expands to show the relevant keywords. The keywords can in turn be expanded to display the names of research staff engaged in the work of interest.

The system therefore offers a simple visitor interface that can be quickly and intuitively navigated to find the information of interest. It offers a great advantage over an empty search box on one vital respect – it always offers the visitor a positive result! Not all sites have Google-like resources, and using a controlled language of keywords in this way allows us to guide a visitor to what we have, rather than their getting lots of failed searches.

While the research map offers visitors a neat tool for finding the information they want, it is also an engine to help ensure that search engines can tie our keywords to content on the Polymer Centre website. To do this, the meta content on each of the staff pages contains the same keywords they are associated with in the database.

In addition, however, the meta content of the research map itself is served dynamically. The page title, description and keywords are updated to reflect the level of the map that is being examined. Thus if you have opened a keyword, that keyword and the associated staff appear in the appropriate meta content sections of the research map page. As these sections are important to search engines in ascertaining the important content of a page, this design helps to ensure that the information the Polymer Centre carries about polymer research and near market activity is readily available on the world wide web.

- If you are interested in Polymer Research, why not try it out!

The Polymer Centre Research Map