Archive: November, 2012

47

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

map

Friday, November 30th, 2012

Planning Notices in Brighton « Phil Lucas

I wish to cover the entire Brighton Pavilion in Bakelite for my own amusement.

The Spirit Of The Web on Vimeo

This is my opening talk from Smashing conference a few months back in Freiburg, where I used to live.

All Systems Are Go!(ing to Come Apart) - Cognition: The blog of web design

I really like these thoughts on the importance of design systems for the web. It’s not about providing a few perfect deliverables that won’t survive once they go live; it’s about designing for the unexpected, the unpredictable:

Design for every state, not the best state.

Monday, November 26th, 2012

The Subcompact Publishing Reader - Readlists

A nice Readlist based on that excellent article by Craig on digital publishing:

This reader is made up of Craigmod’s essay “Subcompact Publishing” and essays linked to in the footnotes.

Subcompact Publishing — by Craig Mod

Very smart thinking from Craig about digital publishing.

beyond tellerrand 2012 session videos | Indiegogo

Marc Thiele, the lovely organiser of the Beyond Tellerand conference, needs our help recovering the video footage from this year’s event:

The HDD with all recordings (16 talks, 2 cameras) crashed. After sending the HDD to a recovery center they sent me a quote about 2832 Euro for the recovery job.

That’s about $4000. So far it’s three quarters of the way there already! Let’s see if we can hit that target.

Friday, November 23rd, 2012

Collect + share + discover type combinations.

A lovely new service from Mike Stenhouse: install the bookmarklet and then when you come across a website with a nice combination of fonts, you can save a snapshot of the page (and its fonts) for later perusal. You can then browse those fonts on Typekit, Fontdeck, MyFonts or Google Fonts.

Monday, November 19th, 2012

Is it the Internet of Things?

Wondering whether that network-enabled device of yours is worthy of being considered part of the “internet of things?” Just answer these few short questions.

ElectionBot, KineSutra and Other Mad Creations From Science Hack Day | Wired Design | Wired.com

A nice round-up of the most recent Science Hack Day in San Francisco.

Sunday, November 18th, 2012

Johnny Cash has been everywhere (man!)

A nifty little mashup from Music Hack Day London 2012.

Saturday, November 17th, 2012

When the Nerds Go Marching In - Alexis C. Madrigal - The Atlantic

The fascinating story of how a dream team of geeks helped Obama to victory. Personally, I think it’s all about the facial hair. I mean, how could they lose with Trammell’s beard to guide them?

Friday, November 16th, 2012

Soundslice: Tabs have never sounded so good

A lovely new service from Adrian that allows you to sync up guitar tabs with videos. It’s a very impressive in-browser app.

Hacking the Future: Clare Sutcliffe at TEDxBrighton - YouTube

A great short talk from Clare about Code Club.

display: none; | Laura Kalbag

Laura explains the problems with hiding content for small screens, and uses this as an opportunity to elucidate why you should blog, even if you’re think that no-one would be interested in what you have to say:

The point I’m trying to make is that we shouldn’t be fearful of writing about what we know. Even if you write from the most basic point of view, about something which has been ‘around for ages’, you’ll likely be saying something new to someone. They might be new to the industry, you might just be filling in the holes in someone’s knowledge.

Wednesday, November 14th, 2012

Building Matter

When I was preparing my Responsive Enhancement workshop for last year’s dConstruct, I thought I should create an example site to demonstrate the various techniques I would be talking about to demonstrate how responsive design could be combined with progressive enhancement to make something works great on any device.

Round about that time, while I was scratching my head trying to figure out what the fake example site should be, I got an email from Bobbie asking if I wanted to meet up for a coffee and a chat. We met up and he told me about a project he wanted to do with his colleague Jim Giles. They wanted to create a place for really good long-form journalism on science and technology.

“The thing is,” said Bobbie, “we want to make sure it’s readable on phones, on tablets, on Kindles, everything really. But we don’t know the best approach to take for that.”

“Well, Bobbie, it’s funny you should mention that,” I said. “I’m currently putting together a workshop all about responsive design, which sounds perfect for what you want to do. And I need to create an example site to showcase the ideas.”

It was a perfect match. Bobbie gave me his design principles, personas, and—most importantly—content. In return, he would get a prototype that would demonstrate how that content could be readable on any device; perfect for drumming up interest and investment.

The workshop went really well, and some great ideas came out of the brainstorming the attendees were doing.

A few months later, Bobbie and Jim put the project—now called Matter—up on Kickstarter. They met their target, and then some. Clearly there was a lot of interest in well-written original journalism on the web. Now they had to build it.

They got hold of Phil to do the backend so that was sorted but Bobbie asked me if I knew any kick-ass designers and front-end developers.

