Hi there and welcome to another responsive design week! This week we’ve returned to a bit of normality as the night feeds and nappy changes are now done out of instinct and habit rather than fear and loathing. For those of you that are wondering, Noah is doing GREAT and weighed in as a chubby little baby this morning. For those of you that don’t care…. the links are only a few moments away.
We’ve got lots to get through this week so please excuse the fact that not everything is going to have a description. Here goes….
An excerpt article from a talk Brad Frost gave at the Mobile UX Summit last month. I think it’s amazing that although the media query is the secret sauce when it comes to RWD it’s often ignored and not enough time is spent looking at how they should be constructed and for what purpose.
A proposal that is different from SRCSET and Picture from Tab Atkins. What kind of frenzy has this whipped up?
The best thing about Dans move across to the responsive side, aside from this awesome article looking at requests, page weight and page load times… is the open navigation icon on small viewports. Very clever.
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 a ton too.
This week I saw some talk about going with a Flexbox first approach to layout and design, and then falling back to fixing non-supportive broswers with .no-flexbox. This came with a lot of commenting flack to say anything that is supported only in IE11 is a pipe dream.
This article is something we’ve seen a bit of, but what I love is the comments. The first comment is a great round up of issues with the article and reasons why they’re issues.
If your a fan of Frameworks (don’t be embarrassed, I am too) then it’s worth reading some of the pitfalls when using their generic classes. Further to Colm’s thoughts these days Foundation comes with a series of variables within the scss files that allow you to control the CSS rather than having to create additonal styles to over-ride them, hopefully that helps some of his concerns
The BBC are doing some great work moving towards a full responsive site. Their coverage of the the Olympics was responsive and they’ve identified some great approaches and work arounds.
Some more great figures on how going responsive can improve your conversion rates
Rosenfeld media asked Sara what she thought about mistakes in RWD in the lead up to her two day course in October. We also asked Sara some questions about RWD a little while ago.
Stephen Hay takes a fun poke at carousels in the responsive web world.
A really interesting look into the current responsive image solutions from Smashing Magazine. This article addresses the requirements before looking into the real world implementations and where things might fall down depending on your approach.
I can’t believe we’re not featured ;)
A great round up from Guy after the Responsive images meetup. I’m still getting my head around where we’re at with this after 3 weeks out of action… I think i missed the boat.
Two great posts about responsive retina images this week from Drew Wilson. This first post had some great responses and queries around using JS and double download problems, so the second explains the situation a little better and helps point out the problems/flaws.
A great round up of tools for website optimisation, of course an important part of any responsive toolkit.
Another example of a responsive element query pollyfill. This small jQuery library allows you to update the layout/css of an element depending on the size of its parent. Hoorah! Element queries FTW.
Arnaud left this as a comment after our 68th edition. It’s compatible with Bootstrap (although not sure why you’d use it as well as bootstrap) and supported fro IE6 and up, plus it weighs in less thank 1kb.
This little tool gives you information about your device and viewport width.
This tool provides you with 3 hints; device pixel ratio, device width, and device height; and it has been developed as a polyfill for the proposed client hints draft.
Get started with Bootstrap 3 with this informative introduction tutorial from tutsplus.
One page scrolling sites, like the iphone5s site, are a good web presentation tool. I’m doing something similar with out website bidding process which means the Client could view it on any device, perfect RWD solution.
A simple walkthrough for those looking to get started with the latest version of Bootstrap (3).
This article explains how to use RESS (responsive design with server-side components) to make significant performance and reach improvements to a website for both mobile and desktop devices alike.
Codepen of the week
This weeks pen is a simple responsive form by Chris Coyier. It won’t win any design awards, but I bet you’ve got a form on your site that could do with this kind of love.
Working with the development team, designing and building the web and mobile interfaces for the next generation of products.
The BBC Responsive News team are hiring for three positions. Web Developer, Lead Web Developer, and Senior Software Engineer.
Do you have a position your trying to fill? Get in touch and run an ad through the newsletter.
That’s all for this week, and just in the nick-of-time as crys of a damp diaper are heard. I’m glad to be back and I hope you have enjoyed the stand-in newsletters during the adjustment period.
As always if you’ve written an article built a tool make sure you reply to this email or shoot me a tweet and let me know.
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 a
n 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.