We recently completed a full responsive redesign of the corporate website for Travois, a consulting firm focused on American Indian housing and economic development. From a user interface perspective, one of the more challenging and exciting aspects of the site was the projects showcase page.
The purpose of this page was to present the user with a filterable list of Travois’ housing and development projects throughout the United States. A secondary goal was to provide an interactive heat map representing project density by U.S. state. Clicking (or touching) a state on the map would filter the project list by projects in that state.
Progressive Enhancement and Courteous Web Design
At its core, the projects page is simply a filterable list. The user should be able to choose from a set of options, hit the submit button, and see a list of projects. This basic functionality served as a good starting point for development. An HTML form that triggers an HTTP POST request will work on any browser and any device.
Scott Jehl’s excellent presentation at An Event Apart, Interacting Responsibly (and Responsively!), inspired us to make the projects page perform efficiently and responsibly. We tried not to make assumptions about the capabilities of the user’s device during development. Bandwidth, for example, can be slow and/or metered for mobile phone users. To this end, we made a conscious decision to only load in assets if and when they were needed.
Responsiveness and SVG
There were three main requirements of the project heat map. The feature needed to be:
- Scalable: the map would live inside of a responsive layout and needed to resize itself accordingly
- Interactive: the map was to function as a state filter for the project list
- Dynamic: the map had to represent ever-changing state project densities, and therefore could not be a static image
Browser support for SVG is good, with the main gaps being our old friends, Internet Explorer 7/8. For legacy IE users, we considered serving up an experience similar to that of our mobile phone users; namely, a simple drop-down box to filter the project list by state. But thanks to the folks at jVectorMap, we were able to implement a polyfill comparable to SVG. For older IE browsers, the jVectorMap plugin serves up Vector Markup Language (VML), which is an alternative vector-based image format that Internet Explorer can interpret. It should be noted that this polyfill is conditionally downloaded; modern browsers that support SVG are not saddled with this extra baggage.
HTML5 History API
The projects page makes heavy use of AJAX to fetch data and update the project list. One drawback of using AJAX to modify content on a page is the lack of browser history support. The browser’s back button takes the user back to the previous page, rather than the previous state of the current page.
The History API also allowed us to visibly manipulate the URL in the browser’s location bar to reflect the current filtering options selected. These unique URLs can then be used at a later time to view the project list with appropriate filters already applied.
Through the responsible use of advanced Web features, we were able to produce an engaging project showcase for Travois that does not exclude users based on the capabilities of their browser or device.
Read more about the Travois project: Building a Responsive WordPress-Powered Project Map