scientific and technical website design projects news

Having built a small number of custom sites for learned societies, the Society for Natural Sciences was our first ‘off the peg’ society website. It had been requested following our work for the UKSB, a society with which it shares a number of active officers, so shares a common design, though the WordPress block editing system has allowed the two sites to develop some individuallity.

Again the site is based on the popular WordPress content managment system, which allows the society to add and change content both for public consumption, and within its private ‘members only’ area. A custom suite of plugins allows the society to manage its membership, who can pay their subscriptions online through the site, and are sent automated reminders to do so each year. The membership database integrates with the ALO Newsletter plugin, allowing the society to send newsletters to its membership, keeping them informed about events within the Society.

WordPress Security for members data

Generally WordPress sites are subject to a lot of unwanted attention from hackers, and so we include a number of features to protect member’s data. These include hiding the login page, and blocking attacker’s IP addresses after a couple of failed login attempts. More recently we have added 2-part authentication as an option for all administrator logins. The expectation is that this will provide some security even if an administrator’s password is compromised, though we strongly recommend that societys continue to enforce strong passwords for all administrators!

Online fraud has hit pandemic proportions over the last two years. The increased volume of attacks is annoying, but profiling techniques are making these attacks a lot harder to spot, and societies are being targetted…

Learned societies face some unique challenges in combating fraud:

• The executive officers for the society typically carry out their duties in their spare time, and consequently communications between them rely on email …

• Background details for the executive officers are easily obtained through the society website, their academic website pages and from any social media presence they might have.
• The details of any conferences or meetings being run by the society are a matter of public record (you are advertising them) – so a short list of likely financial transactions can be compiled.

A recent attack started with a personal email purporting to be from the chairman to the treasurer – apparently harmless, it asked how the treasurer’s family was in passing. This reference encouraged the treasurer to believe that the email address was genuine, while in fact the personal information mentioned in passing had been scraped from social media. Subsequent emails asked about how the society’s audit was proceeding, and finally asked the treasurer to pay the audit team using the bank details provided.

The sum involved was not astronomical, but a nice fee for an hour’s work profiling the executive committee, and a couple of email messages. In this instance the plan was foiled because the treasurer cc’d the chairman’s genuine email account into the last email confirming that he had made the payment. Thankfully the chairman was also working over the weekend, spotted the email, and got in contact in time to get the transaction reversed.

Why did the attack come so close to working?

The attacker used a reasonable email address in the ‘from’ email header. It looked like a genuine University address, but did not actually exist. This email would not be used in any communications with the fraudster as the ‘reply to’ address (which you will often not bother to look at, but it is what your email client will communicate with) was something entirely different. Note some email clients will pick up on this and flag a possible phishing attack.

The attacker inserted some personal details into the email from Social Media that encouraged acceptance of the email at face value. Typically executive officers only meet up a couple of times a year, so the attacker does not need to know the target’s personal life in depth (do you remember what you said to the chairman after the conference in September 2020 anyway;-).

The attacker worked on a weekend. Society executives will typically work weekends, as they are trying to fit Society work around their day job; but this is likely to delay any response from your bank, and increase the chance of the attacker getting away with the cash…

Is it only the treasurer that should be alert?

Generally a fraudster is after money, so the treasurer is the most attractive target within the Society. The Society’s membership details can also be relatively easily monetised, however. Loss of this information would open the Society to the possibility of blackmail, but the information can be leveraged with very little risk by sending your members bogus requests for membership or conference fees…

How would you stop this attack?

To prevent this sort of attack you need a means of confirming the identity of the person you are communicating with. You can go down the root of WW2 spies and issue pass-codes or one-time pads to your executive (there are modern equivalents, for example 2 part authentication, email authentication etc. but they are not as easy to deploy), or you can arrange a brief video call, which raises the bar for any imposter, even in these days of fake news…

It is a very rare occasion that a transaction is so time critical that it cannot wait a couple of days for you to schedule a video call. If it is the chairman will probably want to discuss it face to face anyway!

See also: The other virus pandemic

Barry Kaye, July 22nd 2021

