Archive: March, 2013

105

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am          
4am
8am                      
12pm                        
4pm                                        
8pm            

map

Saturday, March 30th, 2013

Not tumbling, but spiralling

Tumblr is traditionally the home of fun and frivolous blogs: Moustair, Kim Jong-Ill Looking At Things, Missed High Fives, Selleck Waterfall Sandwich, and the weird but wonderful Consume Consume (warning: you may lose an entire day in there).

But there are also some more thoughtful collections on Tumblr:

  • Abondonedography documents the strangely hypnotic lure of abandoned man-made structures, as does Abandoned Playgrounds.
  • Adiphany shows some of the cleverer pieces from the world of advertising.
  • Histories Past is a collection of fascinating historical photographs.
  • Found is also a collection of photographs, all of them from the archives of National Geographic, many of them hitherto-unpublished.

It’s going to be real shame when Tumblr shuts down and deletes all that content.

Of course that will never happen. Just like that never would’ve happened to Posterous or Pownce or Vox or GeoCities — publishing platforms where millions of people published a panoply of posts from the frivolous to the sublime, all of them now destroyed, their URLs purged from the web.

That reminds me: there’s one other Tumblr-hosted blog I came across recently: Our Incredible Journey documents those vile and disgusting announcements that start-ups make when they get acquired by a larger company, right before they flush their user’s content (and trust) down the toilet.

Oh, and I’ve got a Tumblr blog too. I just use it for silly pictures, YouTube videos, and quotes. I don’t want it to hurt too much when it gets destroyed.

Abandonedography

Armchair travelling to Ballardian locations.

Histories Past

Documenting history through photography.

Adiphany

Clever advertising.

Friday, March 29th, 2013

National Geographic Found

Celebrating 125 years of National Geographic, this Tumblr blog is a curated collection of photography from the archives. Many of the pictures are being published for the first time.

Ross Andersen – Humanity’s deep future

A really great interview with Nick Bostrom about humanity’s long-term future and the odds of extinction.

First public use of what Became Proxima Nova by Mark Simonson

Who knew? The reissue of the classic thirteen-part Star Wars radio series was the first appearance of a proto-Proxima Nova.

The canonical smart city: A pastiche by Adam Greenfield’s Speedbird

Sorta sci-fi from Adam.

Consider this a shooting script for one of those concept videos so beloved of the big technology vendors.

Thursday, March 28th, 2013

How people sit in meetings and what it really means

Show me on the teddy bear where Nate Bolt touched you.

Ten tips guaranteed to improve your startup success by Anil Dash

It’s a big ask, but if you can action these ten tips from Anil, your startup will crush it.

Our Incredible Journey

A collection of those appalling doublespeek announcements that sites and services give when they get acquired. You know the ones: they begin with “We’re excited to announce…” and end with people’s data being flushed down the toilet.

Wednesday, March 27th, 2013

Google Keep? It’ll probably be with us until March 2017 - on average

Charles Arthur analyses the data from Google’s woeful history of shutting down its services.

So if you want to know when Google Keep, opened for business on 21 March 2013, will probably shut - again, assuming Google decides it’s just not working - then, the mean suggests the answer is: 18 March 2017. That’s about long enough for you to cram lots of information that you might rely on into it; and also long enough for Google to discover that, well, people aren’t using it to the extent that it hoped.

Tuesday, March 26th, 2013

Instant artist statement: Arty Bollocks Generator

Don’t let James Bridle get a hold of this.

Kyle Bean - Portfolio

Kyle’s new site is looking lovely and responsive (thanks to Josh). But mostly it just gets out of the way so you can take in his truly amazing work.

The Secret Door - Step Through To The Unknown… | Safestyle UK

Prepare to lose yourself for hours as you keep hitting “take me somewhere else” through these most bizarre and wonderful Google street view locations.

Strassenblickfernweh indeed.

Monday, March 25th, 2013

Map Projection Transitions

A lovely way of demonstrating the differences between map projections. Drag for extra fun.

Brett Jankord – Active development on Categorizr has come to an end

I think it’s a bit of a shame that Brett is canning his mobile-first device-detection library, but I totally understand (and agree with) his reasons.

There is a consensual hallucination in the market, that we can silo devices into set categories like mobile, tablet, and desktop, yet the reality is drawing these lines in the sand is not an easy task.

Out of Sight, Out of Mind: A visualization of drone strikes in Pakistan since 2004

