Stuff & Nonsense. Website designers in North Wales

And all that ‘Malarkey’

Since 2004, our blog’s been a popular destination for thousands of designers and developers.

It’s not new enough

What we’re left with is just called web design

Jeffrey Zeldman on Evolving Responsive Web Design:

Some commenters want to use initial-capped Responsive Web Design to mean responsive design as Ethan first defined it, and lowercase responsive design to mean an amorphous matrix of exciting and evolving design thinking. Lyza says soon we’ll stop saying Responsive altogether, a conclusion Andy Clarke reached three years ago.


Jeremy Keith got a little hardboiled yesterday. I particularly like this paragraph that echoes everything I’ve been saying for years about setting wrong expectations:

Along the same lines

Loz Gray reflects on his eighteen-months working with the Guardian on their responsive site. There is so much experience here to learn from.

Ashley Nolan: Controlling heavy weight websites

Falling foul of iOS’s 3 megapixel resource limit

One of the most important elements in our recent redesign is our new portfolio. We ran out of time during the redesign week and couldn’t include all of the portfolio pieces we’d planned. This week we’re adding more and while we were doing that I discovered something I hadn’t known before about large images and iOS.

Should you buy Hardboiled Web Design for information about responsive web design?

Bob Asbille asked me this week if my Hardboiled Web Design book is worth buying by someone who’s looking to learn about responsive web design.

Matt Stow’s Viewport Sizes reference

An extract from Designing Atoms and Elements

This post is an extract from my chapter in Smashing Book 3, titled ‘Designing Atoms and Elements’ written in March 2012.

Has a client ever said to you:

“I don’t like the design”?


Responsive Finn

Nutty responsive assumptions

The Stuff and Nonsense nutty boys header is pretty tall and I decided I wanted to reduce its height for small screens, such as phones, in landscape orientation. When I wrote the CSS to make this happen I made some nutty assumptions. In the spirit of sharing our mistakes:

A suggestion for Responsive Design toggle icons

Jordan Moore (who wears rattlesnake skin shoes) on how to give users the option to “Toggle a Responsive Design On and Off”:

Rock Hammer, a curated, responsive project library

If you listen to Unfinished Business, you’ll know that I’m a big, big fan of Hammer For Mac, the app its developers say lets you create HTML builds & templates quicker, more efficiently & more conveniently. Hammer works for us because these days we mostly deliver static HTML and CSS templates, instead of static visuals, and we rarely develop complete sites.

Remembering Jeffrey Veen’s “I don’t care about accessibility”

Am I Responsive?

The complete slides from my ‘Fashionably flexible responsive web design’ workshop at New Adventures

I thoroughly enjoyed hosting another Fashionably flexible responsive web design workshop at New Adventures on Wednesday. I got the feeling that everyone enjoyed the day. I know that I did.

ITV’s rebrand and responsive home page

Brett Jankord: Cross Browser Retina/High Resolution Media Queries

Filament Group: SocialCount

Rolf Timmermans: Responsive background images with fixed or fluid aspect ratios

Touchy subject

Two great reads this week, on connected subjects:

Jordan Moore’s Palm Reader

Todd Motto’s jResize Plugin

Matt Griffin’s ‘Responsive Comping: Obtaining Signoff with Mockups’ A List Apart double bill

Chris Armstrong’s The Infinite Grid on A List Apart

Grippy grabby and those three horizontal lines

Thibaut Sailly added an extra dimension to the three-lines responsive navigation icon discussion by suggesting that the three horizontal lines could represent a gesture.

More about that bloody three lines navigation icon

I’m glad that the three-lines icon I suggested first, back in March is now being established as a sort of standard.

Jordan Moore: The Semantic, Responsive Navicon

Chris Coyier: Media Queries for high resolution displays

TrentWalton: A New

Encouraging Better Client Participation In Responsive Design Projects

Adobe announces Edge Reflow

Don’t confuse design testing with device testing

