Creating a responsive table solution for complex schedule data

A 4 minute read written by Phil and Kyle April 15, 2015

An illustration of a data table on a mobile phone suggesting much of it is off screen.

You know the scenario: You need to get downtown in a hurry and you have no idea when the next bus is leaving … You’re on your smartphone, pinching and zooming and swiping in all directions on a non-mobile friendly website, trying to make sense of the different types of schedules: when the bus is leaving, what the route options are, and where the closest bus stop is.

This is what BC Transit’s website was like when we started working together. We had done the research and knew that real-time bus schedules were one of the key pieces of information riders needed quick and easy access to. We also knew that we had to account for a wide range of schedule types, since BC Transit operates 58 transit systems that serve 130 communities throughout the province.

There’s no question: Bus schedules are complex and they can be difficult for users to navigate. There are dozens of stops per route, various schedule types (weekend, weekday, holiday), multiple route directions, hundreds of time-stamps – all presented in HTML tables.

An image showing a complex transit route timetable with a lot of data.

Adding to the complexity, more than 60 per cent of BC Transit’s web traffic comes from mobile devices. This meant that we needed to craft a custom responsive table solution for this important data, enabling transit riders to find the right bus, bus stop, and time – especially on small-screen devices.

Developing a smart solution – going sideways

We looked at a number of existing responsive table solutions and none were up to the task of displaying the amount of complex data we required. We used David Bushell’s flip-table pattern as a starting point for our solution. This approach takes a regular data table and flips it on its side, converting the header row into a fixed column on the left side of the table and making the table body scroll horizontally instead of vertically.

This pattern seemed to be the most elegant way of allowing users to see all of the stops for a bus route, and giving them the ability to scroll through the information to find their bus trip.

Given our complex content, we needed to extend this pattern to allow the header text to wrap over multiple lines to accommodate some really long bus stop names. Such a solution also allowed us to maximize the amount of horizontal space for displaying the schedule data. This meant that we needed to determine the height of each header cell and make sure that height was applied to the correct cells in the schedule data table.

An image showing a small screen view of a responsive table solution with side scrolling table data.

This pattern really allowed small-screen users to access the full schedules. We were also able to leverage this pattern on large screen devices for the edge cases where the schedule table exceeded the main content area.

Why the pattern worked well

In our scenario, the pattern lets users see an entire trip at a glance, stacked vertically, while simultaneously allowing users to see the frequency of trips and quickly scroll the schedule data to find the time they need. As a little bonus, we highlighted the current bus trip and scrolled the schedule data table to bring the next departure time into focus. This pattern has also been applied to the desktop view when the width of the schedule table exceeds the width of the content column, which allowed us to make the most of the available screen real estate, no matter what device a user is accessing the site on.

Does this pattern work universally?

Absolutely not. On this project alone we used three different responsive table patterns. For fares tables we used a stacked table pattern. This converts table rows into label:content pairs. We broke fare content down by fare class (Adult, Senior, Student, etc.), which allowed us to keep content grouped logically on small screens and in an easy-to-scan table on desktops.

An image showing a simplified small screen view of the BC Transit fares table view.

We also used a standard scrolling table for non-specialized inline tables, so that content authors can easily add responsive tables without any additional code overhead, using a pattern that would accommodate a wide range of table types.

Writing the code

There are existing solutions out there that we found, but nothing that worked for the breadth of browsers we were required to support. The most amount of effort was probably with respect to getting IE9 to function correctly with a responsive table solution. We built our own jQuery plugin that out of the box handles IE10+, Chrome, Safari and Firefox. Additional JavaScript functionality was added later on to handle bugs in IE9 rendering, specifically around having a fixed-position header scroll horizontally. Unfortunately, the solution for IE9 isn’t up to our typical standards, but supporting older browsers sometimes requires creative solutions.

Getting started

The first thing we need to do is set up our tables. Each table will need to be wrapped in a div with a class of table. <div class=”table”></div>

Now add your table to the parent div in this format:

<table class="rt cf">
   <thead class="cf">
   <tr>
       <th >Col Heading 1</th>

       <th >Col Heading 2</th>

       <th >Col Heading 3</th>

       <th >Col Heading 4</th>
   </tr>
</thead>
<tbody>
<tr>
	<td> Col Data 1</td>
<td> Col Data 2</td>
<td> Col Data 3</td>
<td> Col Data 4</td>
</tr>
</tbody>
</table>

Now download the plugin and add the JavaScript to the bottom of the body:

<script src="js/jquery.js"></script>
<script src="js/jquery.responsiveTables.js"></script>
<script>
   $(function () {
      $('table').ResponsiveTables({breakpoint:700});
   })
</script>

Check out the BC Transit website to see our handiwork in action.