The UK’s Engineering and Physical Science Research Council has provided £2M of funds to form the TFI Network+, which has the objective of connecting scientists and UK foundation industries (glass, concrete, ceramics, paper and chemicals) to remain competitive whilst simultaneously facing challenges from environmental legislation.

The website offers a membership section, within which members can find partners, and submit proposals for funding. Each proposal consists of two uploaded documents – the personal details of the applicants, and the annonimised application itself. Within the administration section proposals to each funding call can be viewed, and proposals can be scored to easily rank them prior to making funding decisions.

The membership section is based on our well established work for Society websites, while the proposal upload section is a custom development for this project. We also developed the Network logo and site design in consultation with the clients.

The original home page featured an interesting application of the CSS ‘stick’ class, but the TFI Network administrators have taken on content managment very pro-actively; reflecting the dynamic nature of this are of research. TFI Network administrators typically publish several articles a week covering all aspects of energy and resource efficiency in the foundation industries, demonstrating what you can do in WordPress with a dedicated and talented group of content providers. (Updated February 2022).

The Association of Biomedical Engineers, Medical Engineers and Bioengineers (BioMedEng Association) represents a broad membership that use engineering tools and techniques to solve problems arising from biology and medicine.

The new website allows the BioMedEng Association to offer membership discounts to its annual conferences while reducing the exposure of members personal details to the local conference management committee. Each annual conference can be run in a separate WordPress instance using the Multisite option in WordPress installation. Member integration is offered through a set of custom WordPress plugins. Colours, banner and footer areas can be changed in the default conference sub-sites, providing the conference organisers with the option of easily developing their site based on the parent BioMedEng Association appearance. The conference sub-site templates offer registration management, account overviews, and private pages for registrants. Payments are readily managed through PayPal, typically the local conference organiser can set up their own PayPal account to manage these finances.

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.

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.

Most societies make use of Newsletters to keep in contact with membership; to let them know what their society is up to, and advertise up-coming conferences or other events. The mechanics behind getting this information out are varied, but for small and medium-sized groups the Emailed Newsletter is the most cost-efficient. The mechanics of actually getting the Newsletter out, however, are very varied, with a number of excellent online services.

Here, we will look at an entry level option, ALO Newsletter. This is a plugin available for WordPress users that allows you to compose your Newsletter using the tools you are familiar with. I have used ALO Newsletter for a number of years now for Lancashire MCS, so suggesting it as an option to clients was quite natural, and I felt pretty confident that the plugin was both up-to-the-job, and well maintained!

ALO handles the basic mechanics of an Emailed Newsletter very well, offering HTML and text versions, and throttling the mailing process to help prevent your mail server getting shut down as a spam source. This latter process allows you to use the Newsletter on a standard commercial hosting package without too many problems. Finally, ALO offers a report, giving you feedback on how successful your mailshot was, with estimates as to how many people actually read the Newsletter.

Clearly it is quite important to make the Newsletter both attractive, and easily readable! Normally, you would also want the Newsletter to reflect your society’s branding, and this will require the development of a custom template for the Newsletter. Generally a Newsletter works better with a simplified layout (as email clients are not as clever as web browsers overly complicated styling is punished), so development costs can be kept down.

Here we will just look at a coupe of new and updated designs for Newsletters. The main recent change is to design them so that they display well on a mobile device. Here the HTML based newsletter offers massive advantages over say an emailed PDF version of your print or Word Processed Newsletter. Font sizes stay at a legible size, and in a mobile-friendly design the content will re-flow automatically to work with the narrow screen!

The DARE newsletter (top right, shown in mobile view, but links to a full-screen image) is a standard Newsletter design (as is our MCS Newsletter). Visitors to your website can be invited to subscribe to the Newsletter, and the copy in the Newsletter offers offers the usual ‘view in browser’ and unsubscribe links, plus customisation, referring to the subscriber by name. This example was a test put together by Jean at DARE, and is very clean, attractive (and easily read), with short articles offering links for more information on the main website.

We have also recently updated the European Society of Biomaterials (ESB) Newsletter (right). This serves the membership of the society, and takes its subscribers directly from the membership database (as a member of the public you cannot subscribe to it). As a consequence we are able to do some clever tricks in the back end.

