Responsive Design Interview Series — My Answers To Some Responsive Questions

Posted: 24 Oct 2013 05:30 AM PDT

A couple months ago I had the privilege of being interviewed by Justin Avery as part of a collection of interviews with designers on the topic of responsive design. I say privileged given the other names in the collection and wondering how I could be considered part of a group that includes them.

People like Mark Boulton, Brad Frost, Laura Kalbag, Chris Coyier, Andy Clark, Jeremy Keith, and Sara Wachter-Boettcher to name but a small few. Somehow I was included as well.

Justin asked everyone the same few questions, with the occasional follow up questions and compiled all the responses along with some of his own thoughts in an ebook for $3.99. It’s an interesting book with diverse thoughts and opinions to similar questions.

Justin is also the person behind ResponsiveDesign.is and the responsive design weekly newsletter, which arrives, as you might expect, as a weekly email. You could probably read little more than the newsletter and be clued in to all that’s happening in the world of responsive design.

My Interview About Responsive Design

Justin was kind enough to let me republish his interview with me here so below are his questions and my answers. Justin told me not to hold back with my responses and you know me, I can talk a lot so it’s a long interview.

It’s all so new and requires a different mindset from what we did before, but look at how far we’ve come in a short time

Many of the other interviews have appeared in the weekly newsletter and are available on the site, though the collection together is easily worth the $3.99 to have them all in one PDF.

What was the best implementation of responsive web design you saw in 2013 and why?

This is a hard question for me to answer. I always have a hard time responding to questions about my favorite or what I think best. I don’t think there is such a thing as either. When I see a site I like for any reason, I’ll pause a moment and think about why I like it. Most of the time I’ll then move on to something else. Sometimes I’ll grab a screenshot or copy the URL. I never remember when I saw them and I resize my browser a lot less than you might think to test how responsive the page is.

However here are a few sites I like in part because of something they do responsively. They didn’t necessarily get created in 2013 or come to my attention in 2013. These first 2 sites I like for the same reasons

Both are responsive and neither does all sorts of fancy rearranging of their layout. Both are essentially single column layouts regardless of the device they’re seen in. They’re not typically what you think of when you think responsive, but I like both because of their simplicity. Neither site needs to grow past a single column and so a new layout isn’t forced just because the size of the browser can accommodate more. Sometimes I think designers (myself included) like to do something not because we should, but because we can.

Even more than the simplicity of both sites, I like the attention to detail in the type. Resize your browser and notice how the size of the type changes.

Information Architects has a great post about responsive typography and how the ideal font size depends on the viewers reading distance. We tend to hold our phones closer when reading so the font size of both sites is smaller at phone sizes. You don’t see a lot of responsive sites focusing on details like this. Some clearly do, but I think it’s still the exception rather than the rule.

When I come across a responsive site I like, it’s often not the whole site that attracts me, but specifically how it does one thing. That’s the case with David Bushell’s site. The site itself is great and David does a good job with responsive design in general. Why I like it though is the navigation. David implemented an off-canvas navigation pattern and at the time I came across his site I was looking to understand how to code off-canvas navigation. He wrote a tutorial for Smashing Magazine showing how he built it. I particularly like the final example from the article that uses transitions and transforms to bring the menu into place.

I’ve always liked Simon Collison’s site. It was one of the first responsive sites I came across and I’m always going back to take a look. The design itself is beautiful and Simon’s illustrations stand out. One of the things I like about the responsiveness is how some things you see on a widescreen aren’t there on a small screen.

The category and favorites navigation on the main blog page aren’t present when the site becomes a single column. All the content is still there, but some of the ways to get to it aren’t. We could have a healthy debate on whether or not it’s a good idea, but seeing it done taught me it’s ok not to include every element on a page at every size. It’s ok to present a more minimal, albeit fully functional design at one size, and then enhance that design as room allows.

Nick Jones has an interesting site. To access much of the content you have to click and drag with a mouse to scroll horizontally. Quite honestly it’s not the easiest thing to do on a widescreen browser. However, it works great on a mobile device where you simply swipe left and right. It makes me wonder what’s possible and how we can deliver that easy swipe on mobile devices while offering another way to move through the content when you don’t have the same touch capabilities.

One design that I believe is from 2013 is Microsoft’s redesign. I like it less for the specific design, though I think the guys at Paravel did a great job with the design in every aspect. I like it mainly because a company the size of Microsoft chose to design responsively. I think the site will help to take responsive design more mainstream where it won’t be just designers who know about it. It’s going to help bring an expectation that every site be designed responsively, which I think is the right approach for all sites.

One thing I should point out about all the designs above is that the experience, regardless of device, is great. That’s truly how you create the best responsive design. It’s not about getting this or that right. It’s about presenting a great experience to every person who visits, whether they visit on a phone, tablet, widescreen browser, or any other device imaginable. The best responsive designs are going to follow the same basic idea as the best designs always have. They’re going to provide a minimal experience that works for all, and get as many details right as possible.

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