This powerful timeline illustrates how drone attacks have increased dramatically under Obama’s administration.

Friday, March 22nd, 2013

Specializing yourself into a corner by Scott Kellum

I can empathise with Scott’s worries about fragmentation on the front-end with Saas, Styles, LESS, Compass, yada, yada, yada.

I want to share my code with everyone who writes CSS, not a subset of that group.

Thursday, March 21st, 2013

Science Hack Day is coming to your city! by Ariel Waldman

Want a Science Hack Day where you live? Make it so!

I’m done with the web by Randy Luecke

I find it hard to agree with any part of this. To me, it shows a deep misunderstanding of the web—treating the web as just another platform, without understanding what makes it so special.

I think I may have found my polar opposite.

The hilarious obsession with file size is the start of my frustrations with the web community.

Life & Thyme

Good writing. Good design. Good food.

Moving on by Harry Brignull

I’m going to miss having Harry around at Clearleft. Sounds like he might miss Clearleft too:

What I’ve loved about Clearleft is that it’s just so different to any other agency I’ve worked at. There’s no company process – everyone’s encouraged to experiment and try different techniques to suit the client’s needs. There’s hardly any internal meetings. I’ve never once had a conversation about my billing efficiency. The focus is on quality, and profitability is almost seen as a by-product. You’re encouraged to share your learnings externally rather than keep them in-house. Everyone’s trusted and given a lot of independence.

Why Americans Are the Weirdest People in the World

A truly fascinating and well-written article on how changes are afoot in the worlds of psychology, economics, and just about any other field that has performed tests on American participants and extrapolated the results into universal traits.

Given the data, they concluded that social scientists could not possibly have picked a worse population from which to draw broad generalizations. Researchers had been doing the equivalent of studying penguins while believing that they were learning insights applicable to all birds.

Wednesday, March 20th, 2013

TEDxSummerisle

Oh, God!

Oh, Jesus Christ!

Don’t Be Afraid To Teach Interactions by Timoni West

Timoni tackles the tricky topic of teaching taps.

Discoverability can be hard, but that shouldn’t stop us trying out new interactions.

Learning to See on Information Architects

A sweet, beautiful love letter to design, from Oliver.

Tuesday, March 19th, 2013

Titles are Toxic on Rands In Repose

Yes, yes, yes!

In Toxic Title Douchebag World, titles are designed to document the value of an individual sans proof. They are designed to create an unnecessary social hierarchy based on ego.

Placehold on tight

I’m a big fan of the placeholder attribute introduced in HTML5. In my book, I described the cowpath it was paving:

  1. When a form field has no value, insert some placeholder text into it.
  2. When the user focuses on that field, remove the placeholder text.
  3. If the user leaves the field and the field still has no value, reinstate the placeholder text.

That’s the behaviour that browsers mimicked when they began implementing the native placeholder functionality. I think Opera was first. Now all the major browsers support it.

But in some browsers, the details of that behaviour have changed slightly. In Chrome and Safari, when the user focuses on the field, the placeholder text remains. It’s not until the user actually begins to type that the placeholder text is removed.

Now, personally speaking, I’m not keen on this variation. It seems that I’m not alone. In an email to the WHATWG, Markus Ernst describes the problems that he’s noticed in user-testing where users are trying (and, of course, failing) to select the placeholder text in order to delete it before they begin typing.

It seems that a relevant number of users do not even try to start typing as long as the placeholder text remains visible.

But this isn’t so clear-cut. A quick straw poll at the Clearleft showed that opinions were divided on this. Some people prefer the newer behaviour …however it quickly became apparent that the situations they were thinking of were examples of where placeholder has been abused i.e. attempt to act as a label for the form field. In that situation, I agree, it would definitely be more useful for the labelling text to remain visible for as long as possible. But that’s not what placeholder is for. The placeholder attribute is intended to show a short hint (such as an example value)—it should be used in addition to a label; not instead of a label. I tend to use example content in my placeholder value and I nearly always begin with “e.g.”:

<label for="fn">Your Name</label>
<input id="fn" name="fn" type="text" placeholder="e.g. Joe Bloggs">

(Don’t forget: generating placeholders from datalists can be a handy little pattern.)

So if you’re using placeholder incorrectly as a label, then the WebKit behaviour is probably what you want. But if you’re using placeholder as intended, then the behaviour in the other browsers is probably more desirable. If you want to get Safari and Chrome to mimic the behaviour of the other browsers, here’s a handy bit of CSS (from that same thread on the WHATWG mailing list):

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}

