Tags: responsive

Patty Toland — Design Consistency For The Responsive Web (Smashing Conference Freiburg 2014) on Vimeo

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.

Keep ’em Separated — ericportis.com

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.

Responsive Images: If you’re just changing resolutions, use srcset. | CSS-Tricks

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.

» Don’t use <picture> (most of the time) Cloud Four Blog

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.

SunshineDNA - Behind The Scenes

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.)

RWD Podcast Episode #15 : Jeremy Keith — Responsive Web Design

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.

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

RWD Bloat - daverupert.com

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.

Guy Walks Into a Bar - The New Yorker

If you’re going to check out the New Yorker’s nice new responsive site, might I suggest you start here?

Smart Fixed Navigation

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.

Navigating the Guardian | Help | The Guardian

A peek behind the scenes of an interesting new navigation pattern on the Guardian’s still-in-beta responsive site.

You can try it out here

Things we learnt designing ‘Register to vote’ | GDS design notes

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.

Highlights of Responsive Day Out 2: The Squishening

Neil Berry writes down his thoughts prompted by Responsive Day Out 2.

Responsive Day Out 2 | Studio 24

A great blow-by-blow account of Responsive Day Out 2 from Simon R Jones.

Responsive Day Out 2

Phil Baker writes up his thoughts on all the day’s talks.

Responsive Day Out 2 - The Squishening – Alex Gibson

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.

Takeaways from Responsive Day Out 2 - Plausible Thought

Marc Jenkins shares his thoughts on Responsive Day Out 2.

Back to basics - Katrin Kerber

Another lovely write-up of Responsive Day Out 2.

The Pursuit of Laziness: Thoughts from Responsive Day Out — Paul Robert Lloyd

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:

  1. Responsible
  2. Polylithic
  3. Pragmatic
  4. Collaborative
  5. Flexible

Responding to the Responsive Web: Insights on Reshaping User Experience - The Digital Pond (London, England) - Meetup

Sally and I will be speaking at this free evening in London on August 7th.

Responsive Day Out 2 by adactio on SoundCloud

Here’s the Creative Commons licensed music that was playing during the breaks at Responsive Day Out 2.

Responsive Day Out 2 - The Squishening - Kirsty Burgoine Web Design and Development

Here’s Kirsty’s retrospective of Responsive Day Out 2, from the perspective of a speaker and an attendee.

adactio : responsiveconf2 on Huffduffer

Thanks to the tireless efforts of the magnificent Drew McLellan, the podcast of all the talks from Friday’s Responsive Day Out 2 are now available for your listening pleasure.

Notes from Responsive Day Out 2, June 27th in Brighton — iAllenkelhet

As well as delivering a terrific talk at Responsive Day Out 2, Ida has also written up her detailed notes of the day.

Responsive Day Out 2 2014 - #beepcheeks

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.

Items tagged beepcheeks on Decade City

As always, Orde Saunders took copious notes at Responsive Day Out 2. The man’s a machine!

Responsive Day Out 2 – from the perspective of a speaker & attendee : Sally Jenkinson

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.

Responsive Day Out 2 - the squishening | hiddedevries.nl

Another great write-up of Responsive Day Out 2, this time from Hidde de Vries, who came over to Brighton from the Netherlands.

On being responsively creative

A terrific write-up of Responsive Day Out 2 by David Watson, tying together many of the day’s strands.

Guardian beta · The container model and blended content – a new approach to how we present content on the Guardian

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!

Responsive Day Out 2014 - an album on Flickr

Photos from the rather wonderful second edition of the Responsive Day Out in Brighton.

Getting Back That Lovin’ Feeling on Sparkbox

A lovely little tale of empowerment through HTML and CSS.

Responsive Special - Web Talk Dog Walk

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.

An Event Apart and The Picture Element (a Monkey Do blog post)

A look at how the website for An Event Apart is using the picture and Picturefill …featuring Jessica as the cover girl.

The Cassette Tape as Responsive Design

This is an interesting observation about the design of cassette inlays. It reminds of Paul’s presentation at the Responsive Day Out when he looked at the “responsiveness” of television idents.

Responsive design testing tool – Viewport Resizer

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.

Mediating Music by Rudiger Meyer

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

Using Photoshop in Responsive Workflows - Web Standards Sherpa

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.

Council Toolkit

A reusable set of responsive patterns and templates for UK councils.

Making ubuntu.com responsive: intro | Ubuntu Design Blog

Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.

Device-Agnostic by Trent Walton

A terrific post from Trent, touching on all the important facets of building for the web: universality, progressive enhancement, performance …great stuff!

Mobile-first and IE8 Solution – Introducing grunt-legacssy (Updated) | Robin Plus

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.

Jonathan T. Neal | Thoughts on Media Queries for Elements

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.

Responsive tables

An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.

madgex/lazy-ads

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.

Notes on a responsive Guardian redesign – Lozworld™

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.

Realizing One Web

A nice look at responsive design, progressive enhancement, and the principle of One Web.

Laser Age / The Dissolve

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.

300ms tap delay, gone away - HTML5Rocks Updates

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 Business of Responsive Design by Mark Boulton

The transcript of Mark’s talk from last week’s Handheld conference in Cardiff.

There are mountains.

Responsive scrollable tables | 456 Berea Street

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.

Jeremy Keith – The Power Of Simplicity – border:none

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.

Responsive Design Won’t Fix Your Content Problem ∙ An A List Apart Column

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.

Responsive design, screens, and shearing layers — Unstoppable Robot Ninja

A wonderful piece by Ethan taking issue what the criticism that responsive design is over-reliant on screen size. Instead, he says, it begins with screen size, but there’s no limit to where we can go from there.

Responsive design might begin with the screen, but it doesn’t end there.

Responsive App Design

Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.

“Now with Responsive!,” an article by Dan Mall

Dan gives some insight into what it took to make his personal site responsive. Stay tuned: there’ll be more of this.

If it doesn’t work on mobile, it doesn’t work | hacker journalist

A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.

embedresponsively.com

Here’s the CSS and markup you need to make third-party iframes responsive. Handy!

Better business by design

Some good-lookin’ stats from a responsive redesign:

Total page views, a metric we were prepared to see go down with the redesign, are up by 27%. Unique visitors per week are up 14% on average and visits per week are up on average 23%.

intention.js

This smells bad: adding a JavaScript dependency for responsive layouts.

I disapprove.

Responsive Web Design is Solid Gold

Jason recants on his article from a few years back when he described responsive design as “fool’s gold.”

Responsive web design: it’s solid gold, baby.

The perils at Great Falls - Washington Post

On the one hand, this is yet another Snowfall clone. On the other hand, the fact that it’s responsive is impressive.

Surfin’ Safari - Blog Archive » Improved support for high-resolution displays with the srcset image attribute

WebKit nightlies now have support for srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of picture.

I’ve always maintained that the best solution to responsive images will be some combination of srcset and picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by picture, but the “retina” use case is better handled by srcset.

Create a responsive ad unit - AdSense Help

Looks like Google are offering responsive (or at least adaptive) ad sizes.

Responsive design: we are not there yet

A call for developers to let standards bodies know what we want:

It is important that we as developers focus on the right things again. If you encounter a bug, you should not only fix it for your site; you should reach out to browser vendors and web standards people to fix this in a long-term solution. It might cost you a few minutes, but brings a lot of improvement to the whole developer community.

Media Query Events Example

A page to demonstrate the conditional CSS technique I documented a while back.

Responsive Navigation: Examples of Navigation in Responsive Design

A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.

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.

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…