Accessibility & Off-Canvas “Panels”

Recently, we’ve been working on HTML, CSS, and JS-based wireframes for a healthcare application, and we came upon an interesting interface problem: dealing with content that, on first glance, would beimplemented using HTML <select> elements. After more research, we realized that we weren’t dealing with simple lists of choices that usually lend themselves to a <select> - we were dealing with lists that contained many options, and options that sometimes needed to show detailed descriptions - two user experiences that aren’t so great on smaller screens.

After implementing a rough off-canvas approach wherein the user could click a button (“choose your doctor”), and an off-canvas “panel” would push in from the right of the screen, I started to second guess the accessibility of off-canvas approaches, and I also started to wonder if off-canvas was even the correct interaction and implementation for the problem we were trying to solve.

I was also dealing with something that was slightly different than an off-canvas “menu”, which is what the majority of tutorials around the web usually cover. Due to source order, I couldn’t easily wrap my off-canvas content in a container and wrap the non-off-canvas content in another to achieve that “push” effect that has become somewhat synonymous with off-canvas interactions. Cloning & re-inserting stuff with JS was an option, but one that didn’t feel like the best solution to me, either, because I had concerns about performance and perceived performance.

So, I started to dig into it a bit. My first step was to do a quick run-through with a screen reader, and I had some mixed results, so I took to Twitter to ask some questions. Then, I ended up having a great conversation with some of our friends including Dave Rupert, Todd Parker, and Dennis Gaebel. The result: off-canvas stuff can be done with accessibility in mind, and source order challenges can possibly be addressed via flexbox. Awesome.

Surprisingly, the next morning, I came across a post on Medium that very closely described our original interaction problem! It’s always interesting to see how others approach problems - especially when you’re trying to solve a similar (or the same problem). That post doesn’t go into the code that ultimately got implemented, but it does give a great overview of the decisions leading up to implementation.

As we build out more complex interfaces in a responsive way, we’ll likely continue to explore off-canvas content as a way to solve interface problems. Thanks to everyone who chimed in and helped me think through this! If anyone wants to talk more about this stuff, ping me on Twitter: @patrickfulton


Bearded.com Redesigned!

The new Bearded website is up! It’s a jaunty little two-pager – and a primarily static site, at that (not a standard approach for us). The whole thing was conceived of, written, designed, built, and tested in three weeks, during a pause in a couple of our client work obligations.

So why the rush? The new site is the absolute minimum viable product for Bearded, and the choice to do our site this way stands in stark contrast to the ambitious, comparatively large-scale new site we’d been chipping away at since late 2013.

Problem is, we came to realize that the big site we’d been so invested in no longer represented what Bearded does. We’d changed. Rather than focusing on full-stack, backend-heavy, soup to nuts projects, we’ve honed our focus to what we’re best at: strategy, design, front-end development, and training. More often than not these days, we’re collaborating with in-house teams at larger organizations, helping them with what we’re best at, and allowing them to do the parts they’re best at, too. This arrangement makes total sense for a group of our size, and we’ve been embracing it whole-heartedly.

Rather than trying to slowly steer our large, 80%-finished ship to different waters – we tossed it aside and built something small and light that does exactly what we need. It was a tough decision to make, but we couldn’t be happier with the results. As we have time, we’ll likely add more features and information. But for now it gets the message right, which is a pretty great start.

I’m constantly reminded of a Hemingway quote that came to me via Hillman Curtis’ book MTIV: “take out the good parts, and see if it still works.” If you like something too much to throw it away when it’s outlived its use, that’s a problem. No matter how enamored we might be with an idea, or a feature, or an implementation (or a whole site!), it’s good to step back occasionally and see if it still makes sense. And if not – to act. We did, and this is the result. Hope you like it! 


Bearded founder Matt Griffin will be speaking at the Digital PM Summit in Austin, Texas about client relationships and responsive web design process in October.

Everyone knows that the multi-device landscape and responsive design have made everything more complex. In his keynote, Matt Griffin will explore in detail the deliverables and techniques Bearded employs to get clients involved in our projects in positive ways right for the beginning, and keep projects running smoothly to the end.

Go get your tickets now before they’re all gone!


Let’s Make a Documentary About the Web!

Our documentary about the web, What Comes Next Is the Future, needs your help to be made!

We’ve got a heck of a line up for interviews, and big plans for how to make it awesome. But without some funding, we can’t afford to focus on it as a project and give it the time and attention it deserves. Wednesday is the last day that funding is open, so please spread the word and head on over and back the project!

Thanks y’all!