I wish to cover the entire Brighton Pavilion in Bakelite for my own amusement.
Friday, November 30th, 2012
This is my opening talk from Smashing conference a few months back in Freiburg, where I used to live.
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
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.
Very smart thinking from Craig about digital publishing.
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
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
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.
A nice round-up of the most recent Science Hack Day in San Francisco.
Sunday, November 18th, 2012
A nifty little mashup from Music Hack Day London 2012.
Saturday, November 17th, 2012
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
A lovely new service from Adrian that allows you to sync up guitar tabs with videos. It’s a very impressive in-browser app.
A great short talk from Clare about Code Club.
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
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.
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.
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.
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.
Just a few hours after launch, here’s the first review of Matter complete with some speculation on where it might go.
I want this USB stick. Zarjaz!
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.
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.
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.”
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.
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.
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.
A terrific write-up of this year’s Full Frontal conference, with a descriptive rundown of each talk.
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
Documenting all the ways you could die in a choose-your-own-adventure book.
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.
Nice notes from a recent talk on ways to approach responsive design.
Monday, November 12th, 2012
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.
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.
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
A new project from James, keeping track of the sites of illegal drone strikes.
Thursday, November 8th, 2012
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.
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..— displays. The guys over at Filament group have labelled this Compressive Images. Nice.
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
::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!
And this is why Code Club is such a great initiative.
Oh My Science! It looks like the most recent Science Hack Day in San Francisco was great.
Andrea looks at support for HTML5 input types in IE10 Mobile.
Wednesday, November 7th, 2012
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.
Let’s be polite. Especially when starting relationships.
Tuesday, November 6th, 2012
Nerdgasm! David Braben is bringing Elite back and bringing it up to date. And he’s funding the project on Kickstarter.
Best. Game. Ever!
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”.
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.
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
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.
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
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.
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.”
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
max attributes, or you can simply use it without any attributes to indicate that something is happening …perfect for those Ajax requests.
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><img src="spinner.gif" alt="Loading..."></progress>
Modern browsers show the native
progress indicator. Older browsers show the animated .gif.
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.
A really nice piece on scale, ratio and rhythms in web design.
Thursday, November 1st, 2012
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.
A great in-depth description by Paul of how he optimised his site. More of this please!