Thanks to our sponsors, Ghostlab — Synchronized cross-browser and mobile testing taken to the next level. Get 30% off at checkout with the offer code UNFINISHEDBUSINESS, and Blush.

Blush does beautiful letterpress printing of cards, stationery and more for designers and artists. Get 25% off their classic ampersands and ligatures prints with the offer code UNFINISHEDPRINTS.

When I travel and work abroad I have some criteria for where I stay. A hotel needs to:

• Be close to a main train station or an airport. Despite what I sometimes joke (and I’m sure some people believe) I don’t have a chauffeured limo at my disposal.
• Have easy access to where I’m working and cheap food close by. I don’t eat at all well when I’m alone. That’s one of the reasons I’ve put on weight.
• Be cheap. Or as cheap as cheap can be. As long as a hotel’s clean I don’t see a lot of point in spending excessive amounts on a bed to sleep in, especially when I travel alone.
• Reasonably priced internet access if possible. I prefer to pay for better-than-free connectivity, but I won’t be fleeced into paying double figures per day, especially when I’m in a hotel for only a few hours per day.

The hotel I’ve stayed in this week in Geneva meets three of those criteria, the fourth — twenty-five Swiss Francs per day wifi, made the Starbucks a few hundred metres away the perfect choice for a quick coffee and connection.

I’ve travelled to Geneva a lot over the last few years. I’ve stayed in a dozen hotels across the city centre and even around some of the more colourful areas of town, I’ve never felt unsafe. So I didn’t think twice about taking myself, my iPhone and my Macbook Air, grabbing a latte and sitting outside a Starbucks in Geneva city centre at 9:30pm.

I pulled out my laptop and started work on the slides for an upcoming workshop. I took out my phone and made a quip about watching drunk people trying to walk straight, and started a DM conversation with Anna. Instead of popping the phone back into my pocket as I would normally do, I kept it on the arm of the chair, occasionally glancing to see if Anna had replied.

At that point, out of nowhere, a man rushed into my space, snatched my iPhone, its HardGraft case (the third I’ve bought) and the sixty Swiss Francs tucked inside. In a split second, he, and they were gone.

It took a second to realise what’d happened. My instinctive reaction was to stand up and shout “Hey!” dropping (and denting) my laptop in the process. I picked up my computer and without thinking chased after him.

Geneva at that time of night is still busy with people and as I ran I shouted, asking people to stop the man. No one did, but two pointed me in the direction he’d run. I chased him across town, but the truth is I’m overweight, unfit and in no state to run someone down. I got within fifty feet of him but then he lost me in the back streets.

It did’t occur to me for a second what I would do if I’d caught him. It was foolish to even attempt to catch him. If my son had done the same thing I’d have told him he was a damn fool. That it was only a phone and that his safety was more important. Of course in the moment, reason goes out of the window and it’s only later that I wondered if he were carrying a knife?

Having lost him I headed back to Starbucks where the staff were unhelpful, but they did point me in the direction of a police station a few streets away. Then I remembered Find My iPhone.

There was no internet access at the police station, so before I filed a crime report I ran to my hotel and pleaded with the receptionist to let me use his computer long enough to log onto iCloud. Find My iPhone is amazing — although I’ve only ever played with it, sending myself messages and playing alert sounds — I knew that I’d left my 3G connection data roaming, so there was a good chance the phone could be located.

But I’d turned off Location Services to save my data allowance.

Without Location Services, Find My iPhone couldn’t locate the phone, only send it alerts and sounds (like the thief would respond to those,) remote lock or wipe the phone. I knew I wouldn’t ever see the phone again, so I wiped it. I’ll never, ever, make that mistake again.

Back at the police station I reported the crime to the same young officer with just enough English to match my French. Somehow we got by. I explained where I’d been and what had happened.

“What did ze man look like?” He asked.

“Average height, medium build, dark hair.”

“White skin, medium black, very black?”

“Medium black, I think.” I’d only glimpsed the man for a split second.

“Moroccan” the policeman said matter of factly and with a shrug.

“I’ve always felt safe here.” I said. “Does this happen a lot?”

“Geneva is safe” he replied, “but ze phone and bag snatching ’appens all ze time. Do you has the eye-mee number of ze phone?”

Well of course I don’t. I don’t think I’ve ever known it. I certainly don’t have it written down or stored in 1Password. Yet another example of me taking my safety and my property for granted I suppose. Not knowing that number likely means that if by some miracle the phone is recovered, it’s unlikely to be traced back to me. Still, I fully expect never to see it again. So with a crime number obtained and a report filed, and my heart still pounding in my chest, I went back to my hotel and phoned home on a landline.

It could’ve been so much worse I suppose. The thief could’ve snatched my wallet and with it my credit cards and passport. That wallet contains the key to my locker at work too, my favourite pen and an airport car park ticket. Thank heavens they were in my pocket. I could’ve been carrying my laptop bag and lost my car keys. I could’ve been beaten up, stabbed or worse. Fortunately all I lost was a phone, my innocence and some pride.

My phone will need replacing of course, but now’s a terrible time to buy a new iPhone so I’ll likely wait until a new version is launched later in the year. In the meantime I’ll try to make do with the old 3Gs I have in a drawer.

