Magazine for designers and web developers
0 Collect me

State of the Browser 2013: Danilo Figueiredo tells us all

Article by Danilo Figueiredo in Design & Illustration - May 07

On Saturday 20th April, I attended State of the Browser 2013 (#SOTB3), a day-long annual conference focused on new and upcoming features of the most used application: the Browser.

Organized by London Web Standards, the event took place at Ravensbourne College, an authentic venue by the Thames in South London. It included talks from browser representatives, breakout sessions and more.

Worth checking out the lovely sketchnotes done on a continuous piece of paper by Makayla Lewis. An artwork similar to RSA Animate videos, very inspiring.

  • Keynote
    by Molly Holzschlag @mollydotcom

    From a recorded video, Molly talked about the danger of a WebKit monoculture for the Open Web and how it goes against its principles. She strongly believes that browser competition is a good thing and just as open standards are good for the web, so is the existence of multiple browsing engines. In addition, she highlighted that regardless of the engine war, monoculture goes away if we do our jobs collaboratively and responsibly.

    WebKit Monoculture Isn't Breaking the Web: You Are
    by Alp Toker @atoker, Webkit

    After Molly’s talk, Alp presented an almost opposite point of view. He was very positive and showed that WebKit is very successful for several good reasons. It is fast, efficient, portable, flexible and aims for compliance with web standards, in addition, it can be plugged into other applications.

    Alp explained that WebKit is a multiculture itself and it has so many variations. As an open source project it’s changing all the time and constantly evolving due to its nature of collaborations. He defends the idea that the WebKit open source project is a massive generator of web browser diversity. His advice was to question everything: browsers, authorities and standards.

    Although currently WebKit has the largest desktop browser market share of any layout engine at 47.6% (Safari, Chrome), this figure is likely to change after Google's announcement about Blink

    Full video

    Internet Explorer - Touch the web
    by Martin Beeby @thebeebs, Microsoft IE

    Martin highlighted how the way people interact with the web is changing due to new devices that allow the combination of different inputs in HTML5. For instance, the Aspire S7 is a 10-point touchscreen laptop that has different kinds of inputs but a single user agent. In other words, touch is no longer just about mobile and tablet.

    When it comes to touch, people have high expectations and the “idea of touch” is about human connection. As computer sensors are fairly limited, the challenge is about making them feel as responsive and magical as possible. He also mentioned how gesture discovery is harder on the web than on native apps.

    Martin showed some of Microsoft’s research and guidelines on touch as well as the new specification called Pointer Events. He shared some libraries such as the great Hand.js, that allows your code to work on every browser independently of the input method utilized (touch, mouse or pen), and modern.IE, an online tool to help you test web pages in modern and old versions of IE, allowing you to scan and find common coding problems.

    Full video

  • State of the Mobile Web
    by Paul Kinlan @Paul_Kinlan, Google Chrome

    Paul stressed the importance of web development for mobile, as statistics show the percentage of mobile traffic is constantly increasing. For instance, two out of three people use Facebook from mobile.

    Paul talked about performance and how UI Jank leads to less engagement on the web. As a good example he showed The Making of Facebook in HTML5 and how challenging it was for developers.

    In the second part of his talk, Paul shared some compatibility statistics for features in web technologies on mobile, proving that the mobile web is a rich platform. All data was taken from a website called On Mobile I Want to Use.

    Full video

    Business as usual: bringing the world wide web to the whole wide world
    by Andreas Bovens @andreasbovens, Opera 

    Andreas talked about two recent announcements from Opera: the switch to WebKit and Blink which is a fork of WebKit. It might sound a bit confusing, but he confirmed that Opera will actually use a combination of both engines, as some components are swappable in WebKit ports, as explained by Paul Irish. Their browser is under full construction and they are doing adjustments in multiple layers, but of course, they’ll stay in sync with Chromium. Following this topic, Andreas showed the Opera Mobile Beta v14 for Android and some of the new features, including Automatic Text Wrap, @supports a native detection via CSS, input type color, video & audio fullscreen and inline options, WebGL enable and the Off-Road mode, the former Opera Mini. 

    Full video 

    Making your HTML5 efforts worthwhile
    by Chris Heilmann @codepo8, Mozilla Firefox

    Chris started off by talking about the broken promises of HTML5. After that, he raised an issue: we have great browsers and dev tools, yet we still create poor mobile experiences. Chris believes we are blinded by products and forget to optimize websites for all devices. Users shouldn’t need to buy a new device in order to get a new browser. He stated that the internet is for everybody and we should keep it that way.

    Targeted at new emerging markets, the new Firefox OS is an affordable option where no credit card is needed. One of its key features is searching for apps by content. Chris showed the simplicity of its web API and explained the difference between the three levels of access: Hosted apps, Privileged apps and Certified apps.

    He shared some important resources for Firefox OS, the Developer Hub, the Simulatore 1.0 and the Boilerplate App on Github. And in case you want to order one, here’s the link.

    Chris blog post
    Full video 

    Keep informed about upcoming events in our Events section on Awwwards

  • Breakout session 1:

    Front end web architectures that won't bite (you in the ass)
    by Steve Workman @steveworkman, PA Consulting Group

    Steve’s talk was focused on best practices and how to structure solid applications using the MVC software architecture pattern. He also said that jQuery is not the answer to good JavaScript and recommended developers to build modular applications with RequireJS as well as frameworks including BackboneJS and libraries such as UnderscoreJS.

    Regarding Style Sheets, Steve suggested the precompilers LESS and SASS as well as Twitter Bootstrap framework.

    Breakout session 2:

    Rendering without lumpy bits
    by Jake Archibald @jaffathecake, Google Chrome

    Jake delivered a great presentation about rendering of browsers and provided loads of useful tips and hacks on how to make the most of graphics performance and how to make the hardware do the hard work for us.

    He used different Developer Tools to inspect the process of rendering, starting from the code (DOM) and passing through different steps such as parse HTML, recalculate style, create render objects (Layout), create pixel data (Paint), create layers in the GPU (Composite Layers) and more.

    Jake explained a bit about how screens work and the concept of frame rate. He set as our goal 16.67MS, which is good enough for animations and touch responsiveness. One piece his advice was to favour requestAnimationFrame over setTimeout.

    That was my personal favourite talk and I can't recommend it enough, have a look at the slides.

    Battle of the Browsers
    by Seb Lee-Delisle @seb_ly, CreativeJS

    By far the most entertaining and relaxed part of the event, with the audience's help Seb live coded the classic arcade game ‘Space Invaders’. His version of the game was called ‘Battle of the Browsers’, built in HTML5 and JavaScript, and was used as a platform for the battle between the browser representatives. The winner was Martin Beeby representing Internet Explorer. The game can be played here and is open sourced here.

    Full video

  • Panel Q&A Discussion

    The conference finished up with a panel Q&A discussion with browser representatives. It was a good end to a great event and I'm looking forward to next year.