This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
Two (similar) patterns for responsive navigation that don’t involve sweeping everything behind a hamburger icon.
When I’ve experimented with auto-overflowing horizontal patterns like this, I’ve found that a judiciously-placed box shadow can give a nice affordance.
Just recently on a Clearleft project, some of us were discussing whether there was a reason not to use
rems instead of
ems for media queries. Apart from one older browser implementation difference, we couldn’t come up with much.
Some in-depth research here supports the use of
em values for media queries. Very good to know.
Really interesting to see how Jason, Lyza, and co. are handling the process side of responsive design by using Agile sprints. This is how we’re doing it at Clearleft too.
There’s a really good point in here about starting with small-screen sketching:
For most of the sprint, we focus on small screens. We’re often asked how things will work on wider screens early in a sprint, but we try to resist thinking about that yet.
If you’ve managed to organize your life to fit inside a New York City apartment, you’re not going to have any trouble adjusting to a big house in the suburbs. The same is true of responsive designs.
If you nail the small screen design, the larger sizes will be easy by comparison.
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
A larger screen is now a progressive enhancement. Hell, with things like Siri and Google Now and Amazon’s Echo, we’re getting to the point where even a screen is an enhancement.
This solution to the mobile tap delay by the WebKit team sounds like what I was hoping for:
touch-action: manipulation;on a clickable element makes WebKit consider touches that begin on the element only for the purposes of panning and pinching to zoom. This means WebKit does not consider double-tap gestures on the element, so single taps are dispatched immediately.
It would be nice to know whether this has been discussed with other browser makers or if it’s another proprietary addition.
The transcript of a great talk by Wilto, focusing on responsive images, inlining critical CSS, and webfont loading.
When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web app. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”
We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job.
Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:
And this bit is crucial:
Web technology is no longer limiting us or scaring us into “staying safe” moreover it’s enabling us to get inspired by our surroundings and go and create some truly amazing, Web-Specific design.
All the videos from the excellent Responsive Field Day are now available. Even better, the audio is also available for your huffduffing pleasure!
All the presentations and panels were great. Sophie Shepherd’s terrific talk has really stuck with me.
Here’s the 20 minute talk I gave at the inaugural Responsive Field Day in Portland.
This is the best moment to write a blog post:
I just had my responsive images epiphany and I’m writing it all down before I forget everything.
Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.
Very thoughtful and sensible thinking from Paul.
Rosa has written an account of the third and final Responsive Day Out for the Codebar blog (I gave free passes to Codebar students).
As codebar is an event aimed at encouraging diversity in tech we were pleased that there were so many inspiring female speakers on the bill. To us it signifies women holding strong presence in this industry. It is encouraging for other women either starting out or further into careers, when it is actively projected that women should be present, seen, heard and their knowledge shared.
The video of Richard’s great talk on responsive typography at the Up Front conference.
This is a lovely report not just on the most recent Responsive Day Out, but on all three years:
The final outing delivered a diverse range of topics to reveal the state of responsive web design in 2015 and complete a hat-trick of superb conferences.
Another great in-depth round-up of the third and final Responsive Day Out, this time from Katja Durrani.
It’s rare for me to visit a conference and come away thinking that everyone gave a great presentation. This was that conference. Nice one.
This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).
The full text of Aaron’s magnificent closing keynote from Responsive Day Out.
A great round-up of Responsive Day Out 3:
The conference only lasted one day but came packed with the insane number of 12 speakers in total. There was only one speaker track, so you got to see all of them during the day — no hard choices to make. It was highly compressed, almost overwhelming knowledge hammering into my brain, in a density that I had rarely experienced before. It was awesome!
If you were at Responsive Day Out on Friday and you liked the music that was playing during the breaks, here’s the track listing. Creative Commons licensed.
A fantastically-detailed write up of the whole day out. Each talk is described, and then the threads are tied together at the end. Great stuff!
As may have become clear from my notes above, Responsive Day Out 3 was a day full of variety. I had the feeling it could have easily been called Web Day Out, and I guess that makes sense, as responsive web design has naturally grown to be a pleonasm in the past few years.
Orde liveblogged every single talk from Responsive Day Out 3!
I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.
The slides from Paul’s talk-in-progress on design principles for building responsive sites. He gave us a sneak peak at Clearleft earlier this week. ‘Sgood.
This is a great blow-by-blow account of making an agency website perform better.
I love the side-by-side comparisons with other agencies, including Clearleft—the gauntlet has been thrown down!
I can relate 100% to what Dave is saying here:
I’m disenchanted with desktop. That conviction runs so deep, I groan when I see a desktop layout JPEG.
All too often we talk the talk about taking a mobile first approach, but we rarely walk the walk. Most designers and developers still think of the small-screen viewport as the exception, not the norm.
For once, Betteridge’s Law of Headlines doesn’t hold true, because the data in this article shows that the answer is a resounding “yes!”
Here’s a talk give at a community event in London last summer.
Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.
I am really looking forward to hearing Heydon’s talk at Responsive Day Out.
Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.
Aw, this is so sweet! Jason describes getting inspired by Responsive Day Out to create Responsive Field Day:
I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.
Inspired by Responsive Day Out, the gang at Cloud Four are organising a one-day event on responsive design in Portland on September 25th. It’s gonna be a good one.
The responsive BBC News site is live! Hurrah!
Here’s a look at the highs and lows of the site’s story, emphasising the importance of progressive enhancement and all that enables: feature detection (by “cutting the mustard”), conditional loading, and a mobile-first approach.
The launch of the Apple watch prompts Brad to remind us of the benefits of being future-friendly.
Once again, responsive design is not about “mobile”, “tablet”, and “desktop”. It’s about creating experiences meant to look and function beautifully on anything that can access the Web. We don’t know what gizmos will be sitting underneath Christmas trees two years from now, but there’s a damn good chance those gadgets will be able to access the Web.
Superb. Absolutely superb.
A magnificent tour-de-force by Frank on the web’s edgelessness.
Read. Absorb. Read again. This is the essence of responsive web design, distilled.
A terrific bit of smart CSS thinking from Heydon Pickering.
You know he’s speaking at Responsive Day Out, right?
The Guardian have hit the big red button and made their responsive site the default. Great stuff!
(top tip: don’t read the comments)
Dave’s great slides from a presentation on performance and responsive design.
A great primer on using
picture. I think I’ll be referring back to this a lot.
This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.
The audio is available for your huffduffing pleasure.
Patty’s excellent talk on responsive design and progressive enhancement. Stick around for question-and-answer session at the end, wherein I attempt to play hardball, but actually can’t conceal my admiration and the fact that I agree with every single word she said.
I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.
This is a concern that Matt Wilcox has raised:
Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.
I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.
Following on from that post of Jason’s I linked to, Chris also emphasises that, for most use cases, you probably only need to use srcset (and maybe sizes), but not the picture element with explicit sources.
It’s really, really great that people are writing about this, because it can be quite a confusing topic to wrap your head around at first.
Jason points out that the picture element might not be needed for most responsive image use cases; the srcset and sizes attributes will probably be enough—that’s what I’m doing for the photos on my site.
I remember reading Gia Milinovich’s reports from the set of the in-production Danny Boyle sci-fi film called Sunshine back in 2005. Then the film came out, exceeded my expectations, and became one of my all-time favourites.
Now the website—which was deleted by Fox—has been lovingly recreated by Gia. (And it’s responsive now.)
I had a good ol’ chat with Justin Avery from Responsive Web Design Weekly. We talk about performance, Responsive Day Out, and yes, progressive enhancement.
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
Dave wanted to figure out if having a responsive site necessarily meant taking a performance hit, so he ran the numbers on his own site. It turns out all of performance-related issues are not related to responsive design.
If you’re going to check out the New Yorker’s nice new responsive site, might I suggest you start here?
Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.
I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.
A concise case study from gov.uk:
Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.
Neil Berry writes down his thoughts prompted by Responsive Day Out 2.
A great blow-by-blow account of Responsive Day Out 2 from Simon R Jones.
Phil Baker writes up his thoughts on all the day’s talks.
What follows here is not a full account of each talk, you can listen to the audio recordings for that. This is more a collection of my main take-aways for the day, and what I found most interesting.
Marc Jenkins shares his thoughts on Responsive Day Out 2.
Another lovely write-up of Responsive Day Out 2.
Now this is what I call a conference write-up. Paul synthesises the talks from Responsive Day Out 2 into five principles for responsive design:
Sally and I will be speaking at this free evening in London on August 7th.
Here’s the Creative Commons licensed music that was playing during the breaks at Responsive Day Out 2.
Here’s Kirsty’s retrospective of Responsive Day Out 2, from the perspective of a speaker and an attendee.
As well as delivering a terrific talk at Responsive Day Out 2, Ida has also written up her detailed notes of the day.
Adam Onishi’s write-up of Responsive Day Out 2, paying particular attention to the format and the curation of the day.
Jeremy puts together two fantastic conferences in Responsive Day Out and dConstruct, both of which I will have attended for the first time by the end of the year and I don’t think there’s a coincidence in that. Responsive Day Out was a truly fantastic conference, and it was all down to the curation of the conference, because quite literally there wasn’t anything else.
As always, Orde Saunders took copious notes at Responsive Day Out 2. The man’s a machine!
Sally’s talk at Responsive Day Out 2 was really, really great—it kinda blew my mind. I’m so, so happy she agreed to be a part of the event.
Here’s her description of the day and the other talks. Pay attention to the closing call:
I didn’t get to meet everyone I wanted to, but you should all come back for dConstruct in September as I’m sure that it’ll be even better than this weekend was.
Another great write-up of Responsive Day Out 2, this time from Hidde de Vries, who came over to Brighton from the Netherlands.
A terrific write-up of Responsive Day Out 2 by David Watson, tying together many of the day’s strands.
This is what Oliver was talking about Responsive Day Out 2 — a new approach to information architecture.
Cast off your sidebars! You have nothing to lose but your grids!
Photos from the rather wonderful second edition of the Responsive Day Out in Brighton.
A lovely little tale of empowerment through HTML and CSS.
If you’re coming to the Responsive Day Out next week, bring your dog. Laura is organising a special Web Talk Dog Walk for the next day.
A look at how the website for An Event Apart is using the picture and Picturefill …featuring Jessica as the cover girl.
A handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.
A thoughtful in-depth piece that pulls together my hobby horses of independent publishing, responsive design, and digital preservation, all seen through the lens of music:
Music, Publishing, Art and Memory in the Age of the Internet
A nice summation by Dan of when it makes sense to use a graphic design tool like Photoshop and when it makes sense to use a web browser.
A reusable set of responsive patterns and templates for UK councils.
Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.
A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!
A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.
Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.
An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.
Great stuff from James Wragg and the gang at Madgex: a way of lazy-loading ads for responsive sites without messing with the ad code.
A great write-up of the design process behind The Guardian’s responsive site. It’s really gratifying to see UX designers talking about performance.
A nice look at responsive design, progressive enhancement, and the principle of One Web.
A great series of articles on the sci-fi films of the ’60s and ’70s:
The Laser Age examines a rich period in the history of science-fiction filmmaking that began in the late 1960s and faded away by the mid 1980s.
…all wrapped up in a nice responsive design too.
I think Chrome is doing the right thing by removing the 300 millisecond tap delay on sites that set width=device-width — it’s certainly better than only doing it on sites that set user-scalable=no, which felt like rewarding bad behaviour.
The transcript of Mark’s talk from last week’s Handheld conference in Cardiff.
There are mountains.
I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.
This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.
Warning: it does get quite ranty towards the end.
Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.
The title is a bit sensationalist but I agree completely with what Karen is saying:
It’s time we acknowledged that every responsive web design project is also a content strategy project.