Responsive Design Weekly #59

Pattern-Lab-Responsive-Design-Brad-Frost

Hey there and welcome to another edition of responsive design weekly.

This week’s images comes from a recent presentation from Brad Frost at the Beyod Tellerrand conference. I won’t go into the details here because you can read all about it in the links below…. but it’s pretty awesome.

As this newsletter hits your inbox I will be preparing to head to the net awards.  I’m super chuffed to be able to attend and I wanted to take this opportunity and say thank you for voting for the Am I Responsive tool for side project of the year. I’m really excited to finally be meeting a lot of the folks that have contributed both to the weekly links via their articles or the interview series, and of course all of the other nominees.

Alrighty then, lets get going…

Headline

Pattern Lab

Brad has kicked some serious butt again with this Pattern Lab. Launched at his latest talk (Beyond Tellerrand) Brad has a refreshing way of approaching webpages through atoms, molecules, organisms, templates and pages.

I’m very excited that Brad is touching down in London shortly and I’ll be doing my utmost to buy him a beer from all of us to say thanks for all his hard work in the community.

Responsive Interview with Daniel Mall

This week we were lucky enough to get a hold of the brilliant Daniel Mall for another in our series of responsive interviews.

We’re going to be putting together an ebook containing all of our interviews with a few added treats that you can purchase and download. Of course all of the content will still be readily available on the site, but this is a chance to get it in one package and help support the weekly newsletter. More about that soon.


Our Sponsor

It’s Time To Move Beyond The Desktop — Save $100, Register Now!

Join 200 other mobile website designers and developers at BDConf in San Diego for two days of mobile inspiration and a day of optional workshops. Speakers include Luke Wroblewski, Ilya Grigorik, Divya Manian, Jason Grigsby, Eric Bidelman & more!
Use discount code SD13RDW & save $100 — Register today!

Breaking Development Conference

Articles

Atomic design

Brad’s slides from his brilliant talk and release of the pattern lab.

Atomic Design: Some Thoughts and One Example

One of the conference attendee’s loved Brads talk so much that he decided to write a little extension article with some examples. Nice work.

Typography in Responsive Web Design

Richard discussed best practices for typography when having to adapt your designs for multiple devices and browsers.

Responsive Web Design Easter Egg

This week the article written by @beep ticked over to 3 years old. Did you notice the easter egg plated in the story all those years ago? Check out this video to see exactly what we’re talking about.

The State Of Responsive Web Design

In this article SM look at what is currently possible, what will be possible in the future using what are not yet standardised properties (such as CSS Level 4 and HTML5 APIS), and what still needs to be improved. This article is not exhaustive, they don’t go deep into each technique, but you’ll have enough links and knowledge to explore further by yourself.

Designing (and converting) for multiple mobile densities

I love the guys at teehan+lax, they always seem to come up with fun ways to help solve problems. Here they take a look at each of the ‘retina-ish’ displays and look at the scaling for images, in both directions and across every step. Brilliant.

Adobe Edge Inspect vs Ghostlab

A comparison between testing responsive designs across devices.
When working on responsive sites, I generally have my 3rd-gen iPad, my iPhone 4S and a Nook Color running Android in front of me. And for good measure, another Macbook running Windows 7 with Internet Explorer. The real pain is loading up the same page on every device, then having to go back and refresh them all every time you make a change, which is usually every minute or two.

Using JavaScript to estimate connection speed

An item very high up on the wish list for people building responsive sites is information about connection speed. This information is not made available to us by browsers but, by using JavaScript and timing information in the page, we can estimate it. Once we have this information we can then selectively load larger assets such as images.

Designing for the Responsive, Retina-Friendly Web

Sarah Parmenter talked about the changes responsive Web design requires of Web designers. Here’s Luke Wroblewski’s notes from her talk on Responsive Design Workflow


Frameworks, Tutorials and Tools

FRAMEWORKS

Pure

A set of small, responsive CSS modules that you can use in every web project.

TUTORIALS

Text-align: Justify and RWD

Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?

TOOLS

Screensiz.es

Screensiz.es is a nifty little database of screen specifications for the most popular devices on the market.

The REM Fallback with Sass or LESS

Chris Burnell, one of the front end devs I work with, is rebuilding his website and I happened to ask if he was using REM’s over EM’s or pixels (current has pixels). After a quick check of caniuse.com/rem it turns out that REMs have a massive coverage of current browsers. It’s more of a techy blog so IE8 support isn’t important, but if it is to you this is a great SASS mixin for a pixel fallback.


Feature Sites

Hardly Code

Creative Director Rick Murphy knew that he had to build a site that was both contemporary and mobile-friendly. The flat style illustration complements both. It’s a great example of where visual design meets mobile-first considerations.


Thanks everyone for reading this weeks newsletter. Wish me luck in the awards, although I’m going to go out on a ledge and say the winner will be Pastry Box Projectwith Sidebar.io coming in second.

As always, if you have any articles that you think should be included make sure you reply to this email or shoot me a tweet and let me know.

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>