Conference websites are usually built to sell tickets and present the content, but why not make a website more accessible at the day of the event. Wouldn’t it be great if you could see what’s happening right know on the conference schedule? Especially if you are attending a conference with multiple tracks.
You probably have printed schedule handouts on conferences, maybe your conference even has a mobile app, but it doesn’t hurt to make the website more usable on the day of the event.
Make It Look Good And Work Good On Mobile
The idea came to me as I was working on the conference website for one of our clients. We created a long one-pager featuring the speakers, venue info, sponsors & partners, reasons to attend and more. Few days before the event, with schedule finalised, I was thinking about the best way to present it, and I decided to go for a mobile–optimised table that expands to several columns on wider resolutions.
For each time entry on the schedule, we specified a time range of each entry using
data-end-time to be more precise. See this example:
<tr data-start-time="2014/04/24 9:00:00" data-end-time="2014/04/24 09:15:00"> <td scope="row">9:00 - 09:15</td> <td>Opening</td> </tr>
I’ve prepared a Codepen demo to help you better understand the code, but since you would need to manually set the time for the schedule, I’ve recorded this video instead. You can fork the demo, change the dates to the current day and it should work.
This approach will grant you some easy wins: your long table will be easier to scan with current entries highlighted visually and user can also skip less relevant content and slide directly to the current entry with ease.
Schedules get to be broken if talks don’t honour previously specified time slots. That’s one obvious downside of this approach — and in that case the table should always be in sync to be applicable. Since time ranges are specified in data attributes as well, there is a bigger chance to make mistakes when modifying the code. If you have a static page conference website, you will have to manually make changes.
If you care deeply for semantics, your first thought probably was to use a much under appreciated
<time> HTML5 tag. Several links later, while searching for the specific example, I found out that
<time> element doesn’t support time range.
Alternatively, we can specify each time entry as a specific <time> tag, but I wanted a quick and easy solution where last–minute changes wouldn’t complicate the execution (since we are talking about a static HTML website). Here’s an example:
<tr> <td><time datetime=“2014/04/24 9:00:00”>9:00</time> – <time datetime=“2014/04/24 9:15:00”>09:15</time></td> <td>Opening</td> </tr>
This approach would require some script changes but since this is just a proof of concept, I’ll leave that for another article.
Hope you found this useful and that you will try to make your next conference website even easier to use. Think about the users.