Thursday, 1 September

This year’s conference provides again two days (see the Friday schedule) of exciting talks organized in two parallel tracks.


Check-in and coffee



Brief introduction to the Frontend Conference 2016.

(Can be attended in both rooms – we’ll have a live stream to PAPIERSAAL.)

10:00, FOLIUM (1st Floor)

The Fine Art of Web Design (Opening Keynote)

For years we’ve been told that the websites we make shouldn’t make people think and that we should put user needs first. But what if none of that were true? In this talk, art director and designer Andy Clarke explores how art direction and creative expression make designs that are distinctive, individual and full of personality.

(Can be attended in both rooms – we’ll have a live stream to PAPIERSAAL.)

Slides of this talk

Video of this talk

Portrait of Andy Clarke

Presented by Andy Clarke, Art director and website designer

Track 1 – FOLIUM

11:00, FOLIUM (1st Floor)

Test-driven HTML

HTML is the most foundational part of any web product. Without it, CSS and JavaScript simply cannot be employed. By adopting an “HTML first” design methodology, this talk will show you how front ends can be made more robust and accessible. Borrowing a test-driven philosophy from imperative code design, the talk will explore how you can prevent regressions in the HTML-based components of your “living” styleguide. The tests are written using CSS selectors and an a specially conceived CSS property for logging messages to your browser developer tools’ CSS panel.

Video of this talk

Heydon Pickering

Presented by Heydon Pickering, UX Design Consultant


11:00, PAPIERSAAL (2nd Floor)

Practical Blend Modes

With the availability of SVG and CSS filters and blend modes, our browsers have become very powerful image rendering engines. From creating faux surrealist effects to 3D images, the artistic possibilities are endless. But how can we integrate filters and blend modes into web components? How can we use them in our every day user interfaces to improve performance and aid in design? This talk will cover just that, and show some practical examples of using filters and blend modes.

Video of this talk

Portrait of Una Kravets

Presented by Una Kravets, UI Engineer


Lunch break

brought to you by G27 and sponsored by you?

13:00, FOLIUM (1st Floor)

5 steps to change your note taking

Sketching is a great skill to have for designers, developers, product people and just about anybody who has to think through and communicate complex matters in an engaging and effective way. As most skills, sketching needs practice. So we’ll practice a bit together. This is a hands-on session for everybody to sketch along, have fun and pick up some of Eva-Lotta’s tips, tricks and favourite mistakes. If you think you are rubbish at sketching and want to get a fun kick-start into using pen and paper, this session will be just right for you. Get your pens ready!

Slides of this talk

Video of this talk

Eva-Lotta Lamm (Photo by Marc Thiele)

Presented by Eva-Lotta Lamm, Designer & Sketchnoter

13:00, PAPIERSAAL (2nd Floor)

Componentize your Development!

Components have become a core asset of most modern frameworks like React or Angular. Even the web standard is evolving into a component based direction with the Web Components proposals. What’s behind this movement in user interface development? In this framework agnostic talk, Gion will outline some of the main principles behind component based UI development. Learn how to benefit from well designed components and start writing composable and highly re-usable web applications.

Slides of this talk

Video of this talk

Gion Kunz

Presented by Gion Kunz, Front-end Developer

14:00, FOLIUM (1st Floor)

Once More, With Feeling

As an industry, we’re starting to recognize that what really matters for performance is how fast the experience feels. While this seems like a relatively minor revelation, in reality it requires a significant shift in the way we approach speed online: everything from the way we measure to the optimizations we use. Let’s look at how to reframe performance on the web, and what techniques and technologies are out there to help us create experiences that feel fast and frictionless.

Video of this talk


Presented by Tim Kadlec, Web Technology Advocate

14:00, PAPIERSAAL (2nd Floor)

Life of a pixel or how I learned to love rendering performance

When the browser puts pixels on to screen, there’s a lot of work happening behind the scenes. While it’s well known that “GPU accelerated” is good for silky smooth animations and apps, it’s surprisingly hard to figure out what that really entails and means.

This talk is a tour of what goes into painting pixels onto the screen and what we can do to help the browser do it better. You will learn more about tiles, layers, compositing, painting and why the GPU is so great at pushing pixels around.

You will also see what’s the difference between using CSS, 2D Canvas and WebGL for image manipulation and how antialiasing, filtering and blending work.

Slides of this talk

Video of this talk

Martin Naumann

Presented by Martin Splitt, Software Engineer


Coffee break

15:30, FOLIUM (1st Floor)

The Future of CSS

The past years, preprocessors like Sass and LESS have dominated the CSS world. They extended CSS with useful features, and revolutionized everything back then.
Now it’s 2016, and the question is: Where do we go from here? What will change this year?
We’ll learn about the up and coming in CSS, which includes PostCSS, CSS modules and a lot more!

Video of this talk


Presented by Max Stoiber, Frontend Developer

15:30, PAPIERSAAL (2nd Floor)

Surveying the landscape: threats and opportunities for the web

From native apps to closed platforms to messenger bots, there are many threats to the influence and long-term health of the web. But perhaps its not time to give up on the browser just yet: the web could be sufficiently flexible to find new roles and new opportunities in the technology landscape of today and the near future.

Slides of this talk

Video of this talk

Portrait of Peter Gasston

Presented by Peter Gasston, Senior Technologist

16:30, FOLIUM (1st Floor)

Dirty Little Tricks From The Dark Corners Of Front-End

Do you love the <object> tag, too? How do you feel about perfectly responsive typographic scale and vertical rhythm? Do you feel itchy when t comes to building responsive email layouts? Have you ever tried to work around complex tables, nasty carousels, endless country selectors and complex user interfaces? Well, let’s bring it on!

In this talk, Vitaly Friedman, editor-in-chief of Smashing Magazine, will present dirty practical techniques and clever ideas developed in actual real-life projects, and use many examples to illustrate how we can solve problems smarter and faster. Please take the techniques with a grain of salt. Beware: you will not be able to unlearn what you’ll learn in the session!

Slides of this talk

Video of this talk

Vitaly Friedman

Presented by Vitaly Friedman, Editor-in-chief of Smashing Magazine

16:30, PAPIERSAAL (2nd Floor)

Thinking offline

Building a progressively enhanced, offline capable web application requires a different way of thinking. Not only is JavaScript optional, so is the network. Throughout this talk we’ll explore the life of a simple, though not trivial, web application that was built from the ground up as offline first. A base experience, static resources, dynamic pages, data and notifications will all play a part in this story of a new way of working with the web.

Slides of this talk

Video of this talk

Phil Nash

Presented by Phil Nash, Developer Evangelist

17:30 – 23:00

Party! Proudly presented by



This year we don’t need to hire a tram to chauffeur us from the conference to the after party. Not only is the Papiersaal perfect for hosting talks, it also has the right ambience for a lively party with plenty of room for discussion and networking. The party will be sponsored this year by Mailchimp.


Your sponsorship helps us to be affordable and accessible to the widest possible audience.

Still not sure? Check these irrefutable arguments in our sponsoring kit (PDF).

Our generous Sponsors


Unic logoHSR Hochschule für Technik Rapperswil logo


cyon logoAppway logo logoDeep Impact logo


AdNovum logoHostpoint logocubegrafik logoStation logoAmazee Labs logo3AP logoDreipol logoGold Interactive & logoNexum logoZühlke Engineering AG logo


KeyCDN logoZeix logoFrontify logoTestingtime logoGridonic logonative logo

Contributing partner

Zürich Tourismus logoStandortförderung logoeZürich logoFreshjobs logoBuffer logoMailchimp logoStickermule logo