Matt Griffin
Matt Griffin is a designer and one of the founders of Bearded. He has a great love for letterpress printing, which he acquired while attending Indiana University in Bloomington, Indiana, where he received a BFA in Graphic Design. Matt is an avid advocate for collaboration in design, and has been published in A List Apart and .net magazine. You can follow Matt @elefontpress.
What was the best new implementation of RWD you saw in 2015, and was there a redesign that took your eye?
My favorite website of 2015 (responsive or otherwise) is the Chrome experiment featured on
https://events.google.com/io2015(you have to click on the little equalizer icon in the bottom right). When I first saw this site, I said aloud: “I don’t think I even know what web design is anymore!”
This is the kind of site that’s the perfect answer to complaints about early RWD being boxy and soulless. It’s a website, but it’s fun and playful. It’s a toy. It’s an experience. It’s the kind of thing that assures me that we’ll still be able to get excited about the webfive years from now.
BTW, if you’d told me ten years ago that my favorite site design would be done by Google, I would have told you that’s proof positive that you’re not a visitor from the future. So, uh … well done, Google!
What are 2 RWD Frameworks/Plugins/Shims/patterns that you always seem to go to?
We’ve been doing a lot of work in the last two years that’s focused on responsive websites that are much more application-y. What I mean by that is that they’re less of a passive content delivery system and constructed of more complicated workflows. What this tends to mean, under the surface of the UI, is that there are a lot of forms involved.
Lately I’m really into natural language forms to make those experiences more readable and pleasurable for users. For instance, at Bearded we’re currently working on a project that has a quiz builder for teachers. Rather than structuring a form with labels and inputs such that it reads:
“Grade: 1st grade; Subject: Math; Category: Geometry”
We’ve structured it as a sentence expressing what the user wants: “I need a quiz for [1st grade] [math] covering [geometry].”
One of the aspects I keep in the forefront of my mind is to make sure button text accurately expresses the action the user is taking. No one ever thinks of what they’re doing as “submitting.” And yet that’s exactly the text you find on most submit buttons. But usually more specific text (e.g. “create a new quiz” or “save” or “look it up”) is more appropriate and less distracting from the task at hand. It keeps a user from stopping at the end of a form and asking “submit? Is that what I want to do? What does that mean in this context?”
Anything we can do to make forms easier and more pleasurable is a boon to the web.
What is the one thing with sites you would like to see improved/developed in 2016?
Navigation patterns. I’m feeling pretty tired of familiar overlapping patterns like primary top-level navigation / secondary vertical-specific navigation / breadcrumbs / etc.
Particularly with large, content-heavy websites, I would love to see navigation get out of the way, become invisible, and yet still allow intuitive, natural, frustration-free ways for users to find what they need. Perhaps that’s a pipe dream, but I’d like to experience some new approaches that make it worth discarding well-known conventional patterns.
If you could offer 1 piece of advice around building responsively what would it be?
Take your inspiration from things outside the web. Whether they’re native mobile applications, desktop software, films, cartoons, architecture, novels – find the things you love from other parts of your life experience, and ask yourself “how could I do this on the web?” Then make it happen.
It’s so easy to just start rattling off technical limitations for why the web can’t do something. But it’s so much more fun to start from an idea that excites you, then see how close you can get to that ideal. Limitations be damned.
