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.

That worked fine and with “Schedule” anchor link in the fixed header of the site, you could easily jump to the “Schedule” section of the page. The problem with schedule anchor solution is that you still have to scroll to the current talk on the schedule, and this is what I was trying to simplify. Zoran was kind enough to help with the JavaScript implementation of this idea.

For each time entry on the schedule, we specified a time range of each entry using data- attributes, data-start-time and 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>

JavaScript is simple as well and pretty self explanatory. It reads through the document comparing current time on the server and date ranges for “data-“ attributes. If the current time is set in the specified range, that table row will get an a unique id=“schedule-now” which we’ll use for our special anchor link. To make it even easier for the event day, the anchor link on the page navigation will only be displayed if there are active time ranges.

Demo

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.

Bonus Semantics

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.