“Well, I would love to work on it,” I said. “So how about working with Clearleft?”

“I didn’t think you guys would be available,” he said. “I’d love to work with you!”

And so we began a very fun collaboration. Paul moved his desk next to mine and we started playing around with the visual design and front-end development. Phil and Bobbie came by and we hammered out design principles, user journeys, and all that fun stuff.

Finishing up a great day of project planning with Bobbie and Phil

It was really nice to work on a project where readability took centre stage. “Privilege the reading experience” was our motto.

Paul did some fantastic work, not just on creating a typographic system, but also creating a brand identity including what I think is a really great logo.

Wearing my @ReadMatter T-shirt

I started putting together a system of markup and CSS patterns, using the device lab to test them. Phil started implementing those patterns using Django. It all went very smoothly indeed.

Testing Placekittening

Today is launch day. Matter is live. If you backed the project on Kickstarter, you’ve got mail. If not, you can buy the first issue for a mere 99 cents.

The first piece is a doozy. It’s called Do No Harm:

Why do some people want to amputate a perfectly healthy limb? And why would any doctor help them?

If this is indicative of the kind of work that Matter will be publishing, it will definitely live up to its ambitious promise:

MATTER commissions, crafts and publishes unmissable journalism about science, technology and the ideas shaping our future.

Matter: A Look At A New Way To Read About Science - Download The Universe

Just a few hours after launch, here’s the first review of Matter complete with some speculation on where it might go.

Full fathom frontal

It’s been a busy time in Brighton. Last Wednesday’s Skillswap was an excellent affair, with terrific talks about making physical things from Chris Thorpe, Dan Williams, and the lovely young chaps from Mint Digital’s Foundry who were showing their lovely dough globe.

Two days later, it was time for this year’s Full Frontal conference, a highlight of the web-dev calendar. It was really, really good. The general consensus at the after-party was that this was the best year yet. That’s quite something when you consider that in 2009 I said:

it’ll be hard to match the standard set by this year’s conference.

I love it when there are events on in Brighton—dConstruct, Reasons To Be Creative, UX Brighton. It’s great to have geeks come to visit. I always feel like an ambassador and I want the town to be on its best behaviour.

The line-up for Full Frontal was really well curated by Remy. It started with a one-two punch of big-picture thinking, dived into the practicalities of working on the cutting-edge of today’s technologies and then wrapped up with a long-zoom trip down memory lane with Chris.

The one-two punch came from James and John. Like an Oxford debate, they were arguing from opposite ends of a spectrum of opinion. James argued that was perfectly reasonable, even desirable, to make a web app entirely in JavaScript with no HTML in the body element whatsoever. John cautioned against throwing the markup baby out with the web app bathwater, pointing to the robustness of the web stack’s architecture.

The whole point of this opening to the conference was to spark debate and discussion, which it certainly did. Witness this post by Mike Davies in response to James’s arguments.

I’ve seen James present before and, while I certainly don’t agree with what he’s saying, he is a very good presenter. He used a particularly sneaky technique this time. This technical term for this technique is “being reasonable.” Half way through his talk he pointed out that he was taking a deliberately extremist approach and that the truth is that every website sits somewhere on a continuum between document and app (and that websites have had app-like capabilities since the dawn of the submit button). Talking with Mark in the break, we decided we should just get T-shirts with “It Depends” emblazoned on them.

Side note: I’m afraid I must deduct one or two points from James for employing a rhetorical device that really annoys me. At one point (and admittedly just one point) he referred to the “other side” as being dogmatic. Whenever someone labels those they disagree with as “dogmatic” or “purist”, it’s a lazy meaningless barb (like calling someone a hipster). “I’m passionate; you’re dogmatic. I sweat the details; you’re a purist.” Even when I agree completely with the argument being made—as was the case with Andy’s superb talk at South by Southwest this year—I cringe to hear the “dogma” attack employed: especially when the argument is strong enough to stand up on its own without resorting to Croftian epithets.

Anyway, the debate between James and John was a great start to a great day of talks. In some ways, Anna’s excellent talk on the diversity of web browsers on gaming devices was the ultimate rebuttal to James’s argument. “I don’t care about browsers that can’t run this JavaScript,” said James. “This browser basically can’t handle JavaScript,” said Anna. “And here’s the number of young people in the UK accessing the web on this device…”

The Ubelly blog post described Anna’s talk as “One of the best talks of the conference and one of the best talks I have seen this year.”

All in all, a great day which was followed by a whole day of hacking on drones. Clearleft sponsored the event, which means we now have our own flying robot. This could be dangerous.

