The Aerosol Society deliver a number of events throughout the year including The Drug Delivery to the Lungs (DDL) Conference, one of the largest annual conferences covering all aspects of respiratory drug delivery.
Over the years the DDL team have requested their IT support to make changes to the Aerosol Society website to help the website fit more closely with the needs of the DDL committee. Increasingly this became more and more difficult because of the restrictive nature of the Aerosol Society website, and because any changes would also impact on other events hosted on the Aerosol Society website.
So I was consulted to suggest a solution, which was obvious to me. The DDL site should roll off into a separate website, allowing complete flexibility and autonomy. They already had a domain that pointed to the Aerosol Society website. So I cloned the Aerosol Society site, removed the domain redirect, and built a brand new theme for DDL.
The Aerosol Society site is relatively big WordPress site handling many events each year, along with delegate bookings, society membership, and sometimes hundreds of abstract submissions for each event. Fortunately, the DDL team didn’t want to link to the Aerosol Society membership system, preferring all their content to be accessible to all. The new Drug Delivery to the Lungs (DDL) site handles the archive of over 200 speakers, over 500 sponsors, and over 700 abstracts as custom content types. The abstracts are also stored as PDFs with extra metadata provided by ACF, searchable and filterable using Relevanssi and FacetWP, and I built their custom responsive WordPress theme from scratch using Zurb Foundation for sites and jointswp.com.
The menu is sticky on wide screens, but unsticks and shrinks to a hamburger icon and accordion menu for small screens to allow users to utilise their whole screen for content. This is where Zurb Foundation is so powerful.
For example, the banner menu looks like this on a widescreen over 1440px wide – with links to social media and a link back to The Aerosol Society website:
On screens between 1240px and 1440px the menu squishes up a bit, and between 440px and 1240px turns to a hamburger icon like this:
On screens lower than 440px I had to hide the Aerosol Society logo, which impacts most mobile devices in portrait mode.
One of the big features of the DDL site is the abstract archive. Having cloned the site I spent a lot of time handling and manipulating the abstract data, since I wanted to change the way it was stored to make searching better, by author as well as conference, keyword, and paper type. The initial archive page shows a thumbnail of each year’s proceedings for quick selection of all abstracts from that year. The achive uses a form that is also responsive, so usable on all devices. It looks like this on widescreens larger than 1024px wide with the proceedings thumbnails in 4 columns:
On medium screens between 783px and 1023px the search bar moves above the other filters, like this with the proceedings thumbnails in 3 columns:
Then on small screens under 783px the search bar stays but the rest of the form changes to two columns, along with the proceedings thumbnails like this:
The project involved shuffling a lot of data, and the abstract archive uses a lot of custom javascript to make it as interactive as possible. The client is absolutely delighted with it.