You can see that in action on search forms at The Session for recordings, events, discussions, etc.

Now, if you do want your label—or input mask—to appear within your form field and remain even when the user focuses on the field, go ahead and do that. Use a label element with some CSS and JavaScript trickery to get the effect you want. But don’t use the placeholder attribute.

ROCA: Resource-oriented Client Architecture

I like these design principles for server-side and client-side frameworks. I would say that they’re common sense but looking at many popular frameworks, this sense isn’t as common as it should be.

On Responsive Layout and Grids by David Bushell

I agree with David: most pre-rolled grid “solutions” are way too complicated. And in any case, applying a pre-existing grid framework for a new project seems kind of like applying a pre-existing colour palette.

As David points out, it really needn’t be so complicated.

Ideas of March — All in the head

A wonderful rallying cry from Drew.

The problem:

Ever since the halcyon days of Web 2.0, we’ve been netting our butterflies and pinning them to someone else’s board.

The solution:

Hope that what you’ve created never has to die. Make sure that if something has to die, it’s you that makes that decision. Own your own data, friends, and keep it safe.

Monday, March 18th, 2013

Did we miss your tweet from earlier?

In case you missed it earlier…

Sunday, March 17th, 2013

Notes on remixing Noon, generative text and Markov chains

Jeff Noon and Markov chains—a heavenly match by Dan.

Saturday, March 16th, 2013

Responsive Day Out in Andy’s sketchbook

A report on the Responsive Day Out that focuses on three themes from the day: progressive enhancement, process, and design systems.

Friday, March 15th, 2013

inessential.com: Why I love RSS and You Do Too

Brent Simmons pens a love-letter to RSS, a technology that you use every day, whether you realise it or not.

On Silos vs an Open Social Web by Tantek

Tantek steps back and offers some practical approaches to reclaiming a more open web from the increasingly tight clutches of the big dominant roach motels.

Notice that he wrote this on his own domain, not on Branch, Medium, Google+, Facebook, or any other black hole.

Dark Archives in Contents Magazine

A really lovely piece on the repositories of information that aren’t catalogued—a fourth quadrant in the Rumsfeldian taxonomy, these dark archives are the unknown knowns.

Thursday, March 14th, 2013

Benjamin Parry at Responsive Day Out 2013

Benjamin’s notes from the Responsive Day Out.

Wednesday, March 13th, 2013

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

What we learnt from the Responsive Day Out conference on 8 Gram Gorilla

A nice write-up of the Responsive Day Out from three different perspectives.

Science Fiction Film as Design Scenario Exercise for Psychological Habitability: Production Designs 1955-2009

A white paper that looks to sci-fi films as potential prototypes for habitats for humans in space, with an emphasis on dealing with the psychological issues involved.

No to NoUI by Timo Arnall

A well-reasoned and excellently hyperlinked piece from Timo pushing back against the calls for “invisible” design.

To be fair, I’ve only ever heard the “no UI” argument in the context of “sometimes the best UI is no UI at all.”

Still, this is a great explanation of why “seamlessness” in design is by no means a desirable attribute.

blech/cloud-to-moon on GitHub

Best. Chrome extension. EVER!

Paul’s Chrome extension replaces every instance of “the cloud” with “the moon” (something I do in my head anyway).

It’s forked from an extension that replaces every instance of “the cloud” with “the clown.”

Oh, and Ben has written a version for Safari …forked from code that converts every instance of “the cloud” to “my butt.”

Tuesday, March 12th, 2013

Learn CSS layout

A handy step-by-step guide to all the ways you can use CSS for layout.

A List Apart Issue № 371

This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.

We’re not ‘appy. Not ‘appy at all.

An excellent explanation from Tom Loosemore on why the Government Digital Service is putting its energy into open standards and the web, rather than proprietary native apps.

Monday, March 11th, 2013

An interview with Jeremy Keith on The Industry

I really, really enjoyed this chat with Conor, especially the quick-fire round.

Note: I’m happy to report that between doing the interview and its publication, I managed to get the redesign of The Session out the door.

Off-canvas horizontal lists

There was a repeated rallying cry at the Responsive Day Out. It was the call for more sharing—more sharing of data, more sharing of case studies, more sharing of success stories, but also more sharing of failures.

In that spirit, I thought I’d share a pattern I’ve been working on. It didn’t work, but I’m not going to let that stop me putting it out there.

