Responsive Design Weekly #42

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, UKLondon, UKExeter, UKFrome, UKBerlin, DEMalmö, SEAmsterdam, NLBreda, NLHelsinki, FIZurich, CHPortland, USAWashington, USAOakland, USAMarietta, 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.

Headlines

An inside peek into the Polygon design process

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

You Keep Using That Word, I Do Not Think It Means What You Think It Means

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.

Developing a responsive, Retina-friendly site (Part 1)

Once you get past the Grunt.js introductions (which is also quite interesting) you get to some responsive gold!

Articles

Devising a Strategy for Responsive Design

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.

Lessons learnt in responsive design

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.

Responsive design: the problem with mobile ads and how it can be overcome

An interview (not one of ours) with the owner of skiddmark that takes a look at the responsive design process, and specifically online advertising

The new rules of the responsive web

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.

Responsive Design on a Budget

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.

We Dive Into the Responsive End of the Pool – Three Things That Caused Us to Belly Flop

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).

Performance As Design

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.

Responsive Web Design Leaves Me Wanting

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.

Dive into Flexbox

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

TOOLS

Breakpoint

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.

Your Media Queries are Wrong. Fix them with Viewport Genie and mqGenie

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.

What size is my viewport?

Extra Strength Responsive Grids

Another grid system built on SASS to try out.

TUTORIALS

Responsive Design with Twitter Bootstrap

Learn how Kendo UI and Twitter bootstrap fit together for a responsive site.

Responsive navigation multilevel

A great example of a multi level main navigation. Requires jquery but is a great approach

A Tutorial on Responsive Email Templates

A great video tutorial on how to set up email templates using the Foundation framework from Zurb.

PERFORMANCE

A Comparison of Methods for Building Mobile-Optimized Websites

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).

PRESENTATIONS

The complete slides from my ‘Fashionably flexible responsive web design’ workshop at New Adventures

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

MailChimp Annual Report

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.

DIALOG

This was sent in via Twitter by @aneilson and is a responsive website they have just launched.

21 Fresh Examples of Responsive Web Design

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;

If you have just finished a site, or are part the way through and want to share and ask some advice then please either email or tweet us.

Wrapping up…

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 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>