Leveraging Advanced Web Features in Responsive Design
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.
Tags: design
Jeremy Keith – Beyond Tellerrand – beyond tellerrand 2013 on Vimeo
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.
Other flexible media: balloons and tattoos
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.
Experience Rot
Jared explains how adding new features can end up hurting the user experience.
Auto-Forwarding Carousels, Accordions Annoy Users
Carousels are shit. Auto-animating carousels are really shit. Now proven with science!
The State Of Responsive Web Design on Smashing Mobile
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
Text-align: Justify and RWD
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
Jessica Hische - Upping Your Type Game
A wonderful essay about type on the web by Jessica.
Progressive enhancement in the Government Service Design manual
A nice description of progressive enhancement by Norm, as applied at GDS.
A Digital Tomorrow on Vimeo
A design fiction video depicting technology that helps and hinders in equal measure.
Responsive Inspector
A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
Embracing the Medium
A lovely piece of writing from Richard on the nature of the web.
On pattern portfolios | Clear Thinking - The Clearleft Blog
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Bradshaw’s Guide For Tourists in Great Britain
Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.
URLs are for people, not computers
Yes, yes, yes!
Responsive Deliverables by Dave Rupert
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.
Responsive Day Out by Laura Kalbag
A terrific, in-depth round-up and recollection of the Responsive Day Out by Laura that ties all of the strands together.
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.
Life & Thyme
Good writing. Good design. Good food.
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.
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.
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.
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.
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!
Using SVG on CSS-Tricks
Chris takes a look at all the different ways you can use SVG today.
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.
Program Your Own Mind 2: A responsive day out
Some thoughts and soul-searching prompted by talks at the Responsive Day Out.
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.
Logical breakpoints for your responsive design
Vasilis examines the multitude of factors that could influence an ideal measure.
Prototyping Responsive Typography
Some handy tips for starting off your responsive designs from the type out.
Design Staff — Helping startups design great products
Some great stories from the front lines of product design, gathered together in one handy spot.
Designing with context : Cennydd Bowles
A great meaty piece from Cennydd, diving deep into the tricky question of context.
Ensia
A lovely new responsive(ish) website dedicated to science and the environment.
“The Post-PSD Era: A problem of expectations,” an article by Dan Mall
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.
Metadesign at Hack Farm by James Box
James’s notes from the most recent Hack Farm show that, even without a finished product, there were a lot of benefits.
Performance as design by Brad Frost
Amen, Brad, Amen.
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
Carousel interaction stats by Eric Runyon
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?
The responsive web will be 99.9% typography
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
Form Follows Function
A gorgeous collection of experiments that showcase just how much is possible in browsers today.
Responsive web design interview series: Trent Walton & Jeremy Keith
Trent and I answered a few questions for the Responsive Design Weekly newsletter.
» Responsive Design for Apps — Part 1 Cloud Four Blog
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?
Schedule | Breaking Development Dallas 2012: Web design and development for beyond the desktop
All the videos from last year’s Breaking Development conference in Dallas are up on the site. They’re all excellent.
Jan V. White
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.
Lamps: a design research collaboration with Google Creative Labs, 2011 – Blog – BERG
Beautiful thoughtful work from the BERGians.
Connecting (Full Film) on Vimeo
A short film about interaction design.
A New Canon | Journal | The Personal Disquiet of Mark Boulton
An excerpt from Mark’s forthcoming book, which promises to be magnificent.
Ethan Marcotte AEA Boston June 18, 2012 on Vimeo
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.
The Pastry Box Project | 7 December 2012, baked by Cennydd Bowles
Beauteous and true.
Real design is political.
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.
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.
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.
Simon Foster | Blog | The Responsive Designer
Nice notes from a recent talk on ways to approach responsive design.
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.
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.
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.
Rhythm And Proportion In Grids And Type - Vanseo Design
A really nice piece on scale, ratio and rhythms in web design.
Skinny Ties and responsive eCommerce » Blog » Gravity Department
Another responsive design case study. This one’s got numbers too.
A Responsive Design Case Study – David Bushell – Web Design & Front-end Development
I love seeing the process behind responsive projects. This one is particularly nice.
Under Tomorrow’s Sky
Design Fiction at work, imagining a possible future city.
» 23 October 2012, baked by Leisa Reichelt @ The Pastry Box Project
Less wireframing, more prototyping.
—Leisa
Adaptive Content Management | Journal | The Personal Disquiet of Mark Boulton
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.
Data Visualization Reinterpreted by VISUALIZED on Vimeo
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 List Apart: Articles: Responsive Comping: Obtaining Signoff with Mockups
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.
The Guardian
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.
The Airfix Responsive Workflow by Jordan Moore — Web Designer
A nice look at some possible ways to approach workflow on a responsive project.
Laying Down our Burdens: Steps towards simplifying the mobile Web
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!
The Story of the New Microsoft.com — Rainypixels
Nishant gives a great overview of the responsive redesign of the Microsoft home page, ably abetted by the Paravel gang.
Encouraging Better Client Participation In Responsive Design Projects | Smashing Magazine
Andy’s talk from the Smashing Conference in Freiburg.
The Past 100 Years of the Future
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.
The Flat Design Era — LayerVault Blog
Pointing out a growing movement away from three-dimensionality towards a flatter aesthetic.
What is the medium? – David Bushell – Web Design
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.
A List Apart: Articles: Mo’ Pixels Mo’ Problems
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 List Apart: Articles: The Web Aesthetic
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.
Don’t confuse design testing with device testing — Stuff
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.
These are not device testing issues, they are design questions and there’s a huge difference between how an interface feels to use on a smartphone size display and whether the HTML, CSS and Javascript actually works on any particular make or model.
Make it So | Interface Design Lessons from Sci-Fi
Chris and Nathan’s book is finally out. I’m going to enjoy reading through this.
Responsive Measure: A jQuery plugin for responsive typography
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).
034: With Jeremy Keith - ShopTalk
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.
The Spirit of the Web – Jeremy Keith at Smashing Conference | Brad Frost Web
Brad’s notes from my opening talk at the Smashing Conference in Freiburg.
Responsive Web Design Patterns | This Is Responsive
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
beta.guardian.co.uk
Those clever chaps at The Guardian are experimenting with some mobile-first responsive design. Here’s how it’s going so far.
The Computer for the 21st Century
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.
Complex Navigation Patterns for Responsive Design | Brad Frost Web
Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.
Meet the new-look Channel 4 News website - YouTube
Clearleft have been working with Channel 4 News on their new redesign. Here’s Jon Snow explaining responsive design.
A future friendly workflow | Opinion | .net magazine
Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.
Making of: People Magazine’s Responsive Mobile Website (Global Moxie)
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.
Matthew Butterick: Reversing the Tide of Declining Expectations
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.
fberriman » Accidental designer
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.
Web Native Design on Vimeo
A great talk on the nature of the web that Paul gave in Copenhagen recently.
The Shape of Design by Frank Chimero
Frank has published his book online in HTML. Very lovely it is too.
Implementing Responsive Design | Building sites for an anywhere, everywhere web
Tim’s book is ready for pre-order. Looks like it’s going to be good one.
Client/Agency Engagement is F*cked, Waterfall UX Design is a Symptom | disambiguity
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.
A List Apart: Articles: ALA Summer Reading Issue
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?
UX Design at Digital Agencies is F*cked | RossPW
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.
Twitter Blog: Overhauling mobile.twitter.com from the ground up
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.
Grids, Design Guidelines, Broken Rules, and the Streets of New York City (Global Moxie)
Josh writes about the importance of using rules and systems as tools without being bound by them.