Responsive Design Weekly #212

Welcome to edition #212

I’m still enjoying my two weeks off to get to know my new family so I’ll keep this short and sharp. Everyone is doing well, thank you for the emails of congratulations (and advice ;).


The Ideal Design Workflow

It has taken quite a few years but it seems that finally someone has cracked the perfect approach to design workflow.

Introducing Drizzle

Drizzle is Cloud Four’s tool for generating pattern libraries and style guides. It started as a fork of Fabricator, incorporating features based on our team’s recent project needs and other style guides they admired.

Our Sponsor

Shape Tech Expo for mobile app developers

Shape: An AT&T Tech Expo

Shape is an AT&T Tech Expo for mobile app developers, video content creators, and tech professionals and enthusiasts. Explore the possibilities of technology and innovation throughout scenic AT&T Park in San Francisco on Friday, July 15 and Saturday, July 16.

Register now

Sponsor RWD Weekly and reach more than 28,088 responsive champions


CSS at BBC Sport (Part 1)

A terrific introductory article on the approach the BBC Sports team have taken to their CSS Architecture.

Why Switching to HTTPS Will Make Your Analytics Better

Hey look, another excellent reason why you should be moving to HTTPS!!!
When a visitor travels from an HTTPS site to an HTTP site via a link, the referrer is stripped, and Google Analytics reports the traffic as “direct”. But, a journey from an HTTPS site to another HTTPS site WILL carry the referral data.

Developing in the Open

How foundation has gone through the process of being an internal tool to becoming an open source project with more than 1000 contributors.

Don’t use iOS meta tags irresponsibly in your Progressive Web Apps

There are a tonne of good reasons why adding the web app metatag on your web app could be a bad user experience

HTTPS for GitHub Pages

Github are upping their game for anyone with a site and will allow people to run them over HTTPS… hoorah!

Page speed will soon affect mobile rankings

Google has revealed that it is going to use mobile page speed as a key metric for the ranking of mobile pages in search engine results in the future…. time to start paying attention to those load times

Progressive web apps – let’s not repeat the errors from the beginning of responsive web design

When RWD first arrived the most popular email request I received was “How do I make the design respond exactly to an iphone.” We now know this was the wrong approach, so why are we looking to repeat the same kind of mistakes with Progressive Web Apps (PWAs).

Computer says NO to HTML5 document outline

When HTML5 first started to do the rounds there was the idea that you could have more than one H1 on a page. The first might be within the <header> element, and then another within each use of the <section> element that is nested. Now this has been updated and you need to revert back to h1-h6 as we did before due to lack of implementation.

Taking an online book offline

I was so happy to come across this article as I’m in the throws of doing the exact same thing with another book. The book I’m working on has a few more images then Jeremy’s so I want to provide the user with a switch to include images in their offline copy of the book as well.

Progressively less progressive


Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction.

Breaking Out With Viewport Units and Calc

This is a neat approach for anyone that wants tighter columns for their paragraphs and full bleed on their images.

Intro to Flexbox

Arelia’s presentation on the basics of Flexbox

Molten Leading in CSS

connecting the relationship between font size, line length and line height.

Tools & Resources

drizzle: A streamlined tool for developing, documenting and presenting UI pattern libraries.

From our headline post this week, this is Cloud Fours streamlined tool for developing, documenting and presenting UI pattern libraries.

Responsive Retrofitting VS Mobile First Responsive Strategy Illustration

A free illustration showing the difference between retrofitting an existing design responsively and building mobile first.

In conversation with Ethan Marcotte


Thanks for subscribing, I hope you managed to pick up a few new nuggets of information this week and we’ll be back to our regular newsletters again next week.



P.S.  I had a note from Cotton Bureau to say the RWD shirt has 60 requests and will be going back out to print again shortly. It should be available soon so if you’re interested make sure you sign up.

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>