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: responsive
Responsive News — Response-ish Web Design
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.
It’s something that The Guardian and The Chicago Tribune are working on too.
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.
Responsive Day Out highlights on Vimeo
A lovely little highlight reel that Craig put together from the Responsive Day Out.
Sensible jumps in responsive image file sizes
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.
Scalable Bitmaps
Some thoughts (and code) on responsive images.
Responsive Inspector
A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.
Content Parity on the web
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.
Reorganization by Trent Walton
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.
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.
Responsive Nav — Responsive Navigation Plugin
This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!
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.
Life & Thyme
Good writing. Good design. Good food.
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.
Responsive Day Out in Andy’s sketchbook
A report on the Responsive Day Out that focuses on three themes from the day: progressive enhancement, process, and design systems.
Benjamin Parry at Responsive Day Out 2013
Benjamin’s notes from the Responsive Day Out.
What we learnt from the Responsive Day Out conference on 8 Gram Gorilla
A nice write-up of the Responsive Day Out from three different perspectives.
We’re not ‘appy. Not ‘appy at all.
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.
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!
Keir Whitaker on Responsive Day Out 2013
Here’s Keir’s roundup of the Responsive Day Out (which was preceded by a Shopify meetup the night before).
For discussion: viewport and font-size data in client hints
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.
A Responsive Day Out, 2013
Another in-depth round-up of the Responsive Day Out, this time from Vasilis.
How was Responsive Day Out? by Flow Interactive
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.
Responsive Day Out by Tom Prior
An in-depth blow-by-blow account of the Responsive Day Out by my fellow Brightonian.
Responsive Day Out - a set on Flickr
Another nice set of photos from the Responsive Day Out.
#responsiveconf at Wolf’s Little Store
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.
Anatomy of a responsive page load
The slides from Andy’s excellent pragmatic talk on performance and aggressive enhancement at the Responsive Day Out.
Antiphonal Geometry: harmony and proportion in responsive web design
The slides from Owen’s magnificent talk at the Responsive Day Out …but you really had to be there.
Response Day Out Conference by Glenn Jones
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.
Responsive design – have we come full circle?
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…
Program Your Own Mind 2: A responsive day out
Some thoughts and soul-searching prompted by talks at the Responsive Day Out.
Our thoughts about Responsive Day Out by Si digital
Some nice recollections from the Responsive Day Out.
The gradient chart by Cennydd Bowles
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 Responsive Day Out, Brighton by Hydrant
A nice write-up of the Responsive Day Out with all the right take-aways.
A Responsive Day Out by David Bushell
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!
Responsive Navigation
David’s slides from the Responsive Day Out.
Responsive Day Out – Food for thought
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.
Notes from Responsive Conf — Phunky Venom
Some bullet points from the Responsive Day Out to keep you going until the audio and video is ready.
The Edge of the Web at Responsive Day Out
Slides, videos, and links from Paul’s presentation at the Responsive Day Out.
Playing with game console browsers
The slides from Anna’s terrific talk at the Responsive Day Out.
Responsive Day Out 2013 - a set on Flickr
Marc’s pictures from 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.
Asset Fonts
The slides from Josh’s super-quickfire presentation at the Responsive Day Out.
Posts from March 1st 2013 on Decade City
A blow-by-blow account of the Responsive Day Out by Orde Saunders who liveblogged the whole thing.
Logical breakpoints for your responsive design
Vasilis examines the multitude of factors that could influence an ideal measure.
Impact of Responsive Designs
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.
Prototyping Responsive Typography
Some handy tips for starting off your responsive designs from the type out.
Support Scrunchup
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.
Ensia
A lovely new responsive(ish) website dedicated to science and the environment.
Responsive typography demo
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.
You like apples? by Electric Pulp
Some insane numbers on the return on investment that a bit of responsive optimisation can bring.
“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.
Implementing off-canvas navigation for a responsive website by David Bushell
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.
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.
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?
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.
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.
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”.
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.
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.
Responsive IA: IA in the touchscreen era - Martin Belam at EuroIA
A really terrific piece about wireframing for responsive designs. Again, it’s all about the prototypes.
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.
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.
IE10 Snap Mode and Responsive Design - TimKadlec.com
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.
Jeremy Keith: Forbedringer gjennom responsiv design (Webdagene 2012) on Vimeo
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.”
The Airfix Responsive Workflow by Jordan Moore — Web Designer
A nice look at some possible ways to approach workflow on a responsive project.
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.
Responsive Sausage Dog
The Boston Globe’s got nothing on this!
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.
14islands: Smashing Conference take-aways
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.
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.
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.
LukeW | An Event Apart: Spirit of the Web
Luke’s notes from my talk at An Event Apart in Chicago.
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.
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.
Bringing a knife to a gunfight — my slide deck from An Event Apart, Austin 2012 | Stuff & Nonsense
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.
Uncle Dave’s Ol’ Padded Box - Dave Rupert
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).
Great Works of Fiction Presents: The Mobile Context | The Haystack.
A really great article from Stephen on how we are mistakenly making assumptions about what users want. He means it, man!
Aegir Hallmundur, designer and maker of things.
Aegir’s portfolio is a thing of a beauty on every screen size.
Stretchy Pictures | Aegirscopic
Aegir is doing some very smart image enhancement in his (responsive) portfolio. Here’s the explanation.
Fluid Type | Trent Walton
Trent shares his ideas on handling line lengths in fluid, responsive layouts.
LukeW | Off Canvas Multi-Device Layouts
Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.
Sound of Summer
This is sooo nifty: Chloe’s obsessive Summer music visualisation is a lesson in responsive design and progressive enhancement. It’s also pretty fascinating.