scientific and technical website design projects news

George & Dragon, Lancaster

George and Dragon logo, remastered from the pub-sign original by Barry (Sept. 2020).

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

The George and Dragon Pub on the historic Quay in Lancaster. (Photo by Barry Nov. 2017)
the George and Dragon (center) on the historic quay in Lancaster.

To keep their patrons safe during the COVID-19 crisis; the George is offering at table service in their beer garden:

The George & Dragon pub, Lancaster

Viruses and viruses

Amongst the unwelcome side effects of the COVID-19 pandemic is an increase in phishing and hacking activity. Perhaps as a result of the reduced opportunities as a consequence of lock-down, smaller websites and companies are finding themeselves on the receiving end of quite carefully targetted phishing and hacking attacks.

To add to the problem, attacks are becoming lot more sophisticated; I was quite impressed by one effort asking me to login to my account at Gooql adwords, to re-activate my account.

Less dangerous, but no less annoying, is the upswing in unsolicited spam. Most of this is now also carefully profiled to match your potential personal interests or business requirements. It almost makes you nostalgic for an invitation to look after a few million dollars from a Liberian Prince…

(When is Elon going to get back to me with those bitcoins?)

Blockprint your mug with SVG!

We’ll start with a real webdesign conundrum: How do you build a site that is interesting, but does not overload my server, your data-connection, or your device’s processing capability. I guess you might also appreciate my not using up all of this months data allowance too!

You can start block printing your mug design with this traditional gardener’s plea: Grow, damn you!

Flower blockprint dev