This Newsletter has sender groups determined by membership type (Academic member, student, industrial member), and by status (whether or not the member has paid the current subscription), and by mailing preference (the member can ask only to receive essential society news concerning their membership). This allows the Society to remind members when their subscriptions are due (without having to badger members who have already paid), as well as do the usual communication jobs required of a Newsletter…

Our website for the Tissue and Cell Engineering Society is the second site we have built for a learned society (the first being the site for the European Society of Biomechanics, back in 2012). As with the ESB, this site features membership pages allowing new members to join, and existing members to see ‘premium content’ and to pay their subscriptions (through PayPal, the website does not store or process credit card details).

The site is quite distinctive; using banner images provided by TCES members, capitalising on the visual nature of the subject. The banners, in consequence, include some stunning images taken using modern microscopy and tissue visualisation techniques. The design is based on ‘mobile-first’ principles, using hide-and-reveal menus at all screen resolutions (home page screenshot at mobile size shown above left).

The ‘mobile-first’ design approach focuses on the issues facing mobile-only users, usually the majority of visitors. It stands in direct contrast to the ‘designer first’ option, followed by a fudge to convert the panoramic display into a small container as an after-thought!

The site is built in WordPress, allowing the board to add content as required. Membership management functions are available within the WordPress administration system, offering a one-stop-shop for managing the Society’s online presence. Features track new applications, memberships in arrears, and allow an administrator to update a member’s record as required. They also provide an overview of payments made through the website.

Most modern sites should be secured using HTTPS, this is going to become increasingly important as people become more protective of their online privacy.

Completion of the site coincided with our host (A2) offering free HTTPS certificates, so we were able to secure the site at no additional cost (over the standard hosting fee) to the Society. Many visitors (notably Firefox users) will now be warned explicitly by their browser if they attempt to enter details into a form on an unsecured page. Even if you are not using Firefox, however, you should be aware that anything you submit through an unsecured form might be intercepted by third parties.

The High Polymer Research Group (HPRG) has been running polymer science and technology conferences annually since 1960. Over this time polymer science has changed dramatically, from Flory’s Nobel address to the group in 1972 on polymer conformation, to functional materials and nanoparticles in this year’s conference.

We had the pleasure of re-designing the High Polymer Research Group website in 2007, and have subsequently managed the site for the trustees. A lot has happened in the WWW since 2007, with the development of CSS3 and HTML5, and the increasing stability of Javascript as a client side scripting language. The adoption of these web technologies has been driven by the move from desktop to mobile browser platforms, necessitating the adoption of ‘adaptive website design’ – web designs that allow the same content to be displayed across a wide range of display types and sizes (see, for example Websites for smart phones take centre stage (2013)).

The High Polymer conference site has a simple advertising role to members, it needs to be robust, and good for a few years service! We therefore looked at organic styling changes to the existing site, rather than following the latest design trends (which will likely look quite passe this time next year) while working in mobile-device compatibility.

Navigation designed with the user in mind

From the array of site enhancements now available, we selecting simple features that would assist the visitor in getting about on the page, and navigating the site as a whole. The fixed top banner provides context sensitive links to the top of the page and the home page, and opens the full screen width menu for mobile devices, if it detects a narrow screen device.

Flexibility – adapting the site to each year’s theme

The new site banner is designed to be replaced to match each year’s theme, while permitting old program listings to retain this identity. Banners based on the conference location were added to old conferences on the site (which did not have individual banners). This will allow the site to change a little each year, and help avoid it becoming ‘stale’.

Crisper graphics

The final change was to re-master logos and line art in SVG (Scalable Vector Graphics) format. This has been around for a few years now, and all current browsers can now support it (we offer PNG’s as fall backs if you are still running IE7 or 8!). The SVG format, being a vector file, rather than a pixelating bitmap, adds crispness to each graphic. Its use ensures that visitors with newer ‘retina’ or similar high resolution displays see cleanly defined logos with no blur or distortion. SVG has been a long time coming, but looks set now to displace Adobe’s ‘Flash’ platform where high resolution coupled to a small file size is required.

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.