September 16, 2013
Bruce Lawson
Web Standards Advocate in Opera’s Developer Relations Team
@brucel
http://brucelawson.co.uk
Web Standards for cross-device design: what next?
Slides: http://people.opera.com/brucel/talks/2013/reasonsto
Bruce is an engaging, entertaining speaker. But more importantly he has a great, positive attitude towards emerging web technology, its benefits, drawbacks and practical uses. There are many issues with new browser technologies (support in current browsers, polyfills for legacy browsers, memory and power consumption across devices) and for all the hype which accompanies each one, it can be easy to develop a jaded view of their practicality because of the aforementioned issues; see Remy Sharp below for life on the bleeding edge of web tech. However, after watching Bruce you’re left with a sense of optimism that, although there are issues, good people know the issues, are listening to feedback and working hard to get these tools in your hands. I think this is because Bruce is open about the failings of hyped tools, such as AppCache, and realistic about efforts to improve them, like Event Workers (formerly known as Nav Controller).
Some of the other emerging tools Bruce talked about were:
WebRTC — real-time communication in the browser without the need for plugins.
RTCPeerConnection — peer-to-peer connections for tools like video conferencing.
CSS @Viewport — a replacement for the ‘blunt instrument’ that are HTML based Viewport Meta tags.
Flexbox — easy vertical positioning & ordering of HTML elements (though beware 2009 and 2011 syntaxes which are no longer supported).
Pointer Events API — removes the need to listen for mouse and touch events, while also offering information on pressure, geometry and tilt.
Also highlighted were additions to existing tools, such as:
New — CSS3 Media Query values: Hover, Script and Pointer.
Proposed — CSS 3 Media Query values: Paged, Keyboard, Remote and Interactive.
The proposed values are of particular interest to designers looking to support TV web browsers. Bruce cautioned against automatically treating a large TV screen the same as a large computer monitor. The way a TV is viewed and used is very different to a computer, so a big screen doesn’t mean more space, and it is more sensible to treat a TV screen like a phone screen. Which makes sense to me. If you look at previous and current TV based information systems (Teletext, EPGs, ‘Red Button’ services) all of these present less information per screen, in a larger format than web pages designed for desktop computer use.
Bruce also spent some time talking about the problems with handling images in responsive web design and proposed solutions, such as img srcset and the picture element. While neither has solved the issue, Bruce is of the opinion that support for srcset in the Webkit nightly builds is a step in the right direction. The use of media queries within SVG images was also discussed for its ability to provide art direction of vector graphics in a responsive design. You can see Bruce’s demo of the SVG Media Query technique (from a previous conference) courtesy of Jason Grigsby.
The discussion of WebP images was also enlightening. While this format delivers file sizes 25–34% smaller than other formats, it takes longer to encode and decode. So any time saved in downloading is lost in the time taken to decode it.
@respimgs on Twitter has more information about responsive images & future developments.
Remy Sharp
Web Developer and owner of Left Logic
@rem
http://remysharp.com
http://leftlogic.com
Lessons from the experimental edge of technology
Slides: https://speakerdeck.com/rem/lessons-from-the-experimental-edge-of-technology
(These slides were presented in May 2013, so may differ from those delivered at Reasons to be Creative September 2013).
Following after Bruce’s presentation, Remy spoke about attempting to put some latest web tools to use in an experimental project for Google IO 2013 called ‘Head Shots‘, a multi-player 3D game built without using browser plugins. As such Remy was freed from the problems of cross browser/platform/device support issues, which is not to say that his job was made radically easier. For the project Remy used WebRTC (which is a collection of three APIs: MediaStream (aka getUserMedia), RTCPeerConnection and RTCDataChannel) and several Javascript libraries: Peer.js, EasyRTC, WebRTC.io and SimpleWebRTC.
Some of the issues Remy ran into included:
Peer-to-peer data transfer — it’s very easy to transfer very large amounts of data which would significantly degrade the performance of the application. Therefore, it’s important to only serve the data you need to use.
Persistence of WebRTC connections — every refresh of a browser would cause these connections to drop, causing the game to fall out of sync for players. The answer was to use a single page app to maintain persistence.
3D in the DOM is dire — This was Remy’s original plan for rendering the game. A second attempt using Three.js was more successful on desktop machines, but turned out to be abysmal on devices (rendering at 7fps per second does not make for a nice game playing experience). In the end CSS 3D was used to render the game.
It’s always interesting to see emerging technologies pushed to the limit, it’s part of how they’re refined for mainstream use. Clearly, these technologies aren’t ready for the mainstream yet. Though this project brief was to push and showcase emerging technologies, I think Remy’s final thought was the most important: “Don’t put technology before user experience”.
Mr Bingo
Illustrator
@Mr_Bingo
http://www.mr-bingo.org.uk
‘Hate Mail’ book
There’s an animal on the pitch
For the uninitiated, Mr Bingo is a very talented and funny illustrator with penchant for abuse. The audience were treated to a very funny history of Mr Bingo’s career. There were two particular highlights of the talk for me, first, his ‘Hate Mail’ postcards and book; you can watch Mr Bingo talking about the project for yourself. The second highlight was Mr Bingo’s long running (and entirely justified) vendetta against Martin Olley, the author of a scathing letter to .net magazine in 2001 accusing both Mr Bingo and Jon Burgerman of being bereft of talent, compositional ability or thought (see Computer Arts interview, ‘Mr Bingo: drawn to be wild‘, for more). Since then Mr Bingo has worked Martin Olley’s name in to a high proportion of his illustrations, always in derogatory, abusive and insulting ways, such as in this restaurant mural.