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…
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.
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.
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!
Brad’s slides from his brilliant talk and release of the pattern lab.
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.
Richard discussed best practices for typography when having to adapt your designs for multiple devices and browsers.
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.
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.
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.
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.
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
A set of small, responsive CSS modules that you can use in every web project.
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?
Screensiz.es is a nifty little database of screen specifications for the most popular devices on the market.
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.
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.
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 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.