It’s a terrible time to replace my damaged laptop too. Although the damage is only cosmetic, I’m fastidious about my equipment and I can’t bear to use a damaged machine. The newly released Macbook Airs are certainly an option, but I promised myself a retina Mac next and the current Macbook Pro options are not for me.

I guess for now I’ll stick with what I have and my laptop’s dented corner and scuffed edges can serve to remind me not to treat my safety and my property so lightly in the future.

Has a client ever said to you:

“I don’t like the design”?

If that’s happened, did you dig a little deeper and discover that it wasn’t the details of your design they objected to? I’ll bet it wasn’t the typefaces or type treatments you chose. They went unremarked. It wasn’t the way you’d used colour, either. Nor your finely crafted line work, borders or shading. Perhaps it was, “The sidebar should be on the left, not the right?”

In other words, your client was commenting on layout but expressing their criticism of the design.

It’s not unusual for people to include layout in the same conversation as other aspects of design:

• Typography
• Color
• Texture

Designers do it, too, because for years we’ve been making and demonstrating the fixed-width static visuals we’ve made in Photoshop or Fireworks that’ve included all these things. Now we should accept that design and layout can be treated and discussed separately from each other.

To be clear; the design of individual components and their arrangement horizontally and vertically on a grid are now two different issues.

Whereas the layout’s arrangement of components will undoubtably be different across screen sizes, the design of those same components will almost certainly transcend (damn, I hate that word) layout.

Designing components first

Think for a moment about the components that you place in almost every design. Your list will almost certainly include:

• Boxes;
• Data tables and other data panel types
• Images (content and iconography)
• Interface elements (carousels or scrollers, and so on)
• Navigation (several levels)
• Type

Design in the absence of layout becomes the styling of these components. How these parts look is now what we mean by a design. More specifically, the look and feel of these parts is what designers can and should work on first, long before any thought is given to layout. I like to think of the approach as designing page components at an atomic level.

Now, I know that the idea of designing components like this, out of context and without layout, might sound strange—particularly if, like most of us, you’ve been used to designing Web pages the traditional way. But, truth be told, we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble.

In Content Choreography, Trent Walton wrote:

“Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form and hierarchy.”

This separation of design from layout that we achieve when we design at an atomic level is important because it helps everyone — the designer and their boss or client — focus on the details in a design while setting no expectations for how components will ultimately be arranged across various screen sizes or devices.

Design Atmosphere

For some people, designing elements first, even in a browser, comes easily. For many reasons it’s not so easy for everyone. Even if we create full-page static visuals, we can still extract the component design and use it across screen sizes and devices. Let’s break down a design, any design, into its components:

• Typography: typefaces, type treatments and white space
• Color: evoking mood and highlighting actions
• Texture: decorative aspects, including borders, shading and shapes
• Layout: elements arranged on a grid, horizontally and vertically

Now let’s separate layout from those other constituents. What remains — the color, texture and typography — I call the atmosphere of a design.

Atmosphere describes the feelings we get that are evoked by colour, texture and typography. You might already think of atmosphere in different terms. You might call it “feel”, “mood” or even “visual identity.” Whatever words you choose, the atmosphere of a design doesn’t depend on layout. It’s independent of arrangement and visual placement. It will be seen, or felt, at every screen size and on every device.

Further reading

• Atomic design by Brad Frost
• Constructing the Rock Hammer pattern library using these principles

Anna and I talk about being nominated for awards and being made into action figures and how that’s made us feel. We discuss whether it’s acceptable to make you or your company look bigger than you really are and whether sites such as Agencies Rated can really help freelancers.

Blush does beautiful letterpress printing of cards, stationery and more for designers and artists. Get 25% off their beautiful typography prints in June using the offer code unfinishedprints. And Revolution, is a conference being held in Shrewsbury, Shropshire in the UK on Friday 27th September.

In January 2012, we began creating this solid, yet flexible, foundation that will help Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity. What you see here is a visual summary of the guidelines

A lot of design gold to learn from in Google’s Visual Assets Guidelines. Part two is here. (Via my mate Dan.)

This week the show’s sponsored by mine and Smashing Magazine’s CSS3 For Responsive Design workshop. It’s happening in Freiburg in Germany on June 25th. Save 15% off the ticket price with the offer code unfinished6.

And Revolution. Revolution is a conference being held in Shrewsbury, Shropshire in the UK on Friday 27th September. Speakers include Elliot Jay Stocks, Jonathon Snook, our good friend and stand-in co-host Laura Kalbag and more.

Thanks again to all our sponsors for making this show possible every week.

I feel each time you attend a workshop of Andy Clarke’s, but expect a “great technique” and “amazing tool” from work and his track record, but the expectation is betrayed every time in a good way.

But the gist of my message — of responsive vs adaptive design (very common in Japan) is there, along with some photographs of the day.

What Andrew doesn’t mention, and something I’ve been using Ghostlab for this week here at WIPO is demonstrating designs to clients on a range of devices all at the same time. Instead of handing someone a phone or tablet and directing them — “now, press the menu link” — I’ve been driving the demonstration from my own phone. Honestly, watching a client’s face when their phone updates remotely is a delight. Big smiles. They think it’s magic.