Our latest site is for UK Semiconductors 2012, an annual conference on all aspects of semiconductor research.

The brief for UK Semiconductors was for a site that would be flexible, but easy to manage. Both requirements are met by the WordPress Content Management System (CMS).

Ease of use: There are a lot of very powerful CMS systems available, but most have a steep learning curve. This is a serious problem for a conference site, where you are only actively editing the site for part of each year – you don’t want to spend a lot of time trying to remember how things work! WordPress’ simple visual editing system permits live WYSIWYG editing of existing pages, the excellent news management system is totally intuitive (simply stacking new news items on top of older ones!); finally, the simple visual menu builder (drag and drop new pages to where you want them in the menu) is child’s play…

Above right: UK Semiconductors website on a full width display, showing sponsors’ logos along the foot of the page (click for full size image).

Speed and flexibility: For an annual conference there is a need to be able to switch much of the furniture from one year to the next – adapting the 2011 templates permitted us to offer the flexibility to upload a new banner (or offer a random banner from a selection, your choice!). Whilst adapting a standard template offered less scope for innovative design, it also really speeds up the development process, enabling us to get from kick-off meeting to completed site in a week…

Device flexibility: It is valuable for a conference site to be flexible – you want delegates to be able to check out what is going on during the conference, be able to check the program on their smart phones during the event. UK Semiconductors re-organises its page structure to permit visitors to view the site without scaling or lateral scrolling on devices with displays that are only 400px wide.

Right: UK Semiconductors website on a 400px wide display. The banner has re-sized to fit the new width, and the calendar and news items now appear below the main article, so all elements of the page can be read easily without scrolling (or squinting!)

Additional functionality: To complete the site, we also added a couple of custom plugins. These allow the conference organiser to add a gallery of sponsor’s logos below each page of the site, and to add a simple calendar of events, so delegates have a quick reminder of what is coming up on each page of the site. (WordPress is easy to build for, if what you need is not available from a massive public library of free and commercial plugins, so there is no need to compromise!).

Visit: UK Semiconductors 2012 for more details about the conference, or to see the site in action.

The SMARTdiving website is live – after some months of hiding it away behind a ‘register interest’ form, all of the paperwork has been done, and funds have been secured to start the first stage of their project: A feasibility study into sinking a decommissioned Royal Navy Frigate in the Sound of Mull. This is a really exciting project, partially because it raises a lot of issues, which I hope are covered pretty well on the project website.

The site itself is 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 am particularly interested in how the site will be colonised, and how this process influences the deterioration of the structure – there should be a good hundred years of study and interest in this project!

All the best to Annabel and the rest of the SMARTdiving team!

If you have an opinion about artificial reefs in general, would like more information about this project, would like to offer support or have concerns about the program, you can register these online at:

SMARTdiving.co.uk – a new artificial reef for the West Coast of Scotland

The Chemistry Map of Scotland was built for the Royal Society of Chemistry as part of their International Year of Chemistry celebration (2011). It was presented at the Science and the Parliament meeting in Edinburgh on Wednesday 9 November 2011 (our previous blog post).

The purpose of the site is to encourage school children to explore the chemistry by looking at how it impacts their local area. I had thought it would be mostly a historic project, but the children’s submissions show that it is anything but – they see chemistry as very much a part of a living and working landscape; the local galvanising works, offshore wind-farms and whiskey distilleries are at least as important as the work of Joseph Black (1728 – 1799)!

The site design is very simple, you won’t get lost anywhere here! We are particularly proud of the logo – even if it does conflate a couple of stereotypes – the thistle (for Scotland) and the benzene ring (for chemistry). The logo was designed to inject a bit of fun and movement into the site, along with the defiantly off-square page corners! In discussion with the client we selected the ‘Short Stack’ font by James Grieshaber, one of the free Google Web Fonts. The font is quirky, friendly without being MS Comic Sans, which has been rather over-exposed.

At the start of the project it was evident that Google were bringing in new charging policies for the use of mapping, so we chose to look at the Open Source alternative. The mapping program we used is OpenLayers, while the base mapping is provided by OpenStreetMap. OpenLayers can use any base mapping (for example Google, Bing or the Ordnance Survey) or satellite/aerial photography layers (Google and Bing are the most commonly seen examples on the web). This choice provides a great deal of flexibility to the project, as mapping sources can be changed as need or expediency dictate.