I can’t recommend any responsive framework or plugin since I don’t use any. I don’t have anything against them, but I think using them tends to lead to more of the same. Your design decisions end up being made by someone else who’s never seen your project. I have looked at parts of frameworks like the navigational systems used by Foundation and Bootstrap in an effort to learn how they were built. From there I code my own responsive navigation.

I do use Scott Jehl’s respond.js polyfill on every responsive project. It adds support for media queries in IE6–8. I no longer support IE6 and IE7, but I think it’s too soon to drop support for IE8. I also use Remy Sharp’s html5shiv on every project. It’s not specifically for responsive design, of course, but I find it’s another I can’t live without.

Those are really the only two things I can’t live without at the moment.

What is the one thing with responsive web design you would like to see improved/developed in the near future?

Like most designers I’d like to see responsive image solutions improve. On the surface it seems so easy to deal with images. You set a max-width of 100% and a height of auto and technically you have responsive images. As soon as you begin working with images though, you start to see all the other issues like serving extremely large image files to devices on a 3g network. You try to fix that by creating multiple images of different sizes and serving the appropriate one to each device only to find every image is downloaded to every device.

Things like srcset and the picture element will help, but even then there will still be issues. I think the longer term solution is less images in general. Not that we won’t display pictures on websites, but where possible we’ll use more code. Ideally css will keep developing to give us more things like rounded corners and gradients and shadows. I think we’ll also have to adjust and make more use SVG.

These won’t solve the problems we face using bitmapped images on the web, but if we use less of those images we minimize the problem to some degree.

Beyond images, more sensors of any kind would be great. The better we can know the capabilities of a device the better we can provide a good experience for that device.

New design/development tools would also be great. Our present set of design tools weren’t made for a responsive world. We’re managing to work with them, but tools developed specifically for a responsive workflow would be welcome. We’re already seeing the early stages of the next wave of tools. Adobe has developed a number of different tools and I’m excited about Macaw when it’s ready for use.

I’m not worried though. Look back over the last couple of years and think how far we’ve come designing responsive sites. It’s all so new and requires a different mindset from what we did before, but look at how far we’ve come in a short time. I have no doubt we’ll see a lot more improvement over the next few years.

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

I’ll assume I’m giving this advice to someone new to responsive design. I’d say not to feel overwhelmed. More than anything responsive design is a different way of thinking about design. The technologies behind responsive design (flexible layouts, flexible media, media queries) are actually pretty easy to use. What’s more difficult is changing your thinking in how you design.

You have to be more aware of the flexibility of the web from the moment you start sketching. You have to understand how much less control you really have over your design in order to hold on to the control you do have. Once you accept this, you learn to see it as a good thing. Instead of worrying about what size a browser is open to, you instead think solely about your content and you create systems to ensure it works and looks great no matter what device is used to access it.

If you’re just starting out in responsive design don’t stress too much about some of the details right away. Just build a site keeping in mind the 3 tenets of responsive design.

Flexible layouts — stop using px and start using % for horizontal measurements and ems for vertical measurements.
Flexible media — set img: max-width: 100%; height: auto and you’ve done the basics. You can worry about the issues of responsive media after you’ve built a few responsive sites.
Media queries — don’t obsess over what breakpoints to use. The major changes in your design will generally occur when you add or remove a column in the layout. Think about how the design will look as a single column, as two columns, and possibly three or four columns if necessary. Develop whichever layout you want first and then adjust the width of your browser to see where your design falls apart. See where it needs to add or remove a column or where something like your navigation needs to be reworked.

Dave Rupert built an indispensable tool called FitWeird. It’s a bookmarklet that displays the size of your viewport. You adjust your browser and it tells you how wide the browser is open. When you notice your layout needs to change, see how wide it’s open, set a breakpoint, and write some css until the layout works again.

It’ll all come with practice. After building a couple or three responsive sites, many of the difficulties you encounter on the first responsive site won’t be difficulties any more. The main challenge is in changing the way you think about design.

Complete List of Interviewees

Here’s a complete list of all the people interviewed, that aren’t named me. I’m sure you’ll recognize many if not all.

Chris Coyier
Dave Rupert
Paul Robert Lloyd
Laura Kalbag
Brad Frost
Andy Clark
Jordan Moore
Stu Robinson
Aaron Gustafson
Matt Stow
Ben Callahan
Matt Griffin
Trent Walton
Jeremy Keith
Tim Kadlec
Mat Marquis
Daniel Mall
Val Head
Anna & Sandijs from Froot
Mark Boulton
Sara Wachter-Boettcher
John Allsopp
Luke Brooker
Tyson Matanich
Mark Hayes

Again it’s an honor to be included in such a distinguished list of names. Thanks for including me Justin.

If you liked this post, consider buying my book Design Fundamentals

The post Responsive Design Interview Series — My Answers To Some Responsive Questions appeared first on Vanseo Design.

cool links

Friday, 25 October 2013