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, 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.
Ultimo, Sydney, Australia

Published by Peter Wilson

Peter Wilson is a Senior WordPress Engineer at Human Made and contributor to WordPress core. Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development. Peter’s a big fan of musical theater and often encourages his WordPress community colleagues to join him for a show or two in New York or in the West End.

Join the Conversation

8 Comments

Leave a comment

Your email address will not be published. Required fields are marked *