Responsive Design, it’s Google endorsed!

I realise that no one who has subscribed to this newsletter needed Googles pat on the back affirmation to know that responsive design is a good thing.
What I do think is important though is the people that are not subscribed and have little to no comprehension of what is beneficial for their site unless they see it written and endorsed by someone like Google.

With Google being synonymous with search it is actually a massive deal in helping us prove that responsive design is not just a valid concept but quickly becoming the preferred way of displaying content through a browser (what ever the size or device).

Without further ado, Week #3.

Headlines

Responsive Design & harnassing the power of media queries - This was the post that could bring responsive design from the hands of the designers and into the requirement documents of big budget companies.

A common set of breakpoints - A great post from Stu Robson who somes up his thoughts with this brilliant sentance - “I don’t think that having a set of ‘common’ media queries harms your desiging of a site as long as you resize that bad boy and fix anything that looks shit.”

The state of Responsive Advertising - Following on from last weekly link to Responsive Ads, .NET magazine continued on their week of Responsive Design with an indepth look at advertising from both a publishers and advertiser point of view.

Frameworks

Foundation by Zurb - Easily our favourite framework!  We have used this on our temporary design and it’s a breeze to work with clients to show them the concepts.

Reverie WordPress Theme - Based on the Foundation framework this gets you up and running with the barebones quickly and easily.

Gridpack - Gridpack is an online framework that allows you to set the number of columns, padding and column spacing.  They also throw into the mix the ability to set these for a range of breakpoints which you can then download to get started.  AWESOME for client demos and browser based wireframing.

Lofty WordPress Theme - We had a few requests for good responsive design wordpress theme.  This one still needs a few tweaks in our opinion but it’s a nice start.

Responsive Development & Testing

I’ve been looking at responsive images over the past week and have come across two possilbe solutions on github.  Picture Source src modification through CSS image-set and URI Templates which is a follow up from Picture element markup for high-resolution devices with polyfill markup for older browsers which is a follow up from Scott Jehls Picture Fill ideas.

Strategies for choosing test devices - Stephanie Rieger is blogging again and takes a look at testing responsive designs on devices… she even covers the zombie apocolypse scenario.

Browser Size - Google labs provide an overlay to look at your current site with the most popular browser sizes.  If you are having trouble convincing your boss to go responsive this might help your argument.

Tutorials & Articles

Scalable Navigation Patterns - Michael Mesker talks about some of the lessons he has learned working on a recent real-life, large-scale RWD project. Specifically, the post focuses on how they chose to deal with deep navigation in the landscape of a templated environment.

Redefined - Trent Walton takes a look at the changes of his outlook on web design after the rise of responsive web design.  This was written a while ago but it appeared again recently when Sarah Parameter was talking about responsive design workflow.

5 useful responsive design patterns - a look at some common layouts and how they might respond.

Condtional CSS - Jeremy Keith last week wrote about conditionally loading content and has followed up with some interesting techniques in loading CSS values in Javascript.

Conferences & Workshops

Breaking Development :focus on responsive - Breaking Development :focus on responsive will take place June 4 in Minneapolis, MN. The day will kick off with a half-day workshop, followed by presentations after lunch.

And finally…

Judging by the number of subscribers we’ve received over the past 3 weeks this is definitely something that the greater web community is interested in learning more about.  I encourage everyone here to get on StackOverflow and answer any of the Responsive Design questions that you can help with to keep everyone on top of their design and development problems.

Thanks for reading Responsive Design Week #3.  We hope you found out something that you didn’t know, and we encourage you to share the resource with anyone you think would further benefit from the updates.

See you next time for week #4