Hello and welcome to the meaning of life edition of responsive design weekly, #42. That has come from the Hitch Hikers Guide to the Galaxy book (pretty sure you would have read it or watched the movie) where they built a super computer to work out the answer to the ultimate question of life, the universe and everything and it returned the answer of 42. A good friend of mine @dletorey met Douglas Adams in a pub once and asked him why he picked the number 42. According to Daves story it was because the ASCII code 42 is an asterisk *, and an asterisk is used as a wild card therefore meaning that the answer can be what ever you want it to be. Sounds plausible.
This weeks image comes from the izilla open device lab in Newcastle, Australia. They currently offer 28 different devices for testing which is pretty awesome. If that’s too far to travel there’s one near you at Brighton, UK; London, UK; Exeter, UK; Frome, UK; Berlin, DE; Malmö, SE; Amsterdam, NL; Breda, NL; Helsinki, FI; Zurich, CH; Portland, USA; Washington, USA; Oakland, USA; Marietta, USA; and Cape Town, ZA (taken from establishing an open device lab). When possible you should always do your testing on real devices. If you have an old device and you live near one of these places by all means help out the community and donate it if you can.
Right then, lets see what’s been happening.
Polygon was featured as one of the best 2012 responsive sites in our interview series. This article takes a look through the process, how they came up with the design and how they solved their content problems
Are you unsure when using adaptive web design, responsive design, mobile first, RESS, graceful degradation or progressive enhancement in a conversation with you peers? Well you don’t need to be any more. This article by Brett Jankord lays to waste the confusion and delivers understanding.
Once you get past the Grunt.js introductions (which is also quite interesting) you get to some responsive gold!
A lot of us get carried with the building and don’t spend enough time on the strategy side of things. It’s time we spend some more time looking at our strategic approach.
WeAreCube designed and coded many responsive projects lately, and learnt a lot in the process. Here are some points to consider before you embark on a responsive design project.
An interview (not one of ours) with the owner of skiddmark that takes a look at the responsive design process, and specifically online advertising
As responsive web design gained steam, the way we build websites changed. As the term moves from buzzword into a common part of every web design project, the way we work as web professionals needs to change. With this in mind, we need to lay some new ground rules for how we work.
As you might have seen Clearleft have relaunched their site with even more responsive goodness. They speak of setting a performance budget, something that Tim Kadlec has also talked about recently.
Worried about making mistakes on your first responsive design project? Don’t worry because many have already made them for you and want you to succeed (and make other mistakes to solve… obviously).
Brad Frost covers off what we saw a lot of during the interview series… we need to start focussing on performance when it comes to web design.
Noah takes a stab at responsive designs being too flat. He’s not trolling so much as challenging designers to come up with beautiful, immersive sites executed with perfection in every browser.
Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Browser support is going to grow quickly, so you’ll be ahead of the game when support is wide enough for Flexbox to be practical. Read on if you want to know what it does and how it works!
Tools, Tutorials, Performance & Presentations
Really Simple, Organized, Media Queries with Sass. Breakpoint makes writing media queries in Sass super simple and allows you to better organise your CSS. Instead of putting all the style updates in a media queries at the bottom of style sheet this mixin allows you to declare all the values across each breakpoint within the same CSS declaration. Confused? Just click on the link and it’ll be clear.
WebKit browsers are the only ones that don’t include scrollbar widths in the viewport size for media queries. While this is technically incorrect, it makes more sense to me since scrollbar widths vary across platforms and in the case of “mobile” don’t exist. Matt Stow has built a plugin that will fix that.
Another grid system built on SASS to try out.
Learn how Kendo UI and Twitter bootstrap fit together for a responsive site.
A great example of a multi level main navigation. Requires jquery but is a great approach
A great video tutorial on how to set up email templates using the Foundation framework from Zurb.
There’s a debate over which technique of creating mobile-ready websites is the best. Google advocates creating responsive web designs, while Jakob Nielsen, a renowned usability consultant, endorses the creation of dedicated mobile sites (but he was subsequently slammed by some web designers).
Andy Clarke recently delivered a day long course at the NA Conference and has been kind enough to put his slides up online. You do miss the commentary and context, but hey you’ll just have to go to the next one!
New sites & Inspiration
The guys who help bring you this email every week are also providing a spot of inspiration this week with their uber cool responsive annual report.
This was sent in via Twitter by @aneilson and is a responsive website they have just launched.
Another round up piece featuring some recent responsive designs. Useful as a source of inspiration.
Speaking of inspiration… two subscribers sent me an email the other week to tell me they had just launched their new responsive site. As well as congratulations them I included a few questions about how they found the process… check out what they had to say;
That’s it for this week, I hope all our NFL fans enjoy the Super Bowl this weekend. Come on <insert team your here>! You can do it!
Thanks for subscribing and 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.