Making TorontoHiking More Mobile Friendly

 Updated: 27 Feb 2015

The Problem

With more and more hiking enthusiasts visiting this site on mobile devices, particularly tablets, it is becoming apparent that this website is not particularly mobile friendly.

One of the main problems causing this is that the site template that gives the site its look is not a mobile responsive template that allows items on the website to collapse properly for viewing on a tablet or mobile phone.

The website relies heavily on table to present data often in multiple columns like the two column table in the Trailhead table on the main hike pages and the three column chart on the Waypoint Trail Guide pages.

The icon row (Trail Map, Elevation, Satellite View etc) is also set in a table meaning it will not collapse properly on mobile devices.

The Trail Map, Elevation Profile and Satellite View images are all pdf files that do not work well on some mobile devices even though they are fine on desktops. In effect, the pdf file displays fine on some tablets (Apple) but rather downloads separately on other mobile devices (Android.) See one fix for this below.

The Solution

• Find a responsive template for the website and move everything over to it. This is a BIG job and would not solve all the table problems.
• Change all of the multi-column tables into single column tables that can collapse to fit the mobile device dimensions by setting column width to 100% (of the space available.) There are presently 5 tables for each hike that need to be changed or about 500 tables.

The Plan

• The first step is to gradually replace all multi-column tables with single column tables or to replace some tables completely with other coding.
• The next step may be to replace the template but that is a HUGE undertaking and will change the look of the site considerably.

Getting Started

A new hike was added to the existing hikes yesterday -L58F Harrison Park -Inglis Falls Loop. In that hike we have made substantial changes that will serve as a guide for the other hikes. The changes are:

1. the icon row (Trail Map, Elevation, Satellite View etc) has been removed from a table and stands on its own with not much noticeable change but this allows it to collapse properly in a responsive template.
2. the main table (Trailhead: Hike Length: Time etc) has been redone as a single column table set to 100% (of the available width.)
3. The Waypoint Trial Guide table has been changed from three columns to one column -again to allow it to collapse properly in a responsive template.

The Way Forward

• We will begin with all new hikes (L58F and the upcoming L59) being presented in the new format.
• Secondly the tables will all be removed or made into single columns collapsible.
• That should take most of this year and perhaps beyond. After that we'll reevaluate.

Viewing PDF Files in Android

To view pdf files inside the browser in android as opposed to downloading them, a pdf plugin is required for the browser.

As an example, here is how to do it for the Firefox browser:

1. Install the Firefox browser from the play store (free).
   
   
2. Install the pdf.js Firefox plugin. To install the pdf.js plugin for Firefox, you do not use the play store. Instead start the Firefox browser and go to addons.mozilla.org. Search for pdf.js and install it from there.
   
   
3. To see if it's installed properly, go to the menu Tools:Add-ons (not the "about:plugins" url as you might think from the desktop version).