A Responsive Off-Canvas Menu

Have a play with my responsive off-canvas menu. I hadn’t intended this to go viral (I’m well aware of the issues!) but since it has I decided to write a proper introduction.

A Responsive Off-Canvas Menu

A couple of things to note — this was purely a technical demo to see the performance of CSS transforms & transitions (I’ve built experimental monstrosities in the past so I felt obliged to do good). The general idea is nothing new. It lacks accessible foundations and unfortunately, as many have fed back, there are rendering issues that cause flickering in some browsers.

This is part of my research for an upcoming Smashing Magazine article and my talk at Responsive Day Out. In both I’ll be examining design patterns we can use to improve responsive design and silence the critics.

We need to embrace the viewport and do more than stack content vertically; one very long scroll is no better UX than a zoomed out, fixed-width format.

To take responsive design — or simply web design — into new territory we need sound implementation; hence the experimentation above. More to come! For now I’ll point to Siddharth Rao’s article on CSS3 vs jQuery Animations and Brad Frost’s Responsive Patterns for further inspiration.

See you next year!

Buy me a coffee! Support me on Ko-fi