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

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.)

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.

It is possible to make any HTML element scale its height proportional to its width.

I’ll use the heck out of this.

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.

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.

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.

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.

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.

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.

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

Sample CSS files set at ‘major breakpoints’ which, in turn, contain ‘minor breakpoints’.

(Linking to .Net’s mobile site to eliminate the clutter.)

Paravel’s Dave Rupert with some solid responsive design advice. I didn’t know that the viewport meta element was moving to CSS in the form of the @viewport rule. Best of all its already supported by Opera and Internet Explorer 10, so I’ve updated this site and 320 and Up with:

@-webkit-viewport { width : device-width; }
@-moz-viewport { width : device-width; }
@-ms-viewport { width : device-width; }
@-o-viewport { width : device-width; }
@viewport { width : device-width; }

I’ll push that change later in the week.

If you have a smartphone or tablet (or an Android powered, internet enabled refridgitoaster,) add its viewport sizes to this spreadsheet on Google Docs. (Then print it out and tape to that refridgitoaster.)

There’s lots of great information in Zoe’s slides from Responsive Web Design Summit. And it looked like a great overall line-up too. Dang. How’d I miss it?

(Via)

A fascinating first in a series article. (I’m very much looking forward to meeting Oliver in person at Smashing Conference in September.)

Read the first issue, then sign up here.

$13.47

That much?

This couldn’t have come at a better time because at STV, we’re designing and prototyping something very similar.

Already widely linked following this week’s An Event Apart in Boston, but very worth another mention.

Southstreet is a set of tools that combine to form the core of a progressive enhancement workflow developed at Filament Group. This workflow is designed to help us (and other developers too!) deliver rich web experiences that are accessible to the widest range of devices possible, and catered to the capabilities and constraints of each device.

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

Roger references me and Brad and suggests a better way to solve small screen navigation than the all too common select menu navigation pattern.

I like this a whole lot better.

Google’s pushing responsive web design in their most recent developer guidelines. Dig a little deeper for their “Why we recommend responsive design.”

Remember Matt Stow and his responsive retina images using CSS and a spacer PNG? (Now updated.) Well, Matt’s been at it again, this time with a solution to the image map problem in responsive design. Matt’s solution recalculates area coordinates to match the image size on load and window.resize. Clever. View the demo page or download the plugin from Github.

Read it.

Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context.

Another fabulous piece of work by James Mellerson a topic that’s been on my mind for longer than I can remember.

Cute.

Via: David Roessli

Poking around Speaker Deck, I found this short presentation from Luke Brooker. In it, Luke has similar thoughts about a responsive design process to those you might have noticed in my workshop slides and up-and-coming chapter for Smashing Book Three.

There was something else familiar about the presentation and it took me a while to figure out that Luke was one of the speakers on the Brisbane leg of What Do You Know, a fabulous night of informal, short talks organised by Web Directions.

Shame on me.

Check out Luke’s presentation on Speaker Deck as well as his accompanying blog post and Pattern Response.

One of the most asked questions at this month’s Fashionably Flexible Responsive Design workshops in Australia was “responsive or device specific?” Here, Luke makes a case for each with, as always, a thorough list of further reading.

Allows ULs that open on li:hover to open on tap/click on mobile platforms such as Android, WP7 etc.

(Via Matt Stow on Twitter.)

Mark Boulton:

The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.

This is exactly the issue I’ve faced in my redesign work for STV. My solution, and one that seems to been accepted, has been to:

• Develop a custom grid for STV based on the size of MMU units
• Design a series of page regions to accommodate a fixed number of same-size ad slots to help with adaptive layouts
• Use min-width on ad containers
• Serve leaderboards above the 768 breakpoint only

With STV’s permission, I’d love to publish some of our solutions.