Sketches

Respond Conf 2017

Note: awesome sketch notes above are by Matthew Magain

Last week I had the pleasure of attending Respond Conference, the responsive web design branch of Web Directions. It was my first conference attendance in Sydney since moving here. It was great fun. Are you sad you missed it? Then worry not because I’m sharing some of my notes, which are some key talks and topics from the conference, and some recommended reading.

Unofficial themes

There were a few themes that became clear over the two days.

  • Experiment and push the boundaries in CSS
  • Conversational UI: Less is more
  • Communicate through animation

Opening keynote: New Adventures in Web Design by Vitaly Friedman

Vitaly Friedman, founder of Smashing Mag opened the day with his keynote about new adventures in web design. He showed us that great web design boils down to great story telling through art direction. Good design is about users making connections with what they’re using. Mail Chimp does this very well. They work to an emotional level, which keeps users loyal.

Push boundaries

We have a lot of rules in design. Thou shalt not build carousels, no important content below the fold, use the hamburger icon. Let’s break the rules! We need to reinvent our designs to make an impact on users. We should push the boundaries.

For example:

Story Trail — They’ve chosen feature (a line) and used it throughout the site. This is really nice.

Projections — Some nice animations here.

Bloomberg Business week Design 2016 – Tonnes of animation (a little crazy) and definitely breaks a few rules. But the conference sold out in 6 minutes!

After shock event — A bit excessive, but it’s a conference site, so why not experiment I guess.

Folks hotel — Some nice ideas. The booking advert could get annoying when trying to use the site, but it’s not too in-your-face and can be closed.

Hans Brinker Hostel Amsterdam is an amusing example of telling a story and pushing boundaries. It’s the worst hotel in Amsterdam, so they reflect this in their website design. At least you know what you’re signing up for!

CSS selectors

We now have CSS Grid and a whole bunch of CSS selectors to enable us to be more experimental with layout. For example, Quantity queries! Quantity queries and mod queries are a fantastic method of targeting content based on it’s position within a grid. For example a 3x3 grid containing 2,5,8,11,etc (3n-1) items will always have an empty space at the end, so the grid looks unbalanced. Using quantity queries you can target specific items in a grid, but only when the total number of items is (3n-1). So you can change their styles to make the grid look balanced. For example:

li:nth-last-child(3n-1):first-child,
li:nth-last-child(3n-1):first-child + li
{
  width: 50%;
}

I’ve written about this too and I think it’s pretty powerful. There’s a much better read which I highly recommend: Using CSS Mod Queries with Range Selectors where Patrick Clancey uses complex quantity queries and mod queries to organise content in a more interesting way on a news website. CSS selectors such as :not allows us to target elements based on which attributes they don’t have rather than what they do. This helps us avoid long, specific rules to override other ones. For example:

li:not(:last-child) {
   border-right: 1px solid #000;
}

Hover

Here’s something to think about: In the past, to handle hover-based interactions, we’ve relied on Javascript workarounds to detect hover or tap. With CSS4 Media queries, we can detect if hover is available. This with feature queries (@supports) lets us add styles based on the user’s device. 

Check this out: New side project: highlights minisite, and checking for interaction feature support

Battery API

Moving on, Vitaly introduced Battery Status API, which provides data about the user’s battery charge levels. So, if you’ve designed a rich visual experience, which makes the site/app hardly usable on low battery, this will be your friend. Perhaps you’ll want to load it without animation and video if the user’s battery is low. Maybe you want a 'night mode’ for low battery && not charging. You can be nice and use it to improve UX or you could try to make more money from customers: Uber: Users Are More Likely To Pay Surge Pricing If Their Phone Battery Is Low .

Progressive Web Apps

Progressive web apps are the future. Being in app stores isn’t enough anymore. A lot of people no longer install mobile apps because they run out of space on their phones while they are creating and storing their own content like photos and videos. Apparently the Washington Post saw a 5x increase in user engagement when they launched a PWA. This comes with it’s own questions like: Do you switch design languages for different platforms or should they look the same iOS and Android?

