A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.
I gave the opening keynote at the Beyond Tellerand conference a few weeks back. I’m talked about the web from my own perspective, so expect excitement and anger in equal measure.
This was a new talk but it went down well, and I’m quite happy with it.
Vasilis considers the inherent flexibility and unknowability of web design.
I tried to come up with other fields that need to design things for a flexible canvas, in the hope of finding inspiration there. The only media types I could come up with was the art of balloon printing and the art of tattooing.
Jared explains how adding new features can end up hurting the user experience.
Carousels are shit. Auto-animating carousels are really shit. Now proven with science!
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
A wonderful essay about type on the web by Jessica.
A nice description of progressive enhancement by Norm, as applied at GDS.
A design fiction video depicting technology that helps and hinders in equal measure.
A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
A lovely piece of writing from Richard on the nature of the web.
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.
Yes, yes, yes!
Dave talks about the kind of deliverables that get handed over in a responsive project. Sounds a lot like what we do at Clearleft.
Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.
A terrific, in-depth round-up and recollection of the Responsive Day Out by Laura that ties all of the strands together.
Sorta sci-fi from Adam.
Consider this a shooting script for one of those concept videos so beloved of the big technology vendors.
Good writing. Good design. Good food.
Timoni tackles the tricky topic of teaching taps.
Discoverability can be hard, but that shouldn’t stop us trying out new interactions.
A sweet, beautiful love letter to design, from Oliver.
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.
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.
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.
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.
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.
This is the full text of Owen’s talk at the Responsive Day Out. It makes for a terrific read!
Chris takes a look at all the different ways you can use SVG today.
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.
Some thoughts and soul-searching prompted by talks at the Responsive Day Out.
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.
Vasilis examines the multitude of factors that could influence an ideal measure.
Some handy tips for starting off your responsive designs from the type out.
Some great stories from the front lines of product design, gathered together in one handy spot.
A great meaty piece from Cennydd, diving deep into the tricky question of context.
A lovely new responsive(ish) website dedicated to science and the environment.
I really like Dan’s take on using Photoshop (or Fireworks) as part of today’s web design process. The problem is not with the tool; the problem is with the expectations set by showing comps to clients.
By default, presenting a full comp says to your client, “This is how everyone will see your site.” In our multi-device world, we’re quickly moving towards, “This is how some people will see your site,” but we’re not doing a great job of communicating that.
James’s notes from the most recent Hack Farm show that, even without a finished product, there were a lot of benefits.
Amen, Brad, Amen.
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
I’ve never been a fan of carousels on websites, to put it mildy. It seems I am not alone. And if you doubt the data, ask yourself this: when was the last time you, as a user, interacted with a carousel on any website?
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
A gorgeous collection of experiments that showcase just how much is possible in browsers today.
Trent and I answered a few questions for the Responsive Design Weekly newsletter.
A great piece by Jason analysing the ever-blurring lines between device classes.
Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:
What’s a web app?
All the videos from last year’s Breaking Development conference in Dallas are up on the site. They’re all excellent.
Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.
All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.
Jan V. White is a mensch.
Beautiful thoughtful work from the BERGians.
A short film about interaction design.
An excerpt from Mark’s forthcoming book, which promises to be magnificent.
Ethan’s excellent talk from last year’s An Event Apart.
In this session Ethan reviews strategies for handling trickier elements that would make even the most seasoned designer quail: stuff like advertising, complex layouts, deep navigation patterns, third-party media, and, yes, actual, honest-to-goodness content.
Beauteous and true.
Real design is political.
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.
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.
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.
Nice notes from a recent talk on ways to approach responsive design.
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.
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.
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.
A really nice piece on scale, ratio and rhythms in web design.
Another responsive design case study. This one’s got numbers too.
I love seeing the process behind responsive projects. This one is particularly nice.
Design Fiction at work, imagining a possible future city.
Less wireframing, more prototyping.
Mark gets to the heart of the issue with making responsive designs work with legacy Content Management Systems …or, more accurately, Web Publishing Tools. There’s a difference. A very important difference.
Peter Saville talks about the enduring appeal of his cover for Unknown Pleasures.
I like to think of all the variations and mashups as not just tributes to Joy Division, but tributes to Jocelyn Bell Burnell too.
A peak behind the scenes at the responsive design and development workflow at Bearded. It makes a lot of sense.
In mobile-centric Africa, Responsive Web Design just makes business sense!Moses Kemibaro | Moses Kemibaro
Therefore, from a business perspective, and my excitement in doing this blog post is that RWD is especially important for mobile-centric markets such as Africa.
Remember when I linked to the Github repository of The Guardian’s front-end team? Well, now—if you’ll pardon the mixing of metaphors—you can start to kick the tyres of the fruits of their labour. This beta site shows where their experiments with responsive design might lead.
A nice look at some possible ways to approach workflow on a responsive project.
Amen, Lyza, Amen. Instead of treating web development for the multitude of devices out there as an overwhelming nigh-on-impossible task, let’s accept the fact that there are certain things that are beyond our control. And that’s okay.
Let’s build on the commonality core to the web where we can. To do this, I think we need to let go of a few things, to lay down our burdens.
Related: do websites need to look the same in every browser? NO!
Nishant gives a great overview of the responsive redesign of the Microsoft home page, ably abetted by the Paravel gang.
Andy’s talk from the Smashing Conference in Freiburg.
This (free!) PDF looks like it could be a nice companion piece to Chris and Nathan’s recent book:
Human-computer interaction in science-fiction movies and television.
It’s a work in progress. You’ll notice a lot of placeholders where the images should be. That’s because the studios are demanding extortionate rates for screenshots.
Pointing out a growing movement away from three-dimensionality towards a flatter aesthetic.
I’m really enjoying these thoughts prompted by Paul’s article in A List Apart. I particularly the idea of taking a long-zoom approach to progressive enhancement: evolving the aesthetic of web design over time.
The kickass articles just keep on comin’. This one from Dave is a great overview of options for dealing with images in responsive designs.
A really great article from Paul that simultaneously takes a high-level view of the web while also focusing on the details. A lot of work went into this.
Andy makes a good point here, point out the difference between device testing and design testing:
When I’m designing, it’s incredibly important for me to quickly gain an affinity with how my design feels when I hold it in my hands.
Chris and Nathan’s book is finally out. I’m going to enjoy reading through this.
Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.
Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).
I had a lot of fun chatting with Chris and Dave on the Shop Talk Show. It is now available for your listening and huffduffing pleasure.
Brad’s notes from my opening talk at the Smashing Conference in Freiburg.
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Those clever chaps at The Guardian are experimenting with some mobile-first responsive design. Here’s how it’s going so far.
A classic piece of design fiction written by Mark Weiser 21 years ago.
The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.
Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.
Clearleft have been working with Channel 4 News on their new redesign. Here’s Jon Snow explaining responsive design.
Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.
An in-depth look behind the scenes of the responsive relaunch of People Magazine’s mobile site that Josh, Karen, and Ethan were involved in. I love it when people share their process and build stories like this.
I don’t agree with everything in this presentation—there’s a nostalgic bias to the non-existent “good ol’ days”—but this is still very engaging and thought-provoking.
Everything Frances has written here resonates with me.
I don’t really want a label. I hate labels. I loathe the term “user experience designer”, because I still believe that “user experience” is just a fundamental to what you’re doing, and shouldn’t need stating. There is nothing but user experience design if you’re building products for people.
A great talk on the nature of the web that Paul gave in Copenhagen recently.
Frank has published his book online in HTML. Very lovely it is too.
Tim’s book is ready for pre-order. Looks like it’s going to be good one.
Leisa nails it. The real stumbling block with trying to change the waterfall-esque nature of agency work (of which Clearleft has certainly been guilty) can be summed up in two words: sign off.
And from a client’s perspective, this emphasis on sign-off is completely understandable.
It takes a special kind of client to take the risk and develop the level of trust and integration required to work the way that Mr Popoff-Walker any many, many other inhabitants of agency world would like to work.
How about this for a trip down memory lane—a compendium of articles from over a decade of A List Apart, also available as a Readlist epub. It’s quite amazing just how good this free resource is.
The only thing to fault is that, due to some kind of clerical error, one of my articles has somehow found its way onto this list.
If this were Twitter, you’d be at-replying me with the hashtag “humblebrag”, wouldn’t you?
This resonates a lot with me. It also hits very close to home: at Clearleft, we’ve definitely been guilty of taking the wrong approach as described here.
A great behind-the-scenes look at the redesign (and redevelopment) of Twitter’s mobile subdomain silo. Man, I would love to see this progressively enhanced up to the current widescreen view for “desktop” browsers without the need for separate URLs for any class of device.
But I digress …this is good stuff.
Josh writes about the importance of using rules and systems as tools without being bound by them.