Need noise? Get noise.

(Via: Tim Van Damme’s @2x.)

I’ve fortunately never had to deal with the issues Andy mentions, but it did remind me to update my own Killer Contract.

The startup culture is similar to professional sports in that it requires a fleet of fresh-out-of-college kids to trade their lives and their health for the potential of short-term glory. “Old farts” are often excluded from that culture, not because we’re lousy coders but because we won’t put up with that shit.

I’ve given Vitaly and his Smashing Magazine team some (good natured) stick over the years, but (to their credit) they ignored me completely and have built a fabulous business that publishes the website and books including Smashing Book #3 that I was proud to write the closing chapter for.

Now they’re organising what I predict with be one of the best web conferences anywhere this year. The Smashing Conference will be held in beautiful, historic FreibergFreiburg in Germany on 17^th and 18^th September and the speaker line up is tremendous. Heck. It has three of my CSS heroes, two of my favourite people in the whole world, AND more. What a show it’s going to be!

As you probably heard, I’m taking a break from speaking this year (apart from Austin (see what I did there?)), but I will be hosting a Fashionably Flexible Responsive Web Design workshop on the 19^th. It’s an updated version of the workshop that was so well received in Australia earlier in the year. (You can grab the slide deck from that from Speaker Deck to give you a taste.

You know the drill.

• Places are limited.
• Found out more.
• Register. Now.

I’m looking forward to the Smashing Conference so much. So much! It’s going to be super, smashing, great.

This post from Jolly Bureau ties in very nicely with what I wrote for The Pastry Box Project this month. So I thought I’d elaborate on:

About a year ago, I left day rates and job rates behind and started estimating, billing and working on projects on a weekly basis. A year on and I’m better organised, more productive and less stressed than ever before. Our accounts are in better shape and no one owes us money for longer than a week. It was one of the best business moves I’ve made.

I skipped linking to this a couple of weeks ago, but it makes sense to read along with the previous link to Edward O’Riordan.

Edward O'Riordan, writing for .Net magazine

They emphasise surface impressions when we also need to talk about the feel of browsing and the experience of interacting. Getting design sign-off as images of pages we teach them to think of sites in terms of pages rather than components. Comps give a false impression of the web as something which neither ebbs nor flows but stays stubbornly static.

It’s great to see the idea that static design visuals set the wrong expectations getting more coverage. I’d had liked to read more details about exactly how Edward deals with this in his own client relationships, so I can see how it differs from mine.

Chris makes some great comparisons. I’ve used LESS extensively for a while now and there’s been exactly zero instances where I needed something that LESS couldn’t do (but Sass could.) Maybe that’s because I’m a designer who writes code, not a developer? Who knows? Still, I am tempted to work with Sass on a project sometime.

I’ve been reading Jonathon Snook’s Scalable and Modular Architecture for CSS book this week. (It’s well written, practical and perfectly formatted for Kindle. I learned a lot and I’d highly recommend it.) In SMACSS, Jon recommends breaking down stylesheets into rules for:

• Base
• Layout
• Module
• State
• Theme

He establishes a naming convention for these categories of styles. Jon says:

I like to use a prefix to differentiate between Layout, State, and Module Rules. For Layout, I use l- but layout- would work just as well. Using prefixes like grid- also provide enough clarity to separate layout styles from other styles.

I like this idea a lot because, 1; I’ve had a fascination with naming conventions, and 2; I’ve long had a problem with mixing styles for layout with styles for ‘atmosphere’ (colour, texture and typography,) something we’ve all done for years.

To me, using classes makes sense when we need to ‘classify’ items such as modules on a page. They make sense for groups of styles in a theme too. But it doesn’t make sense to me to use classes for the layout outline of a page, particularly when many times we add the elements they style purely for layout reasons and especially in a responsive context. It feels somehow messy.

Years ago, when oft-used browsers only supported element, class and id selectors, we didn’t have much choice. Now that browsers from Internet Explorer 7 up have solid support for CSS attribute selectors, we can bind our styles to elements based on their attributes. That’s why we’ve seen more and more people binding styles using ARIA role attributes. For example:

<div role="navigation">…</div>

[role="main"] {
/* styles */ }

Reading SMACSS got me thinking. Why not abstract layout styles even further than Jon suggested, by using HTML5’s data- attributes instead of classes. Something like:

<div data-layout="content">…</div>

[data-layout="content"] {
/* styles */ }

Conceptually, this fully separates styles for layout from every aspect of atmosphere. Although I’m aware that there are no practical advantages to using data-, to me it somehow feels cleaner.

I’m not 100% sure if this could be a legitimate use for data-. What are the experts’ opinion? I’d be interested in hearing if you’ve used this approach already and what you think might be the possible advantages and disadvantages?

When I set up my home/office wireless after switching broadband providers, I called the downstairs router’s network ‘Planet Of The Apes.’ And why not? ‘Andy Clarke’s Network’ is a boring name. (And Planet Of The Apes is a better movie than Star Wars.)

Then I called the Airport Extreme extended upstairs network ‘Rise Of The Planet Of The Apes’ and the Airport Express I keep under my desk ‘Beneath The Planet Of The Apes.’

I bought a mifi today because I’m working in London a fair bit over the next few months and the client site doesn’t have open wifi. I could stick with the network’s given name, 3MobileWiFi-c602, but ‘Escape From The Planet Of The Apes’ seems much, much more appropriate.

Jordan Moore (who has a name like a country singer:)

Say for example we want to present an article in the narrow single column view, but before the article appears in the stacking order we have: a header (containing site name etc), navigation, maybe even a banner advertisement, then the article. The heart of the page is buried beneath items that may be less important in this context. Rather than brutally hiding these items with a display:none property we can reorder them using another CSS property - flex box.

It takes something to make me sign in and blog on a Sunday, but this is good. Very good. Read the whole thing. Then study Jordan’s demo page. Brilliant.

Harry Roberts:

Loosely, the single responsibility principle states that every module or chunk of code (a function etc) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.

I didn’t know this approach had a name or think to look.

Faruk Ateş in Opera Confirms WebKit Prefix Usage:

I’m left feeling that this is just Browser War II, and what grace we’d regained by switching to Feature Detection rather than UA sniffing will be lost once again as a result of these moves.

With some luck, things will just become better for the users of those browsers who will once more pretend to be someone they aren’t, and us web authors aren’t inconvenienced too much. Meanwhile, it is left—again—up to web authors to invent the tools to placate the browser vendors who gave us this mess in the first place.

I commend Opera for finally admitting — through their decision to adopt WebKit Prefixes — that their real motives are the corporate motives we always knew them to be. That they’re not the standards champions they pretend to be. That they’re prepared to break a fragile, but working standard for corporate gain.^[1]

What their actions also tell us is that despite hiring some of the best minds in the business^[2], their strategy of evangelists and ‘web openers’ has resoundingly failed to convince developers that Opera is relevant. If that wasn’t the reality, they would have no need to adopt another platform vendor’s prefixes.

What Opera forgets in its colossal arrogance, is that vendor specific prefixes were intended to give developers a choice to support a browser platform — or not.

We were never ‘required’ to include a full set of prefixes.

Excluding Opera didn’t qualify as ‘invalid.’

If I choose to exclude Opera (or Webkit or Mozilla or Microsoft,) that’s my choice and my right.

1. For the record, I don’t have a problem with a profit motive, just hypocrisy. 2. I don’t have a problem with individual Opera employees either (although many think I do). This isn’t about them.

I’ve worked for myself for the last fourteen years and for most of that I’ve worked in my office at home.

Now this is handy. It adds viewport width and height as a :before pseudo element on the body to help you determine breakpoints for content-first responsive design. Here’s Matt’s test page with the debugger* enabled. Download the debugger from Github.

* Snort

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.

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

Honestly, I’ve been wanting to start hoarding candles, fire-lighters, tins of corned beef (it’s nice. Really.) and other things for a while. I know the collapse of civilisation is much more likely to come from a petrol strike these days, but hey. It’s a zombie survival map. My wife thinks I’m mad.

It’s been almost three years since I launched, what most people thought of as the bat-shit crazy Universal Internet Explorer 6 CSS stylesheet.

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