Service workers

A huge feature of progressive web apps is service workers; a great progression for performance. Service workers behave as a proxy. A common offline strategy is this: explicitly cache static resources, cache the homepage in case the network fails, and then provide a fallback offline page for the other pages. There’s an epic article by Vitaly with many more words on this: Front-End Performance Checklist 2017. It’s definitely time to think about an offline strategy.

Accessibility highlights

There were two great talks on accessibility and I’ve taken the two key points from both. Adem Cifcioglu talked about creating an accessible auto suggest input field. Auto suggest is present everywhere, particularly in address entry and search forms. Lots of frameworks include it (bootstrap, react, angular), but lots of them only do half the job. Here’s what you should remember when creating an auto-suggest:

  • Make sure you can access it with a keyboard
  • The focus state must be visible
  • The list of options must be navigable with up and down keys
  • The enter button should select
  • Escape key will close the menu but leave the content typed into the search
  • Suggestions must be coded directly underneath the input field

Use Aria roles in the HTML:

  • role=“listbox” on the list of options
  • role=“option” on the individual options
  • aria-selected=”true” or “false” on options

For more detail, here’s an example in codepen: Anatomy of an accessible auto suggest

In Cordelia’s ‘Great Accessibility bake-off’, she reminded us to associate errors with their respective form inputs by using the aria-describedby role like this:

<input type="email" aria-describedby="email-error">
<span id="email-error">Email error</span>

I’ve always liked this handy list of ARIA examples: Practical ARIA Examples, but as Cordelia reminded us, we shouldn’t use ARIA unless we have to. Semantic HTML should always be the first option. “ARIA is like cinnamon, you wouldn't eat a spoon full on its own, so only use ARIA when you have to”. I loved Cordelia’s Bake Off theme! 

Here’s something relevant to my work at the moment: the drag and drop interaction. It’s very difficult to achieve an accessible drag and drop. Cordelia worked on Salesforce’s Kanban board and she implemented a second alternative to using a mouse to drag and drop cards between boards. For accessibility, they have added a button which when clicked reveals a list of the boards on the page. Then users can move up and down the list and move the card to their board of choice without having to use a mouse. I’m interested in exploring this more if we haven’t already. 

Useful link: How and where to report accessibility bugs: http://whoseline.a11yideas.com/bugs.html

Design Systems & Dreams by Rebecca Hendry

Rebecca Hendry talked about getting Westpac’s GEL (Global Experience Language) started. Initially Westpac had one brand and one website until they ended up with 6 brands with their own identities, which made their challenge an interesting one. The movement to a design system was initially inspired by BBC’s GEL—they even stole the name! Hiring a brand director also drove it forward. They had all the skills they needed apart from a front-end developer, but they decided to get started anyway. They used Bootstrap (eek) for the front-end to get going, which hit some challenges later on.

What didn’t work for them?

  • Don't co-create, co-iterate. Get something built and iterate as people use it.
  • Asking people to change the way they work later on. They had some appetite but a lot of resistance, so Rebecca recommends trying to engage people as soon as possible on a project like this.

What did work for them?

  • Getting their hands dirty: they applied their ideas to real things.
  • They knew who they needed to add to the team.
  • Just start! They had a passion and went with their gut feeling. There wasn’t really a perfect starting point.

Once they were going they had to sell the idea to stakeholders. It took some selling. Initially they asked: “Where’s the roadmap?” “Is it urgent?” Some people thought that GEL would impose a limitation on creativity.

Once they got moving again they hired a front-end developer who started building their own framework to replace Bootstrap. Atomic Design was a great anchor point because it gave them an industry framework to refer to.

Round 2 of the big sell to stakeholders: They were working towards a living design system (and shared toolkit), collaborative work practices to design and build a quality UI, and gain sponsorship/ buy-in at all levels. They were successful. Design quality was promoted to a key area within Design.

The Blender was born, which is a front-end framework. They also created starter kits for both devs and designers. Take a look: https://gel.westpacgroup.com.au/GUI/WBC/

