This guest post is written by Tom Hermans (@tomhermans), made from the notes he took at the Responsive Day Out conference in Brighton. A very detailed report from this event with UK designers and developers sharing their workflow strategies, techniques, and experiences with responsive web design.
Overall this was one of the best events I attended so far. Regarding speakers, organization and everything. Location was nice, registration superfast, speakers all excellent and the format of three short talks with a Q&A session, nicely moderated by Jeremy Keith, brought more useful info to the surface than hour-long talks as we see so often
The Responsive Workflow
Sarah Parmenter (@sazzy) was the first speaker and the questions she raised sounded pretty common to a lot of people, whether they’re seasoned RWD developers, starters or “in between”. The comfort zone and the processes we were used to are not longer sustainable in the ever-changing world of web.
In the talk about responsive webdesign I gave a year ago at WordCampNL I already emphasized that the web is, unlike print, an elastic canvas with little to no set boundaries, which pulls all control out of the hands of the designers. And that’s not always easy to cope with or to bring a clear message when talking to clients.
Sarah spoke about this struggle she felt in changing her process, in client meetings and that we don’t have “the perfect workflow” to deal with all the challenges we face in bringing an optimal performant device-agnostic site to everyone, everywhere.
At the time it felt as someone not really believing or adopting the RWD approach, later on it was clear this just emphasizes that a lot of people yet don’t fully get their head around the whole “content first” paradigm where design is an enhancement (like @paulrobertlloyd boldly stated) and this set the tone for the rest of the day.
Loading Webfonts responsibly and using icon fonts over PNG sprites
The talks of Richard Rutter and Josh Emerson concentrated on a series of practical tips on how to load webfonts and use icon-fonts, especially for small-screen or not-cutting-the-mustard (BBC term for “not-so-capable browsers) devices. Richard showed how webfonts on slow bandwidth devices kill the time to glass for content, and that, with the aid of Google Webfont Loader you can show fallback first, and based on conditions show “nicer” fonts later.
Josh Emerson demonstrated the benefits of having icon fonts instead of the rusty png-sprites to have resolution independent icons, which are easier to manage (imho) and sharper on e.g. retina screens or when zoomed in for instance. Using FontForge as a tool to produce his font and also showing icomoon.io to build custom icon fonts, the way he wrote his CSS is pretty similar, if I recall correctly, as the process Chris Coyier describes in his blog post.
Quick but great talk and immediately useable.
UI Consistency in Responsive Web Design
The message was very clear : Keep consistency in UI, esp. with RWD and device-agnostic interfaces in mind. Basic elements like Typography, Shape and Form and Colour should be consistent on each of these devices and viewports. Base Unit, Grid and Layout can be the progressive enhancement based on device capabilities and viewport capabilities (big/small/wide/small screens etc)
The process Laura described lies very close to mine, and that’s design in the browser, proto-typing goes pretty fast (if you know a bit of code), further use style tiles, style guides and pattern libraries to give the client the look&feel of the end result, although I sometimes tend to use the HTML-rendered wireframe for further “enhancement” in Photoshop to make it less “rough” and give the client an easier understanding of where we are and where we want to get to.
Rather Worried Dinosaurs
Elliott Jay Stocks was a pleasure to listen to. It was like he was telling my story, in regards to designing in the browser, the position of Photoshop, the being used to start off there, the “do it even just to future proof your projects” idea..
With silly RWD acronyms as a background he also countered a lot of the claims that were put against the philosophy. Elliott just like Sarah was used to a great level of control but now embraces fluid interfaces and a content out approach if only for future proofness of the work you produce. He also stated that PSD’s are not the deliverables, that Photoshop and designing in the browser can work together great by going in the browser more quickly and keeping Photoshop to create stunning graphics. Bottomline: A good, simple talk.
Game on – Playing with Game Console Browsers
Anna Debenham took the time to grab some attention for often overlooked devices like consoles. Main point was that controllers bring another audience, another set of browsers, with their quirks of course, and other methods of input.
A lot of her efforts went into testing and documenting several popular consoles and controllers which led to a great, great resource of useful information for everyone who wants to make sure also these browsers deliver a decent experience or for those who want to target this demographic specifically.
The session in the morning by David Bushell (@dbushell) was completely dedicated to navigation and the different ways of getting there in regards to RWD. That means, in regards to touch input, without nasty hover-only nav, or losing too much screen real estate.
- with slide/up down
- with an overlay instead of pushing content down
- off canvas technique
- jump to big footer
- a dedicated navigation page
I have to say, the last one I hadn’t thought about, and up until now, I didn’t see too much use in jumping to a big footer. His presentation made me see that these indeed might be a very useful way to navigate on some sites indeed. Although he also stated that navigation should be a secondary way to get around a site.
A few tips as on how to “think” your navigation system:
- underload your menu, no need of throwing lots of menu items on “any” visitor, mobile or not
- know your content hierarchy
- embrace viewport
- focus on discoverability
- menu should be a secondary way of navigation
A nice add-on to this talk was his advice to ‘do RWD anyway’ even if it’s not in the brief. Try it, get your hands dirty and experience the issues you come across and come up with answers.
The Anatomy of a Responsive Page Load
Andy Hume (@andyhume), client-side architect at The Guardian, focused specifically on performance and page load. Keywords:
- Content-encoding : gzip
- Cache-control: max-age=315360000
Those two are really key towards performance. Further, he explained how they divide the content that gets served to the client in three big chunks:
- Content (HTML, CSS)
- Enhancement (e.g. images, js)
- Leftovers (ads, analytics etc..)
With a Google Page Load waterfall chart he showed us how they analyze the page load and how each part gets loaded and has an impact on overall page load. Andy also mentioned the tradeoffs they made to e.g. cater to older, not-so-capable or as we call it from now on “not-cutting-the-mustard” browsers.
For instance the way scripts are loaded, appendChild-approach vs the faster HTML5 async, which let the browser download JS immediately without pausing the parser. In a way, they prioritized the UX on not-cutting-the-mustard browsers over those with uptodate browsers (more on async ).
He also mentioned often seen as unreliable methods like User Agent sniffing methods, based on DeviceAtlas or WURFL, which is something not often heard from RWD, future- speakers. I guess if you can target a big group of devices with these methods, it’s fine, you can never have “the best” performance for each device and seen from a 20/80 perspective, you still can target a lot of them.
The part about webfonts was very interesting, where they also make decisions on a few parameters to determine who gets what.
- Does the browser cut the mustard ?
- Does it have WOFF support ?
- Is LocalStorage writeable ?
and based on those questions deliver them 1 gzip w/ base64 encoded fonts in json. On responsive images, he wasn’t too keen on the new spec, but preferred a method with datasrc attributes.
Overall he made a bold statement, but I see where he’s coming from, namely that RWD soon hopefully will be viewport irrelevant. That builds further on the notion that we’re building modules or components and that they get their look and style from the context where they’re used. People like Nicole Sullivan or Jonathan Snook already wrote on this subject, resp. with OOCSS and SMACSS (See his slides).
Cutting the Mustard
Tom Maslen (@tmaslen) from the BBC apparently replaced Andrew Clarke (@malarkey) in the line-up. The fact that Andy wasn’t around was a bit of a dissappointment, since I’m a fan of his Hardboiled Webdesign book or the modular approach of the 320AndUp framework he put together, but the talk Tom gave was one of the most interesting (imho) of the day.
He gave us a good insight on how they build the BBC website, keeping the broad audience and their obligation to cater to an audience as big as possible. They divide the various webclients in three big groups:
- not rubbish
- not supported
3 Steps on RWD:
- Start thinking browsers instead of devices
- Conditionally loaded JS (querySelector, localStorage, addEventListener and worry less about all kinds of polyfills
Also: separate between HTML4 and HTML5 browsers, if only to make the distinction between them easier to grasp or identify for non-tech people on-board
- Adding modern CSS (pseudo selectors, adjacent siblings, icon fonts, multi-coloured and everything..)
What’s Next in StandardsLand
Bruce Lawson (@brucel) ’s talk focused primarily on webstandards and new stuff. First of all, the way he presents keeps an audience captivated, bold, humorous and taking a stand (for non-prefixed css for instance). Quick overview on nice things to come in CSS:
- @viewport with min- and max-width setting
- Flexbox, which makes sizing, aligning and ordering of various items a breeze compared to the current situation. I think this article gives a good representation of what is possible and how to achieve it.
- Media Queries Level 4 which bring @media (remote) to target e.g. big screens like TV’s and @media (pointer : coarse, fine, none) which gives you more control on the input mechanism used, e.g. mouse, track-pad or stylus vs a finger. Which have their effect on accuracy of user input.
- Pointer Events spec by Microsoft to generically target different devices without having to resort to Mouse Events, whether they represent an actual mouse device or is being produced from another input type, which makes it hard to code to both device types simultaneously.
- Adaptive images. Touched on by a few speakers, and with various opinions, esp. related to the new picture element. Other speakers dismissed the MQ’s inside the picture element, and I too think this will bring new problems, having this kind of code in the HTML (Maybe here’s a case for a new image format, like WebP, a image format by Google, which is roughly 25-34% smaller than a similar JPG image and 26% smaller than PNG. Adoption in browsers is still pretty slim, probably more about politics than something else..)
- Bruce also showed SVG with media queries, a functionality I didn’t know that existed. He showed a fine-grained spiral with 2px stroke which became a mess on small screen, so in a lower media query (how do I write this, I’m sure you’ll understand) he got rid of the tiny stroke.
One of the best advices I heard in the entire conference came from Bruce Lawson as well, “Choose not to limit it.” which he illustrated by an accessibility issue on a snowboardshop website, which got adressed by a blind person, not able navigating the site properly. When the shop admins asked “but Sir, you’re blind, we don’t really target blind people” the guy simply answered “I know, I wanted to buy a board for my son”.
The Edge of the Web
Paul Lloyd (@paulrobertlloyd) surely had one of the most intruiging presentations starting off with a black and white intro of The Avengers, and went on about the similarities of the TV industry of the ‘60s and the current stage of the web. Well established, popular and around for a while, struggling with evolving technology and variations in equipment and their capabilities. And how TV designers needed to adapt their craft just like we’re doing now.
Paul also stated on how the web DOES have edges, but they’re blurry and not so well-defined, a viewpoint later on repeated by Mark Boulton. And that constraints in the experience are indeed linked to the device, but maybe even more so by bandwidth restraints and latency, battery power etc.
And once again, a stand on content first by “Meaning is our baseline. Design is an enhancement”, a bottom line also heard in ie. the stuff Brad Frost talks about. Death to bullshit too!
He also questioned the need for photographic content online, esp. on low-bandwidth connections, which is because of it’s bitmap nature quite at odds with all the rest which is flexible, adaptable, scalable (type, svg, icon fonts, etc) and thus hard to make resolution independent and bandwidth friendly.
I think the title of Mark Boulton (@markboulton)’s presentation sums up pretty good what Sarah Parmenter was struggling with. At least I think that’s what he was aiming at. He started off by making clear we define an objects edge not only by the frame. There are always edges, although they might feel blurry, like Paul Lloyd already stated. They are just not always predefined, knowable.
He also wanted to get across the notion that with RWD we didn’t break the web. We did that before by trying to make it as a newspaper instead of embracing it as fluid, like it always was, something Jeremy Keith was especially enthusiastic about. He and a few others were saying that for years now.
Mark disliked the notion of fixed pages, what is a page even ? We don’t have “pages” or edges in the way we think we do. Why are there common breakpoints like 320, 768 etc.. ? In the spirit of content out, mobile first, maybe fluid first too .. ?
He wasn’t too fond of the idea of pattern libraries or CSS abstraction, in the way it abstracts the content too far from the design and people tend to start thinking too much in separate breakpoints, separate css files maybe even. We SHOULD be discomforted by designing fluid first and target canvases, on viewports, on breakpoints. And progressively enhance.
Mark gave a rather philosophical, but in a way, also pretty practical workflow advice on how to start, and what ways to tackle the design.
– § –
My summary and conclusion
When I started browsing my Evernotes and putting everything together, it struck me that there was an enormous amount of valuable information given, and that a distinction between developers or designers was never made.
Hope it’ll bring the philosophy across that we should focus on content and meaning, on performance, on User Experience. And not only just on fancy tricks, process or the newest js framework add-on or tool. The overall message throughout the day was not “winging it”, I avoided the coined term all together, ‘cause I don’t feel like I’m winging it, or not more than we all are used to patch and hack it around the web.
Adaptation is key, and that does not always go well. It applies to our tools, our processes and the conventions we’re used to.