A Better Off-Canvas Menu

Wercker is a Docker-Native CI/CD Automation platform for Kubernetes & Microservice Deployments

Lindsey Bateman
Lindsey Bateman
January 24, 2014

At wercker, we want to make sure the entire application performs equally well on mobile devices as on the desktop. As such, we design every new feature and page with a mobile mindset.

Off-Canvas Menu

Today we want to showcase the second iteration of our navigational menu and notification system. We happily made use of the Offcanvas menu provided by Foundation.

The offcanvas is a cool feature of Foundation, however while the initial implementation was fairly easy, we did run into some problems. When the content is smaller than the screenheight it chops off the canvas wrapper, so we made sure in that case its height is 100%. The second thing is that we made sure the side menus close after clicking on a specific menuitem.

These kind of menus are now widely accepted, especially in consumer apps. We believe that developer platforms should be designed with a mobile-first mentality as well, due to increased usage of phones and tablets.

Even more so because we have important and relevant information to show developers, also when they’re on the road. We actually see a lot of mobile usage, from registration to adding an application and even deploying.

With this menu we hope that our tool feels more like a real mobile experience, instead of shrunken down website.

In short, we’re really happy with the offcanvas menu, and hope you like it too!

Earn some stickers!

Take a screenshot of the mobile view of your application on wercker, tweet it out with #wercker and we’ll send you some @wercker stickers.

Follow us on twitter as well to stay in the loop.



Topics: Product