Here’s what I wanted to do…

Let’s say you’ve got a list of items; modular chunks of markup like an image and a caption, for example. By default these will display linearly on a small screen: a vertical list. I quite like the way that the Flickr iPhone app takes those lists and makes them horizontal—they go off-canvas (to the right), with a little bit of the next item peaking out to give some affordance. It’s like an off-canvas carousel.

I’d quite like to use that interaction in responsive designs. But I don’t want to do it by throwing a lot of JavaScript at the problem. So I thought I’d attempt to achieve it with a little bit of CSS.

So, let’s say I’ve got a list of six items like this:

<div class="items">
    <ul class="item-list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul><!-- /.item-list -->
</div><!-- /.items -->

Please pay no mind to the qualities of the class names: this is just a quick proof of concept.

Here’s how that looks. At larger screen sizes, I display the list items in groups of two or three, side by side. At smaller sizes, the items simply linearise vertically.

Okay, now within a small-screen media query I’m going to constrain the width of the container:

.items {
    width: 100%;
}

I’m going to make the list within that element stretch off-canvas for six screens wide (this depends on me knowing that there will be exactly six items in the list):

.items .item-list {
    width: 600%;
}

Now I’ll make each item one sixth of that size, which should be one screen’s worth. Actually, I’m going to make it a bit less than exactly one sixth (which would be 16.6666%) so that a bit of the next item peaks out:

.item-list .item {
    width: 15%;
}

My hope was that to make this crawlable/swipable, all I had to do was apply overflow: scroll to the containing element:

.items {
    width: 100%;
    overflow: scroll;
}

All of that is wrapped up in a small-viewport media query:

@media all and (max-width: 30em) {
    .items {
        width: 100%;
        overflow: scroll;
    }
    .items .item-list {
        width: 600%;
    }
    .items .item {
        width: 15%;
    }
}

It actually works …in some browsers. Alas, support for overflow: scroll doesn’t extend back as far as Android 2, still a very popular flavour of that operating system. That’s quite a showstopper.

There is a polyfill called Overthrow from those mad geniuses at Filament Group. But, as I said, I’d rather not throw more code at the problem. While I can imagine shovelling a polyfill at a desktop browser, I have a lot of qualms about trying to “support” an older mobile browser by giving it a chunk of JavaScript to chew on.

What I really need is a way to detect support for overflow: scroll. Alas, looking at the code for Overthrow, that isn’t so easy. Modernizr cannot help me here. We are in the realm of the undetectables.

My pattern is, alas, a failure.

Or, at least, it’s a failure for now. The @supports rule in CSS is tailor-made for this kind of situation. Basically, I don’t want any those small-screen rules to apply unless the browser supports overflow: scroll. Here’s how I will be able to do that:

@media all and (max-width: 30em) {
  @supports (overflow: scroll) {
    .items {
        width: 100%;
        overflow: scroll;
    }
    .items .item-list {
        width: 600%;
    }
    .items .item {
        width: 15%;
    }
  }
}

This is really, really useful. It means that I can start implementing this pattern now even though very few browsers currently understand @supports. That’s okay. Browsers that don’t understand it will simply ignore the whole block of CSS, leaving the list items to display vertically. But as @support gets more …um, support …then the pattern will kick in for those more capable browsers.

I can see myself adding this pre-emptive pattern for a few different use cases:

Feel free to poke at the example code. Perhaps you can find a way to succeed where I have failed.

The Aleph: Infinite Wonder / Infinite Pity

Just like in the Borges short story, you can now see everything at once …from Project Gutenberg, or from Twitter, or from both.

This may be the only legitimate use case for (truly) infinite scrolling.

Sunday, March 10th, 2013

Slow glass

The day that Opera announced that it was changing its browser to use the WebKit rendering engine, I was contacted by .net magazine for my opinion on the move. My response was:

I have no opinion on this right now.

Frankly, I’m always quite amazed at how others can form opinions so quickly. Sometimes opinions are formed and set on technologies before they’re even out and about in the world: little printers, Apple watches, Google glasses…

The case against Google Glass seemed to be a done deal after Mark Hurst published The Google Glass feature no one is talking about:

The key experiential question of Google Glass isn’t what it’s like to wear them, it’s what it’s like to be around someone else who’s wearing them.

It’s a very persuasive piece of writing and it certainly gave me food for thought. Then Eric wrote Glasshouse:

