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.

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.

8 thoughts on “Web Directions Respond ’15 Summary”

Leave a Reply

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