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.
Details on how the BBC Responsive News team plan to eventually make their m-dot site scale all the way up to be the default site. This “planting a seed” approach works really well, not least for political reasons.
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 lovely little highlight reel that Craig put together from the Responsive Day Out.
Some good thinking from Jason here. In a roundabout way, he’s saying that when it comes to responsive images—as with just about every other aspect of web development—the answer is …it depends.
Some thoughts (and code) on responsive images.
A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
A couple of years ago, the benefits of separate sites were more clear to me. Today, I can’t think of a good reason to maintain a separate mobile site.
Trent hammers home the point that the kind of compartmentalisation that’s traditionally been part and parcel of the web dev workflow just won’t cut it anymore.
Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.
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.
Good writing. Good design. Good food.
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.
A report on the Responsive Day Out that focuses on three themes from the day: progressive enhancement, process, and design systems.
Benjamin’s notes from the Responsive Day Out.
A nice write-up of the Responsive Day Out from three different perspectives.
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.
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!
Here’s Keir’s roundup of the Responsive Day Out (which was preceded by a Shopify meetup the night before).
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.
Another in-depth round-up of the Responsive Day Out, this time from Vasilis.
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.
An in-depth blow-by-blow account of the Responsive Day Out by my fellow Brightonian.
Another nice set of photos from the Responsive Day Out.
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 slides from Andy’s excellent pragmatic talk on performance and aggressive enhancement at the Responsive Day Out.
The slides from Owen’s magnificent talk at the Responsive Day Out …but you really had to be there.
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.
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…
Some thoughts and soul-searching prompted by talks at the Responsive Day Out.
Some nice recollections from the Responsive Day Out.
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).
A nice write-up of the Responsive Day Out with all the right take-aways.
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!
David’s slides from the Responsive Day Out.
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.
Some bullet points from the Responsive Day Out to keep you going until the audio and video is ready.
Slides, videos, and links from Paul’s presentation at the Responsive Day Out.
The slides from Anna’s terrific talk at the Responsive Day Out.
Marc’s pictures from 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.
The slides from Josh’s super-quickfire presentation at the Responsive Day Out.
A blow-by-blow account of the Responsive Day Out by Orde Saunders who liveblogged the whole thing.
Vasilis examines the multitude of factors that could influence an ideal measure.
I heartily concur with Luke’s call for sharing of data:
If you’ve had success with a responsive design, my plea to you is to please share what you’ve learned.
I’m going to see if I can get some Clearleft clients to open up.
Some handy tips for starting off your responsive designs from the type out.
If you’re coming along to the Responsive Day Out and you’ve got some tech books you no longer need, bring them along. We’ll collect them and distribute them to schools.
A lovely new responsive(ish) website dedicated to science and the environment.
This is a pretty wacky experiment in altering font size based on the user’s distance from the screen (allow the page to access your camera and enable the “realtime” option for some real fun). I don’t know how much real-world application this has, but it’s a cute’n’fun exercise.
Some insane numbers on the return on investment that a bit of responsive optimisation can bring.
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.
This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
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?
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.
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.
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”.
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.
Another responsive design case study. This one’s got numbers too.
I love seeing the process behind responsive projects. This one is particularly nice.
A really terrific piece about wireframing for responsive designs. Again, it’s all about the prototypes.
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.
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.
Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.
This is the talk I gave at the Webdagene conference in Norway a few weeks back. I called it Responsive Enhancement but I think the Norwegian title translates as “Improvements Through Responsive Design.”
A nice look at some possible ways to approach workflow on a responsive project.
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.
The Boston Globe’s got nothing on this!
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.
A nice round-up of some of the themes that emerged at Smashing Conference. As with An Event Apart, there was a definite focus on process.
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.
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.
Luke’s notes from my talk at An Event Apart in Chicago.
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.
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.
Andy remarks on the same synchronicity I talked about at An Event Apart Austin:
Every An Event Apart conference feels special, but at this one the (unplanned) recurring themes were spooky.
Yet another brilliant technique from Dave. The only caveat is that it uses background images rather than img elements, but it’s still very powerful (and very clever).
A really great article from Stephen on how we are mistakenly making assumptions about what users want. He means it, man!
Aegir’s portfolio is a thing of a beauty on every screen size.
Aegir is doing some very smart image enhancement in his (responsive) portfolio. Here’s the explanation.
Trent shares his ideas on handling line lengths in fluid, responsive layouts.
Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.
This is sooo nifty: Chloe’s obsessive Summer music visualisation is a lesson in responsive design and progressive enhancement. It’s also pretty fascinating.