Our youngest tends to wake up fairly early in the morning, at least as compared to his sisters, and since I need less sleep than Kat I’m usually the one who gets up with him. This morning, he put away a box he’d just emptied of toys and I told him, “Well done!” He turned to me, stuck his hand up in the air, and said with glee, “Hive!”

I gave him the requested high-five, of course, and then another for being proactive. It was the first time he’d ever asked for one. He could not have looked more pleased with himself.

And I suddenly realized that I wanted to be able to say to my glasses, “Okay, dump the last 30 seconds of livestream to permanent storage.”

Now I’ve got another interesting, persuasive perspective on the yet-to-be-released product.

Just as we can be very quick to label websites and social networks as dead (see Flickr), I worry if we’re often too quick to look for the worst aspects in any new technology.

Natalia has written a great piece called No, let’s not stop the cyborgs in reaction to the over-the-top Luddism of the Stop The Cyborgs movement:

Healthy criticism and skepticism towards technologies and their impact on society is necessary, but framing it in a way that discredits all people with body and sense enhancing technologies is othering.

Now we get in to the question of whether technology can be inherently “good” or “bad.” Kevin Kelly avoids such loaded terms, but he does ascribe some kind of biased trajectory to our tools in his book What Technology Wants.

Natalia writes:

It’s also important to remember that technologies themselves aren’t always ethically questionable. It’s what we do with them that can be positive or contribute to suffering and misery. Sometimes the same technology can be used to help people and to simultaneously ruin lives for profit.

A fair point, but one that is most commonly used by the pro-gun lobby—proponents of a technology that I personally find very hard to view as neutral.

But the point remains: we seem to have a natural impulse to immediately think of the worst that could happen with any new technology (though I’m just as impatient with techno-utopians as I am with techno-dystopians). I really enjoy watching Black Mirror but its central question grows wearisome after a while. That question is “What’s the worst that could happen?”

I am, once more, reminded of the danger of self-fulfilling prophesies when it comes to seeing the worst in technologies like Google Glass. As Matt Webb’s algorithm puts it:

It’s not the end of privacy because it’s all newly visible, it’s the end of privacy because it looks like it’s the end of privacy because it’s all newly visible.

I was chatting with fellow sci-fi fan Jon Tan about Kim Stanley Robinson, whose work I (shamefully) haven’t dived into yet. Jon told me that a good starting point would be the Three Californias trilogy. It consists of one utopia, one dystopia, and one apocalypse. I like the sound of that.

Those who take an anti-technology stance, or at least an overly-negative stance on technology, are often compared to the Amish. But as Stewart Brand is quick to point out, the Amish don’t reject technology—instead, they take their time in deciding whether a new technology will, on balance, be better or worse for their society in the long term:

The Amish seek to master technology rather than become its slave.

I think that techno-utopians and -dystopians alike can appreciate that.

Friday, March 8th, 2013

Responsive Day Out – A designer’s perspective | 383 Blog

A write-up of the Responsive Day Out from the perspective of a designer whose background is off-web:

Unlike the experts, I haven’t had to make the transition from designing for desktop for years to suddenly becoming device agnostic, which is what I think the main issue seems to be.

Thursday, March 7th, 2013

There Was Once a Certain Kind of Cinema

A magnificent piece of writing from Michael, examining the influence of Sergio Leone on George Lucas.

Told you so

One of the recurring themes at the Responsive Day Out was how much of a sea change responsive design is. More than once, it was compared to the change we went through going from table layouts to CSS …but on a much bigger scale.

Mark made the point that designing in a liquid way, rather than using media queries, is the real challenge for most people. I think he’s right. I think there’s an over-emphasis on media queries and breakpoints when we talk about responsive design. Frankly, media queries are, for me, the least interesting aspect. And yet, I often hear “media queries” and “responsive design” used interchangeably, as if they were synonyms.

Embracing the fluidity of the medium: that’s the really important bit. I agree with Mark’s assessment that the reason why designers and developers are latching on to media queries and breakpoints is a desire to return to designing for fixed canvases:

What started out as a method to optimise your designs for various screen widths has turned, ever so slowly, into multiple canvas design.

If you’re used to designing fixed-width layouts, it’s going to be really, really hard to get your head around designing and building in a fluid way …at first. In his talk, Elliot made the point that it will get easier once you get the hang of it:

