THE PENDING DRAFT

Since mobile devices are booming, screen real estate is becoming more of an issue again. One very effective solution is to move things like navigation menus out of the visible canvas and back in when used.

I have yet to get my head around possible techniques, so i compiled a little reading list with some recommendable tutorials, examples and resources.

The most comprehensive article on this list is from David Bushell for Smashing Magazine. If you only read one article about this topic, make it this one! He covers the whole process of building a fully responsive Off-Canvas Menu, which also works without Javascript. Furthermore, he gives us some great insights into performance issues when using jQuery and why he recommends using CSS Transitions instead.
Smashing Magazine – Implementing Off-Canvas Navigation For A Responsive Website

Luke Wroblewski, author of the Mobile First book, was maybe one of the first to mention Off-Canvas Navigation. In this artictle he covers many different concepts and ideas for Multi Device Layouts including the Off-Canvas approach.
Multi Device Layout Patterns

Inspired from Luke Wroblewski, Jason Weaver developed a very nice demo page for an Off-Canvas Menu. You can also find this Demo on github to fork it and play around with it.
Off Canvas – A Multi-Device Web Layout Pattern
Off Canvas Demo by Jason Weaver on github

A german article with some very good examples of Off-Canvas Menus in practice. Worth checking out, even if you don’t speak german. They’re also using this technique heavily in their own Tatami Theme.
Elmastudio – Showcase: Off Canvas in responsive Webdesigns (German)

Another one in german with a nice overview of the technique and the idea behind it.
Elmastudio – Off Canvas-Layouts in responsive Webdesigns

I know, a list like this can never be complete, so please share your thoughts and suggestions in the comments below.

This is my personal outlet for any thoughts and ideas i might have or things i learn along the way. I used a private WordPress site with a very basic Theme as my own little knowledgebase for about a year and that was a very good thing…

… but in the last weeks and months i thought a lot about the open web and how i learned nearly everything i know from others, sharing their knowledge on the web. And even if i wouldn’t consider myself an expert – no one really should – i think sharing thoughts and ideas can’t be a bad thing, so i’ll just give it a try.

I hope some of this will be helpful for others as well and if you find something wrong, please use the comments to point it out. Also, i’m not native english speaking, so if you find any grammar mistakes, feel free to correct me on those, too. I’m willing to learn and correct myself. It’s just a pending draft, after all.

The Theme i use here is something i quickly put together because i wanted to get this thing up and running as fast as possible. If you see anything weird, please send me a note so i can fix it. As soon as i find some time to polish it a bit more, i’ll probably release it here.

Finally, i want to thank my brother Mario for his ongoing patience and support with all my noob questions and thanks to Ellen Bauer from Elmastudio and Martin Wolf who – even if they both don’t know – finally motivated me to start this little blog.

So, here we are. Let’s see how long this thing will last and where it will bring us.