They have a good balance of optimists and pessimists in their team. Rebecca says that you need both. Some days this work can be extremely hard and you have to keep faith. Their favourite saying is: “don’t let the dream die. You got this!"

Recommended reading for scaling a design system: Team Models for Scaling a Design System – Nathan Curtis.

Advanced fluid typography by Mike Riethmuller

Mike offers an alternative approach to responsive design. He invited us to think beyond media queries… and instead look at calc and viewport units. For a while our thinking has been based on pixels. Media queries and ems are based on pixels. But what if this is a limitation we have created? Is it just a perceived limitation? Just like cats always sit in circles, are we drawing our own circles?

So let’s break the paradigm of pixels and look at unit types in CSS. There are 27 different unit types in CSS and we use about 2 or 3 or them.

Browsers break CSS down in three steps:

  • Specified value — specified by author
  • Computed value —the specified value resolved as much as possible without rendering
  • Used value —the rendered value

A quick recap on calc:

  • You can add and subtract units with a similar type (eg. calc(10px + 2rem) = 42px)
  • You can multiply and divide real numbers with CSS units (eg. calc(3 * 2rem))

Now viewport units:

  • vw: viewport width
  • vh: viewport height
  • vmin: the smaller value of the viewport’s width and height
  • vmax: the larger value of the viewport’s width and height

Using viewport-relative units alone can result in some drawbacks. Text can get far too large or small depending on browser widths. They require additional effort. But no need to worry because you can set a minimum font size with calc calc(18px + 3vw) and a max size using a breakpoint font-size / (viewport units / 100).

You can disable fluid typography in selected places by simply applying a fixed font size to a class or other selector. Of course, you can always make things easier by using a mixin in SCSS.

Next we looked at fluid modular scales (Modularscale) so that our text scales fluidly with screen sizes.

There is a lot to understand here and it wasn’t possible to write it all, so I highly recommend reading Mike’s article with all the details: Truly Fluid Typography With vh And vw Units – Smashing Magazine. This is really interesting stuff—I’m eager to get it working on my own site soon.

Fun fact: this doesn’t just work on typography… If you want, you can scale images and layout, and even change colours based on viewport.

Checkout the codepen examples here: Mike on CodePen

Some final thoughts from Mike: It’s easy to think about new technologies in the way we use old technologies. Break away from our perceived limitations and question constraints. Look for new opportunities, experiments and techniques. Think about what you want to achieve and how available technology can help you get there.

Adventures In Conversational Commerce by Elizabeth Allen from Shopify

Brands engage with their customers on social media. What a time to be alive!

There was a time when you had to physically go into a store to purchase things. You’d have to speak to sales staff who represented the brand. Talking to brands isn’t new. It’s natural. It’s something we took away and we’re trying to give back.

Elizabeth works at Shopify where they use many chat bots. Elizabeth talked about two of them:

  • Kit: handles Shopfiy merchant interactions.
  • Messenger Bot: helps merchants sell and communicate with their customers. Sometimes real humans from the merchant jump onto the chat if they are free.

Some tips for making a bot:

  • Understand your users
  • Understand the medium
  • Simplify interactions
  • Be thoughtful about
  • Solve problems, don’t create new ones

Shopify know their users

Merchants are busy and lonely. They are not always particularly tech-savvy. Their struggle is marketing. Customers shop online but they don’t know Shopify. They may be wary of bots; they might think they are not as efficient as humans. They might prefer to speak to humans.

The medium for Shopify’s bot

Their medium is a messenger, so it should be conversational. When people reply to a message it’s often because it feels human to them. Often people don’t reply to automated email bots because it’s clear that a human didn’t send it. When customers open up in Messenger, it’s important to gain and understanding from what they share to the emojis they use. Make sure a bot knows how to handle “Thanks” from a customer. E.g. “Happy to help”.

Being thoughtful about personality

