Responsibly Leveraging Advanced Web Features

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.

SEE ALSO: Building a Responsive WordPress-Powered Project Map [Case Study]

The end result was a page that brought together aspects of progressive enhancement, responsive and responsible web design, SVG, and the HTML5 History API.

Travois interactive map

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.

Basic Web Form

Using the principles of progressive enhancement, we then began to add on more advanced features to improve the overall experience for you, the user. Does your browser have Javascript support? Great, you get quick and efficient AJAX data retrieval. Can you handle Scalable Vector Graphics? Good for you! You get a sweet, interactive map of the United States instead of a boring state drop-down box (more on this later).  How about the HTML5 History API? Awesome, your back button now works a whole lot better between AJAX calls. This approach simplified the development of a complex web page and ensured that we would provide, at bare minimum, a functional and usable experience to all users.

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.

One example: some older browsers don’t support SVG, and some devices are physically too small to accommodate an interactive map of the US. In these scenarios, we shouldn’t force users to download an 80KB vector graphics file that they’ll never see. By using Modernizr to detect SVG support and simple Javascript to determine window dimensions, we conditionally download the SVG map and any other associated assets. This type of simple feature detection ensures that we aren’t eating up a mobile phone user’s data plan with unnecessary assets.

 

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

The Scalar Vector Graphics (SVG) image format met all of these requirements. By its very nature, SVG scales very well and is conducive to the fluid layout of a responsive website. It is also receptive to user interface events such as click and hover, which we can hook in to using Javascript. Lastly, elements within the graphic can be styled with CSS. In conjunction with JSON-formatted project data and a little Javascript , we could apply a CSS class on the fly to a state in the SVG map based on its project density. In this manner, the background color (heat level) of a state could be controlled programmatically.

map

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.

To remedy this issue, we turned to the HTML5 History API. This API allowed us to add entries and related data into the browser’s history via Javascript. If the user filters the project list by Economic Development project types, that filtering option is stored in history. Should the user then filter by Housing and hit the back button, the project list and filter settings will revert to their previous state.

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.

URL bar after manipulation by the HTML5 History API

 

Wrapping Up

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

Add New Comment:

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

3 thoughts on “Responsibly Leveraging Advanced Web Features

  1. Responsive Themes

    I like SVG format. I need to create one real estate page, for properties that are selling in some regions and I think your tutorial will help me to create nice fluid and responsive page. Thanks!

  2. Mathew Porter

    Great to see the progression of a project and the implementation of fallbacks in an individual scenario.

  3. Navneet Singh

    Great ! knowledgeable post ..
    Can you please list here some feature of responsive design …I am still confused …