Responsive Interview with Stephen Hay

Stephen Hay is known as the guy who wrote the book on responsive design… responsive design workflow that is. Stephen’s approach to building a mobile first responsive site starting from within the browser with real content is an approach we should all mirror. I’m delighted that he found some time to share some of his ideas with us in this interview.

Stephen Hay RWD Interview
Stephen Hay looking very responsive.

For those readers that might not know who you are can you give us a bit of an overview as to who you are and what you do?

I find job titles insufficient, especially in our industry. So it might come close to say I’m a user experience designer and consultant, since the work I do varies per project but always influences the user experience (that applies to many people in this industry). I help my clients with various front-end design and development concerns, advise them on how to approach their projects and I often advise and/or help on design and implementation. My knowledge is almost strictly front-end, and my work often involves information architecture, interaction design and visual design or any combination thereof. I also like to code on projects when I can. I love HTML and CSS, and I know just enough JavaScript to bring harm to others.

I also wrote a book called Responsive Design Workflow (Peachpit/New Riders, 2013) in which I discuss the disadvantages of traditional design workflow within the context of responsive design and offer an alternative approach.

The Web is inherently platform-agnostic, and the focus on this multi-platform aspect for my clients has led me to do quite a bit of work with responsive design.

What was the best implementation of responsive web design you’ve seen in 2013 and why?

I’m quite fond of the gov.uk website (although I’m cheating because I believe that’s from 2012), but it’s not necessarily because of its responsiveness, although that’s a part of it. It’s the whole package: containing only that which is necessary, increasing accessibility through recognizing the importance of structured content without a lot of extraneous stuff. It’s visually non-exciting, which people might criticize until they find what they’re looking for quickly. I’ve done a lot of work for large government organisations, so the fact that the site launched with its beautiful simplicity through all the layers of stakeholders it must have had is something I find particularly interesting, and nothing short of amazing. And yeah, it’s responsive.

I find that curious: we tend to look at responsive sites and judge them on how they change at major breakpoints, how type scales, navigation patterns used, performance and such. And I think a good responsive site is simply a good website that is also responsive. If a site is a pain to use but it is wonderfully responsive, then it’s still a pain to use and responsiveness has no bearing on that fact. Responsiveness is ultimately a single facet of a successful website.

What are two responsive web design frameworks or plugins that you recommend or couldn’t live without?

I’m averse to most frameworks, which create dependency trees, both in tools and in knowledge. Therefore, I can live without all of them. That said, I tend to find anything Scott Jehl (of respond.js fame) writes to be useful, and he always seems quite clear on the fleeting nature of his solutions; he’s only writing them to fit a temporary need. His work is well thought through and full of caveats that prove it.

This past year I bit the bullet and started using Sass. While not a framework, a preprocessor like Sass can have a significant time-saving impact on designers working responsively. The key for me is not to become Sass-dependent. I do that by using as little of it as possible and tailoring its use to each individual project.

What is the one thing with responsive web design you would like to see improved?

Handling of images.

If you could offer one piece of advice around responsive web design, what would it be?

Start with structured content. Any site or app can be distilled down to structured content in the form of plain HTML. Start there and build your way up. It’s the surest way to reach the most browsers and devices possible. Really consider every little bit you add to this basic structured content and ask yourself, “is this really necessary?”, and be aware of which people your techniques are excluding.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.