The public site provides an interactive map with clickable icons leading to students essays (stored in PDF format, to simplify administration). It also has a smart search facility, automatically checking date ranges for articles if a number is input (again my preconception that most of the content would be historic – but it is nice to see what chemistry was going on in Scotland in the year 1850). When search results are displayed they automatically update the thumbnail map, so it centres on the relevant place as your cursor hovers over each result.

We re-visit the Cookies debate with this site. Cookies enable us to create bookmarks to previously viewed pages for you, making it easy to jump between different essays on the same subject (or whatever you like!). Here we looked at an explicit permission system, as required by European Law – you have to click before we can create a cookie. This is the most satisfactory (and legally correct) way of dealing with this problem, which we have previously addressed. Mixed messages are coming from government though, so despite the fact that there is a lot of good in this law for the e-proles, it seems increasingly unlikely that the UK will ever enforce it.

Finally, the site is driven by a custom administration interface, permitting the RSC to add and edit points on the map. Hopefully this will ensure that the site can be kept going and expanding for a long time to come…

Visit the Chemistry Map of Scotland

It has been a busy week here, with a visit to the Royal Society of Chemistry’s (RSC) ‘Science and the Parliament’ meeting in Edinburgh. Here our latest project, the ‘Chemistry Map of Scotland‘ was launched by Prof. David Phillips (OBE), President of the Royal Society of Chemistry.

The project allows local schoolchildren to put chemistry on the map, and was created for the Scottish branch of the RSC as part of the celebration of the International Year of Chemistry (2011). The site is also, in part, a memorial to an old friend of mine, Dr Nigel Botting of St Andrews University.

The launch meeting itself, while sponsored by the RSC, is intended to raise the profile of science more generally in parliament, and there were a number of august speakers, including Scottish Parliamentarians at the event.

The short of the story from the meeting is that the Scottish higher education system performs very strongly in pure research metrics, but this does not benefit the economy – at least out-with the very important higher education sector! My feeling was that the meeting lacked the weight that a leading industrialist or entrepreneur might have provided on the main panel, but was none-the-less quite thought provoking.

Above right: Photo taken at the Chemistry and the Parliament meeting immediately after the main panel discussion, with a screen-shot from the Chemistry Map of Scotland in the background.

We’re currently working on a website for the Sound of Mull Artificial Reef Trust – a new project to establish an artificial reef in the Sound of Mull. The aim of this multi-million pound project is to sink a decommissioned Royal Naval destroyer in the Sound to act as a tourist attraction for the whole region.

As well as providing an economic boost to an area, artificial reefs have a pretty good environmental record, so we’re pleased to be involved! The main site is being held back whilst negotiations proceed, but you can register your interest in the project now through the link below:

SMARTdiving, the Sound of Mull Artificial Reef Project

Social media are the in thing – within a certain sector of the population. In planning your social media campaign it is important to work out what your market is using, as this might be quite different from the social-networking tools that you employ. For example, we run a twitter feed for one of our academic clients, that has a high take up amongst both existing and (more importantly) potential students, but no significant penetration in the staff cadre. It is potentially very useful, but not too easy to sell (see Nanofolio‘s twitter feed).

A big question for commercial sites is does having an active social media presence boost your site presence on the search engines? – The jury is still out on this. It certainly does not offer incremental improvement, but Google at least is aware of social media activity associated with your site, and does count links from Tweets to your pages – whether or not it gives them much credence is another matter! The latest upgrade to Twitter, however, allows you to add a photo to your Tweet, and makes this an attractive shop window for products in its own right (see Mobility Nationwide‘s Twitter feed)…

A big use of Twitter for many years has been the conference circuit; creating a Twitter #tag for your conference allows delegates to provide feedback in real time, and contributes to both academic debate and networking amongst delegates. At least it should, as Chad Orzel comments on his blog (the post that spurred me into writing this!):

Social Media Are Not Evenly Distributed

