If you’re building a modern web application, you know you want to target as many devices and deployment channels as possible, so what’s holding you back? Unfamiliarity with a CSS debugging workflow that deals with both responsive, hosted applications and packaged apps delivered through marketplace distribution can be frustrating. Let’s debug the CSS of an application that we want to ship both of these ways and discuss the various methods to do so along with their merits and shortcomings. Cross-device debugging has become as ubiquitous as cross-browser so we’ll look at tools in the browser, remote debugging on-device, as well as tools at the command line.

Embrace the Vertical

I will discuss opportunities, risks and the potential future of height based media queries. Screens move in both directions, but we almost always deal in width. Through site reviews, prototypes and UI experiments I will showcase why these media queries are ready for prime time.

The Chroma Zone: Engineering Color on the Web

We use color every day, but how well do we really understand it? More often than not, we are merely scratching the surface of a large and complicated discipline. In this dynamic session, we will scratch a little deeper, and you will be surprised at how deep the colorful rabbit hole goes. How does color work on our screens? What’s the difference between color models and color spaces? Which existing features of CSS Color are we underutilizing? What’s in store for CSS Color level 4? This is not a design talk, it’s a technical talk about the inner workings of one of the most important design aspects, with many practical takeaways. Whether you identify as a designer or a developer, you will walk out of this session with a newfound confidence about anything color related.

TBA

TBD

CSS and the Critical Path

For a website to feel instant, a perceptible response to user input must be provided within hundreds of milliseconds.

This perceived speed of your website relies heavily on the browser being able to paint to your user’s screen. For this they must construct a “render tree” which consists of the DOM and the often forgotten CSSOM. The critical path which the browser takes to gather this information is the only thing standing between your server and the user’s screen.

Using new research and real world examples, Patrick Hamann will cover a range of techniques – from the controversial to bleeding edge – the Guardian are using to make the CSS of their next generation website load as fast as possible, and ultimately taking it off the critical path. Breaking the news to the user within 1000ms.

During the talk you will discover why performance matters, what are the common performance bottlenecks in the browser from networking to painting and learn how to best optimise and monitor each stage of the critical path to create fast loading websites.

Parallax Performance

The most tactile feel your users have of your site’s performance is how it scrolls. A site that can’t scroll smoothly is a silent but deadly killer of user of user engagement. We’ll diagnose several popular sites and visualize their problems, fix their implementations, and unveil a brand new technique for parallax that makes sure that you can enhance the user experience with scroll-driven effects but do it at 60fps.

Styling and Animating Scalable Vector Graphics with CSS

Scalable Vector Graphics, or SVGs, are the new “big thing” in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we’re going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We’re also going to cover “responsifying” SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We’ll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.

Bulletproof Icon Fonts

Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? In this talk, I’ll show you how to implement bulletproof font icons.