Once you overcome that initial struggle of adapting to a new process, designing and building responsive sites needn’t take any longer, or cost any more money. The real obstacle is designers and developers being set in their ways. I know this because I was one of those people, and to those of you who’ve now fully embraced RWD, you may well be nodding in agreement: we all struggled with it to begin with, just like we did when we moved from table-based layout to CSS.

This is something I’ve been repeating again and again: we’re the ones who imposed the fixed-width constraint onto the medium. If we had listened to John Allsopp and embraced the web for the inherently fluid medium it is, we wouldn’t be having such a hard time getting our heads around responsive design.

But I feel I should clarify something. I’ve been saying “we” have been building fixed-width sites. That isn’t strictly true. I’ve never built a fixed-width website in my life.

Some people find this literally unbelievable. On the most recent Happy Mondays podcast, Sarah said:

I doubt anyone can hold their hands up and say they’ve exclusively worked in fluid layouts since we moved from tables.

Well, my hand is up. And actually, I was working with fluid layouts even when we were still using tables for layout: you can apply percentages to tables too.

Throughout my career, even if the final site was going to be fixed width, I’d still build it in a fluid way, using percentages for widths. At the very end, I’d slap on one CSS declaration on the body to fix the width to whatever size was fashionable at the time: 760px, 960px, whatever …that declaration could always be commented out later if the client saw the light.

Actually, I remember losing work back when I was a freelancer because I was so adamant that a site should be fluid rather than fixed. I was quite opinionated and stubborn on that point.

A search through the archives of my journal attests to that:

Way back in 2003, I wrote:

It seems to me that, all too often, designers make the decision to go with a fixed width design because it is the easier path to tread. I don’t deny that liquid design can be hard. To make a site that scales equally well to very wide as well as very narrow resolutions is quite a challenge.

In 2004, I wrote:

Cast off your fixed-width layouts; you have nothing to lose but your WYSIWYG mentality!

I just wouldn’t let it go. I said:

So maybe I should be making more noise. I could become the web standards equivalent of those loonies with the sandwich boards, declaiming loudly that the end is nigh.

At my very first South by Southwest in 2005, in a hotel room at 5am, when I should’ve been partying, I was explaining to Keith why liquid layouts were the way to go.

Fixed width vs Liquid

That’s just sad.

So you’ll forgive me if I feel a certain sense of vindication now that everyone is finally doing what I’ve been banging on about for years.

I know that it’s very unbecoming of me to gloat. But if you would indulge me for a moment…

I TOLD YOU! YOU DIDN’T LISTEN BUT I TOLD YOU! LIQUID LAYOUTS, I SAID. BUT, OH NO, YOU INSISTED ON CLINGING TO YOUR FIXED WIDTH WAYS LIKE A BUNCH OF BLOODY SHEEP. WELL, YOU’RE LISTENING NOW, AREN’T YOU? HAH!

Ahem.

I’m sorry. That was very undignified. It’s just that, after TEN BLOODY YEARS, I just had to let it out. It’s not often I get to do that.

Now, does anyone want to revisit the discussion about having comments on blogs?

Wednesday, March 6th, 2013

Sensory Interfaces (SI) on O Danny Boy

Dan isn’t keen on the term “natural user interface.” Here’s why.

Antiphonal Geometry · Harmony and proportion in responsive web design

This is the full text of Owen’s talk at the Responsive Day Out. It makes for a terrific read!

Keir Whitaker on Responsive Day Out 2013

Here’s Keir’s roundup of the Responsive Day Out (which was preceded by a Shopify meetup the night before).

Seb Lee-Delisle: Playing With Code

A nice feature on Seb in the latest issue of Make magazine.

The Accessibility Project

This is a great initiative. I’m going to learn a lot from it. I hope that I might even be able to contribute to it sometime.

For discussion: viewport and font-size data in client hints

The “client hints” proposal looks really interesting: a way for user-agents to send data to the server without requiring the server to have a library of user-agent strings. But Scott has a few concerns about some of the details.

Control your own content

Honestly, if you value the content you create and put online, then you need to be in control of your own stuff.

Mailappapp by Visual Idiot

Revolutionising the way you revolutionise email.

A Responsive Day Out, 2013

Another in-depth round-up of the Responsive Day Out, this time from Vasilis.

Quotes and Accents

Jessica’s handy guide to writing the right quotes and accents on a Mac keyboard.

How was Responsive Day Out? by Flow Interactive

Yet another round-up of the Responsive Day Out. I’m pleasantly surprised by the number of people that have been blogging since the event.

