Responsive Interview with Stu Robson & Jordan Moore

Stu Robson & Jordan Moore

Welcome to week four of the responsive design interview series. Each week we ask our two guests the same four questions about Responsive Design and listen intently with what they have to say.

It’s back to the UK this week as we start off off with Stu Robson in England before taking a trip across to Northern Ireland to hear what Jordan Moore has to say.

Lets get started!

Stu Robson

Stu Robson is a freelance front end developer based in the UK. Stu was one of our first contributors to the weekly newsletter after he came up with the RWD Calculator and he’s been featured quite a few times since. You can find his writings over at Always Twisted and get in touch with him @StuRobson.

What was the best implementation of RWD you saw in 2012 and why?

I know it’s a site from ‘within the industry’, but I really liked the 2012 dconstruct website –  my reasons are purely for the techniques applied and the optimisation that was really thought about and discussed (perhaps) for the first time in responsive web design.

What are 2 RWD Frameworks/Plugins/Shims/etc that you recommend/couldn’t live without?

Not really something necessarily to do with RWD but pre-processors are killer. The one key feature that does apply to RWD is there ability to bubble up media queries. So you can have your media queries within your selector rather than separately. This makes for quick refactoring and allows for true RWD where you’re designing for the content and not the device because you can just create a quick media query for any item. The verbose nature of this is easily crunched up when you gzip your CSS too.

What is the one thing with RWD you would like to see improved/developed in 2013?

I guess it’s not really part of responsive web design but as web design as whole. We (as an industry as a whole) are only starting to see what performance hits you get if you build sloppily. Serving a 4mb site to a mobile device (be it on EDGE/3G/Wifi or LTE) is bad. It’s starting to gain a little traction and I’d love 2013 be the year where performance as a whole is discussed a little more. We’ve forgotten the days when whole books were written about image optimisation and are throwing as much down the pipe as we can. We should stop that, take stock and see how we can make it great and blistering fast on a device such as a Galaxy II which in turn would help performance on the ‘desktop’.

If you could offer 1 piece of advice around rwd what would it be?

Test it. Test your design on whatever you can grab hold of. If you’ve only got an iPhone that’s ok. Perhaps save up and buy a cheap 2nd hand Android 2.3 device. Just don’t think that testing in the latest version of Canary and squeezing it to 320px is suffice it’s not. Testing on your phone, your friends tablet, your neighbours phablet will show you that link to buy an item is too small and you can’t read the footer links. But you know that.

Jordan Moore

Jordan Moore is a web designer and front end developer from Northern Ireland in the sunny seaside town of Bangor (apparently they get about one week of sunshine per year). He has made a couple of awesome lab experiments on responsive design and has a steady stream of well written articles on his blog and twitter.

What was the best implementation of RWD you saw in 2012 and why?

My reflex reaction is to say “The Great Discontent!” although it’s hard to believe it launched over a year ago – it still feels so fresh.
I’ll pick Red Bull Music Academy – there are some well executed design pattern translations happening across different screen sizes with great content to match. Also I feel Dan Cederholm deserves a mention for the mammoth task of not only successfully retrofitting responsive layouts into Dribbble, but the continuous improvements to the service, like high resolution images for capable displays. He is a master of his craft.

What are 2 RWD Frameworks/Plugins/Shims/etc that you recommend/couldn’t live without?

I usually tend to avoid frameworks for layout as they tend to lead me down paths I don’t want to go with my code. They usually try to tie you to their layout systems which can be restrictive. Having co-written the Goldilocks Approach with Chris Armstrong I am a little bit biased towards it as a way of setting breakpoints based on the optimal reading length – a value which, unlike device dimensions, isn’t going to change. It’s a boilerplate that stays out of the way of your code with sensible defaults to ease you into a new project. I usually combine the Goldilocks Approach with Jeremy Keith’s Conditional CSS to serve specific scripts for specific breakpoints specified in one place – the CSS.

What is the one thing with RWD you would like to see improved/developed in 2013?

Performance. It’s the forgotten component in the ever-expanding  practice of responsive web design. I believe page weight should be a feature  – a bragging right. Tim Kadlec recently wrote about the dangers of bad implementations of responsive web design giving the methodology a bad name. Also I would like to see browser vendors adopt the Network Information API so we can make better informed decisions about the media we serve by knowing a little more about the user’s context.

If you could offer 1 piece of advice around rwd what would it be?

Apart from the aforementioned performance considerations I would advise people to work smart with responsive web design. Use live style guides instead of flat compositions, stay true to the ebb and flow of the web. The web is responsive out of the box – an unstyled HTML page will fit the context it is retrieved from. Add what you need from there practicing a mobile first approach and you can’t go far wrong. Oh and keep pushing the methodology, I hear so many people saying responsive projects are basic and uninspired – rubbish. We are in a similar phase when we stopped using tables for layout and we were still finding our feet with CSS. The next wave of responsive designs will be astounding.

Wrapping up…

That’s it for this week, a big thanks to Stu and Jordon for their time. Next week we have Aaron Gustafson and Matt Stow sharing their thoughts on responsive design.

Thanks for subscribing!

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>