We’ve just started work on a multi-lingual site, where the entire site is duplicated in English and French (rather than just a summary in the ‘non-target’ language). This has a basic requirement to offer pages in either language with a seemless transition if required, and one of the simplest ways for doing this is to ask the visitor what language they want to read the site in, and then remember their answer. It is the remembering part where we run into trouble; because the visitor is only identified by their IP address, which can change, we ask to save a token on the visitor’s machine called a cookie. When they ask for a page from our site they also present this cookie, which we can use this to make a connection between them and and data we have stored about them – in this case what language they want their page in!

Informer : c’est obligatoire ! [CNIL]

In May we posted The cookie crumbles, so we thought it worth while re-visiting the question in advance of our new contract to see what has changed. Most of Europe has yet to implement the directive, but the French CNIL has moved to post clear requirements for website owners (OK they look to be clear with my understanding of French and the use of Google Translate!). In contrast the UK’s position is quite muddy; in attempting to protect the online advertising industry the government seems to have left ICO in a cleft stick, with the requirement to implement without changing anything.

ICO have had a bit of a go on their own website, as you can see from the banner image below (captured from their site August 25 2011):

ICO's banner (August 2011) showing Cookie notification script

The ICO’s website informs you that they’ve already stored one cookie on your browser, and they’d like to store more. This is done in a text message over the banner of their site. Once you’ve said that you will accept cookies from them they use this information to hide the message from you on other pages on their site (until you delete the cookie).

This process is rather clumsy for a commercial website. Lets face it, I want to let you read the site in your language, so slapping a legal notice accross the head of the site is massive case of over-kill. In essence the legal warning informs you that I’m out to steal all of your private information and sell your soul to the devil. For the moment, where we are obliged to use cookies, our procedure will remain unchanged, with a notice at the point of language selection (in this instance) – possibly with a link to extended description of what we use the cookie for and how to set your browser so that you cannot read the site in the language of your choice (as per CNIL).

References

A useful roundup of current positions across Europe is provided by Norton Rose, which links to the CNIL guidance:

Norton Rose.

CNIL website at selection point for type of organisation requiring legal advice.

Information Commissioner’s Office website.

Flash is probably the most maligned bit of software on the web, most recently being excluded from Apple’s mobile platforms (iPod/iPhone and iPad), as a security risk (though as it also competes directly with ‘apps’, Apple gains a commercial advantage in banning it from the platform). As it is no-longer able to reach all browsers, we have been forced to review our own association with Flash, an association that goes back to version 3 in 1999…

First, it is important to understand why we got involved with developing Flash applications in the first place. Back in ’99 it was just becoming popular to have a phone modem: Capable of transfer rates of up to 56kB/s, these devices restricted the desirable size of a web page to a total of 20kB – and that included your images! If you could get under this magic number you could more-or-less guarantee that your visitor would get the home page of your site within a second of making the request. This placed a premium on tiny, grainy graphics with the life compressed out of them.

Anything that allowed you to fill the screen with colour and movement was simply a killer app., and that killer app. was Macromedia’s Flash. Working in a vector graphic format to keep the download file size small, simple tweening algorithms allowed you to move graphics about within the Flash player window, and respond to mouse commands. As a quick comparison, a recent site banner we’ve designed has a total file size of 4.57kB in Flash, compared to 24.9kB as a compressed bitmap graphic. We can beat the 1999 total web-page download size rule with ease! In addition to a fast download, however, Flash offered the opportunity to stream your download – this means that you could put something simple up quickly, and download bigger files in the background – and so the loading screen was born…

From 1999 to the present Flash has been a stable platform for images, animation and interactives – very much more so than the HTML standard (or lack of it) offered by different browser incarnations! This is important as the development of interactive media is undoubtedly one of the most expensive parts of your website, as long as a browser offered Flash we could get content out to it and expect it to behave in a reproducible manner. It is only with ‘Web 2′ that Javascript has offered the same level of dependability and some of the interactive capability. Prior to 2006, adding any significant amount of Javascript to a website to allow core functionality simply increased the cost of developing it, as it had to be tested in every browser that your visitor might use. Commonly Javascript development multiplied the cost of a ‘simple’ site by a factor of 2 or 3; Flash was cheap by comparison!

As a killer app. Flash is used everywhere on the web, and familiarity has bred contempt: Far from being a sign of something exciting to come, the loading screen is the kiss of death for many websites whose designers have not realised that the rotating whirly wotsit and the message ‘please wait…’ is not what most visitors want to see! Plus the banner (and skyscraper and pop-up) advertisement. They pay for the content you are looking at, but you don’t want to see them, we browse with NoScript turned on to stop these things downloading stuff we don’t want onto our computer.

