cookandkaye

scientific and technical website design projects news

CSS3 animated slideshows

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

Service outages

Evil pixie

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

WordPress logo

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

First frost

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!

Redesign of Lochaline Dive Centre’s website

Lochaline Dive Centre screenshot

Working from the existing WordPress templates to keep control over costs, we have updated the Lochaline Dive Centre website to match their current printed identity.

The re-designed site features a home page slide-show, with visual guide to the Dive Centre’s booking system, to allow visitors to plan their diving or snorkelling holiday on the West Coast of Scotland. These, and pre-existing features, such as the interactive map of dive sites in the Sound of Mull, have also been converted to a flexible layout, permitting the site to be more easily used on mobile devices with smaller screens.

Lochaline Dive Centre

COSHH – Managing Safety

COSHH 2014 screenshot

Management of safety protocols in a modern chemistry lab is fraught with problems. The safety officers have to ensure that work flows are kept as simple as possible, whilst ensuring that workers have:

  • Completed any requisite training before undertaking a procedure – and that this training is up-to-date
  • Evaluated any problems that might be attendant on a procedure they are about to undertake
  • Set in place robust measures for when something does go wrong

This is complicated in the Universtiy environment due to the wide range of skill levels that must all be safely managed, from undergraduate student to Post Doctoral level researcher.

Some years ago we developed our first COSHH (‘Control of Substances Hazardous to Health’ – a process for the safe management of chemicals within the workplace) management system in conjunction with the Department of Chemistry at the University of Sheffield. This has subsequently been adopted by two other departments within the university.

More recently we have extended the original system to manage ‘Special Permissions’ within the same COSHH framework. These include application to work out of hours, or with certain categories of chemicals, and types of apparatus. This extension simplifies the safety interface for workers, so it is always clear how they need to manage their activities to help ensure safe working practices are maintained within the department.

A further extension opens a common space for the management of ‘Standard Operating Practices’ within the department. These demonstrate ‘best practice for a range of processes where hazard has been identified, from lifting heavy objects, transport and storage of chemicals, through to the safe use and maintenance of vacuum pumps. The common editorial framework allows all members of the department to contribute to the development of these best practices.

The original COSHH system was built in 2009, and has survived 5 years in the wild, building up a database of safety data for over 12,000 chemicals. It was updated in 2012 to accommodate changes in chemical hazard classifications adopted under European law.

Previously – original post on the COSHH system – note the screenshot at the top of this post shows an updated site design to more-closely match the latest University styling, and also incorporates elements of flexible design to cope with smaller mobile device screen sizes.

SEM Calibration Standards

SEM Calibration Standards – is a new website for Eastern Analytical, a long established company developing software and standards for analytical electron microscopy. Their products have a broad range of applications including forensic work.

Screenshot of the Calibration Standards home page

Above: Screenshot of the Calibration Standards home page, shown at about 50% scale. The home page copy links directly to the four primary sales areas for the company.

SEM Calibration Standards icon in the form of an SEM stud Products available from calibrationstandards.net include innovative sample holders and software, that can allow you relocate a trace of contamination – such as a gunshot residue – on a large sample quickly. Motorised stages that permit you to compare wear marks from two cartridge cases, to establish in a visually convincing manner that they were fired from the same weapon.
Above left: The icon design from the Calibration Standards website is in the form of an SEM stud.

Calibration Standards on a small screen We built the website in WordPress, which makes it as easy as possible for the site owner to add or edit product information and other details. The site uses a bespoke template which provides pages in ‘HTML5’, and uses the latest style sheet code (CSS3) elements to permit page resizing. This allows visitors to review the site on a large screen attached to a PC, or on the move on their smart-phone.
Right: A screenshot of the Calibration Standards website as it would appear on a small screen, with the menu tab displaying the menu.

The smart phone (small screen) design has a simple flip-out menu and shopping cart, to make site navigation as simple and intuitive as possible.

The WordPress template permits the addition of extended meta-content to pages, to assist with Search Engine Optimisation (SEO).

Mobility Nationwide affiliate Scheme

This is a test page for the Mobility Nationwide affiliates scheme, which is designed to improve the service companies provide to disabled people and their helpers in the UK.

Click on the link or image below to see how it works:

Mobility Nationwide affiliate scheme

Mobility Nationwide – leading the industry!

Our association with Mobility Nationwide goes back to 2008, when we took on the site after the tragic death of their first web designer. Since that time Mobility Nationwide have achieved and held a position as a leading supplier of high quality used wheelchair accessible vehicles in the UK.

This is an industry that has a diffuse customer base that is not very mobile, so reliant on online sales. A strong website is essential to success…

Over the years we have worked to keep their site fresh and accessible, to differentiate our offering, whilst building a strong brand presence by retaining the colour flow, logos and other design elements. An important function of the site is to demonstrate ‘firm’ – as much as is possible in the shifting online sands. This is achieved by demonstrating the fact that Mobility Nationwide is an industry leader, with solid market presence and good historic form. At the same time the site advertises the fact that the business is family owned and managed, and they will go the extra mile to ensure that the vehicle you receive ticks all your boxes.

Recently we completed the latest upgrade of the website – you can read a post on the last major upgrade here. The latest change moves the site to the new HTML5 ‘standard’, that is more compatible with mobile browsers, and adds a range of new features.

These new features are, however, a natural development from the original custom database managed site that we inherited in 2008. As a designer this provides the same feeling of continuity that we are trying to convey to Mobility Nationwide’s customers, we feel our own historic links through the code. Each iteration has added features and new capabilities whilst retaining an administration system that provides familiarity for the client, and puts all of the sales-relevant website data immediately to hand. Whilst many companies can work with an ‘off the peg’ content management system, Mobility Nationwide’s success helps to show that a bespoke service can pay dividends, and their attention to detail is to be commended in any enterprise.

Screenshot of the new Mobility Nationwide website home page.

Above: The new home page for Mobility Nationwide, showing one of the new active effects, where a vehicle description is revealed on mouse over, the panel moves upwards so nothing is lost below the visitor’s current view.

The changes that HTML5 offer web design includes greatly improved reliability for Javascript, coupled with much more powerful styling in CSS3 (the HTML isn’t actually much changed!). As a consequence the new site can offer improved page displays, using Javascript and CSS3 to bring more content ‘above the fold’, so it is easy for a visitor to get all of the specifications for a vehicle in one place – without scrolling…

With the expansion in our client’s business, the new site can now advertises vehicles by manufacturer, as the stock levels justify this fine-grained approach. To handle this requirement we have added display pages where the general specifications of different wheelchair adapted vehicles can be discussed and compared. In this way the customer gets more background information that can help them make the best choice for their circumstances.

In the end, building a good business is all about ensuring that your customer gets the right product for their circumstances…

You can visit the new Mobility Nationwide website through the link below:

Wheelchair accessible vehicles from Mobility Nationwide

We regret that due to the bespoke nature of our work for Mobility Nationwide, we are unable to offer competing web services within the industry.

INSIGNEO’s new mobile friendly website

INSIGNEO website screenshot showing mobile and full width versions
INSIGNEO website design, showing mobile (left) and full width versions

INSIGNEO’s website features an annotated slideshow, to permit them to bring all of their strands of activity ‘above the fold’ on the home page – whether you are viewing it on a mobile phone, or wide-screen device! The slideshow is fully editable within WordPress, so it can be kept fresh by adding photos for news items alongside their on-going strands (such as their very successful launch in May 2013).

The site also has a custom diary, again fully editable within WordPress, that allows INSIGNEO to post seminar details of interest to its internal academic audience.