Responsive design – part one – tables

One of my recent tasks involved updating The Kangaroo Court to be usable on mobile devices, including phones and tablets. We already had a separate mobile site at m.the-kangaroo-court.com, however, I didn’t want to maintain this anymore. Why, you ask?

  • It only offered a small subset of the functionality available on the main site
  • It required additional maintenance to keep it up to date with the main site whenever I made changes
  • I wanted to enhance my knowledge of responsive design

In this series I’ll look at some of the main tasks involved in making the site responsive, starting with how I approached what was initially a bit of a showstopper – tables! The Kangaroo Court has a large number of screens with tables, such as the games list (as shown below), the fines report, and others.

GameIndex

As you can see, there a number of columns, and each contains enough data that I couldn’t simply leave the tables as they were as the columns would become very narrow on small screens. At first I thought that I could simply hide non-essential columns on mobile devices, however, this would have the downside that not all data would be available to mobile users, which wouldn’t be much of an improvement on the existing solution (a separate mobile site). Thankfully there are already some really cool solutions for making tables responsive, and I’ve listed the ones I looked at below.

  • http://css-tricks.com/responsive-data-tables/ – cool idea, but would force a lot of vertical scrolling in tables with lots of rows/columns
  • Media table – uses javascript to show/hide columns depending on the size of the device, and allows the user to also choose which columns to show/hide.
  • FooTable – hides non-essential columns on smaller devices, and allows the user to expand the table row to show the hidden data.

I decided to use FooTable as it looked simple to configure, with an end-result that was simply beautiful to behold. I’d recommend reading the article on css-tricks as it gives a good rundown of how FooTable works, and also outlines some alternative approaches that the author had already reviewed. It also had plugins which allowed for filtering and sorting on the client side, which is something I thought would be useful.

Adding FooTable – the steps

Downloading the source code

To get started, I first went to GitHub and downloaded the source code for FooTable – https://github.com/bradvin/FooTable

Adding the necessary files to our web project in Visual Studio

I unzipped the downloaded file, and copied the footable.js and footable.sortable.js files into my /scripts/ folder in Visual Studio. I then copied the footable-0.1.css and footable.sortable-0.1.css into a footable folder within my content folder.

I also renamed the images folder in the downloaded file to be footable, and then copied the whole folder into the images folder in my Visual Studio project, as shown below:

image

Finally, I updated the image paths in the two CSS files to point to the /images/footable/ folder that I’d created earlier.

Updating our html

Next I had to update the html for each table that I wanted to use FooTable on.

As per the FooTable documentation, FooTable allows you to use data-attributes to specify which columns should always be displayed, and which should be hidden on tablets or mobile. By default, the breakpoints to define tablet and mobile are 480px and 1024px respectively, but you can customize those if you need to.

I marked up the code for the Games list page as follows (note the data-attributes on the <th> elements, and the footable class on the <table> element):

<table class="footable">
    <thead>
        <tr>
            <th data-class="expand" style="width: 20%">Venue
            </th>
            <th style="width: 15%">
                @Html.DisplayNameFor(model => model.Date)
            </th>
            <th style="width: 20%">
                @Html.DisplayNameFor(model => model.Opponent)
            </th>
            <th data-hide="phone"></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.FieldName)
                </td>
                <td>
                    @item.Date.ToString("ddd, dd MMM yyyy")
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Opponent)
                </td>
                <td class="actions">
                    @if ((bool)ViewBag.CurrentUserCanEdit)
                    {
                        @Html.ActionLink("Edit", "Edit", new { id = item.ID }) 
                        @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                        @Html.ActionLink("Add fine", MVC.Fines.Create(item.ID, Request.Url.PathAndQuery)) 
                        @Html.ActionLink("Bulk fine", MVC.Fines.BulkCreate(item.ID, Request.Url.PathAndQuery))
                    }
                    @Html.ActionLink("View Fines", MVC.Game.Fines(item.ID))
                </td>
            </tr>
        }
    </tbody>
</table>

Adding javascript to turn our tables into footables

This one was easy – I simply updated my main.js file to apply FooTable to any table with the footable class:

//Any footable will be made responsive
    $("#content table.footable").footable();

Customising the CSS

Finally, I updated some of the CSS rules in the footable-0.1.css file with colours that matched the existing Kangaroo Court scheme, for example:

 

.footable > tfoot > tr > th, .footable > tfoot > tr > td {
  background-color: #e2e2e2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5eeee), to(#e2e2e2));
  background-image: -webkit-linear-gradient(top, #f5eeee, #e2e2e2);
  background-image: -moz-linear-gradient(top, #f5eeee, #e2e2e2);
  background-image: -ms-linear-gradient(top, #f5eeee, #e2e2e2);
  background-image: -o-linear-gradient(top, #f5eeee, #e2e2e2);
  background-image: linear-gradient(to bottom, #f5eeee, #e2e2e2);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  border-top: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  padding: 10px;
}

Viewing the Results

Now for the exciting part – the results! On the desktop:

image

and at a screen width of 320px (e.g. mobile) once I’d selected the first game:

image

 

As you can see, it was pretty easy to add FooTable, and the end result is fantastic.

What’s next?

In the next article I’ll look at adding sorting with FooTable, and also some of the other issues I had to resolve while making the site responsive.

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s