Responsive Day Out by Tom Prior

An in-depth blow-by-blow account of the Responsive Day Out by my fellow Brightonian.

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

Tuesday, March 5th, 2013

The World Wide Web is moving to AOL! by Brian Bailey

Biting satire that hits its mark superbly. Ouch! Be careful — this is sharp …and funny.

Tools of the trade

I remember when Rebecca wrote about A Baseline for Front-End Developers:

I think we’re seeing the emphasis shift from valuing trivia to valuing tools.

I know that Paul places a similar emphasis on the value of front-end development tools. Personally, I’ve always been lax with keeping up to date with start-of-the-art tools. I’ve been working on the web long enough to see yesterday’s cutting-edge tools stagnate or fall out of favour.

Still, I should really do more to keep up. There are a few design tools cropping up that I should really investigate.

LayerVault and Pixelapse both offer git-style version control for Photoshop, Fireworks, and Illustrator files. Sounds useful.

Then there are the tools that I think could be really useful for making HTML prototypes: Easel is browser-based, while Hammer and Mixture are OS X apps. They’ve all got enough time-saving shortcuts to make them worth investigating further. I wouldn’t use them for production code, but like I said, handy for prototyping.

Not click. Not tap. Select. : Cennydd Bowles

Cennydd uses the word “select” as an input-neutral term for what we might be tempted to call clicks or taps. Personally, I like the term “choose”, although that word might have too much intent bundled with it.

What can I plant now?

This is handy—a month by month list of which vegetables you should be planting right now.

Monday, March 4th, 2013

Responsive Day Out - a set on Flickr

Another nice set of photos from the Responsive Day Out.

Responsive Day Out, attendees

#responsiveconf at Wolf’s Little Store

A write-up of the Responsive Day Out from one of the Belgian contingent. They’re a notoriously hard-to-please bunch but it sounds like a good time was had nonetheless.

Sadly, the ol’ “web app” get-out-of-jail-free card is whipped out once more. You know the one I mean.

The Perfect Cup of Tea

Anna documents her tea-making process.

Springboard – Coming soon from Clearleft

The latest Clearleft product will be like having an intensive set of discovery, collaboration, and exploration workshops in a box. Perfect for startups and other small businesses short on time or budget.

It starts in Spring but you can register your interest now.

Anatomy of a responsive page load

The slides from Andy’s excellent pragmatic talk on performance and aggressive enhancement at the Responsive Day Out.

Antiphonal Geometry: harmony and proportion in responsive web design

The slides from Owen’s magnificent talk at the Responsive Day Out …but you really had to be there.

Response Day Out Conference by Glenn Jones

Glenn’s notes from the Responsive Day Out. He thinks I brushed over the question of advertising (I don’t think I did, but no one topic got much airtime) and the question of “sites vs. apps”—that I did brush over: give me one good reason why we need to make a distinction (that nobody can agree on) between some sites and others. Seriously.

Responsive design – have we come full circle?

Everything old is new again. Ross noticed that many of the themes recurring at the Responsive Day Out hark back to best practices from over a decade ago: progressive enhancement, performance, good ol’ information architecture…

Program Your Own Mind 2: A responsive day out

Some thoughts and soul-searching prompted by talks at the Responsive Day Out.

Our thoughts about Responsive Day Out by Si digital

Some nice recollections from the Responsive Day Out.

The gradient chart by Cennydd Bowles

A very handy technique from Cennydd for answering the “it depends” question of when you might need a separate device-specific site (‘though I think that a separate can be a good option in addition to a responsive site, rather than instead of).

Responsive audio out

Antwerp Open Device Lab

Do you know anyone in Antwerp who wants to be part of a communal open device lab? Point them here.

A Responsive Day Out, Brighton by Hydrant

A nice write-up of the Responsive Day Out with all the right take-aways.

Sunday, March 3rd, 2013

A Responsive Day Out by David Bushell

David shares his first ever speaking experience at the Responsive Day Out. I’m so, so happy he agreed to do it—he was great!

Responsive Navigation

David’s slides from the Responsive Day Out.

Responsive Day Out – Food for thought

Some musings prompted by the Responsive Day Out. I don’t agree with everything here (I certainly don’t think any of the speakers were demonising Photoshop, and pointing the finger at browser makers to solve our problems doesn’t help with existing and older browsers) but it’s always interesting to hear what other people got from the event. I definitely agree with the final point that we need to be sharing more, and not just on the narrowband paltry medium of Twitter.

