Web Directions Respond ’15 Summary

I had the pleasure of speaking at Web Directions Respond yesterday. It was a great opportunity to listen to designers and developers from both Australia and internationally.

I took notes throughout the day, some of which you will have seen if you follow me on Twitter. The full set are in bullet point form below.

A disclaimer upfront, this is the first conference I’ve spoken at where tickets cost more than $50. Attendees invested a substantial chunk of their PD budget to be there. The quality of my notes waver as a I get various waves of nerves & adrenaline crashes. Chris Wright has published his notes too.

Speakers

Follow the links below for short-cuts to each speakers’ talks

• Scott Jehl
• Nabeelah Ali
• Kris Howard
• Simon Elvery
• Peter Wilson
• Damien Fitzpatrick
• Yesenia Perez-Cruz
• Ben Buchanan
• Felicity Evans
• Andrew Clarke

Scott Jehl, Responsible Responsive Design:

• To respond appropriately involves a lot of foresight.
• We want our sites to respond to more than just screen size. We want to respond to devices’ input devices.
• It’s risky to assume any input device is always present – assume all are present, touch, mouse, etc.
• Code defensively, tolerate faults.
• The hard part of building with progressive enhancement isn’t supporting older browsers, it’s supporting newer browsers
• Not allowing for browsers that don’t cut the mustard it to code without empathy.
• Web designers and developers are the exception, we have access to 4G and the latest and greatest devices.
• Build micro-frameworks to optimise your site, Shoestring is modelled on the jQuery API at a fraction of the size
• Grace Hopper explains a nano-second (embedded below). The speed of light is limiting.
• Traditional references to CSS & JS block rendering, they are like fences across a walking path.
• The first round trip to the server contains 14Kb. Larger pages require multiple trips to the server.
• At the Filament Group, they use a grunt task to calculate the critical path.
• The default way browsers load fonts is kinda terrible.
• Optimising the critical path could reduce a major media company’s site’s perceived load time from 12 to 4 seconds.
• HTTP2 will remove the need for inlining files, separate files will use the same connection.
• Responding responsively is harder… but it’s our job.

https://www.youtube.com/watch?v=JEpsKnWZrJ8

Nabeelah Ali, Simple responsive typography:

• Document length and cultural context influence the selection of typography.
• When selecting a font size, readability is a science, it can be measured in a lab.
• Consider how far a device is typically held away from a users face when selecting a font size.
• 44-75 characters is an acceptable line length, 66 characters is ideal.
• A design can afford to be more generous with ratio of heading to body text on desktop.
• Over the last three years, font file sizes have almost quadrupled.

Kris Howard, Responsive Ads: This is Why We Can’t Have Nice Things:

• Building responsive ads is not the problem.
• Responsive ads will monetise mobile traffic better.
• The big problem for responsive ads: ads are sold in standard dimensions.
• The first online ad appeared on Wired on October 27, 1994, with the birth of the banner ad.
• The click through rate for the first banner ad campaign was 44%, currently 0.1%.
• First ad network was created in 1996.
• In 1996 there were 250 differnt sizes of banner add, in 1996 the IAB created eight standard sizes.
• Changing standard ad units takes education: the sales team, clients, everyone. It can’t happen overnight.
• Without a standard for responsive ads, they are be more expensive to produce.
• Less than 20% of sites are responsive. Advertisers don’t want ads on mobile if their sites don’t work.
• The ‘mid box’ standard is most suited for use on all screen sizes. Not ideal.
• Publishers are taking an approach of rolling their own responsive ads. Mi9 found it multiplied cost four-fold.
• The standard display ad units are not going away any time soon.

Simon Elvery, Navigating the new map of responsive imagery:

• Responsive images are arriving, they’re starting to make it into browsers.
• Responsive images support: Chrome, Firefox soon, Webkit – some support, Internet Explorer… well.
• Images are 63% of data sent from websites.
• 72% of image data sent to browsers is wasted: displayed smaller in the browser, etc
• An ideal responsive image solution gives the user full control.
• Responsive image use cases, as defined by RICG.
• Key use cases are resolution switching and art direction.
• use srcset for resolution switching, use picture for art direction.
• src is just as important as srcset, it’s assumed to be the 1x image.
• srcset gives the browser full control, the browser chooses which image to display.
• sizes attribute defines how wide the images is displayed at particular break point.