There’s been a lot written about device testing over the last year. Jeremy instigating open device testing labs has rightly generated a lot of column inches like Smashing Magazine’s Establishing An Open Device Lab. However, I think we need to be clear just what we mean by testing.

Josh Brewer: Responsive Measure


The responsive pattern library

The responsive pattern library is meant to be a comprehensive collection of responsive interface patterns created by and collected for the community.

Here’s more from Brad Frost. I want his dog. So badly.

This Is Responsive

Filament Group: Responsive Carousel Project Now Open Source

Conor MacNeill: Major and Minor Breakpoints for CSS

Dave Rupert: Five steps to gettin’ flexy

Device Viewport Widths reference on Google Docs

Zoe Gillenwater’s Building Responsive Layouts presentation

iA: Responsive Typography: The Basics

Responsive web design newsletter

Brad Frost: How much does a responsive web design cost?

Luke Wroblewski: Off Canvas Multi-Device Layouts

Southstreet Progressive Enhancement Workflow


Roger Johansson: An alternative to select elements as navigation in narrow viewports

Google’s recommendations for building smartphone-optimized websites

Hosting a second responsive design workshop at Smashing Conference

Sorry to break into your Diamond Jubilee celebrations, but my Flexible Responsive Web Design workshop on the 19th September in Freiburg in Germany sold out so fast that Smashing Conference and I are hosting a second day. That’s right. We didn’t want disappointed Germans. Especially after Engerlaaand will be beating them in Euro 2012.

This one’s the day before the conference, on the 16th September.

You know the drill.

Responsive image maps jQuery plugin

This is the new 320 and Up

A lot’s changed since I wrote the original ‘320 and Up’ — my ‘tiny screen first’ responsive web design boilerplate — one year ago.

Paying attention to content hierarchy across screen sizes

I’ve been working on a small travel site over the last few weeks and came across an interesting responsive web design challenge.

David Blooman on the BBC’s responsive testing process

James Mellers’ Responsive Layouts, Responsively Wireframed

We need a standard show navigation icon for responsive web design

You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button? Well, I think we need a standard ‘show navigation’ icon for that button in responsive web design.

The Responsinator

Luke Brooker: Future Friendly Style Guides

All the slides from my full day responsive design workshop

I guess if you’ve been following my tweets or Instagram photos, you’ll know that I’ve been in Australia presenting a series of ‘Fashionably flexible responsive web design’ workshops. I had the most amazing time in Australia and I want to say a huge thank-you to John and Maxine for helping me make it possible. I’d also like to thank everyone who attended for contributing to the discussion and sharing their experiences.

I couldn’t have built a full day’s workshop without referencing the work of others. So my special thanks go to John Allsopp (again), Mark Boulton, Brad Frost, Jeremy Keith, Ethan Marcotte, Brian and Stephanie Rieger, Luke Wroblewski and all the designers and developers whose work I featured.

With the Australian tour now over, I’ll be working on adapting the workshop’s content for a new video. More on that another day. But today I’m making available the slides from my Australian workshops on Speaker Deck. Of course slides without commentary and context are worth only so much. But hell, you just had to be there.

The select menu navigation pattern

Brad Frost wrote about Responsive Navigation Patterns, Alexis Fellenius Makrigianni followed up with his thoughts. Both mention a responsive design pattern that was the subject of much debate at this month’s series of Fashionably Flexible Responsive Design Workshops in Australia — transforming a navigation lists into a select menu using scripts like TinyNav.js at small screen sizes.

Which One: Responsive Design, Device Experiences, or RESS?

Izilla jQuery Touch Menu Hover

Responsive Advertising

Fashionably flexible responsive web design workshops — Australia 2012

There’s been much written about responsive design, but so much of it has focussed on aspects of technical implementation rather than about the design decisions that responsive design demands. So next February (2012), I’ll be travelling down-under to Australia to host four, yes four, ‘Fashionably flexible responsive web design’ workshops.