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.
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.
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.