Going responsive with Off Canvas

| No Comments

In CEHD we've been trying to figure out how to set up a responsive design that works for our sites for several years. The problem was quite simply that we couldn't figure out where to put everything... our academic departments have a lot of content, and some of it can be a bit wordy. The content needs to be trimmed down, but a "chicken or the egg" problem comes up. People have trouble understanding the problems with too much content until they can see it.

Off canvas allowed us to start a transition to more slimmed down and focused content. Everything can still be fully accessible, but not necessarily on screen all at once, on a mobile device. It also allows people to start really interacting with the content in a mobile arena...

So how off canvas works is that it simply has the full content of the site present, and accessible by screen readers and search engines... it is simply displayed off of the normal page.

The first time I ran into this layout was in the summer of 2012, where the Obama 2012 site popped the navigation off canvas to the right on a mobile device. A few weeks later Luke Wroblewski had a blog post detailing how more advanced versions of these layouts could work. And even better, Jason Weaver did some great tech demos to show how they work. Code pen also put up some good demos.

So this is the method we're going to go with. It keeps the structure of much of our content in tact, which should let us help people transition to more focused content. I have the technical version of this working now, the site is just in development on a server only accessible on campus.

In another couple of months I hope to have a full completed site up to demo.

Leave a comment

About this Entry

This page contains a single entry by Dan Sagisser published on December 18, 2012 11:51 AM.

Working towards higher DPI was the previous entry in this blog.

Find recent content on the main index or look in the archives to find all content.