We’ll be sure to take the drone with us when we head into deepest darkest Dorset next week for this year’s hack farm. But before that I’m in Belfast for the week of Build “don’t-call-it-a-conference” Conf. And you know what I really like? I’m seeing some of the same faces that I saw in Brighton at Full Frontal. Now that’s what I call a balanced conference diet.

Projecteo - The tiny instagram projector - Projecteo

We got a sneak peak of this lovely little Instagram-powered projector from the guys at Mint Digital at last week’s Skillswap. “It’s not a wheel. It’s a carousel.”

Now you can back it on Kickstarter.

The Vanilla Web Diet | Smashing Coding

I wholeheartedly agree with Christian’s diagnosis of the average web page: it’s overweight to the point of obesity. Fortunately Dr. Heilmann has some remedies.

Fear and Coding in Brighton : Full Frontal 2012

A terrific write-up of this year’s Full Frontal conference, with a descriptive rundown of each talk.

Was the Internet just an accident? | Scott Jenson

Man, I just love Scott Jenson.

Our brains have collectively gone startup-crazy, seeing the world through stock option colored glasses, assuming that if there is no money, there is clearly no value. This is madness. I’m so desperately worried that the internet will turn out to be a happy accident.

Turning his focus on “the internet of things” he makes the very good point that what we need isn’t one company or one proprietary service; we need an ecosystem of open standards that will enable companies to build services.

We all have to appreciate how we need a deep, open solution to solve this problem. If we don’t understand, demand even, that hardware devices need to be just as discoverable an open as web servers are today, we’ll never see the internet of things come to pass.

Tuesday, November 13th, 2012

YOU CHOSE WRONG

Documenting all the ways you could die in a choose-your-own-adventure book.

isolani - Web Standards: Web App Mistakes: Condemned to repeat

Some great thoughts from Mike Davies about the strengths of the web, prompted by some of the more extreme comments made by James Pearce at Full Frontal last week.

I should point out that James was being deliberately provocative in order to foment thought and discussion and, judging from this blog post, he succeeded.

The Web’s independence from the hardware and software platform people use is a feature. It’s better than cross-platform frameworks which are constantly criticised for not producing exact native-feeling apps on the multitude of platforms they run on. The Web is above that pettiness.

Simon Foster | Blog | The Responsive Designer

Nice notes from a recent talk on ways to approach responsive design.

Monday, November 12th, 2012

Mobile first: the revolution is well under way - Generated Content by David Storey

David takes a look at worldwide trends in web browsing, pointing out where mobile traffic exceeds desktop …and we’re not necessarily talking about smartphones here either.

It would be possible to travel from the Niger Delta on the west coast of Africa, to the horn of Africa on the east coast, without passing through a country where people surf more on desktop than a mobile phone.

Going Full Frontal — Acko.net

Steven Wittens, who gave a terrific talk all about maths at last week’s Full Frontal conference, describes his experience at that most excellent event.

Remote Preview

This looks like it could be one alternative to Adobe Shadow or Edge Inspect or whatever they’re calling it now that they’re charging $120 a year for using it.

Saturday, November 10th, 2012

Dronestagram

A new project from James, keeping track of the sites of illegal drone strikes.

Thursday, November 8th, 2012

Device Fatigue | Brad Frost Web

I know how Brad feels. I find it hard to muster any enthusiasm for any specific new device these days. But that’s okay. It’s more important to step back and see the trends and directions instead of getting caught up in the specifics of this particular phone or that particular tablet.

My remedy for device fatigue has been to take a step back and let my eyes go unfocused. Much like a Magic Eye, I can then see the hidden pictures behind the stippled noise that is the device landscape. This remedy helps me cope, gets me to stop caring about things that don’t really matter, and gets me to care about the broader trends the Magic Eye unveils.

Iconic imagery

There’s been some fantastic collaborative work done recently on the tricky issue of responsive images. Witness the community group and its attendant website, complete with logo.

Meanwhile, there’s been some great research into dealing with high-DPI displays (which the world and its dog have decided to label “retina”). There’s the in-depth analysis by Daan Jobsis which looks at what you can get away with when it comes to compression and quality for “retina” displays: quite a lot, as it turns out.

In fact, you may well be able to double the dimensions of an image while simultaneously bringing down its quality and end up with an image that is smaller in file size than the original, while still looking great on high-DP..“retina” displays. The guys over at Filament group have labelled this Compressive Images. Nice.

I like that approach. No JavaScript polyfills. No lobbying of standards bodies.

I’m generally fan of solutions that look for ways of avoiding the problem in the first place. Hence my approach to image optimisation for all devices, widescreen or narrow.

Of course this whole issue of responsive (or compressive) images should really only apply to photographic imagery. If you’re dealing with “text as images” …don’t. Use web fonts. If you’re dealing with logos or icons, there are other options, like SVG.

