A Web Directions event Respond 2017 Australia's Front End Design Conference

SydneyMay 4 & 5

MelbourneMay 8 & 9

BrisbaneWorkshop May 11

Australia's Front End Design Conference, takes place in Sydney and Melbourne.

Day 1

  • Sydney: May 4th
  • Melbourne: May 9th
8:00 am

Registration

,

Serving barista coffee to get your heart started

9:00 am

Welcome

John Allsopp, Web Directions

9:15 am

New Adventures in Responsive Web Design

Vitaly Friedman, Founder

With HTTP/2, Service Workers, Responsive Images, Flexbox, SVG and Font Loading APIs now available in browsers, we all are still trying to figure out just the right strategy for designing and building responsive websites just in time. We want to use all of these technologies, but how can we use them efficiently, and how do we achieve it within a reasonable amount of time?

In this talk, Vitaly Friedman, editor-in-chief of Smashing Magazine, will be looking into a strategy for crafting fast, resilient and flexible responsive design systems by utilising all of those wonderful shiny web technologies we have available today.

He'll also talk about dealing with legacy browsers and will cover a few dirty little techniques that might ensure that your responsive websites stay relevant, flexible and accessible in years to come.

10:15 am

Morning Break

,

Fully catered, with great coffee, and the chance to connect with your peers

10:45 am

Design Systems + Dreams – delivering at scale

Rebecca Hendry, Design Capability Principal - CX

Global experience languages, design systems, or whatever you choose to call them are without doubt a hot topic in experience design and front end. For individuals and smaller teams focused on a few large projects or products; design systems not only make a lot of sense, but they’ve been shown to deliver real benefit to the business and cohesive delight to the end user. But what happens at ‘industrial’ scale? When delivering huge numbers of products and services, via multiple platforms, for multiple brands, used by dispersed teams, many of whom aren’t really able to spend their design time contributing to the system for the greater good?

Let's find out.

This year, Westpac celebrates its 200th year in business. More than just the iconic Westpac brand, the Group represents St George, Bank of Melbourne, Bank SA, Rams and BT Financial Group - all strongly differentiated in the market. When multibrand became a reality, it decided to tackle the creation of its own GEL or Global Experience Language. The passionate intent is that GEL becomes the single source of truth to create world leading experiences for all customers, everywhere, every time.

In this session, Rebecca Hendry, Design Quality Principal for Westpac Digital’s Experience Design & Delivery team, looks in depth at the design system; how it was created, how it evolved, how they pitched it, its value, and most importantly, what they’ve learned. There'll be valuable lessons for those who already love working with design systems, and for those who want to - no matter the scale.

11:40 am

Building a ubiquitous design language with components

Michael Taranto, Principal UI Engineer

UI developers and visual designers, despite working very closely, often speak very different languages without realising it. Most discussions use terms that simply do not align across domains. Whether it is CSS's misuse of terms like line-height and baseline or HTML5's semantics not aligning, these deviations result in confusion and less maintainable code.

The world of components give us the opportunity to create abstractions that directly model the designer team's intent. The drive to establish a ubiquitous design language has improved the quality of conversation and the consistency of the dev team's output — innovating on solutions to things like vertical rhythm on the web. If you care about building large scale well-designed apps quickly while still focusing on maintainability, accessibility and composition, this one is for you.

12:05 pm

The Anatomy of an Accessible Auto-suggest

Adem Cifcioglu, Director of Accessible Technologies

Google first launched auto-suggest (aka Google Suggest) as a Google Labs project in 2004 saying it "... provides you with search suggestions, in real time, while you type".

Since then, it's become commonplace on the web and is used pretty much everywhere from social media sites like Twitter and Facebook, to shopping sites like eBay and Amazon, and even in occupation validation for credit card applications.

With auto-suggest plugins available for all the latest frameworks and libraries, implementation couldn't be simpler.

But what about accessibility?

This talk will look at what makes an accessible auto-suggest. You'll see examples that don’t work, and examples that do.

You'll go through:

  • Required ARIA roles, states and properties
  • Keyboard access
  • Marking up the input field
  • Announcing the suggestions
  • Navigating to the suggestions list
  • Making a selection
  • Closing the suggestions list

You'll leave with an understanding of how to make auto-suggest accessible - and some code to help you do it.

12:30 pm

Lunch

,

Like everything else we do, expect the best conference food you'll have anywhere, and plenty of it.

1:30 pm

Responsive, progressive fluid typography

Mike Riethmuller, Web Developer

Type that responds to the user's screen size, orientation and resolution is a holy grail of responsive design.

In this presentation, Mike Riethmuller will provide a general overview of unit types and values in CSS, with a specific focus on how viewport units and calc() expressions work. Armed with this understanding, we're going to learn how to create a function with CSS that uses viewport units as a variable. Milke will then demonstrate some practical uses for this technique including:

  • min and max font sizes,
  • fluid typography,
  • fluid modular scale headings, and more

Finally, let's discuss the future of fluid design and through variable typography our relationship with media queries.

And we'll see how each of the typography techniques can be used today and applied with progressive enhancement!

2:25 pm

