Responding to Technology

Simply put, responsive design for the web involves writing CSS so that the elements on the page are displayed differently depending on the size of screen displaying it. Through the use of CSS media queries, the page asks, "what size is the screen?" The layout and styling then responds accordingly to display the page optimized for that size. Popularized by Ethan Marcotte, in in his seminal article, Responsive Web Design, the technique has become common place as designers seek to accommodate the wide variety of devices on which their websites are being viewed.

Typically, a responsive design simply rearranges existing content from the desktop display to make it easier to read on tablets and phones. This often involves making fonts bigger, dropping sidebar content below the main content area, and scaling images appropriately. It's the same page with a different layout.

In our recently launched project, Returning the Voices, we asked ourselves how we could use responsive design to not only change the layout of the page, but also change its function. We didn't just concern ourselves with the screen size, but considered how people would be using the site with mobile devices. In particular, we knew that many people who were visiting the Kouchibouguac National Park in person would be using the site in very different way than those accessing it from a distance.

The result: we used responsive web design techniques to create a mobile display that allowed for an immersive experience in the park. We moved the maps behind the site content, revealing them with a horizontal slide when they needed to be accessed, and allowing the site to function more like a guidebook for visitors. We also included an additional "locate" link in the mobile display, allowing visitors to access and navigate to video locations in the park using their device's native mapping application. Using this approach, we've tried to make our design responsive not only to the size of the technology, but its specific uses.