OnCanvas: a Method for Better Web Sidebars

On Canvas is a method my coworker and I developed to allow intuitive and semantic slider menus for responsive websites. It is essentially opposite of the (apparently) popular off canvas technique. The idea for OnCanvas is simple: instead of positioning the menu elements outside the browser window and sliding them in via a body class, we absolutely position the menus behind our main element and use a body class to slide that main element over, revealing the menu.

The main benefit we found was that only one element must be acted upon in order to accomplish the sliding action. From an aesthetics standpoint, a slide transition like this looks more “natural” than many Off Canvas implementations I’ve seen. Additionally, our DOM seems to be presented in a cleaner fashion and the manipulations require minimal JavaScript.

Now, I might be late to the party on this, and there might be some yet-undiscovered reason for not using this method, but our research didn’t turn up any sources that used a similar method, and we couldn’t find any browser or performance issues. I am planning to investigate further and compare to existing methods as I continue to refine the technique.

If you like the idea, let me know. I’m working on a kick-ass template for this in HAML and SASS and I’d love to have some feedback.

View it as a Gist on Github or play with it on Codepen.

Advertisements

New website. Here now, but also coming soon.

I’ve been meaning to write for a while, but end of the semester course work has been getting in the way. Most notably, the construction of my very own personal portfolio website. It’s finally finished (well, mostly) and up on university space, which is to say it’s only available for as long as MTSU wants to keep it there.

The design surprised me a little, but I really like how it turned out, except for the fact that my weekly time report is telling me that I spent way too many hours on it. The real bulk of it was finding enough images of  my artwork  to have a decently full portfolio page to satisfy class requirements.

While I like how it came out design-wise, I’m not entirely pleased with the directory layout or the information structure. Also, there’s no backend, which would be ideal. I want put it up as an actual site (with  fancy URL and everything!) between now and mid-January, hopefully fixing some things—combining the about page with the contact page seems pretty obvious, as does putting up a responsive résumé in addition to the PDF. Maybe I’ll update the home page, add a blog section in place of the contact page, and migrate some (or all) of my writing over there.

Overall it does what it’s supposed to do and a little more: it showcases my style and some of my work, is easy to read, low maintenance, and it’s fairly comprehensively responsive. If you have a second, take a look at it and let me know what you think. It’s over at http://capone.mtsu.edu/jmt4r. I’ll write again before Christmas, for sure!