Sector(s)
Team Members
Project Team
As the organiser of the monthly Drupal Show and Tell event, Cameron and Wilding had the idea of rebuilding the website using Drupal 8 with an optimised structure and a fresh new design that fully supports the event. Based on the designs provided by Five Mile Media we themed and built the website with all the integrations and functionalities over 1.5 months with 2 developers working on the project. We carried out a content migration from the old website and gathered new content to populate the website with new information regarding the speakers. Andy Read and Rob Davies contribute to the event and the community by recording, editing and publishing the videos of the talks.
Being committed and enthusiastic members of the UK Drupal community, Cameron and Wilding are actively involved organising Drupalcamp London and participating with talks in all major Drupal events (Drupalcamps London, Brighton and Bristol). We also host two monthly Drupal meetups, London Drupal Pub Meet and Drupal Show and Tell London.
We've been holding monthly Drupal "Show and Tell" evenings since 2013 to contribute to the London Drupal community, where we encourage the community to come together and learn from one another.
Each month we call on people to present a short Drupal-related technical talk to the rest of the group. It's a great opportunity for people to have their first presentation in a relaxed atmosphere. It provides the Drupal community members a chance to learn and listen to interesting talks as well as a chance to mingle and meet new people within the Drupal World. Every month we line up fascinating talks presented by volunteers that can be on anything from a neat solve of a tricky problem to the latest or favourite features of Drupal 8.
Last year we decided to rebuild the existing website using Drupal 8 to get the online support of the event more modern and attractive. The old site wasn’t mobile optimised, the layout was old fashioned and cluttered, and the information architecture wasn’t optimal.
The first goal of the website rebuild was to have a modern, fully responsive website which helps the event audience to find the necessary information quickly and provide them with all the details they might be interested in. This meetup is a great opportunity for beginners and experts alike, but it was difficult to fill in all 3 talk slots for every event due to the lack of volunteers. We were happy about the number of attendees but also knew that we could improve by applying small changes here and there on the website to encourage the audience to visit the event.
About the project
The key purpose of the website is to provide visitors with the information of the upcoming events, talks and speakers. We have volunteers who record the talks and after editing, they upload them to Vimeo and we embed them on the website.
Five Mile Media kindly offered their help as a community contribution in delivering design and assets for the key pages of the website. We worked together on the new optimised information architecture to create a new look and feel for the website.
The main page of the website lists the previous events with the recorded talks so to make sure those who are interested but couldn’t attend can still watch the presentations. To make the home page optimised for mobile we implemented masonry.js, so that the elements would adjust their layout according to the visitors’ screen size.
We also wanted to bring the speakers closer to the community, so every speaker has a dedicated profile page where we display a short biography, profile picture and contact information (Linkedin, Drupal.org, Twitter). This provides the audience with the possibility to get in touch with the speakers outside of the event.
We designed and placed more calls to action across the site to encourage visitors to actively take part by attending the events, submitting talks or RSVPing online using the Meetup.com page of the monthly event.
The dynamic ‘upcoming talks’ teaser shows the lined up talks for the next event, or a call to action button to submit a talk when there are free talk slots available.
Search functionality and the ability to tag talks and videos ensure that the visitors can search for topics / speakers they are interested in.
As a result we managed to increase the number of visitors of the website as well as the event itself. Since the website launch a lot more Drupalists have volunteered to present, and 3 times more people attend to the live events.
Comparing the Google Analytics results to the same period last year, 15th November to 30th May for both years the results are the following:
- Sessions >> Visits: 278%
- Users >> Unique visitors: 252%
- Page Views: 535%
- Pages/Session: 192%
- Av session duration: increased from 1m 09s to 1m 35s
- Bounce rate: decreased from 75.66% to 62.8%
Why Drupal was chosen
Cameron and Wilding are a Drupal-focused development company, so the main reason for choosing Drupal 8 was for the team experience of working with it. After the announcement of the Drupal 8.0.0 release we were very eager to start building our first Drupal 8 website, to experiment and learn more about the new technology and changes.
It also made sense as the content of the site dealt with Drupal and learning about upcoming technologies.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
- Views: The views module was important in this project as we used it to present users with information in various formats, including the talks organised by meetup, the talks ordered by date, a speaker list and more.
- Custom block (block_content): Custom blocks gave us a quick, editable method for placing custom content, such as the RSVP block for users to register for events.
- Pathauto: We used pathauto to configure URL aliases to improve paths for elements like speakers, talks, and events.
- Classy: We used Classy as a base theme as we found it was a useful helper for theming Drupal 8. Classy provides examples of a significant number of templates including ones that were previously theme functions, and gave us useful examples of the Twig syntax.