But has Flash evolved over this time? – Is it still just a way of making clean graphics with tiny download sizes? Behind the scenes Flash has evolved, slowly. Its scripting engine has undergone three significant overhauls, each of which has imposed significant learning barriers to existing developers. At the end of this process, however, it does not have anything better than the most primitive 3D support. It has lost its capability as a document reader (FlashPaper). Due to its long term stability as a platform, solid set of video compression codecs and progressive download capability, however, it has taken centre stage as the app of choice for launching video.

How much of a future does Flash have as a web platform? HTML5 offers many of the abilities that were Flash’s killer apps: Vector graphics and progressive video download, at the moment these are supplementary to the Flash object, but are likely to compete more aggressively as HTML5 becomes an accepted standard (it is worth noting that there is no HTML5 standard yet, though there is agreement on what a lot of this standard should look like when it is completed!).

A lot will depend on Adobe’s commitment to keeping Flash going. Here the commercial analysis is pretty straight-forward: The Flash player that works in people’s browsers is paid for by Flash developers buying the application that creates Flash content, so if developers start looking at alternatives in significant numbers, then the writing is on the wall… Is Adobe doing enough to keep us on side, is Flash still the killer app?

There is some good news: A recent hook-up between Google and Adobe carried out very extensive security tests on Flash as it is deployed in the field. This has resulted in some important security updates for Flash Player over the last week or two (so if you get the notice to upgrade your version of Flash player – do so!). Will this be as secure as the HTML5 enabled browser? – A visible commitment to testing for vulnerabilities is a good sign for the moment, but might the Flash development application make a move to authoring HTML5 directly? – That would be a very interesting development, and one that looks to be under consideration, judging by Adobe’s Wallaby and Google’s Swiffy projects…

Something new – you can now add pictures to your Twitter items, I immediately looked at this with one of our clients (Mobility Nationwide), to put thumbnails of some of the wheelchair accessible vehicles onto the feed – I’m not sure a picture is worth 1000 words, but it certainly helps describe the product alongside the 140 characters you have as standard!

Mobility Nationwide’s twitter feed

A number of years ago we created a simple website for the Polymers and Biomaterials Chemistry Laboratories research group, and as part of this we used Flash to show a chain of atoms that could be viewed from a restricted range of angles using our ‘pop-up’ 3D effect – much like the bathymetry of the Stirling Castle. As part of our recent update of this site we thought we’d go one better, and create a full 3D molecule of a real polymer chain…

Above: ‘Frogspawn’ or electron cloud molecular model, an early version of the 3D molecule we built for PBCL. Elements are not distinguished in this model (C, N and O are all represented by the same grey blob), and hydrogens have not been included, making the model rather smaller and easier to manipulate (see link at the foot of this story for the final version).

The modelling is done entirely in Flash, so unlike the existing Java-based molecular viewers such as Jmol and RasMol, there is no need to download an application before the molecule appears! For the site we used a molecule consisting of over 300 atoms, which seems to be a sensible upper limit, as older machines are beginning to gasp a bit at rotating the thing in real time! Clearly in creating this we’re using smoke-and-mirrors to keep the project manageable within the confines of the Flash environment. So, while the positions of the atoms are mapped in 3D, they are represented by 2D graphics. This results in a small amount of flicker as the molecule rotates, and atoms jump in front of each other along the z (out of plane) axis (the frogspawn model above was an early attempt we made to escape this effect, unfortunately plotting semi-transparent atoms takes more processing power, so we hit the molecular size limit sooner with this approach). In creating this molecular viewer as a one-off, we have unashamedly used artistic license to foreshorten the image to give it a more dramatic depth of field.

In the final version the XYZ information for the molecule is imported into Flash in a simple XML file, so whist the process is still restricted to molecules of small to medium size, we look forward to taking it further and seeing how well it can model a wider range of structures…

The final 3D structure can be found on the home page of the Polymer and Biomaterials Chemistry Laboratories website:

Polymer and Biomaterials Chemistry Laboratories

Is it a world first? – No, unfortunately not, see 3D crystal viewer !