Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Responsive Summit

Posted on 28 February 2012 16 comments

Article illustration for Responsive Summit

Last Thursday, I popped over to London and met with a small group of folks to chat about the various tools, techniques, problems, and solutions surrounding the subject of responsive web design; a day we semi-jokingly referred to as ‘Responsive Summit’. As soon as we announced it, the hashtag exploded with all sorts of idiotic snark, but I’ll get to that later. For now, I want to discuss the day itself and some of its outcomes.

Firstly, I should talk about its inception. The previous week, Chris Armstrong and I had a Skype chat to discuss our own approaches to responsive web design. It was a productive talk and afterwards I tweeted that I had ‘just had a very cool chat with @armstrong, trying to work out the ideal responsive web design workflow. Good times.’ Our mutual friend Josh Brewer — over in England on Twitter-related business — replied: ‘We should chat. Been having similar conversations of late.’ Then Alex Morris made the suggestion of a get-together: ‘A big group powwow would be so helpful for all of us.’ The rest, as they say, is history, and — thanks to the efforts of Martin Beeby at Microsoft and a bunch of people on Twitter who expressed interest in participating in such a discussion — a week later eighteen of us were sitting around a room at Microsoft HQ in London, with five more joining in via Skype.

I should preface my notes that admitting I only noted down subjects that were of particular interest to me and I thoroughly recommend you read the blog posts written by the other people who were there on the day; there’s a list of them all on Lanyrd.

Please also be aware that none of this is being presented as conclusive. It was never the intention for us to sit down in one day and then come up with a set of rules to dictate to the rest of the world. To think that so many snarky comments assumed we would — or could — even do such a thing is ridiculous. Think of the day’s outcomes as a starting point; an opener to a much larger and much more involved conversation.

Workflow

  • Designing (in Photoshop or Fireworks) every possible breakpoint for a website is impossible and a waste of time. We should focus more on designing style guides and thinking of those as systems that would help guide the designer, the developer, and the designer-developer without needing literal depictions of every stage in a design. ‘Keyframes, not wireframes,’ said Cennyd.
  • Dan Mall noted that clients bring expectations and responsive design can pose surprises. It’s up to us to set those expectations.
  • Mark Boulton suggested that the idea of the designer presenting an idea as some sort of ‘grand reveal’ is damaging — a good client should be happy with the mess we make along the way (because the process is inherently messy) and we should help educate them by explaining our processes before anything starts.

Layout

  • I asked if our enthusiasm to move to fluid layouts has actually clouded our judgment to a degree and resulted in layouts breaking when they become too wide? What about optimal measures? What about massive images? I say we shouldn’t be afraid of using max-width where appropriate, although I think I’ll expand on my thoughts for pragmatic web design in another post.
  • Mobile-first doesn’t always work. I suggested that it’s not just because of different contexts and different users, but also because of the type of design: if the mobile version only has a couple of changes from the desktop view, it makes sense to design the desktop version first and work back from there, which is exactly what we did with Belong. Again, I’ll probably follow this up with a separate post.
  • Not enough is said about the mistakes we make. As an industry, we should not only be proposing conclusions, but also admitting to the scenarios where we’ve had to go back on something that just didn’t work, like Mat Marquis did in his recent article for A List Apart.

Sensors

This is not really related to sensors per se, but came up during that section:

  • Using display:none is harmful, because if referring to an image, that image will still be downloaded by the browser. We need a new method to combat this; perhaps something like load:none for when browsers really shouldn’t load content at all.

Images

