Mark Boulton on defining responsive web design: We’ve heard this line time and time again over the past couple of years. You see, responsive design is a useful term and one that will stick around for a while whilst we’re going through this change. How else do we describe it, otherwise? Web design? I don’t think so. No board member is going to get behind that; it’s not new enough.

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:

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

A balanced view on performance versus beauty by proud Welshman Ashley Nolan:

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.

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 has been documented device viewport sizes and the result is a handy, searchable reference of platforms and device dimensions. If you have a device that’s not listed, you can check it’s sizes and add it here.

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”?

Last month I moved off Adobe’s Creative Cloud and back to a ‘boxed’ version of Creative Suite – laughably just in time for Creative Cloud to be the only way to use Adobe applications in the future. One of the casualties of the move was Adobe Edge Inspect, a tool that I have used and liked for testing designs across multiple devices. So today I downloaded Ghostlab and so far it looks promising.

A year ago I travelled to Oslo in Norway to teach a two day responsive design workshop at FINN. The team there have (obviously) been working hard and yesterday they let me know they’d a new responsive design. It looks great

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:

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

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.

For anyone who read my I don’t care about Responsive Web Design (from two years ago) and missed the original reference (from almost ten years ago) and therefore the point I was trying to make; that responsiveness should be something we build in, not bolt on.

Add your URL to the input field Click GO (reloads the preview) or press Enter (reloads the page) Admire your good work A little bit of responsive fun from Brisbane based Justin Avery. (Via Jordan Moore who has a name like a country singer but has never drunk moonshine.)

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.

Britain’s first independent television channel, ITV, unveiled both its new logo and a responsive new home page today. I’m a fan of the curvy new logo and how it changes to match a backdrop. The home page is full of thoughtful details too, made all the more interesting to me because my work at STV (the Scottish franchise for ITV) over the last year has tackled many of the same problems.

Good work by Brett Jankord: You can replace, the min–moz-device-pixel-ratio, the -o-min-device-pixel-ratio with a resolution media query. You can also just remove the unprefixed min-device-pixel-ratio.

Yesterday, my friends at ISO and I were discussing the impact that their social media icons have on the performance of their site. (Short story, they add 14 seconds to the rendering time of every page.) Then last night I found SocialCount (via Brad Frost.) SocialCount is a small jQuery plugin for progressively enhanced, lazy loaded, mobile friendly social networking widgets. Funny how the universe works.

Two great reads this week, on connected subjects:

Jordan Moore (who wears crocodile skin shoes) made a handy little tool for “showing what @media features your device can and can’t see.”

A jQuery plugin that: Grabs all your HTML, and resizes it inside the browser when you click the width you want. Potentially useful as a demonstration as well as a development tool. As well as a set of fixed (device derived) widths, I’d love to see the ability to add any width. I’m sure Jeremy would like it written in plain Javascript too.

Chris (I so want to say “ Stretch ”) Armstrong: Absolute units like pixels effectively give a layout a sell-by date, locking it to a finite resolution range in which it will “work.” Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step on the road to resolution independence.

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.

In a fantastic A List Apart double bill, Matt Griffin tackles Responsive Comping: Obtaining Signoff with Mockups: Sending clients in-browser comps is remarkably easy, as it turns out. We just e-mail them a URL. Clients can look at the designs in various browsers and on various devices, resize them, click links and navigation, and check out hover states. Instead of asking our clients to pretend that an image is a website, we show them a website. Keep in mind though, that showing clients a prototype instead of showing them static visuals is about setting realistic expectations and not about designing a browser.

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 (who has a name like a country singer, but doesn’t like country and can’t sing): There have been calls recently from Andy Clarke and Jeremy Keith to have a standard icon for revealing navigation in small contexts, and rightly so — this is a new technique and we need to set users’ expectations about the consequence of the reveal action.

This seems like a lot of work, but I am acutely aware how large some of the high-resolution (retina) assets are on this site. Via Jeffrey, who thinks “this is madness.”

My design hero, TrentWalton, on how he and his amigos responsively redesigned the Microsoft.com homepage.

My first article for Smashing Magazine is my (ever so expanded) notes from my talk at the fabulous Smashing Conference in Freiburg. The original title was “How to call your client an idiot, to their face, without getting fired, then have them thank you for it.” I still like that one best, but we didn’t want a controversial title to get in the way of the serious points I wanted to make.

Create truly responsive layouts thanks to an intuitive user interface. Design simultaneously for all screen sizes without sacrificing quality or capability. Fireworks is dead.

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.

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text. Josh brings my proportional leading idea to life.

Brad Frost mentioned Mobitest during his talk last week at Smashing Conference. I’ve becoming more aware of performance issues these last few months, and tools like Mobitest can only help me do better. (This site’s home page, crammed full of retina quality bitmaps, weighs in at 649.36kb and 10.22s average load time. I need to halve that. At least.

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.

Scott and the Filament Group continue to make the web better.

Brad Frost (I want his dog. So badly.) and Pon Kattera collect the latest links, news and thinking in responsive web design. There’s some great resources in here already.

Converts fixed-pixel width layout dimension to percentages. It would be better with padding and box-sizing, but mustn’t grumble.

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. Places are limited. Found out more. Register. Now.

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

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

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.

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.

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.

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.