You need to create personality and culture for bots. Keep it gender neutral if appropriate. Users tend to project their own ideas onto the bot anyway. Interesting fact: Despite the gender-neutral name, most female customers think Kit is male and most male customers think Kit is female.

Solve problems, don’t create new ones

Remember to respect the user’s time and context. It comes down to knowing your users. Merchants are busy. They have options to customise the bot’s message, but most haven’t even tried. Merchants often feel like it’s too creepy to jump in and take over a bot chat because it looks like they’ve been watching the conversation.

Think about delivery and tone, pauses and intonation. It should feel natural. Don’t let the bot reply too fast. This can make users feel like they need to respond quicker and it can add pressure to continue.

Don’t make the customer say no too many times. If the customer says no a few times, Kit asks why and sends the feedback to the team.

Incase you haven’t Shopify’s beautiful new design system, here it is: Shopify Polaris.

The closing talk: Styling Hilary by Mina Markham

I was looking forward to this talk. It turned out to be quite an emotional story. Huge respect to Mina for all her hard work and for handling everything that came her way. Her journey was incredible.

The project brief:

We need a Bootstrap and it needs a good name.

Ok!

It all began when Mina received an email from Hilary’s tech team. She quit her job with IBM, packed her things and moved to a new city for the new job.

Naming things is hard! Hilary Clinton’s UI Pattern Library was eventually named Pantsuit. Everyone loved the name. Working on pantsuit was like an 18 month hackathon.

They built the following:

  • Pattern library – a library of UI patterns
  • Framework – frontend code of the patterns
  • Style guide – how to put patterns together
  • Design system — all of the above

Mina was the entire team! Aside from stakeholders, she managed the delivery of Pantsuit herself. She was lucky that there was buy-in from everyone straight away.

Time was short so it quick became clear that “done is better than perfect”. Incredibly, Mina build Pantsuit version 1.0 in just 6 weeks.

Mina talked about technical debt. Technical debt is your friend! In this situation, if you don’t have technical debt, then you’re probably not moving fast enough! There was no need for maintainability in this project. At the end of the campaign the code would go away. Mina quickly had to learn to let it go and focus on stability.

Mina started the project with a UI audit. Then she cut up print outs of the interface, organised them into groups of elements that were turned into abstracted UI kits. Then there was a lot of sessions for designing in the browser.

The next part was testing and iterating. Mina created a page called ‘The Closet’ which listed one of every single element to see how they looked when they were out of context. They also tested each component within their expected contexts. They used WAVE for accessibility testing and tested keyboard accessibility.

While she managed the front-end herself, Mina wasn’t really alone on the project; she collaborated with people, particularly as more people wanted input. It brought people together to the ‘Pantsuit Council’ with Mina overseeing it.

Not forgetting documentation. This included the ways to consume Pantsuit: either manual download, NPM, or CDN. The docs also include how to contribute to the code, starter kits to design and build for it. It became the go-to source for everyone working on the apps.

Mina used a Slackbot to tell people when a new version of Pantsuit was released. Automation was her friend.

Then she shared her emotional and personal story. What goes with this job is people talking about you. She talked about the hateful attention on the internet. She joked that Reddit is a wasteland, Twitter is a wasteland and all of the internet is basically a wasteland.

Pantsuit couldn’t be open sourced because there were attack ads trying to copy the style of Pantsuit. They had to deal with a lot of abuse online.

However, Mina also had the time of her life. She received fantastic feedback from Hilary herself. She met some incredible people. She met former presidents. She felt loved, trusted and respected during her time on the campaign. What a journey!

Read more here: Pantsuit: The Hillary Clinton UI pattern library – Git out the vote – Medium

That's all from me

...but there were many great talks at this conference. The ticket price was totally worth it. Two days of quality talks, breakfast, lunch, drinks on the first evening and a constant supply of coffee. I met lots of lovely people too.

Kudos to the sketch note artist, Matthew Magain, who produced awesome sketch notes on the fly.

This was the last Respond event, but Web Directions are also presenting Summit and Code this year. If this was anything to go by, I’m sure they will also be excellent.