Here I have built a large-ish graphic using the block printing concept; a concept I first encountered on the mugs my mother owned in the 60’s. The design is generated by repeating three simple graphical elements. When you click the ‘Grow, damn you!’ link these are assembled in a step-wise fashion to generate a pseudo random pattern. I believe there are 274 million different final designs possible (see; most permutations look OK, though some are more visually interesting than others.

Does it work? Well, if you have read this far, then yes! Putting this into numbers for comparison; the code required to generate the block-print comes in at under 4kB. The photograph shown below comes in at 44kB…

Photograph of a wildflower.

I think both images are quite pleasing; clearly they would serve very different roles in a website, and would be used in different circumstances. When a technique like this is appropriate, however, you can enhance your visitor’s experience, at minimal cost to yourself OR to your visitor (what is not to like?)*

If you like the design you have generated you can get it printed on a mug at the T shirt Studio (link below), but you will need to zoom in on the graphic (it is SVG, so you can zoom the page as much as you need without it pixelating – this will not work for the photograph;-), and grab a screenshot first – as the design will (almost certainly) be different the next time you visit!

tshirtstudio (other online printers are available).

* Custom art is ALWAYS expensive to create; the saving is in ensuring your server gets pages to more (up to 10× more) potential visitors (customers?) for the same infrastructure cost!

Mobile statistics (2)

In 2015, we noted that access to websites through mobile devices was a vital consideration in any new website design. Back then the headline figures from Ofcom were somewhat exaggerated, being based on kB of data transferred, but claimed 61% of web traffic was through mobile devices. This was not reflected in statistical reports based on visitor numbers to ‘normal’ websites, or in own observation of browsing statistics on client’s websites.

A personal glimpse of current browsing habits (July 2020), suggests that our client’s websites are now more closely in-line with the earlier Ofcom report:

Visitors to commercial websites now split approximately evenly between desktop and mobile devices, while visitors using a tablet come in at about 20% of the total.

Visitors to our academic websites, in contrast, have more conservative browsing habits: Most academics have access to a larger desktop device which they use for research, and the statistical split is closer to 80% on desktops, with most of the remaining visitors being on smaller mobile devices, and only about 1% accessing sites through tablets. For some academic sites there will also be issues with getting access to an internal site that is only available over a VPN, but that is not a factor in these statistics.

Despite the change in visitor profile, very few modern websites pay more than lip-service to design for mobile use. The design principle stops at cramming a large desktop site (that the boss sees in the design briefs) into a smaller format, with no consideration to the reduced processing power and bandwidth that these devices have access to, or increased cost a visitor may experience in downloading a graphics heavy website…

Wilkinson Charitable Foundation

Logo of the Wilkinson Charitable Foundation.

The Wilkinson Charitable Foundation was established under a Trust Deed made by the late Professor Sir Geoffrey Wilkinson in 1978. Sir Geoffrey Wilkinson needs no introduction to fellow chemists, being the 1973 Nobel Prize winner for his work developing Organometallic Chemistry, but also as the co-author of ‘Cotton and Wilkinson’ the standard undergraduate inorganic chemistry text for many years.

The Foundation has been acting behind the scenes for many years, offering studentships and prizes for chemiatry related activities. Recently the board decided that the Foundation would be better served by having an online presence.

We used a standard WordPress template (‘Twenty Seventeen’), minimising development costs for the Foundation whilst providing a fully featured website. Our role was in helping to prepare content for inclusion in the site, including images and video hosting.

UK Society for Biomaterials

The UK Society for Biomaterials (UKSB) is a non-profit organization working to develop novel biomaterials to tackle current clinical needs for medical devices, prosthetics and for regenerative medicine. Their membership interests include medical materials science, biosensors, biomechanics, biocompatibility, tissue engineering, and many other subjects.

The site is fully mobile compatible. It is built in WordPress, to permit the society to add and edit content, and includes a separate membership section, where members can add a brief profile and gallery of work to illustrate their scientific activity.

Screenshot of the UKSB website from a mobile device.

The WordPress installation has a custom Newsletter (see our previous post on society newsletters), and facility for uploading banner images. Banner images are automatically saved at multiple resolutions to optimise site performance – lowe resolution images being served initially, and for mobile devices, to ensure the site responds quickly to visitor requests. Higher resolution banners download after the page has been displayed, and quietly replace the low res. version, giving the appearance of the image snapping into focus. On mobile devices the iinitial low res. version is adequate for the smaller display area, and a high res. version is not downloaded to save the visitor’s bandwidth costs.

Membership payments, including a reminder system, are automated. Payments are made through PayPal.

On-line Safety System

Biohazard icon.

Developed with the School of Medicine at the University of Sheffield; the Online-Safety System provides a gateway to safety management for members of the School. It includes CoSHH, which has been adapted to make it more relevant for biological agents. There is also an on-line substance safety data catalogue, and the Standard Operating Procedures library. The Risk Assessments system (STAR), developed for the University, is linked from within OSS.

Recent itterations of the CoSHH system, upon which OSS is based, have included a great deal more focus on the evaluation of exposure to substances during a procedure, though each lcient is viewing this requirement in different ways, and have evolved different procedures for capturing this information as part of their assessment process.

Existing CoSHH assessments can be electronically signed by other users.
Existing CoSHH assessments can be electronically signed by other users.

The update also introduced provision for the establishment of standardised processes. In this users could opt to electronically sign an existing CoSHH assessment, rather than publishing a new assessment for each process they wished to undertake. This change ties in well with the operation of the School of Medicine, where most users only encounter potentially hazardous substances as part of a well documented procedure, such as fixing histology slides.

The ability to sign existing, approved, COSHH assessments greatly simplifies the management of CoSHH. The administrator has fewer procedures to evaluate, but can be more thorough in ensuring that a full and accurate process is described in them. The balance of the work of managing safety within the laboratory environment is that of checking that the user wanting to undertake the procedure is sufficiently trained and competent to do this. This task can generally best undertaken by the academic supervisor in the first instance, as she will have direct experience of working with the student involved.

The OSS system can only be accessed by members of the University of Sheffield:

On-line Safety System

Online Safety Audit

Developed with Health and Safety at the University of Sheffield, the online safety audit system provides a uniform evaluation procedure for safety across the University. The system is based on a large set of standard questionnaires targeted at different aspects of the management of health and safety issues within each constituent school and department within the University.

Editing a question in the audit questionnaire.

The online software allows auditors to create standard questionnaires concerning aspects of safety management, along with scores and guidance notes. The software is mobile compatible, permitting the auditor to report findings directly into the database. As the auditor works their scores are translated in real time into an overview of policy within the client department, that reports both good practice, and any failings, immediately to the lead auditor.

Problems encountered during the audit are highlighted.
Problems are highlighted in each question set.

Failings are automatically ranked by criticality, and indicate a timescale required for compliance. This ranges from ‘stop all activity immediately’, to resolve over the next 6 months. The lead auditor can, therefore, show the client exactly where any problems lie extremely quickly. In this way many issues can be resolved quickly and amicably.

The scores from all of the questionnaires are broght together in a live score-card.
A live score result; ‘incomplete’ indicates that the auditor has not finalised their work, committing it to the report.

The software goes further, providing a standard scoring and reporting system for the questionnaires plus templating for the balance of the report. This allows the audit team to set up an audit quickly, but also produce a final, published report with a minimum of fuss and inconvenience.

Access to the safety audit software is restricted to auditors within the University of Sheffield.

Risk Assessment

Developed with Health and Safety at the University of Sheffield, the STAR (Stop, Think, Act, Review) risk assessment (RA) system attempts to harmonise risk management across the University. It has four access levels providing fine-grain control over user capabilities within the system, from student users working under the supervision of an academic member of staff (or junior colleague working under their line-manager) in a single department through to super administrators with an overview of the activity at a University wide level.

Risk ratings - colour coded risk evaluation.
Evaluating the likelihood and severity of a hazard allows the software to associate a single value risk rating to any procedure.

The system allows for the creation of a new assessment by any user, who selects their perception of the risk involved. This perception is divided into to components likelyhood and severity. A low likelyhood, low severity incident being one of least concern. If the users perception is that the hazard is significant (high likelyhood and severity), then the user is prompted to add further control measures that would mitigate this. The hazards are then colour coded in the final assessment, which can be produced as a PDF document for printing and signing by co-workers.

Fictitious example of risk evaluation for sailing the Titanic.
The reference number indicates that this is the 4th revision of this fictitious risk assessment – being for the Titanic sailing, it should perhaps go through a few more iterations…

The assessment can be readily updated, a process which automatically archives the earlier version. The administrator (departmental safety officer OR super administrator at University level) can stop an assessment if they feel that it is incomplete, or inaccurately evaluated.

STAR is available to University of Sheffield employees here.

Stores Purchase Management (SPM)

The Stores Purchase Management (SPM) system allows the in-house management of inventory while helping ensure that users have the required safety and operational training. The system has been used for managing central (Grubbs) dry solvent supplies, gas cylinders, liquified gasses, and general stores items.

Screenshot showing solvent management system.
A screen shot showing solvent management system, allowing the administrator to update quantities of solvent available.

Users can see current stocks on any computer in the department, and make reservations (to the end of the day) to save wasted journeys to pickup points. Purchases are linked to user’s accounts, and permit users to specify grant codes against which purchased should be charged. Gas cylinder rental periods are recorded within the database, facilitating accounts management.

Collection of materials can only be recorded at the stores locations.

Screen shot of cylinder collection options.

The system manages gas cylinder inventories and locations while in use, through to returns. Users can update locations as neccessary, whilst the administrator can view inventories by location, and so assist portering or emergency services, if required.

The system was developed in collaboration with the University of Sheffield’s Department of Chemistry in2015. An updated version just manageing gas cylinders was developed for the Faculty of Science for introduction 2019.