Update 3/6/16: we’ve just added all of the videos from the conference at the end of this post! Scroll down to find all of the talks…
Last week, Stuart and I headed to Oxford for Render Conference (previously jQuery UK), which promised to be two days of great talks on all things front-end.
The sessions didn’t disappoint: having only ever been to marketing conferences in the past, this was a new experience for me, and I came away with lots of inspiration and further reading to do.
Here are my highlights – and scroll right to the bottom for links to all of the slides…
Bruce Lawson kicked off the conference with a talk on how we can make the web better. He argued that native apps are a current existential threat to the web, in the same way that technologies like Flash and Silverlight used to be: they can do things that the web can’t. In 2014, 86% of time on mobiles was spent in apps as opposed to on the mobile web, up from 80% in 2013.
Progressive web apps could be a way to have the best of both worlds. These are apps that are live on the web, but that you can still ‘install’ to your home screen: you don’t have to open your mobile browser and find a bookmark; you can just click on the icon. Because they live mainly on the web, the size of the download is tiny compared to regular apps, too, which means that they are faster and easier to install on slow connections, and take up far less space on your phone.
All that is needed is a manifest file, which stores the metadata for your app such as icons and colours, and a service worker, which is a series of APIs which allows features such as push notifications and offline access. Then, when a user accesses your site with a browser that supports these two, they will be prompted to install it to their phone.
So far so good. Unfortunately, this is where we hit a snag: only Chromium-based browsers such as Chrome and Opera fully support Progressive Web Apps, with Firefox actively developing its support. To few people’s surprise, Internet Explorer doesn’t support the service worker. Safari does not list support for manifest files, and lists support for service worker under ‘No active development’. With such a significant proportion of people accessing the mobile web using Safari, this is a bit of a blow.
On day two of the conference, after reminding us of a time when successfully booting Windows 3.1 was a fanfare moment, Jake Archibald went into more detail on the service worker, and highlighted how important it is to implement an offline-first approach – what happens before your website loads, or if your internet connection doesn’t work? Currently, The Guardian do this really well: for people using the right browser (see above), a custom offline screen is displayed with a crossword that can be filled in to pass the time. This is a great opportunity to hide easter eggs that can delight visitors.
Ola Gasidlo gave some great examples of practical applications of the offline-first approach in her talk, where people all over the world and in all sorts of challenging situations have been helped by some basic principles – from the Mongol Rally to eHealth Africa. Crucially, she highlighted the importance of saving important data and assets frequently and locally, being as efficient as possible (using SVGs over images, for example), and using the right tools for the job. In particular, PouchDB and CouchDB have been added to our list to check out, as well as using JSON web tokens for logins.
Although accessibility is one big reason for the offline-first approach, it was Robin Christopherson who really brought home to many of us in the audience just how important it is to consider users who are handicapped in some way. After all, as he pointed out, many of us are handicapped in some way or another when we use our phones: if we are carrying a drink in one hand then we only have one hand with which to use our devices; if the sun is too bright then our vision is impaired. If we create apps and websites for these cases, then we are well on the way to much more accessible experiences.
One particularly important example was the use of the Captcha: the visually impaired can click on a button to hear a recording of the characters being spoken, but as one was played and we were asked to write down what we thought the sequence was, those of us who have never had to do this realised just how terrible an experience this was. The voice was almost unintelligible, and having to go through this painful process at the end of filling out a long form must be frustrating at best.
Val Head, who curates the UI Animation Newsletter, gave a great talk on day one about meaningful animation and its place in our websites and apps. But first, we were treated to an example of animation used really, really badly on GoChat’s landing page.
Using Disney’s Illusion of Life as a starting point, Val went through three of her top principles from the original Disney 12 and demonstrated how they could work in a UI:
This was a really great insight into how animation can be used intelligently to reinforce an action and make sure that visitors understand how they are using your website.
The following day, Claire Gowler gave a great talk on how we ask about gender, and how to assess whether we even need to. Beginning her talk by breaking down exactly what we mean by gender into five components – chromosomes, sexual characteristics, expression, role, and identity – she quickly got everyone thinking about how we can ask for people’s gender without alienating or infuriating people.
Claire’s first tip was to ensure that, if we must ask for a title and give a dropdown list of options, we include the gender-neutral ‘Mx’. Next, it’s important that we don’t give options like ‘other’ or ‘transgender’, which are insulting and incorrect, respectively (‘transgender’ isn’t a gender; a transgender person may identify as male, female, or something else). ‘Non-binary’ is a reasonable catch-all in situations where you don’t want to offer the person a text field, but allowing them to fill in their own option for gender if they don’t identify as male or female is certainly the most inclusive way to go.
There was a ton more that I could write about but I’m going to leave it there for this one. It was a thoroughly informative and entertaining conference, which I felt catered well to many levels. As a fairly novice programmer, attending with someone more experienced, I felt we both came away with plenty of inspiration.
Mariko Kosaka, @kosamari
Drawing on <canvas> – a few things I learned about pixels (slides)
Ashley Williams, @ag_dubs
If you wish to learn ES6/2015 from scratch, you must first invent the universe (slides)
Get more great stuff delivered fresh to your inbox.