Responsive images is a big area of interest to me and it’s also the area where I’ve encountered the most problematic parts of the responsive web design equation. You can read about some of that in my last post, ‘Better Background Images for Responsive Web Design’, and I’ll be writing a lot more about it in the near future.

  • I suggested that mobile shouldn’t always mean lo-res. Consider the iPhone’s Retina Display: you don’t necessarily want to load lo-res images if the phone has a higher pixel density. (We’re going to see the Retina Display become an even bigger consideration once the iPad 3 comes out and even more so if the rumoured new MacBook Pros support it. Does that mean all of our images on the web are suddenly going to look awful? Perhaps so, although again that’s another post.)
  • We spoke a lot about the inline img element, but what about background images, too? Well, they’re actually in a better position: it’s okay to use media queries to selectively load different background images, as the images aren’t loaded until needed. (I must admit that I wasn’t aware of this!)
  • Everyone agreed that the proposed picture element felt like the most sensible way forward as a replacement for img, as it follows the same source-selecting patterns as the audio and video elements.
  • Scott Jehl has already created a JS-based polyfill for picture. Nice one!
  • However, in spite of the unanimous enthusiasm for picture, we wondered if the best possible solution might actually lie with a new file format, rather than as a problem for HTML and CSS? Getting a new format approved and supported might sound like a pipe dream, but consider .WOFF: it happened very quickly because it’s effectively a wrapper around an existing file format. Could that be the answer?
  • In terms of what can we do, right now, Josh Emerson’s solution could very well be the best: a lo-res image is loaded by the img element’s src by default, then, if it’s detected that the browser can support a wider image, a hi-res one is loaded in its place using Javscript. The fallback, therefore, is always the smaller file.

When I get a spare moment (ha ha), I’ll be implementing Josh’s method on this site. Jeremy has written about its benefits, too.

A sort of conclusion

As I said at the beginning, there were no hard conclusions to come out of the event, nor were there intended to be. This is the start of something much bigger: a discussion that will, in its next stage, move to more localised ‘summits’ across the globe. The immediate goal for those of us who were there is to respond to all the questions we got on the day via Twitter and blog posts, which Josh has compiled into one Google document. Hopefully that alone should illustrate that our little gathering was for the benefit of the community, not ourselves.

[Photo by Chris Armstrong.]

