Responsive Interview with Mark Hayes

Welcome to another responsive week!  This week I’m on the road for work so instead of the regular links I’m going to feature one of our interview series. This weeks interview is with Mark Hayes, one of the clever folk from Zurb (the team that create the Foundation Framework).

Mark is an Engineer at ZURB, but he wears many hats. Lately his days are spent working on Foundation, a ZURB Apps product suite, working on Playground pieces, and firing Nerf darts at unsuspecting victims.


Start the New Year Right! Learn Responsive Web Design for Free!

This 12 lesson, self-paced course will teach you best practices for building responsive websites including: how to design using flexible grids; how to deploy fluid media, responsive images and responsive typography; optimal responsive web design workflows; and much more! Enroll now!
Respond Conference


For those of us that don’t know who you are could you give us a bit of background about what you do and how you ended up at Zurb.

I was born and raised in Elk Grove (near Sacramento, CA)  and was always interested in working with a bunch of talented graphic designers. One of my mutual friends put me in contact with Matt Kelly, now one of our partners. And after hearing more about ZURB’s vision for world domination, I was sold. Despite having my zipper down during my entire interview, I managed to pass the ZURBian gauntlet and get hired!

I’m not going to lie, I’ve been using Foundation since the early stages of version 2 and it is still my preferred Framework if I’m doing any prototyping work (it’s also behind theresponsivedesignweekly.com design).

How did Foundation come about?

Prior to version 2, we were already using Foundation for all of our internal client projects. It was actually called the “ZURB Style Guide” back in the early days and it wasn’t even responsive. It was a fixed grid at the time. When smartphones really started taking off, we knew that responsive web design was going to play an important part in design for the foreseeable future. However, at the time, there wasn’t a whole lot of resources available to help build these responsive sites.

We also had a brainstorming session to come up with a mascot. I forget most of the ideas that came out of the brainstorm, but somehow one of our designers mentioned a yeti and it seemed so ridiculously awesome at the time that we just rolled with it.Everyone did sketches1, even our Chief Instigator Bryan, and we had our mascot!

There are a lot of other Frameworks out there in the mix. If I banned you from using Foundation on your next web project what would you do? 

It would be very frustrating, that’s for sure. I would probably end up hand coding most of what’s built into Foundation, but I’m guessing it wouldn’t be nearly as battle tested across all the possible combinations of mobile devices. So, undoubtedly, I would either start pulling out my hair or see my hair become lightly salted from the stress.

You have recently undergone another iteration of Foundation, what are the kinds of things you’re making changes to and what is driving those changes? 

Right now, we’re focusing on making sure that Foundation works flawlessly on as many mobile devices as possible. We’re also focusing on performance issues and making sure that the mobile experience is just as enjoyable as the desktop experience. The main driver behind these changes are latency and bandwidth issues that are still a big problem for mobile phones.

The work you have been doing is making it easier for everyone to go responsive. Where do you see the future of the responsive web and what things do you think are still missing?

One of the biggest hurdles in the responsive design world is that it’s still pretty new. There’s been a lot of time to develop patterns that work well on desktops. However, when thinking of the mobile experience, it’s not uncommon to try to shoehorn desktop components into a mobile device. Mobile devices provide lots of constraints due to screen size, bandwidth issues, etc. However, there’s also a lot of interesting opportunities available that need to be designed for.

The biggest thing missing right now is a solid set of established design patterns for phones. We’re still in that awkward phase of figuring things out! It’s exciting though, there’s so much room to shape the future of the web at this point in time!

Sometimes I hear the argument that Frameworks are too heavy for production sites. Do you think this is a problem? 

I don’t agree with this statement, at least when it comes to Foundation. Sure there’s lot of stuff available in Foundation, but most users won’t use EVERY component. The way we’ve designed Foundation is to enable people to pick and choose what they want to include and exclude the rest. When pushing a site to production, it’s important to only include the components that are actually used and take care of basic production needs like compressing/zipping assets, creating sprites, etc.

Alright, I won’t hound you any more about Foundation :)

Having seen probably hundreds (if not thousands) of responsive sites what is your favourite implementation of responsive design and why?

Pretty much everything on that site is a good example. However I have a special place in my heart for this one:

http://www.designerpawssalon.com/gallery/competition

We’ve been working on curating some of our favorites here: http://zurb.com/responsive

If someone is beginning their new responsive site next week what is one piece of advice you would give them?

This may be a general concept, but learning how to sketch and wireframe before you go straight to code is super helpful. Put together a solid layout that makes sense and getting feedback on it early is going to pay huge dividends in the long run.

Thanks for being part of the series. How can people hire you, find our more information, follow you etc etc?

The best place to reach me is via @mhayes on Twitter or github.com/mhayes. Be warning that I say “Happy coding” and “Cheers” a lot and am looking for new closing lines. Feel free to reach out with a witty comment or just to say hello.


That’s all for this week. I’ve got a tonne of links saved from this week so next week is going to be one to look out for.

See you next week!

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>