BEFORE WE START, A QUestionaire

• How do you currently interact with front end devs?
• How is your relationship with your front-end team?
• What is their role?
• What is one good word and bad word you can use to describe most front-end devs?

how to deal with front end developers

We don't mean to be jerks.*

Zoltan Hawryluk, zoltan.dulac@gmail.com

 

* most of us anyways.

Who am I?

Please wait ... loading

• Netcom Online-Communications
• ICG Netcom
• Providence Group
• MetroNet
• AT&T Canada
• Allstream

• Print designers having to learn web design
• User Experience people (if they existed on your project) were used to dealing with desktop applications, not web pages
• Limited technology available (it was all new) so we had to make stuff up as we went along
• Slow download speeds
• Badly coded web browsers
• Designers blaming developers that they were difficult

• Web Designers not designing for mobile/screen readers
• Accessibility done at the last minute
• Technology changing at a super fast rate (lots of "No, that can't be done")
• Mobile data limitations
• Different interpretations of the spec (e.g. Video autoplay)
• Scope Creep
• Designers blaming developers that we are being difficult

A Modern Web developer at work.

 

https://medium.com/@caspervonb/the-internet-is-at-the-mercy-of-a-handful-of-people-73fac4bc5068

This leaves little time for things that really matter like ...

Tarrare

We don't get credit a lot of the time!

People don't understand us!

Why do you think front-end developers say "NO"?*

*It's not because they are grumpy (well ... most of the time)

how can we all just get along?

• Bring us in early in your process
• Show us designs and wires early
• Listen to our feedback/concerns
• Do the "not fun" things early: e.g. copy, analytics, SEO, accessibility, ...

What does it mean when we say no

• We're not just saying it to be jerks*
• Ask the developer "What else can we do?"
• Don't ask for just one option.
• Tell the developer what kind of story you are trying to tell the user
• They may come up with an idea as good as yours (or at least, the start of one)
• We can be creative (some more than others)

* At least most of us.  I'm going to be the ones who are being jerks are that way because they are worried.

responses

"You just don't want to do it."

 

or

 

"You just don't want to make this way because it's too hard for you to do."

"We don't have to worry about blind people on an automotive site"

"What do you mean? We have alt attributes on our images!"

"It's too expensive!"

 

and

 

"The client doesn't care!"

WHAT DOES IT MEAN TO BE ACCESSIBLE?

• These flashes were bright strobe lights, with blinks at a rate of about 12 Hz for approximately six seconds.
• Viewers started to complain of blurred vision, headaches, dizziness and nausea.
• Some experienced seizures, blindness, convulsions and loss of consciousness.
• 685 viewers – 310 boys and 375 girls – were taken to hospitals by ambulances.
• Only a small fraction of the 685 children treated were diagnosed with photosensitive epilepsy.
• Later studies showed that 5–10% of the viewers had mild symptoms that did not need hospital treatment.
• 2 people remained hospitalized for more than two weeks
• the Pokémon anime went into a four-month hiatus

cost of an inaccessible website

• Target Corporation settled the class action lawsuit filed by NFB in August 2008 and agreed to pay class damages of $6 million.¹
• The National Federation of the Blind was awarded reasonable attorney's fees and costs of $3,738,864.96.¹
• “[T]he settlement amount is significantly more than what it would have cost Target to implement a high level of accessibility in the first place.”²

¹ https://www.w3.org/WAI/bcase/target-case-study

² http://webaim.org/blog/target-lawsuit-settled/

ontario

The Accessibility for Ontarians with Disabilities Act, 2005 (AODA) became law on June 13, 2005. Under this landmark legislation, the Government of Ontario will develop mandatory accessibility standards that will identify, remove and prevent barriers for people with disabilities including those who are deaf or hard of hearing in key areas of daily living. The standards will apply to private and public sector organizations across Ontario, including post-secondary education facilities.

Source: https://www.chs.ca/accessibility-all-ontarians

"Adding accessibility is hard!"

 

(So don't leave it to last -- start with it!)

 

"We have to change all our designs!"

Using a screen reader (VOICEOVER)

The Basics

Task	Command
Start (or stop) VoiceOver	Command + F5
VoiceOver activation keys (or VO keys)	Control + Option (referenced as VO)
Lock (or unlock) VO keys	VO + ;
Start reading	VO + A
Stop reading	Control
Open rotor (see explanation below)	VO + U
Go to next/previous focusable item (link, button, input, etc.)	Tab / Shift + Tab
Activate Link	Enter
Activate button	Enter or Space Bar
Read next/previous item	VO + Right/Left Arrow
Go to next heading	VO + Command + H
Go to next table	VO + command + T
Navigate table cells	VO + Arrow Keys
Go to previous (heading, table, etc.)	VO + Command + [H, T, etc.]
Interact with (go into/out of) objects (like iframes, menus, application regions, etc.)	VO + Shift + Down/Up Arrows

CASE STudy - Pcoptimum.ca

Performance

"Everyone has high speed Internet!"

"I don't know why people are complaining -- it works great on my iPhone!"

"But this guy on the Internet got it to work fast!"

IMAges don't have to be large

• SVG (can be interactive, animated and do thing you wouldn't expect)
• WEBP (Chrome)
• JPEG 2000 (Safari)
• MozJPEG JPEGs

SVGs are more amazing than you realize!

• Can be compressed (SVGZ)
• Can be used in a Sprite Sheet using <use>
• They render better than icon fonts (which are a total hack) and are multicoloured
• Did I mention they are interactive?

Fonts can be optimized

• Subset fonts
• Insert multilingual glyphs only when necessary
• Remove font-feature-settings that you aren't using (but, for the love of typography, please use the ones that you need)
• If your font looks ugly in Windows, please autohint it.

WINDOWS

• Created in 1985
• UI changed around 5 times in it's 33 year history
• Their scrollbars work perfectly with both keyboard and mouse!
• Microsoft implemented coloured scrollbars in IE5.5
• Removed custom scrollbars in Edge

MAC OS/OSX

• Released in 1984
• UI changed around three times in it's 34 year history
• Their scrollbars work perfectly with both keyboard and mouse!
• Microsoft implemented coloured scrollbars in IE5.5
• Removed custom scrollbars in Edge

custom jS SCrollbar

• Started probably a few years ago
• Just "some guy" working on it in their spare time.
• Does s/he even have UX experience? Who knows ... but custom scrollbars!
• Are they even keyboard accessible
• Each one has bugs, and they are strange.
• Doesn't take into account OS differences.
• Guaranteed to be accessible? Who cares! They're taupe! Throw caution to the wind!

Case studies

challenges

• 40 Locales, including Chinese (Traditional and Simplified), Japanese and later Arabic.
• HTML Text animating timed precisely to the content below.
• Had to support IE8
• Must support iOS/Android
• Development had to be completed in 30 days.
• 90 hour weeks.
• Assets?  What assets?
• Had to transfer a lot of high resolution video to Brightcove