Designing a responsive conference schedule for DrupalCon Denver

One of the most important and complex aspects of a DrupalCon is the schedule. An enormous amount of work goes into getting it right – from the huge number of session submissions, which have to be reviewed and selected by the track chairs and their teams, to the people whose job it is to carefully consider and decide time slots for all of them.

Once all of this work has taken place, the schedule then needs to be presented, in print, on meter boards, posters and in the delegate guide, as well as on the website and mobile app.

With around 70-80 sessions over three days and eight tracks, with three possible skill levels and multiple presenters, all split up into different time slots, and sometimes sub-time slots, presenting this lot is not a simple task. I had some great people working with me on the London schedule and I think we did a pretty good job.

For Denver, the plan was to take the schedule a bit further, making it responsive so that the layout adjusts to the size of the screen you are viewing it on. This is particularly useful for mobile phones and tablets, on which the user experience would be very poor if the design wasn't responsive. Initially the Denver team were looking at a table format for the schedule, similar to the Chicago approach: This layout is really good, but tables don't do well with responsive design. Tables have no way of rearranging themselves – if the width of the table shrinks, the cells just squash horizontally until they are stopped by the longest word in each. This looks pretty horrible and usually breaks a website's layout on smaller screens.

DrupalCamp Austin did use a semi-table layout, and importantly, it doesn't actually use table markup, meaning it can collapse. This worked well because the number of sessions in a given time slot was limited. Denver's maximum is seven sessions in a single time slot, which even in a 960 set up, would be really squashing them in on a single row and force them to collapse almost immediately on the slightest resize.

Drupalcamp Austin's horizontal schedule layout

So a different method was needed. Initially taking the approach of a mobile web app, I put together an example schedule using Denver's branding to help demonstrate how it could collapse on smaller screens. The main difference in this layout is that instead of side by side, the sessions are stacked, divided by the time slots. The track icons were produced for Drupalcon Chicago and it felt really right to pick them up again for Denver.

The Denver team then adapted the prototype to fit the website and extended the icon set to cover the new tracks. While implementing, they made some subtle improvements to my prototype, like the track title on hover:

Drupalcon Denver web app prototype

There are definitely more improvements to be made. The hit area isn't very large on the sessions (only the title), so it's not always easy to press with your finger; wrapping everything in an a tag would resolve this. The rooms aren't displayed yet, which would be pretty useful to help you find your way around and some of the sessions don't fall into specific time slots, so we are working on adding these soon. Also the filters are yet to be implemented on the Denver site, but it is worth looking at the prototype on a mobile device to see how I envisaged them working.

This is of course, just one example of a schedule for one event format, but if you are reading this from inside or outside the 'Drupalsphere', I hope you found some of the ideas useful.



  • DrupalCon Prague Day 3

    ... Graeme Blackwood  26th September 2013
    Plenty of play at DrupalCon too
  • Drupal

    Developing mobile apps with Drupal and DrupalGap

    ... David Allard  27th February 2015
    Drupalgap allows an organisation with data in a Drupal website to create a native mobile app that allows users to access to content when offline. Drupal developer and DrupalGap specialist Dave explores this further with an overview of Drupalgap and an idea of when best to use it.