Hello and welcome to newsletter #54. The image this week is a sneak preview of the video resources section for the new responsive design resource site we’re working on (yes yes, it’s still coming).

This week I’ve spent three days at Internet World 2013 in London.  After that time I’ve come to realise that more than half of people/business that are looking to build a new or redesign an existing website don’t have an understanding of what responsive design is, how to approach it, or even that it’s possible. Keep that in mind when you next speak with your clients or web teams and make sure you go back to basics with what is possible.

Let’s get into it!

Headlines

Responsive Inspector (beta) released!

Responsive Inspector allows viewing defined media queries of visited websites. It is very useful when developing responsive web layouts as it can show what min-width or max-width media queries are specified in CSS stylesheets. In addition it also enables pixel perfect browser resizing, taking and saving whole page screenshots, CSS media query code viewing, and sharing web designs on Behance service as Work In Progress. WOOT!

Our Sponsor

It’s Time To Move Beyond The Desktop — Save $100, Register Now!

Join 200 other mobile website designers and developers at BDConf in San Diego for two days of mobile inspiration and a day of optional workshops. Speakers include Luke Wroblewski, Ilya Grigorik, Divya Manian, Jason Grigsby, Eric Bidelman & more!

Use discount code SD13RDW & save $100 — Register today!

Articles

Responsive Web Design and Scrollbars

There is a slight discrepancy between how webkit deals with scroll bars when it comes to the media query width, here’s why….

Tim Kadlec talks about responsive web design

Tim is very smart, so smart that he wrote an awesome book. Check out this interview where he talks about the implementation and areas to watch out for.

Common Misconceptions About Touch

Investigating the misconceptions about the touch interface as we know it.

How To Maintain Hierarchy Through Content Choreography

One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post “Content Choreography” and Jordan Moore followed up with a great working example.

Death to the Waterfall

Most developers/designers adapt to the waterfall process, because it’s an industry standard. It’s in every job post, “Must be able to handle 1000’s of projects at once.” Hmm, no thanks.

Mobile first: Luke Wroblewski interview

We have featured Luke’s articles many many times in the past. See what he has to say in this interview with Web Designer Depot

Efficiency and Economy: Responsive Design On a Budget

Take a look at some online tools that will help reduce your overall cost of responsive design.

This article points out some areas that you could look at yourself before you head out and engage with an agency, but remember it’s not something that should be short cut… do it right the first time around and enjoy and long period of success.

The Real Challenges of Responsive Email Design

Alex covers off the same kind of issues I came across when looking at this newsletter. It’s a great article that looks at more than the code.

Hover is dead, long live hover

Presentations, Tutorials and Templates

PRESENTATIONS

Videos from Orlando 2013 | Breaking Development

This is an awesome opportunity to see some great speakers and videos from the Breaking Development Conference in Orlando! Talks include Mobile First Responsive Design, Context, multi-device and the future of TV in the browser, What you don’t know will hurt you: Designing with and for existing content, Twenty Megabyte Responsive Websites Are the Future, and many many more.

Adaptive Images in Responsive Web Design

The live presentation was awesome, but these slides from Christopher Schmitt give you a great step up into responsive images

Responsive Web Design for Libraries

I recently did a talk in Oxford on responsive design and touched on a few of the same ideas as this presentation.

TUTORIALS

Responsive Full Width Grid

This week we’ve got a few basic tutorials from the team at Codrops.

Slide and Push Menus

Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.

Responsive Multi-Level Menu

Another solution for those of you struggling to come up with navigation patterns for your responsive design.

TEMPLATES

Responsive Template

This template is to be used as a starting point for developing responsive web designs. This is for front end developers who have a good understanding of how to build a site, and just prefer a starting point. Resize this demo on a computer to see the nav change, or just check it out on your mobile device.

…and Finally

Garmoshka

Not exactly what Ethan had in mind when he came up with the idea of responsive design, but it’s pretty fun.

Thanks everyone for reading this weeks newsletter.

As always, if you have any articles that you think should be included make sure you reply to this email or shoot me a tweet and let me know.

Thanks for subscribing and enjoy your responsive weekend!