Peter Wilson, Encourage the Boss to Respond

It would be, frankly, weird to summarise my own talk – I’ll leave that to others.

Damien Fitzpatrick, Responsive Input

• 50% of Australians own an iPad
• There is a lot of baggage when writing an HTML rich text input, Word Perfect, Word, etc
• Next generation of HTML Word Processors/editors will be responsive input.
• Rich text editing is going to be the most complex field in any form
• Ephox started afresh when taking their editor responsive. It was cheaper to do a do-over.
• When considering the next generation rich text editor, they took the approach of less but better.
• When developing a RTE, responsive only gets you part of the way: how do you press control-b on an iPad?
• There is no event in iOS or Android to tell you when/where the keyboard is on screen. Easy to cover the cursor with the keyboard

Yesenia Perez-Cruz, Design Decisions Through the Lens of Performance:

• I wanted to create something beautiful and engaging, and I accidentally designed something that was huge.
• Designers ask questions & find balance for design decisions; this balance needs to be found for performance too.
• Performance: how quickly your site loads on user’s screens. How quickly users can complete their tasks.
• Users will go to a competitor if it saves them 250 milliseconds.
• Think about performance from the very beginning of a project
• Establish a perf budget
• Communicate and document everything
• Make performance a goal, a design feature.
• Share case studies, eg Amazon observed a 1% decrease in revenue for every 100 ms.
• A performance budget forces people to consider the consequences of decisions.
• Use webpage test film strip views to see how a site stacks up against its competitors.
• Use opensignal.com to see how quickly visitors can access your site.
• Communicating & documenting throughout a project will help you stick to performance goal.
• Site quality is stability, performance and reliably.
• Performance is a marketable feature, it will provide an competitive advantage.
• Provide options: ask clients how they want to spend their perf budget – what should be web fonts vs system fonts?
• Give client the tools to optimise, imageoptim etc.
• on a Puerto Rico news site, breaking news was appearing on mobile seven minutes after desktop.
• Repurposing design patterns increases the chance your CSS and other assets will be cached by the browser.
• Providing clients with a pattern library ensures the client uses existing modules after hand-over, using already optimised code.
• Get designs into code early, you can only measure performance once it’s in the browser.

Ben Buchanan, Should rolling your own be the way you roll?:

• Mobile Jenga: when one ‘minor’ change throws everything out of alignment.
• Media queries only tell you about viewport, using patterns you often care about the parent element.
• Definition sets a target and makes your design language testable.
• Never put the words old or new in the code base, call it generation 1,2.
• Normalise a library’s code, bring it into your name space, maintain control.

Felicity Evans, Stretching the rules:

• Beginnings define what we understand something to be. They can be very hard to shake.
• Viewports are to RWD as floor plans are to architecture. Only a small part of the story.
• RWD is just web design. Done right.

Andrew Clarke, Counting stars: Creativity over predictability:

• As our industry matures, we’ve made a web that is more accessible and more responsive to our users’ needs.
• We’re creating a web that is full of safe design, because we fear failure.
• We need to recover & make memorable work for the web.
• Web design can look to advertising for the soul that web is missing.
• What can advertising – an industry many think is outdated – teach web designers?
• Advertising creates pop-culture moments that remain memorable decades after the campaign ends.
• Clever advertising concentrates & emphasises a truth.
• Does our reliance on testing mean we are abdicating our responsibility for designs?
• When reading Cennydd Bowles’ Letter to a Junior Designer I was compelled to write my own.
• A point of view is an essential part of design. What does our work, our company stand for?
• Creativity can never be as predictable as manufacturing. We can’t expect to turn creativity into a process.
• Copy shouldn’t be an afterthought, added to pre-existing templates.
• Copy may trigger a design idea.
• Much of the work I see today is dry.
• Most of the changes I’ve seen on the web, are for the better.
• We can improve the web by focusing on design as much as we do implementation.