Render Positive
Get in touch

Menu

Render Positive

Highlights from Render Conference: Web Apps, Accessibility, and UX


By Han | 6th May 2016 | Posted in Events

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.

 

render conference

 

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…

Web Apps and Offline Access

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.

Game leaderboard

Photographic proof that I made it on the leaderboard

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.

Accessibility

Internet Explorer cakes

Jumped at the chance to eat Internet Explorer

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.

UX

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:

  • Follow-Through: Elements should overshoot their target slightly, and if several are moving together then they shouldn’t all come to a stop at once.
  • Timing and Spacing: the overall duration of the animation, along with changes in timing during – in other words, easing. Val’s recommended method for setting these values was using cubic beziers, helped enormously by this handy tool.
  • Secondary Action: a good example of this is the added embellishment on the Twitter like button of the dots around the animated heart.

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.

 

Twitter heart sprite

The Twitter heart sprite, showing the secondary action that happens as the heart appears and changes in size

 

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.

 

Sainsburys re-brand with a 3D pen

Sainsbury’s rebranded with a 3D pen

 

That’s it for this year!

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.

All of the talks (now with videos!)

Bruce Lawson, @brucel
Web.next (slides)
Video

Jack Franklin, @Jack_Franklin
How jQuery has influenced The Web: Now and Beyond (slides)
Video

Val Head, @vlh
Designing Meaningful Animation (video)

Alicia Sedlock, @aliciability
The landscape of front-end testing (slides)
Video

Harry Roberts, @csswizardry
CSS for software engineers for CSS developers (slides)
Video

Sara Soueidan, @SaraSoueidan
SVG in motion (slides)
Video

Mariko Kosaka, @kosamari
Drawing on <canvas> – a few things I learned about pixels (slides)
Video

Katie Fenn, @katie_fenn
Chrome DevTools: Inside Out (slides)
Video

Robin Christopherson, @USA2DAY
Technology – the power and the promise (slides)
Video

Frederik Vanhoutte, @wblut
Rendering the obvious (slides)
Video

Jake Archibald, @jaffathecake
Show them what you got (video)

Ricardo Cabello, @mrdoob
Programmed Animations (video)

Chad Gowler, @kitation
How to ask about gender (slides)
Video

Jade Applegate, @jadeapplegate
How Fastly designs for complexity (slides)
Video

Gordon Williams, @espruino
Controlling the real world (video)

Ola Gasidlo, @misprintedtype
I’m offline, cool! What now? (slides)
Video

Martin Naumann, @g33konaut
The next frontier: 3D and immersion (slides)
Video

Ashley Williams, @ag_dubs
If you wish to learn ES6/2015 from scratch, you must first invent the universe (slides)
Video

Lee Byron, @leeb
Immutable User Interfaces (video)

Jeremy Keith @adactio
Resilience (video)

Sign up now!

Get more great stuff delivered fresh to your inbox.



Leave a Reply

Want to know what we could achieve for you?

View all resources Useful stuff


Meet the team

Jon Buchan
Hannah Brown
Jenny Longmuir
Tess Bowles
Lee Buchan
Asher Baker
Bree Van Zyl
Sam Reynolds
Aida Staskeviciute
Laura Reddington
Dipak Hemraj
Jess Collett
Gemma MacNaught
Laila Khan
Gary Buchan
James Hackney
Stuart Lawrence

Jon Buchan Chief Executive Officer jon@renderpositive.com
07949 283 785
Hannah Brown Creative Yet Technical Manager hannah@renderpositive.com
07453 779 030
Jenny Longmuir Content Marketing Editor jenny@renderpositive.com
Tess Bowles Social Media & Content Marketing Manager tess@renderpositive.com
Lee Buchan SEO and Social Media Executive lee@renderpositive.com
Asher Baker SEO & PPC Manager (and Lord) asher@renderpositive.com
07525 744 178
Bree Van Zyl Video Productionista briarley.vanzyl@renderpositive.com
Sam Reynolds Copywriter sam@renderpositive.com
Aida Staskeviciute Graphic Designer aida@renderpositive.com
Laura Reddington Copywriter laura.reddington@renderpositive.com
Dipak Hemraj All Rounder dipak@renderpositive.com
Jess Collett Copywriter jess@renderpositive.com
Gemma MacNaught Head of UX and Conversion Rate Optimisation gemma@renderpositive.com
Laila Khan Head of PR laila@renderpositive.com
Gary Buchan Managing Director gary@renderpositive.com
07525 839 157
James Hackney Client Services Manager james@renderpositive.com
07725 209 820
Stuart Lawrence Chief Technical Officer stuart@renderpositive.com
07725 209 819



Stalk us on social…