Responsive Design Interview with Tyson Matanich

RWD Interview with Tyson Matanich

Welcome to our special Christmas break edition of Responsive Design Weekly. Today we feature an interview with Tyson Matanich, one of our interviewees from our responsive interview ebook .

Tyson works as a developer on Microsoft’s homepage and its underlying CMS. He helped lead the redesign of Microsoft’s homepage and has recently wrote an interesting article on the lack of element queries for Smashing Magazine.

But before we get into the interview with Tyson I wanted to remind you about an exciting conference coming up in Australia next year, Respond Conference. We’re very happy to be a sponsored parter and have been fortunate to have met several of the speakers before… it will be brilliant.

RESPOND: Festival of Responsive Web Design in Sydney on February 4-5

Two days of learning, connecting and inspiration with Ethan Marcotte, Brad Frost and Jason Grigsby.

  • Masterclass, Feb 4: dive deep into atomic design and responsive patterns with Brad Frost.
  • Conference, Feb 5: a full day with the experts on all things responsive design and development.

Just $549 for either day with the code RDWEEKLY
Respond Conference<

// Sponsor

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

This is such a difficult question as there are so many inspiring designs coming out every day and from every niche, whether it be small start-ups or large corporations. So many great ideas by such creative people.

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

Picturefill is a responsive image solution that pollyfills the proposed picture element. The picture element has tons of potential and is, in my opinion, how the img element should have been spec’d in the first place (like video and audio elements). Expanding on Scott Jehl’s picturefill, I created a branch which adds support for the following features:

  • Allows images to load before the DOM is ready or after the page loads
  • Allows you to control if images get swapped as the viewport gets larger and/or smaller
  • Waits for the new image to be downloaded before swapping

This one’s dead simple and provides quick access to the CSS viewport’s actual dimensions. Most scripts and plugins I’ve found return the wrong viewport size when scrollbars are visible (learn more). ViewportTester is a bookmarklet that displays the actual CSS viewport size. The script injects over 8,000 media queries to ensure accurate viewport reporting.

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

Element queries
Viewport media queries are one of the most important concepts of responsive web design at the moment. While media queries get the job done, they don’t allow us to build truly modular fluid designs. Element queries fill many of the gaps and have a lot of potential; unfortunately, they aren’t spec’d or natively supported by browsers. To experiment with the concept, I wrote a script that provides basic support for element queries and is available on GitHub for your enjoyment.

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

Design for content consumption instead of specific devices sizes. There are so many sites creating breakpoints at popular device sizes instead of allowing the content to inform these breakpoints naturally. Designing and testing with a narrowed focus may save time; however, it doesn’t account for change in popularity or the vast continuum of sizes. Remember, the Web is about content not pixels.

That’s all for this week, it’s a brief one but something to keep you busy while you’re still digesting your xmas day lunch.
The little man had a great day on xmas but it was all too much excitement for him and he was out for the count by 6pm surround by lots of books and clothes, we might wrap up a bunch of the presents and give them to him for his birthday as well (he’ll never know ;)

See you next year!

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>