Sharpen up your text with The Power of Three

Mandy Michael, Lead Front End Developer

In a world where JS and SVG are taking over, it’s easy to forget the power of CSS. Luckily there are three powerful CSS items, each with a specific use, whose strengths are enhanced when used together. Their destiny is to give you the freedom to let your creativity shine.

Clip path, data-attributes, and pseudo-elements provide us the opportunity to get creative with standard web text. No tricks here, just straight up CSS and HTML!

We’ll explore some ways in which we can use clip path, data-attributes, and pseudo-elements to create more beautiful websites. Focused around interesting text effects, you’ll also see some creative layouts and animations. There is a lot you can accomplish with a little creativity, and the Power of Three.

2:50 pm

Creative (yet still useful) SVG animation

Brett Snaidero, Interactive Designer

Animated effects for the web add a world of difference and delight. Using CSS properties to style SVG makes it fun, simple and easy to engage your audience. So come and join Brett as he lifts the lid on some fantastic web conjuring tricks with SVG. He will show how CSS can be used to style and animate SVG, giving designers an easy way to introduce animation into their websites.

Join in the fun as Brett demonstrates how simple CSS animations can be applied to add style and substance to a page, without having to deal with complicated Javascript animation libraries. Nurture your creative spirit and learn new ways to play your way to design heaven on the web.

3:15 pm

Afternoon Break

,

Need more coffee? We've got you covered, plus a sweet afternoon pick-me-up

3:45 pm

The Web In Motion

Rachel Nabors, Animator, author, W3 invited expert

Animation stands as a key differentiator between native and web-based experiences. As the lines begin to blur between “native” and “web" apps, animation is becoming more and more important to building a web that can meet user expectations. Many roadblocks have stood in the way of an animated web, but we are overcoming them one by one, and a host of new tools are now at our disposal.

In this talk, Rachel Nabors looks at how animation helps people interact with touch screens, how those same principles apply to the web, and where animation has been all this time.

5:00 pm

Happy hour (and a half)

,

Stay and share a drink, a bite, and a chat with your peers, right here at the venue

7:00 pm

Speaker Dinner

,

Gold ticket holders join the speakers for fine food and conversation 5 minutes walk away.

Day 2

  • Sydney: May 5th
  • Melbourne: May 9th
9:00 am

Welcome

John Allsopp, Web Directions

9:15 am

The Great Accessibility Bake Off

Cordelia McGee-Tubb, Accessibility Specialist

It’s always better to bake in accessibility from the very beginning of your project than tack it on after the fact. Making accessibility decisions up front in your web app can save your users a lot of frustration and save you a lot of development time. But how do you know what to bake in, how to mix it all together, and whether you’re doing it right?

In this talk we’ll look at the key ingredients of web accessibility — including semantic HTML, mindful color palettes, keyboard interactivity, and a dash of ARIA — and discuss some tried-and-true recipes for accessible web development. We’ll also knead through technically challenging accessibility feats like complex interactive widgets and drag-and-drop to achieve more inclusive interaction patterns. With these techniques in your back pocket, making an accessible website will be a piece of cake.

10:15 am

Morning Break

,

Fully catered, with great coffee, and the chance to connect with your peers

10:45 am

Designing OneABC, a typeface for Australia

Wayne Thompson, Type Designer

How do you design your country’s national font? Wayne was asked to do this by the ABC, Australia’s most trusted media brand. They set out to create a font family that unifies the ABC's digital presence across multiple platforms, while also being best-in-class for legibility and accessibility.

It’s designed to replace the thousands of font configurations in use across the ABC, allow for a proud, uniquely Australian typographical expression, and align with their charter to deliver content that contributes to our national identity. Wayne’s here to tell you about the project which consumed him for over a year.

11:40 am

Designing for Growth

Mike Sharp, Design Engineer

