Responsive Day Out 2013

Published 6 March 2013

Last Thursday I headed down to Brighton. The three plus hour train journey made all the more enjoyable for bumping into Cole Henley en route.

Shopify Brighton Meetup

On Thursday evening I headed along to the Old Ship on the seafront for the first UK Shopify Meetup. Bang on 5.30 the bar was full, much to the surprise of the hotel manager and myself.

It was great to meet everyone who came out the night before Friday’s conference. Swag was given out, t-shirts remain every popular and the scarcity of the Shopify hoodie meant the few that I had went like hot cakes.

There was plenty of Shopify and web chat followed by a number of us heading out to a diner for shakes and burgers. Beer and milkshake aren’t a great mix, just in case you wondered!

Responsive Day Out

(Photo: Marc Thiele)

The following day after taking in the first of many flat whites at Small Batch I headed over to The Dome for Responsive Day Out – as the name suggests a conference devoted to discussing Responsive Web Design (RWD).

On arrival the Shopify supported Small Batch coffee cart was in full swing serving folk, so much so I sadly missed out.

Jeremy had put on a packed agenda and a new, at least to me, format. Three short twenty minute talks followed by a curated Q + A on the sofa.

There were 12 talks spread over four sessions and I managed to see all of them before heading back up the hill to the station for the long train ride home.

Themes

Looking back it’s hard to believe how impactful Ethan’s A List Apart article has been. It’s not yet three years old but RWD as a discipline is now firmly part of our everyday working lives as web designers and developers.

The talks covered lots of ground. Everything from design process, design philosophy, performance, navigational patterns and how big organisations such as the BBC and the Guardian are tackling the problems thrown up by RWD.

One thing that became very apparent, and to paraphrase Sarah, is that we are still very much “winging it”. There’s plenty of unchartered territory and many problems to solve.

In no particular order here are some of the key things I picked up on:

There’s no right or wrong way to approach RWD in the design process. Our toolset is still being defined. For many of us integrating RWD into our work has been messy and problematic. Some go straight into mark up others spend a little longer in image editing software.
That said bringing RWD into our workflow is a shift in thinking similar to moving from table based layouts to CSS based layouts.
Navigational design patterns for small screen sizes are emerging. David Bushell showed a few examples during his session as well as discussing a number of approaches to handle this in your own projects. David’s Off Canvas article is worth your time.
Large organisations such as BBC News and the Guardian are employing the “mobile first”, or in their case “base experience” approach to development. JavaScript tests are used to determine a modern “cutting the mustard” browser and the “experience” is then progressively enhanced. This ensures the content is available to all, including older browsers.
Using web fonts on mobile devices, whilst of course doable, requires some planning. We don’t have access to the wide variety of system fonts as standard so picking your fall back font-stack is important. There are a number of ways to deal with the loading of fonts, for example waiting for the files to download and hiding text or using scripts like the Google Web Font Loader to style text whilst the web font is loading.
We should all consider using asset fonts in our projects. Sites like Ico Moon allow you to create very small asset fonts that can be base-64 encoded and placed directly in your style sheets and conditionally loaded if required.
Additionally we should also think about using SVG more in supported browsers. It’s also possible to target elements of your SVG with CSS, coupled with media queries this becomes a powerful way to offer different graphics depending on certain criteria, such as viewport size.
Game console browsers are getting better but are problematic. By offering a “base experience” we can cater for these browsers.
We need to be conscious of page load times. How we progressively load scripts and stylesheets makes a difference to how quickly we can push our pages to a device. Pragmatism (more on that in a moment) sometimes take precedent over being “future friendly” in this area.
There’s plenty to get excited about in CSS3, in particular flexbox. This will offer us new and less JavaScript dependant ways to move content around without changing markup.
The proposed picture element offers us ways of “art directing” imagery in relation to viewport size.
RWD is not about a handful of break points. It’s about a handful of break points and many “tweak points” – small changes, likely inline (this is relatively straightforward with tools like Sass) and fixing small issues with the layout and design as it bends and flexes.

Pragmatism

Finally a quick word on pragmatism. During his “Anatomy of a responsive page load” session Andy Hulme uttered the “technique that dare not speak it’s name”. That is of course user-agent detection.

I know it’s fraught with difficulty, that browsers are very sloppy at identifying themselves and that the user-agent strings are liable to change but it was refreshing to hear Andy say that for now the Guardian use services like Device Atlas and WURFL. Pragmatism, plain and simple.

Is there ever a case for using these techniques? I would argue in certain contexts yes. The Guardian have a team constantly working on their web presence. They can add, amend and remove at will. This is a very different context to me handing over a responsive site to a local business. It’s unlikely that they will have a budget to keep me on a retainer so using these techniques could ultimately, and inadvertently, break their site moving forward. Again, at least for me, context is as important as content.

Until next year

There was a lot to like about the conference. As always it was great to see old friends and make new ones. The format really worked. The price point was perfect and the content thought provoking. What say you to Responsive Day Out 2014 Jeremy?

Conference audio

Jeremy has kindly made the audio available via Huffduffer. It’s well worth a listen, especially the chat sections.

2 Comments

reverge.info.iw.iv.gd 22 July 2013

It’s truly a great and useful piece of info. I am happy that you shared this useful information with us. Please keep us up to date like this. Thanks for sharing.

lean muscle mass builders 17 August 2013

Thanks a lot for sharing this with all people you actually know what you are talking approximately!
Bookmarked. Kindly additionally seek advice
from my website =). We can have a link alternate arrangement between us