Then there’s the combination of web fonts and iconography. Why not use a small web font containing just the icons you need?

I tried this recently, diligently following Josh’s excellent blog post detailing how to get icon shapes out of Fireworks, into a font editor, and then into an actual font. It works a treat, although I concur with Josh’s suggestion that the technique should really only be implemented using the ::before and ::after pseudo-elements in combination with base-64 encoding the font file. That means it won’t work in every single browser, but that’s the point: these icons should be an enhancement, not a requirement.

Having gone through the tortuous steps required to get my Mac all set up with the software required to follow Josh’s tutorial, I then spotted the note at the end of his article that pointed to Icomoon. That turns out to be a fantastic service. You can pick and choose from the icons provided or you can upload your own vector shapes. Then you can assign the unicode slots you want to use for the icons and you can get the resulting font file base-64 encoded. Very, very cool!

There’s a whole slew of icon-font services like that out there now: Pictos, Web Symbols, and Symbolset with its ingenious use of ligatures to allow for an accessible fallback.

Jenn is currently casting a critical eye over each of these service over on the Nerdary: part one, part two, and part three are all deserving of your time and attention.

TEDxToronto 2012 Talk - Ryan Henson Creighton

And this is why Code Club is such a great initiative.

Science Hack Day San Francisco 2012 - a set on Flickr

Oh My Science! It looks like the most recent Science Hack Day in San Francisco was great.

Ariel Waldman, Science Hack Day SF Organizer

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

Wednesday, November 7th, 2012

LukeW | Mobile Design Details: Hide/Show Passwords

I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.

Solita: This is rude

Let’s be polite. Especially when starting relationships.

Tuesday, November 6th, 2012

Elite: Dangerous by Frontier Developments — Kickstarter

Nerdgasm! David Braben is bringing Elite back and bringing it up to date. And he’s funding the project on Kickstarter.

Best. Game. Ever!

Let’s Talk Solar | LOGO24

Here’s a really useful case study for anyone who wants to do “guerrilla” responsive design: when you’re handed a fixed-width mockup but you know that responsive is the way to go:

I started by styling up every element, without layout. The result was a fully elastic layout that effectively served as a mobile, or small screen, layout, which just needed some tweaking of horizontal spacing.

Bingo! And this approach had knock-on benefits as it “supported writing component-based, or modular, CSS”.

New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)

Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:

Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.

Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.

Building a device stand

Pictures and plans for building a plywood stand for your device lab. I definitely want one of these for the Clearleft office.

Saturday, November 3rd, 2012

Designing for different devices | Government Digital Service

A behind-the-scenes look at how Gov.uk is handling mobile devices. Spoiler: it’s responsive.

I found this particularly interesting:

When considering the extra requirements users of different devices have we found a lot in common with work already done on accessibility.

LukeW | Responsive Navigation: Optimizing for Touch Across Devices

Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.

Friday, November 2nd, 2012

❍ IcoMoon

This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.

Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.

Progress

I remember when Ajax started gaining traction on the web and in the minds of developers. One of the factors that web developers suddenly had to think about was giving feedback to the user when a request was made to the server.

Normally this is something that the browser takes care of (with its rotating letter “e” or its sweeping lighthouse fresnel lens or whatever method your chosen browser uses). But once you decide to use Ajax to make a request to the server, you’re effectively saying “Hey browser, it’s okay; I got this.”

And so web developers everywhere began to recreate loading indicators that were so popular on Flash sites. Some of them are very clever, created entirely in CSS.

This is a pattern that has been codified into HTML itself. We now have a progress element. This can be used to display fine-grained progress if you give it value and max attributes, or you can simply use it without any attributes to indicate that something is happening …perfect for those Ajax requests.

<progress></progress>

What I like about this element is that you can put fallback content in between the opening and closing tags. So let’s say you’re currently using an animated .gif to show that some content is being requested via Ajax:

<img src="spinner.gif" alt="Loading...">

Now you can wrap that within a progress element:

<progress><img src="spinner.gif" alt="Loading..."></progress>

Modern browsers show the native progress indicator. Older browsers show the animated .gif.

Of course, right now your ability to style that native progress indicator is limited (the shadow DOM may change that) but, as I pointed out in my book, that may not be a bad thing:

Remember, the web isn’t about control. If a visitor to your site is familiar with using a browser’s native form doodad, you won’t be doing them any favors if you override the browser functionality with your own widget, even if you think your widget looks better.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Thursday, November 1st, 2012

Building the Happy Cog Test Lab - Cognition: The blog of web design

Ryan describes the research and process behind putting together a device lab for Happy Cog in Austin. Good stuff, with handy links gathered together at the end.

Trimming the Fat — Paul Robert Lloyd

A great in-depth description by Paul of how he optimised his site. More of this please!