WD Respond 2016: six key takeaways from two keynote speakers.

After being held in Sydney for the previous two years, Web Directions Respond came to Melbourne on April 11 and 12 for two days of talks geared towards design and web-usability.

As with other Web Directions events I’ve attended in the past, the first thing to note is that the catering was awesome! It was hard to resist the vast smorgasbord of snacks and limitless supply of excellent coffee. No need to stress about the decadent two-day diet though, it’s all fine – according to event organiser, John Allsopp, ‘conference calories don’t count’.

Wishful thinking, maybe. But with the amount of general thinking that was going on — and a variety of speakers introducing some fascinating ideas — every brain in attendance needed all the ongoing nourishment available.

Here are six  key takeaways from my two favourite speakers at Web Directions Respond 2016: Ethan Marcotte and Jen Simmons. Or, the thoughts that have kept me thinking in the wake of the event.

Ethan Marcotte.

Hailing from Boston, Massachusetts, Ethan Marcotte is the man behind the term ‘responsive web design’. He kicked off the conference with a really interesting presentation – elaborating on the reasons why we should be lazy in responsive web design.

Take away #1: Let’s get lazy in design.

Ethan suggested it’s all about finding ways to be lazier in responsive web design. Or, to put it another way, looking for simpler approaches when developing interfaces. If we can use resources to make the development process easier for website elements that aren’t too complicated in the first place—like layouts, for example—we can siphon away time that could be better used in honing more impactful site features.

Lazy people often find the most efficient way of achieving maximum output for minimal effort. Bill Gates even famously quipped:

‘I will always choose a lazy person to do a difficult job, because they will find an easy way to do it.’

So, let’s get lazy!

Take away #2: Work hard to make things better.

Kind of contradictory when set against that first take away, but still a valid point nonetheless. Ethan’s second major piece of advice? Don’t avoid the hard stuff: work to improve everyone’s experience of the web.

As an example, he spoke about the fact there are more and more devices being released. It’s no longer practical or viable to simply classify them as ‘mobile’ or ‘tablet’. Developing for these specific devices is not a forward-thinking or future-proof approach.

Frameworks are great for prototyping rapidly and they make things easy, but they’re also device-focused which means they’re restrictive.

Instead, Ethan suggested thinking about content and context. Cater for the characteristics of good design, rather than the established dimensions or breakpoints of pages and columns.

With a steady stream of new devices constantly being developed, and all with different dimensions, a future-proof approach to web design will use breakpoints that fit the content and interface styling, instead of working to predefined grids or stock breakpoints.

With that attitude, we can design for products that don’t actually exist yet. Which is pretty cool when you think about it.

Take away #3: Re-think the ‘messy cupboard’ menu.

This might sound a little strange, but stay with me: the hamburger menu is a messy cupboard.

Think about it – on the surface level, the hamburger menu icon is simple and clear. Just like someone’s cupboards in a nicely designed home kitchen. But once you open up that fly-out menu (or take a poke around the nether realms of anyone’s tupperware cupboard…you know the one) the mirage of pristine order and arrangement can very quickly come undone.

The occasional feeling of opening a hamburger menu.

Because we can conceal what’s inside, people are often tempted to cram things into the hamburger menu with no real rationale or reasoning.

It was a great point to end on because it encapsulates the other aspects of Ethan’s wider presentation.

Be lazy to be more efficient. Cater to your lazy users: no one likes to sift through a thousand containers to find the one tupperware lid they’re looking for, in the same way that no one likes a menu that’s jam-packed with unnecessary items. And the best way to cater to these lazy users? Think and work hard.

There are alternative, better options for navigation. Like this responsive hidden nav system from the BBC, or The Guardian’s scrolling approach to navigation. We just need to put in a bit of effort to discover or develop them.

Jen Simmons.

Jen Simmons is a Designer Advocate at Mozilla. With more than two decades’ worth of front-end development experience, she has worked on a wide variety of projects for CERN, the W3C, Google, Drupal, and more.

Take away #1: Bring art direction to the digital space.

Jen argues that the web is boring. Everyone is making and using the same designs, and the conventions are clear: large header, three columns. The web has become uniform.

Instead of continuously adopting the same approach, we should bring the creativity of print-based art direction to digital. 12% of the web uses bootstrap layouts. It’s like we’re all using the same WordPress theme.

As with traditional principles of art direction, layouts should be thoughtful. They should be based on the site you’re developing and the brand characteristics of the client. Not a process of prefabricated multiple choice.

Take away #2: Features – they work and don’t work at the same time.

Don’t avoid using a particular browser feature just because it’s not supported in all browsers.

Instead, Jen suggests using a progressive enhancement approach when developing. That way, all users will be able to access content irrespective of the device they’re using and the quality of connection they have.

‘Add extra features for those who might be able to use them.’

A handy technique is to use @supports to detect if browsers support a feature. Browsers that don’t support feature queries will skip the query.

Take away #3: Features 2.0 – coming to a browser near you.

Continuing with the theme, another point Jen touched on in regard to features is that there are lots of new ones coming. It is worth learning about them now by playing with different ideas to become familiar with the possibilities.

At a quick snapshot, Jen referenced:

• Initial-letter – drop caps is the print design practice of using a large letter to indicate the start of a block of text. The initial-letter feature allows you to recreate this aesthetic in the browser.
• Clip-path and shape-outside – browsers render elements in boxes. Clip-path and shape-outside features enable you to create custom ‘masks’ for elements so they can achieve different shapes. The shape-outside feature goes one step further by wrapping text around the mask of an element that has shape-outside applied.
• Grid layout – where flexbox is used to lay out elements along a single dimension – either in a row or column – grid layout allows you to lay out elements in both dimensions.

For more examples, resources and experimental layout designs, visit labs.jensimmons.com

***

Didn’t make it to Respond 2016? Keep an eye on Web Directions’ YouTube and Vimeo channels for videos of each of the speakers’ talks from the event, plus great videos from all of the other Web Directions events. Also keep an eye out on our blog for Daniel Banik and Sarah El-Atm’s wrap up of Web Directions’ Transform conference.