16 comments

  1. Adrian Hart

    Adrian Hart

    28 February 2012 @ 02:43PM #

    I really like the idea of using a ‘Picture’ element with a media-dependant source-selection. If this could be coupled with a way to only download the appropriate files for a particular media, that would be truly awesome.

    I’m really enjoying reading the various accounts of the ‘RWD Summit’ and am excited about the buzz in the industry over responsive design.

  2. Izul Cyber Cafe

    Izul Cyber Cafe

    28 February 2012 @ 02:43PM #

    Thank you for share. Very useful Information for us. I likes your blog posts :)

  3. Alice

    Alice

    28 February 2012 @ 06:46PM #

    Something like load:none would be seriously useful.

  4. Matt Radel

    Matt Radel

    28 February 2012 @ 06:47PM #

    Good point from Dan Mall there. Lots of clients often come to the table wanting an app or something of the like because that’s what they think mobile optimization is. I think we not only have to set expectations, but educate them to some degree. That can sometimes be a tall task that gets overlooked.

    It’s great to see this type of discussion…and to see the word “powwow” on screen :)

  5. Ezequiel Bruni

    Ezequiel Bruni

    28 February 2012 @ 06:50PM #

    Load: none; is a straight up awesome idea. I like it, I want it.

    The element is another story, however. Firstly, browser support might not show up for a long, long time. (I’m looking at you, Microsoft…) Secondly, we’d have to configure every CMS we use to create multiple versions of every image we upload and generate the appropriate code.

    Unless the WordPress guys get on board with this idea, or some genius develops a plugin, I’m not sure how I’d personally be able to pull it off. The is admittedly the lesser of the two issues, but still… something would have to be done.

  6. Rachel

    Rachel

    28 February 2012 @ 06:54PM #

    Thanks very much for sharing all your thoughts on this Elliot – I for one was glad that a bunch of you met up and have managed to bounce around loads of ideas for techniques that we might then be able to use.

    I submitted a question via the site about larger screens and what does RWD mean for those – obviously there’s a lot that gets mentioned on twitter etc about mobile-first but it often does get forgotten about for bigger screens. I had that same challenge on my own site that I relaunched a couple of weeks ago and I’m still working through ideas of how I can make it work on larger screens. At the moment I have the solution you mentioned where we shouldn’t be afraid to use max-width where it’s possibly necessary.

    Overall great post, nice to hear some thoughts and ideas from the day. :)

  7. Dan Blundell

    Dan Blundell

    28 February 2012 @ 07:00PM #

    Thanks for the write up Elliot, great to catch up on the interesting points raised at such an impromptu get together!

    One this I pick up on is that alot of the issues around responsive design are being solved in the front end development and design, there seems to be a gap that needs bridging in the ideas of back end development. Something like load:none is a great idea but the issue is still potentially forced on the client side. It’d be interesting to push the idea of server side media queries to decide what content to serve. Much of the approach to responsive design has switched from user-agent based ‘mobile sites’ to straight up CSS media queries, there’s got to be an argument for a combination in some cases. I only say this based on a loose theory, I’m genuinely not sure it would work but users don’t drag their browser in and out like geeks do – the biggest change in viewport is portrait to landscape so we could try and deal with ranges of content on the server side and then use CSS to support the content based on the range of content served. It’s not an idea that’s completely thought through and with such a range of devices out there I’m not sure it’s viable. It could be said that we’ve jumped in feet first with media queries without considering what we already had, there may be some contexts where server side adjustment of the content served is still beneficial.

  8. Davorin

    Davorin

    28 February 2012 @ 07:40PM #

    Photoshop is obsolete with responsive design. Keyframes is the right way to go.

    I agree that mobile-first doesn’t always work, especially if you just realign to responsive (as I did for my last two projects).

    I think load:none is a must, and picture element too (or new file format for that matter).

    Nice write-up of a great event. Hopefully there’ll be more like this to come.

    Greetings from Ljubljana, Slovenia

  9. David Yeiser

    David Yeiser

    28 February 2012 @ 08:01PM #

    > Designing (in Photoshop or Fireworks) every possible breakpoint for a website is impossible and a waste of time. We should focus more on designing style guides and thinking of those as systems that would help guide the designer, the developer, and the designer-developer without needing literal depictions of every stage in a design. ‘Keyframes, not wireframes,’ said Cennyd.

    I would agree for the most part, I’m right in the middle of creating 4 different breakpoints in Photoshop for a site with with mockups for about 20 different landing pages!

    It has taken me far longer than I had anticipated (and budgeted) so that sucks, but the deliverables have proven very helpful to the developer and the site is being implemented exactly how I had envisioned it.

    The best scenario is the designer handles the CSS/HTML for the responsive site. However when that’s not possible just handing one mockup to a developer with a style guide for implementing the rest won’t always work. I think that’s expecting too much from a developer. Kind of like a copy writer handing a brand message to the designer and expecting them to fill in copy throughout the site to support it.

    If it’s a simple blog and it’s just the sidebar and navigation shifting around, then perhaps that’s easy to explain and then augment with a style guide for images, headers, font sizes, etc. But what about when the content is more complex? Multiple content types and sections, advertisements, etc.

    Unfortunately I don’t have a solution. I used to think a better tool would fix it, but I think you’ll still be in a similar situation. The budget required for creating mockups for each breakpoint will triple the overall cost, not a bad thing for designers of course but also not always economically feasible.

    Maybe a guideline is the best way, but I feel it would have to be so specific that you might have been better off just creating the different mockups.

    Either way, it’s a fun time to be a web designer. Thanks for taking the time to write up this summary!

  10. David Hickox

    David Hickox

    28 February 2012 @ 09:00PM #

    I agree that mobile-first is not always appropriate. When I start concepting for mobile, I always ask “what unique qualities of the device can help me deliver a cleaner experience?” Some of these are obvious (GPS location, camera) and some relate more to the probable use environments for mobile sites (the whole one thumb and one eye concept). Making these considerations the focus often leads me to create a different experience for mobile that’s not just a simplified version of the desktop site.

  11. Christian Senior

    Christian Senior

    28 February 2012 @ 09:26PM #

    “…a good client should be happy with the mess we make along the way (because the process is inherently messy)…” – HALLELUJAH!!
    Load:none could be the new Jesus Christ, and I know you’re gonna tell me that John Lennon got into a whole lotta do do for remarks like that but this time it’s true.

  12. Regis Kuckaertz

    Regis Kuckaertz

    29 February 2012 @ 11:10AM #

    Elliot, although I said nothing that could be considered snarky, during the summit my feelings were mixed with excitement and frustration. The idea of sharing experiences on RWD and allowing people to contribute to the discussion was excellent; sadly I felt the latter part was missing: there was a disconnect between what the website advertised (i.e. ask questions) and what actually occurred.

    And yet, this was to be expected. From what appeared during the event and in the various blog posts that followed, the 10 of you already had enough questions to fill a few days worth of talking and thinking. And this is great, something similar occurred a while ago when Zeldman & a few others gathered to discuss HTML5 (http://www.zeldman.com/superfriends/). This is super useful, as we still need to figure out what RWD encompasses and how it changes our current way of designing websites.

    My frustration came from the lack of feedback regarding the questions we asked; a simple “hey good point! we’re trying to discuss this” would have done it, or you could’ve shared interesting/recurrent questions with the rest of the world and collected opinions, or … none of that happened, to my knowledge. And I think it should, that is why I really hope there’s going to be another Responsive Summit in the near future.

  13. Danny Williams

    Danny Williams

    28 February 2012 @ 11:00PM #

    Thanks for the write-up. Sounds like a great discussion to be having and I’m jealous the states haven’t had one yet!

    I only really wanted feedback about load: none, which I’m assuming is imagined to be an addition to CSS. Doesn’t that mean that the browser would have to read in the page and the style sheets, but wait to fetch the images (or whatever) until it knows they’re not load: none. In my (very limited) understanding of the browser’s order of operations, I thought they essentially started loading assets virtually as soon as are identified.

    Might that then be an argument for an attribute that could be applied to any HTML element? So you could do , or also

    . (While we’re at it, consider load=“scroll” that would tell the browser this piece isn’t worth loading until you think it’s close to being seen.) That opens up another batch of downsides… Perhaps the largest—off the top of my head—it seems that such an implementation would require JS to toggle the load state of an element. Perhaps some would think that a ‘feature’ not a bug, though.

    Well, anyway. Thanks again and I look forward to hearing more experiments and thoughts through our industry’s growth spurt. I’d especially be interested in how you work with designers around the idea of breakpoints.

  14. gray ghost visuals

    gray ghost visuals

    01 March 2012 @ 03:43PM #

    Responsive Images is definitely a hot discussion for another day – or infinity, but the debate surrounding it’s change is quite intriguing. Unfortunately we can’t throw embedded media like the <img> tag out the window due to some contexts where it provides semantics (exactly what HTML is for).

    As far as the RESPONSIVE ADS IT WOULD BE NICE TO SEE GOOGLE ADSENSE help in this fight by allowing fluid sized ads to be purchased and previewed not just fixed width advertisements for site owner(s)/designer(s)/client(s) etc. Also they could do away with the crummy looking text only banner ads ( don’t they have a font network? why not use it for that purpose? ).

    Recently in the Responsive Image Community Group -http://www.w3.org/community/respimg/, Denys Mishunov wrote a wonderful post concerning the <picture> element and how we can deliver the responsiveness and, at the same time, let the conventions work still. It is a really great elaboration on Scott’s Picture Fill idea. Here is a snippet of his Denys’ proposal….

    
    <picture>
        <source query="(min-width:420px) and (max-width: 767px)">
            <img src="http://dev.null/small.jpg" alt="Alternative text for capable browsers wider than 420 but narrower than 768px" />
        </source>
        <source query="(min-width:768px)">
            <img src="http://dev.null/large.jpg" alt="Alternative text for capable browsers wider than 768px" />
        </source>
        <img src="http://dev.null" alt="Alternative text for browsers not understanding CSS media queries or screens smaller than 420px" />
    </picture>
    
    
  15. Matt Simon

    Matt Simon

    02 March 2012 @ 11:24AM #

    For images I am curently using the adaptive images php and js script…http://adaptive-images.com/

    This works well for me when building client sites in WordPress as the client has to do nothing else other than add one image in one size.

    I hear alot about excessive resources used etc but I’m a real world guy and have seen no problem. I’ve used it on about half dozen sites and the images load super quick and I am yet to see a negative in using it.

  16. Matt Simon

    Matt Simon

    02 March 2012 @ 11:24AM #

    For images I am curently using the adaptive images php and js script…http://adaptive-images.com/

    This works well for me when building client sites in WordPress as the client has to do nothing else other than add one image in one size.

    I hear alot about excessive resources used etc but I’m a real world guy and have seen no problem. I’ve used it on about half dozen sites and the images load super quick and I am yet to see a negative in using it.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.