Notes from Responsive Conf — Phunky Venom

Some bullet points from the Responsive Day Out to keep you going until the audio and video is ready.

Creating a physical internet to save money and energy on logistics

I remember a talk and discussion at SxSW a few years back about trying to improve the efficiency of trade networks by making them more web-like: there are ships full of empty cargo containers, simply because companies insist on using the container with their logo on it. I really, really like the idea of applying the principles of packet-switching to physical networks.

But here’s the hard part:

The technology is not a problem. We could do it all in 10 years. It’s the business models and the mental models in people’s minds.

The Edge of the Web at Responsive Day Out

Slides, videos, and links from Paul’s presentation at the Responsive Day Out.

Saturday, March 2nd, 2013

Write The Future by Tom Hunter — Kickstarter

Now this looks like my kind of event:

A new micro-conference on science, technology, communication and fiction, organised by the Arthur C. Clarke Award.

100 meters above the sea

I met up with Nick on Wednesday night at the Altitude event in Portsmouth and we had a chat about his crazy week.

Focusing on our future — some changes to our product line-up

What an Orwellian title for a blog post announcing the wholesale destruction of user’s content. Oh, Yahoo, you sound so proud of your cavalier attitude towards the collective culture that you have harvested.

Vile fuckwits.

Playing with game console browsers

The slides from Anna’s terrific talk at the Responsive Day Out.

Oh, what a Responsive Day Out that was!

When I announced the Responsive Day Out just three months ago, I was at pains to point out that it wouldn’t be a typical Clearleft event:

It’s a kind of conference, I guess, but I think of it as more like a gathering of like-minded people getting together to share what they’ve learned, show some examples, swap techniques, and discuss problems. And all of it will be related to responsive web design.

Well, it all went according to plan. In fact, it surpassed all expectations. It was really, really, really good, thanks to the unstoppable quick-fire knowledge bombs being dropped by each and every amazing speaker.

In the run-up to the event, I kept telling the speakers not to prepare too much; after all, these would just be quick 20 minute talks, and they were all donating their time and expertise …but clearly they didn’t listen to me. Everyone brought their A-game.

At the excellent after-party, courtesy of the kind people of Gridset, lots of people said how much they liked the format. It’s one I shamelessly ripped off from Honor’s Improving Reality event—a batch of three quick, focused talks back-to-back, followed by a joint discussion with all three speakers, and some questions from the audience. I was playing host for the day, and I tried my best to keep things lighthearted and irreverent. From the comments I heard, I think I succeeded in bringing the tone down.

The final panel of the day #responsiveconf

Despite the barebones, stripped-down nature of the event, there was good coffee on hand throughout, thanks to A Book Apart and Shopify.

There will be audio, thanks to Drew. There will be video, thanks to Besquare and Mailchimp.

In the meantime, Marc has posted a bunch of pictures on Flickr and Orde Saunders liveblogged the whole day.

If you came along, thank you. I hope you had a good time and enjoyed a day out at the seaside. Special thanks to the people who came from afar afield as Italy, Spain, and Belgium. I really appreciate it.

I really enjoyed myself, and I was relieved that the somewhat unorthodox gathering worked so well. But really, yesterday was a smash hit because of the speakers. Sarah, David, Tom, Richard, Josh, Laura, Elliot, Anna, Bruce, Andy, Owen, Paul, and Mark …you were all magnificent. Thank you, thank you, thank you!

Responsive Day Out 2013 - a set on Flickr

Marc’s pictures from the Responsive Day Out.

Sarah taking notes

Responsive web design: the war has not yet been won

This was the crux of Elliot’s excellent talk at the Responsive Day Out. I heartily concur with this:

Once you overcome that initial struggle of adapting to a new process, designing and building responsive sites needn’t take any longer, or cost any more money. The real obstacle is designers and developers being set in their ways.

Asset Fonts

The slides from Josh’s super-quickfire presentation at the Responsive Day Out.

Posts from March 1st 2013 on Decade City

A blow-by-blow account of the Responsive Day Out by Orde Saunders who liveblogged the whole thing.

Logical breakpoints for your responsive design

Vasilis examines the multitude of factors that could influence an ideal measure.

Our Work Here is Done - The Web Standards Project

The WaSP is closing its doors. It has been a privilege and an honour to serve with such a fine organisation.

CSS 3D Clouds

A beautiful experiment with CSS transforms and a smattering of JavaScript.