Responsive Design Weekly #78

NYC-RWD Site

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….

Headline

Seven Habits of Highly Effective Media Queries

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.

Proposal for RespImg Syntax

A proposal that is different from SRCSET and Picture from Tab Atkins. What kind of frenzy has this whipped up?

Now with Responsive!

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.

Sponsor

Responsive Interview Series E-Book

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.

Only $3.99

Cool Design Jobs - Get Hired!

Articles

Flexbox First

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.

Google Hates Your Mobile Website (Here’s How to Fix It)

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.

A More Flexible Development Framework

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

Responsive web design tips from BBC News

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.

Growing Mobile Revenue by 258%

Some more great figures on how going responsive can improve your conversion rates

Biggest Mistake in Responsive Design

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.

Carousel-Based Web Design.

Stephen Hay takes a fun poke at carousels in the responsive web world.

Addressing The Responsive Images Performance Problem: A Case Study

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.

Responsive email design: 10 great examples

I can’t believe we’re not featured ;)

Why responsive email design is more important than ever

How Do Responsive Websites Affect Advertising Dollars?

Responsive Website, Native Apps or what?

Page Height, Scrolling and Responsive Web Design


Responsive Images

Responsive Images Meetup – A Subjective Summary

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.

Retina Images That Respond & Responsive Retinas Strike Back

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.

ResponsiveImagesCG/x-picture

Responsive Images within WordPress: Meet Hammy

Responsive image workflow

Resources

Tools for image optimization

A great round up of tools for website optimisation, of course an important part of any responsive toolkit.

responsive-elements

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.

PocketGrid – Pure CSS responsive and semantic grid system

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.

Meta Width Device Width

This little tool gives you information about your device and viewport width.

http-client-hints

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.

Tutorial

Mobile First With Bootstrap 3

Get started with Bootstrap 3 with this informative introduction tutorial from tutsplus.

jQuery One Page Scroll

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.

Break The Wrist And Walk Away: Responsive Design And Bootstrap 3

A simple walkthrough for those looking to get started with the latest version of Bootstrap (3).

Lightening Your Responsive Website Design With RESS

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.

Drop-Down Navigation: Responsive and Touch-Friendly


Codepen of the week

Responsive Form

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.


Jobs

Senior Digital Designer

Working with the development team, designing and building the web and mobile interfaces for the next generation of products.

Responsive News — Come Work with Us!

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 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 $3.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=""> <strike> <strong>