Responsive Design Weekly #66

CSS Zen Garden

Welcome to another week of responsive goodness!  This week we’ve seen the recall of CSS Zen Garden with some new designs (our feature image this week) as well as an interesting overview of the flexbox method. I have to be brief this week because I’m at the Mozilla offices waiting to see 12 Devs of Summer where one of our regular contributors, Stu Robson, will be talking. Looking forward to that! Lets go…

Headline

A Gov Supreme

Jeremy Keith points out why the technical side of responsive design is not the problem, it’s the people and more to the point the processes associated with the way we have been building the web that are the true challenges.

Sponsor

Cool Design Jobs

Cool Design Jobs - Get Hired!

Cool Design Jobs is the place where you will find the best design, development and mobile jobs. The job listings are easy to sort and you can quickly find the one that you were looking for all this time.

Articles

Responsive design: we are not there yet

Many developers use scripts rather than reaching out to the browser vendors demanding new features in HTML’s or CSS’s core. There are plenty of jQuery snippets solving nearly all the problems in responsive web design, but have you ever thought about a standardised solution for keeping the aspect ratio of an image?

‘Reasons to be Responsive’ workshop report

A review of Brad Frosts Reasons to be Responsive workshop… for those of you in the UK Brad has another one coming up in September.

My Experience with Navigation in Responsive Design

Read about a couple of fun things Erick has learned about how to handle navigation on your responsive projects

Solving the Problem of @font-face Inside Media Queries

Keeping page weight down is important, especially on mobile networks where page load is often a bigger factor. This technique allows you to reduce the load by ommiting @font-face fonts loading in certain media queries, while still keeping all browsers reasonably happy.

Responsive Design Patterns

Designers should take advantage of design patterns like this, because more often than not, the problem they’re dealing with has already been solved by someone else. No need to reinvent the wheel if it’s already been built, tested, and perfected.

Why responsive design is driving mobile development tools

“Clearly we need a more scalable strategy to confront today’s reality.” – Too right! It clearly caused a bit of a stir because Aaron Gustafson and Karen McGrane  took the time to share some of their thoughts in the comments.

Foundation 4.3: Paving the road to 5

It’s no secret that I love Zurb Foundation, and they’re putting the final changes into version 4 before focussing all their efforts for the nice and simple upgrade to Version 5 (it will be simple… right guys?)


Tools & Tutorials

TOOLS

Riloadr

A javascript library that provides another approach to serve responsive images. The goal of this library is to deliver optimised, contextual image sizes in responsive layouts that utilise dramatically different image sizes at different resolutions in order to improve page load time.

52 Question Checklist for RWD Projects

A checklist is always a good idea. This one seems to focus on a lot of possible negative aspects of RWD but that can be a good thing to ensure you’re focussing on some of the important areas.

Responsive Navigation | Examples of Navigation in Responsive Design

So this is a little list of some popular methods of dealing with navigation on a responsive website, code samples included. Check out the source code and craft your own navigation pattern.

The Ultimate Responsive Web Design Beginners Resource List

A nice round up of some great RWD tools

grunticon

(yes again) Grunticon has gone through another set of iterations, so if you’ve been using it with your Grunt.js install make sure you update.

TUTORIALS

Getting started with CSS sourcemaps and in-browser Sass editing

One of the issues you face when using Sass is finding which file has generated the CSS. With this workflow you can easily link a CSS property to it’s original Sass file. #winning.

New Flexbox Layout

Confused about Flex Box? Just check out someone else’s code and see how they did it.

Media Query Events Example

This is an example of how to tie your Javascript to your media queries in CSS. (note, it’s just the actual example, you’ll need to click through to Jeremy’s article to read about it. – http://adactio.com/journal/5429)


Feature Site

CSS Zen Garden: The Beauty in CSS Design

We mentioned a few weeks ago that CSS Zen Garden was back and looking towards responsiveness… this week we’re happy to feature two new responsive designs from the Garden. Here’s the other one….


That’s all we’ve got for this week, I hope you found one or two things that helped you out today, as always if you’ve written an article built a tool make sure you reply to this email or shoot me a tweet and let me know. If you’re interested in supporting the newsletter and would like an exclusive weekly spot that reaches more than 10,000 readers please get in touch.

Oh and I just got a hold of the slides for Stu’s talk if you’re interested.

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>