Responsive Design Weekly #29

Good morning everyone!

This week I was listening to my weekly dose of the shop talk show with special guest Laura Kalbag. I love the show and this episode didn’t disappoint, well except for the part at the beginning when they bagged out email newsletters. How rude! I’ve got their measure though because all three of them will be contributing to this very newsletter in our December interview series…. *bwahhahahahaha.

*evil Halloween laughter

Seriously though, apart from their outlandish views of email newsletters, it’s a great podcast and I highly recommend subscribing.

Okay lets get going!


The “W3C Technical Plenary / Advisory Committee Meetings Week” (TPAC) is happening this week in Lyon, France. The HTML Working Group is meeting there, and they have kindly added “Responsive Images” to their discussion topics:

The team from RICG will be attending the HTMLWG meeting on Thursday, 1 November, to present the use cases and to talk about <picture> and img@srcset. We’ve got more information about that in the articles below.

Demos – 
When pitching an idea to the “owners” of the web you need to cover off use cases and show demos of the possible implementations. Here are six examples including print, grid, art direction, orientation changes and more.

HTMLWG Meeting Minutes
The RICG met with the W3C this week to pitch their responsive image format. These are the minutes as recorded over the IRC channel.

Andy Clarke takes a close look at how his site is responding on the Kindle Fire HD vs the Nexus 7. Interestingly the kindle fire sends a mobile site through in the portrait view due to the size of the view port (533x731px). As a general rule I set the “mobile” versions up to the 600px mark so the same thing would happen on any sites I’ve built.

This shows that while we probably have mobile, tablet and desktop in our mind when setting breakpoints (even Andy seems to have in this case) we really need to ensure that the site layout is at a premium for each breakpoint including the flexiness in between them. I wonder if Andy will change his break point now to suit the device, or whether he sticks to this being the right interface for this viewport.


Trimming the Fat
A great in-depth look at a practical approach to reducing bloat on your website…. the next step in the responsive design resolution.

Why prototyping beats wireframing
11 reasons why it’s better to go with prototyping over wireframes.

Retina revolution
Daan Jobsis has come up with this technique on how to implement retina images at a larger resolution but a higher lossless percentage. Works really well as you can see.

Compressive Images
Scott Jehl and Filament Group take a look at the responsive image technique mentioned above.

Rhythm And Proportion In Grids And Type
Another brilliant post from Vanseo Design ~ ”As soon as we place multiple elements on the page, we’re creating a pattern and creating rhythm. There’s no reason we need to allow those rhythms to be arbitrary and random. It’s another opportunity for us to unify our designs“

Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton
This is a great overall comparison against Responsive CSS Frameworks from vermillion design.

Ask An SEO Expert – Responsive Web Design 
A quick video on responsive design and SEO.

‘Content first’? Content left, right and centre!
Be bark on about content first all the time and in this article Christiaan Lustig points out that a lot of time we’re missing it out of our responsive approach. We focus on content strategy, but not the copywriter, photographer or videographer.

5 iPad Mini Web Design and Development Early Best Practices
With the release of the mini iPad here are a few best practices to keep your responsive designs easy to digest. The issue that comes with these suggestions though is that the resolution of the mini is the same as the ipad2, so you can’t actually respond for the device. Instead everything will need to be the same pixel/percentage width, but rendered on a smaller surface.

Stop designing for fixed viewports!
Dan Eden takes a look at why designing for specific device sizes is a bad idea. Stop doing it, stop it now.

5 Really Useful Responsive Web Design Patterns
This was published way back in March but it’s still a great resource. Take a look at 5 common responsive layouts and see examples of them in the real world.

Data Monday: Two Months of Device Diversity
In the past 2 months there has been a staggering 33 new device releases across the smart phone, phone/tablets, small tablets, tablets, laptops and desktops. TWO MONTHS! This should definitely focus your mind on a multi device design strategy

Responsive Containers
We’ve got Ben Callahan to thank for finding this post in a recent ADN update of his.

The Problem With Style Guides

Collection of Excellent Tools for Responsive Web Design
Twitter Inspires With Unique Responsive Design

Making The Case For Native Mobile Landing Pages

Frameworks Presentations, Tools & Testing

Foundation 3.2 is Upon Us!
Zurb has been at it again with another release of the Foundation Framework, version 3.2.

In this release you can find….

  • Added Magellan, a plugin for building design agnostic sticky navs that know where you are on the page.
  • Added Joyride, our plugin for creating tours of your website or app.
  • Added Clearing, our new responsive image gallery lightbox plugin.
  • Orbit now uses opacity on slide transitions, handles different sized images and can be swipable on mobile devices.
  • Updated Reveal to work with embed videos.
  • Added definition list styles.
  • Added pricing tables UI element.
  • Added mobile-#-up classes to use in conjunction with regular block-grid classes for a different mobile grid.
  • Separated all media queries into their own file for dropping in with ease.
  • Removed HTML5 Shiv from header since its included in modernizr.
  • Added many new Scss variables to control styling for things like: topbar, clearing, joyride, pricing tables, etc.

Bootstrap 2.2.0 released
Bootstrap has been updated, but the best bit is they kicked off the announcement with a “tl;dr”
2.1.2 is now 2.2.0: four new example templates, added media component, new typographic scale, fixed that box-shadow mixin bug, fixed z-index issues, and more.


Datatium – a material to create responsive experiences
I missed Andrews talk at Web Directions and from all accounts it was one that I really shouldn’t have missed. Luckily for conference attendee’s it was recorded so I can watch it back again, and lucky for you he’s put the slides up and written this blog post as an overview.

A more responsive guardian

Optimizing user experience with responsive design


Snugug/toolkit for SASS and Responsive Design 
Think of Toolkit as your swiss army knife for Progressive Enhancement and Responsive Web Design. Those little bits and bobs that make your life easy and you want to reuse throughout projects but never really had a place to put? They’re here, and they’re designed to make your life happy. Toolkit is broken out into individual pieces, so grab what you want, grab what you need, or grab the lot; the choice is yours.

This jQuery Plugin Lets You Serve Different HTML to Different Devices

Elastislide – A Responsive jQuery Carousel Plugin 
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.

Media Query Snippets – list of media queries
This little web page gives you @media queries for monitors, smart phones and tablets. They don’t go into the detail of pixel density, but focus mainly on device-widths and orientations. This is great to give you an idea about the number of media query possibilities, but I would recommend coming up with your own set based on the requirements of the project rather than pigeon hole into specifics of devices.

Sussy – responsive grids for compass
The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.


Demonstrating Responsive Design
YARDTS (yet another responsive design testing site)

jResize speeds up RWD testing

New sites & Inspiration

This week I came across The Photographic Journal, this is a beautiful website that reminds me of another amazing site, the great discontent.

From the readers:

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…

Well that’s all for this week. I’d like to send a shout out to any of our subscribers that may have been affected by Hurricane Sandy, I hope you didn’t sustain too much damage and I hope things will get back to normal for you shortly.

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>