Hello and welcome to edition #72 of responsive design weekly. This week we’re taking a look at a rather radical approach to DOM manipulation, checking out the changes made to Pattern Lab and looking into two new(ish) responsive image solutions.
I’m really excited to let you know that we’ve got some great interviews in the works, but there’s more on that at the bottom of this weeks email.
This weeks’ image is from CSS Conf EU who are using some interesting transitions to spice up the pages a little more… all CSS transitions of course.
Lets check out this weeks links.
This week Brad Frost presented a do-over of his Atomic Design theory at An Event Apart. Check out this article for some background and then check out the links below on what LukeW had to say as well as Dave Olsen’s overview of the latest changes.
Dave Olsen has done a fantastic job overhauling the Pattern Lab and moving from a PHP dependency to a non back-end dependent language. It still contains a PHP static website builder but you can quite easily spin your own up in Node.js, Ruby, or whatever you want. There’s a lot more planned to be done and they’re both looking to you to provide some feedback as to what you want to see.
At CSSconf.eu, 200 of the best front-end developers and designers will gather in Berlin, Germany for a one track, one day conference that will showcase the future of CSS development. Check out our line-up of fantastic speakers and their cutting-edge talks at http://cssconf.eu
Our last batch of tickets is on sale now! See you in Berlin!
Brad is busy this week ;) While he’s not presenting at AEAC he’s giving us a few great resources to learn move about Media Queries. If you haven’t read these articles or bought the book, you should.
Notes from Jeremy Keith’s presentation at the Chicago Event Apart from LukeW about how we need to build our websites with the long game in mind. Future Friendly.
A really in-depth post about a redesign approach to the Mojo Motors website. This looks at how they approached the UX, sketching, initial mockups and wireframes and the tools used. This is only part one, so there will be more great stuff on the way.
An article that looks at removing the sometimes lagging double tap from responsively designed sites. Should it be part of the meta tag or element specific?
A great discussion in the Chromium.org forums about Blink Development and the ideas around implementing something similar (or the same) as Web-Kit’s src-set.
You know that we love our own interview series, but this week Murad from MorWeb explains why you shouldn’t focus on device types and how starting with a mobile first approach improves rather than hinders UX.
Is it better to go responsive or mobile for ecommerce? As always, it depends, but this gives you a few pro’s and con’s to follow.
Flo is doing his part and heading to the Responsive Images meeting in Paris next month. In the lead up he has written a little bit about the Zurb Foundation’s interchange approach.
A great look at how Square’s front end team dealt with responsive images when rolling out a redesign for their Japenese website. Because they were already using Sass they built a Compass extension called Apropos. There’s a lot of awesome stuff, but basically you write one line of Sass and it gives you 28 lines of CSS goodness. WOOP!
“What is interesting about RWD is that it has actually brought the world of web design backwards. The web is inherently fluid.”
I love that quote. The rest of the article looks at an ideal process for a responsive design project and leaves a few tips and tools sprinkled throughout.
I’ve already covered Atomic Design…. twice…. but it’s so cool it’s worth a hat-trick. Take a look through LukeW’s eyes in his round up of Brad’s talk.
Plugins & Tutorials
Interchange uses media queries to load the images that are appropriate for a user’s browsers, making responsive images a snap.
A Compass extension to help you out with responsive background images (as explained in the square link above.
Another great tutorial from Codrops providing you another way to implement off canvas navigation.
This is a great short tutorial on how to get responsive maps working with D3.js
Code Pen of the Week
This weeks codepen of the week comes from 1/3 of the CodePen team, Chris Coyier. The pen illustrates a responsive approach to a filtered search, allowing you access to the filter even when you’re part of the way through the results. Nice work Chris!
We snuck this one in as well because it goes nicely with the article on responsive images from Flo.
That’s all for this week. As I mentioned in the introduction we’ve got some amazing interviews coming up over the next month. All of the interviews, both existing and the yet to be published on the site, are going to be available as part of the ebook that will be launching next week. The new interviews will also be featured as a replacement of the regular newsletter towards the end of September as Laura and I welcome the birth of our first child. Apparently things are due to get busy and any advice is welcome.
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.
Finally, we’ve been on a hiring spree of late at my day job and good people are hard to find. With that in mind I’m thinking about running a few job ads to the end of these emails as a regular feature. As you would expect the jobs need to be on topic, i.e. not database administrators or project managers, but to test this out the first 6 jobs that fit the bill over the next two weeks will be run free of charge. If it’s something that you find useful (for those hiring or hired) then I’ll make it a permanent thing. Get in touch if you’re looking to hire.
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.