First up, this talk will introduce you to the (Mike's) “Five Fs” of design. We’ll then dive a little deeper into the fourth F - Designing with Facts. A huge benefit of modern web applications is the wealth of data they can provide to designers.

We’ll look at what sort of information is available and how using it can help shape the products we build.

Graph paper is optional

12:05 pm

Think aloud user testing - challenging established status quo

Shefik Bey, Co-founder

At Loop11, our team has been discussing the potential influence and impact of the think aloud method of user testing on the natural usage behaviour of participants. Does the method distract or change the way in which users naturally interact? Are we introducing bias into the testing process by making respondents verbalise their inner monologue?

There have been previous research studies that do cite an impact on behaviour, however with the growth of rapid online testing and the availability of quantitative metrics, the relative merits and drawbacks of employing this approach have become even more pertinent.

Our team formed its own hypothesis, that the think aloud method would extend task completion times and influence the depth to which participants explore navigation and content. We were also concerned that the approach would lead to a skew towards more vocal (possibly extroverted) attitudinal behavioural types and under-representation of others.

To put the approach to the test, our team designed a comparative testing scenario to pit think aloud testing against testing carried out without the need to verbalise thoughts.

When running the same set of tasks and questions, on the same website, but using two different usability testing tools, one prioritising think aloud, we recorded significant difference in the testing results - though not exactly in ways we had expected!

Surprisingly, for the most part we found no real discernible difference in time on task. However, an interesting result from the three studies was that the greater the level of anonymity, the lower the NPS but the higher the SUS. Does this mean that if a user knows they are being recorded, and their responses will be rated, then they are more likely to award a higher NPS score? Within this limited sample, it would appear so.

How test participants are sourced also impacts results. Providing incentives for performing tasks in a certain manner (very articulate and deliberate) leads to further skewing of results. Rating of participants perpetuates this phenomenon. Participants should be incentivised for completing the study in a natural manner, not what pleases the viewing experience.

12:30 pm

Lunch

,

Like everything else we do, expect the best conference food you'll have anywhere, and plenty of it.

1:30 pm

Adventures in Conversational Commerce

Elizabeth Allen, UX Researcher

At Shopify, one service provides to entrepreneurs who run their businesses on the platform is access to messaging bots that behave like “virtual employees” – they autonomously handle customer service interactions, online marketing campaigns, and even make sales.

These bots help overwhelmed entrepreneurs stay on top of their businesses without spending the time and money required to hire additional human staff.

In this talk, Elizabeth discusses the extensive UX research and design work that goes into creating bots that are “game-changing” employees to busy entrepreneurs, and shares lessons learned along the way about facilitating communication between businesses and their customers.

2:20 pm

The (ancient) art of conversation: Styling beyond the GUI

Laura Summer, UX Engineer

What happens when your ability to persuade *is* your UI?

Looking to antiquity to reframe our vision of the future, this talk uses the 5 Canons of Rhetoric from ancient Greek philosophy as a framework to examine how we will design and build chatbots, hybrid UIs, and hidden UI interactions going forwards.

Invention, Style, Arrangement, Delivery and Memory: these canons were conceived to win hearts, minds, and votes. In digital, our measures of success are engagement, traction and conversion - and when our computing interactions are reduced to simple conversations, our entire arsenal may once again be rhetoric. Let's learn what philosophy can teach us about designing for the future of computing.

2:50 pm

Removing everything and having a crap UI

Warwick Cox, Founder and CEO

When Crowd Delivery, an on demand delivery company, was first launched, it tried to make its interface like every other online shop. But then to test an idea, it basically removed everything.

Within one week Crowd Delivery started to get heaps of traction and has done so ever since.

The secret sauce? Enabling converations between a buyer and the person doing their shopping for them.

3:15 pm

Afternoon Break

,

Need more coffee? We've got you covered, plus a sweet afternoon pick-me-up.

3:45 pm

Styling Hilary: A Design System for all Americans

Mina Markham, Senior UI Engineer

A comprehensive design system is a critical tool for maintaining a consistent UI during rapid development that spans multiple codebases.

During the 2016 US presidential campaign, Mina spent most of her time building and refining Pantsuit, the design system that powered many of the applications hosted on hillaryclinton.com.

In this talk, Mina will share successes and failures from nearly two years at Hillary for America, including creating CSS architecture and implementing a redesign of the main website.

What is Respond?

Australia's Front End design conference, now in Sydney and Melbourne

Now in its fourth year, and curated by John Allsopp, cited by Ethan Marcotte as one of the originators of Responsive design, Respond goes beyond the technology, to address the myriad challenges we face in delivering modern, responsive Web experiences.

Featuring a mix of renowned international and local speakers, Respond is one of the World's leading events for the Web industry.

Register Sydney Register Melbourne

About Us

Co-founded and now run by John Allsopp, Web Directions has for over a decade brought together leading developers, engineers, visual, IxD, UX and product designers, Art and Creative Directors, indeed everyone involved in producing web and digital products to learn from one another, and the World's leading experts across this vast field.

We spend our lives thinking about what comes next, keeping up with trends in technology, practices and processes, and filtering the hype, to make sure you don't miss trends that matter, and don't waste time on hype that doesn't.

We promise attending one of our events will leave you significantly better versed in the challenges you face day to day, and in solutions for addressing them.

In 2016, we'll be organising Respond in Sydney and Melbourne, Transform in Canberra, Code in Sydney and Melbourne, and Direction in Sydney.

vignettes form our events, social, speakers and more. Includes Hannah Donovan skylarking.

John Allsopp

John Allsopp has been working on the Web for over 20 years. He's been responsible for innovative developer tools such as Style Master, X-Ray and many more. He's spoken at numerous conferences around the World and delivered dozens of workshops in that time as well.

His writing includes two books, including Developing With Web Standards and countless articles and tutorials in print and online publications.

His "A Dao of Web Design" published in 2000 is cited by Ethan Marcotte as a key influence in the development of Responsive Web Design, who's rightly acclaimed article in 2010 begins by quoting John in detail, and by Jeremy Keith as "a manifesto for anyone working on the Web".

Code of Conduct

For over a decade, we've worked hard to create inclusive, fun, inspring and safe events for the Web Industry.

As part of our commitment to these values, we've adopted a code of conduct for all involved: ourselves, our speakers, our partners and our audience.

If you have any concern or feedback, please don't hesitate to contact us.