Welcome to REsponsive Design Weekly

Good morning ladies and gentleman and welcome to another week of responsive goodness.  First off a quick apology for the tardiness of this landing in the inboxes, at the moment I’m in Sydney attending the 2012 Web Directions South Conferenceand had some tethering issues at the hotel last night.  Now it’s time for me to set new records in putting this together as Day 2 is starting in an hour.  EEEK!

I was fortunate enough to have the opportunity to introduce two of the speakers yesterday, Craig Sharkie and Mark Boulton, as they talked about Responding to Responsive Design and Adapting to Responsive Design respectively.  Both talks were amazing, here’s a few tweets that I sent out to give you an idea. (note that the lack of Craig based tweets was more because of nerves of having to go back on stage than the quality of the content).

• Go from sketching to prototype, skip the wireframes. //@markboulton
• Wireframes. Do. Not. Work. Anymore. // @markboulton
• Responsive design costs more. They cost between 30-50% more in time to produce. // @markboulton
• We can’t design grids from the edges in any more, instead we need to design them from the content out. // @markboulton

If you’re attending the conference please come up and say hi and tell me what you think of the newsletter, things you want to see more or less of or if you have any RWD questions. This is me - warning, big head shot.

Okay lets get going!

• Headlines
• Articles
• Presentations, Tools and Tutorials
• New Sites/Inspiration

---

Headlines

ResponsiveImagesCG (Responsive Images Community Group) 

The GITHUB home of the responsive images community Group. You should totally get involved with this and provide any help you can. At the moment they’re asking the web community for use cases around responsive images.  If you want to be counted, now is the time to stand up.

really responsive design and the frameless grid

This is an amazing post about a frameless grid by Pete Wailes. The controlled grid as it is (with our cutesy span-1, span-2 implementations) need to be rethought.Frameless Grid already has a proof of concept so we should look to build on this. Pete looks at setting up correct font stacks, the baseline grid, designing in the browser… everything that we all probably aspire to do but for one reason or another fall down.

---

Articles

Content First

I have thrown this in for two reasons.  First of all Sara delivered a blistering talk at web directions where I left wanting to rewrite a useful wsywig and go back to the drawing board for all the content on my site, and secondly because it’s an article backing up some of stu robsons thoughts on content first. It is something I’ve found very difficult while working with the designer for responsivedesign.is site.

Grids, flexibility and responsiveness

Laura takes us through her redesign process for her new responsive design layout. We’ve featured some of Laura’s presentations and previous articles before so it’s awesome to be able to see how she applied her skills to her own site.

Flexbox — fast track to layout nirvana?

A great overview article from opera on the flex box technique. Flexbox is so#BADA55!

Transcript of the IRC chat with Chris Mills

This is an overview from an irc conversation will Chris mills from opera, a long but worthwhile read.

The State of the Picture Specification

Matt provides a round up on the current status of the responsive design image saga.  This was touched on during the presentation by Craig Sharky and, when introducing Mark, slipped in a plug for the RICG for audience members to go andadd their use cases.

The Thing About Those Media Types 

LukeW | Data Monday: Big Screen Smartphones

Three Line Menu Navicon

Chris Coyier shows you “how” to create the 3 lines in a range of different techniques.

SVG Fallback, Vertical Rhythm, CSS Project Structure

SVG CSS Injection—A Different Approach Towards SVG Rendering

Following up from Chris Coyiers thoughts on smashing magazine, Some Random Dude (love the name) has gone into a bit more details around SVG and CSS is this post.

Responsive Enhancement

For those of you that know Jeremy Keith you will know he’s a clever fellow.  He’s put together this reading list for anyone interested in learning more about Progressive Enhancement and Responsive Design.

---

Presentations, Tools & Tutorials

PRESENTATIONS

Rebuilding a university homepage to be “responsive”. Twice. In less than a year.

Follow this presentation to find out how notre Dame went about rebuilding their university homepage twice in a one year with responsive design

Responsive Web Design and WordPress Presentation

An awesome presentation using reveal.js (I think) for responsive design and wordpress. Very much worth checking out.

PODCASTS

Jason Grigsby – Mobile-First Responsive Design

A 18 minute podcast with Mr Jason Grigsby from Cloud Four.

I was also looking forward to the Shop Talk Show with Laura Kalbag this week but unfortunately it seems to have been delayed and instead another Rapid Fire.  They do have a section on the affect of retina display on rems though. WIN!

TUTORIALS

Setup to Build Responsive Websites

Have you ever been stuck with testing your responsive designs? In this post Eric takes us through some tricks on Chrome Developer Tools, Bookmarklets, Adobe Edge Inspect and getting it working with LiveReload plus another bunch of techniques

Easy retina-ready images using SCSS

---

New sites & Inspiration

No new sites while I’ve been on the road. A few people have been in touch telling me that they’re nearly there…. but nothing quite finished.

If you’re looking for a responsive example check out this Code Pen which sets everything in ems and %’s and see how when you update the base body {} font size the entire layout responds relatively.

Just launched a site? Getting ready for a launch? Well then send us a link to the site with a bit of information about the choices you made in the build and we’ll feature you in this section.

---

Wrapping up…

That’s all for this week!  Hopefully the rush in which it was done this week doesn’t affect the usual quality of the newsletter.  Next week we’ll have an overview of all things responsive from Web Directions this week.  WOOT!!!