Web Directions Respond 2017

Two days filled with inspiring talks, humble people and fantastic food.

This year’s Respond — like the previous — toured east coast Australia, visiting Sydney, Melbourne, and Brisbane over the course of two weeks. I was fortunate to attend Sydney’s event and have one of the best conference experiences to date.

The event was held at the National Maritime Museum’s Conference Centre, overlooking sunny Darling Harbour and attended by a little over 300 people. The speaker’s panel was diverse and covered a broad range of topics from philosophy to practice. All of this was captured in visual notes by the talented Matthew Magain from Sketch Videos.

Since the conference didn’t have a set theme, it was great to see some topics emerging throughout the talks — most notably — accessibility, experimentation, conversational interfaces, and animations. I will be covering my favourite ones, in particular.

Day one was kicked off by Mr. Smashing Magazine—Vitaly Friedman. His New Adventures in Responsive Web Design was an exploration journey through storytelling, flexible design systems, new Web platform features, and progressive web apps.

On the web today, it all boils down to one single thing: outstanding storytelling through great art direction.

We associate storytelling often with books and fairy tales, but Vitaly approached it from an application’s interface perspective. While Uber has a great one, it doesn’t make the user feel being part of the story and neither committed to the brand. MailChimp, on the contrary, has built a strong emotional connection with their users, who would need a lot of convincing to leave for a competitor.

The topic on flexible design systems explained the challenges of scaling and offered an example based on BBC’s GEL, or Global Experience Language. BBC products work across vast number of languages (even alphabets) with ranging characteristics. To counter the limitations, they’ve created ‘neutral’ configurable components, which allow to output contextual styles based on language direction and other language-specific metrics.

Introduction to new Web platform features paid homage to Heydon Pickering’s ingenious Quantity Queries for CSS, among upcoming CSS features for reliably detecting user’s primary input method, and querying the battery status of a device to offer optimal experience.

Vitaly concluded his talk with Progressive Web Apps and their triumph over native counterparts. PWAs are web-based applications that run in the browser and can be accessed by an URL just like any other web page. They can be brought up to par with many modern Web platform features that are common to native apps—such as offline availability, push notifications and ‘add to homescreen’ to name a few.

Don’t be afraid to get into this—go out and break the Web, so we can repair it in a few weeks!

As an accessibility advocate, it was great to see nearly all talks touching on the subject. Adem Cifcioglu went in great detail dissecting an autocomplete widget and making it accessible with progressive enhancement and ARIA attributes.

He presented examples of both bad and good implementations, illustrating the differences and consequences for people dependent on assistive technologies.

Mike Riethmuller invented his fluid typography technique back in April 2015. It was one of the times my mind was completely blown, as he had solved responsive typography for me and probably for the world. Shortly after, he was presenting at SydCSS First Time Speakers night, where I had the opportunity to meet him and share my astonishment for what he had created.

The technique uses CSS viewport units and calc() function to make two values fluidly transition within a specified range. Depending on your approach, it can be a great alternative to media queries.

Pixel units are most commonly used in CSS, despite being quite limiting. Responsive design thrives on relative units, which can do a lot of legwork for us and reach beyond our beloved static pixel.

Mike made a great metaphor about limitations shaping our thinking, and how we perceive limitations that aren’t really there. He drew a parallel with cats, who would go and sit in a circle marked on the floor, rather than outside of it. This implies, how fluid typography came about sitting outside the circle.

Mandy Michael reminded me how fun it is to experiment. She presented a collection of interesting text effects done with good old CSS in really creative ways. What makes it even more impressive is that most text in her examples is editable and accessible.

If you’re going to make blueberry muffins, the blueberries have to be baked in — not added on. While trying to cram fresh blueberries into an already baked muffin does technically make it a blueberry muffin, you end up with a mess nobody wants to eat. This metaphor by Cordelia McGee-Tubb opened the second day of Respond17 and led in to The Great Accessibility Bake Off.

Accessibility is about inclusiveness — include as many people as possible to be able to use your product. Everyone’s experience should be considered upfront. By designing for someone with a permanent disability, someone with a situational limitation can also benefit. For example, working behind a screen all day could weaken your eyesight comparable to someone with a permanent visual impairment.

One of the key takeaways from her talk was the accessibility checklist, reminding you to test everything with

  • a mouse
  • a keyboard
  • screen readers: NVDA+Firefox, JAWS+Internet Explorer/Edge, VoiceOver+Safari
  • grayscale mode
  • real users

Try to find out if your accessibility efforts are working for the users, especially ones depending of assistive technologies.

The next talk was one of my favourites from the conference. Wayne Thompson told how he came about designing Australia’s national font—the ABC Sans. The story was incredibly enticing and shared a lot of insights of what goes into making a modern typeface.

You’ve just got to be a really stubborn bastard and do what you want to do.

Turns out there are no formal opportunities to learn type design in Australia. There are courses for typography, but designing a typeface would be a self-taught skill. This has been Wayne’s case, as he revealed the extremely laborious tasks associated with type design, where only a little could be automated. There are tools, but the level of automation is nowhere near to what we’re used to accept in, say, web development.

Source: Australian Type Foundry (http://www.atf.com.au/work/abc-typeface/)

The brief from ABC (Australian Broadcasting Corporation) was extensive and had some key requirements, out of which one was to capture Australia’s ‘essence’ and align it with the ABC brand. After an unsuccessful trip to Facebook to gather some initial ideas, Wayne settled on three main characteristics for the font-to-be: open space, proudly inclusive and the larrikin element.

Source: Australian Type Foundry (http://www.atf.com.au/work/abc-typeface/)

The result was an amazingly comprehensive font family, optimised for both print and screen-based media.

Warwick Cox—a lively bloke as he is—told an entertaining success story about his company Crowd Delivery. He had started off with a conventional shopping app, but was struggling to get traction.

He began to approach customers for feedback—going door to door, sitting next to random people and asking them about his app—until he realised the user interface and aesthetics to be a major bottleneck. Where he had offered extensive lists to choose groceries from, the users wanted to type in a free-form shopping list instead.

Scrapping everything and focussing on that core functionality made the company an immediate success—for example, the users were now able to order “two avocados: one firm, one ripe” and “those weird red German biscuits” from Aldi.

The conference’s trump ace (no pun intended) was undoubtedly Mina Markham’s powerful and emotional talk. She is the author of Pantsuit — a design system created for Hillary Clinton’s 2016 presidential campaign.

Over the 18-month period leading to the elections, Mina’s team had grown to 80 people. They built an incredible design system, consisting of a pattern library, framework, and style guide.

As the project progressed, it became obvious that done is better than perfect. You have to accept technical debt in order to get things out the door quickly. In Pantsuit’s case, there was no requirement for maintainability since the code was going to be retired after the campaign. The team focused on delivering stability instead.

Working for Hillary brought also lots of attention with it, and not always the best kind. Mina started receiving negative comments on social media, which eventually transitioned to personal threats. Fortunately, it didn’t lead to anything serious.

Pantsuit was intentionally kept closed-source to avoid the opposition to generate vote-suppressing content. Despite this effort, some fake materials with deceptive messages still emerged, imitating Pantsuit’s visual style.

After the elections were over with the result people hadn’t hoped for, Mina received incredible feedback from her team, saying Pantsuit enabled them to build products quickly and efficiently. But it was especially nice to get positive feedback from Hillary herself. She felt loved, trusted and respected working on the campaign.

This concluded Respond17—fourth and last in its series, as announced by John Allsop. This only means Web Directions is working forward to something new and exciting to bring us.