CSS Day

Your MC: Sara Soueidan

Sara is a Lebanese freelance front-end UI/UX developer working with companies across the globe, building clean, responsive front-ends for Web sites and applications focused on accessibility, progressive enhancement and performance. She also runs workshops on front-end development and writes technical articles on her blog and for various big publications. Sara wrote the Codrops CSS Reference, co-authored the Smashing Book 5, and has been voted the Developer of the Year in the 2015 net awards.

A.I. is your new design material

Discover the critical role of UX and product design in AI, which is set to define the next era of digital products—and of our work. Learn to use machine-generated content, insight, and interaction as design material in your everyday work. Refit familiar design and UX process to work with the grain of the algorithm, to help the machines solve real problems without creating new ones.

This lively and inspiring talk explores the technologies and practical techniques that you can use today—like right now—not only to make existing products better but to imagine surprising new services. The challenges and opportunities of AI and machine learning are plenty; discover your own influential role, and learn to handle this powerful new design material with care and respect.

Video, slides

Josh Clark

Josh is a UX design leader who helps organizations build products for what's next. He is founder of Big Medium, a New York design studio specializing in future-friendly interfaces for artificial intelligence, connected devices, and responsive websites. His clients include Samsung, Time Inc, ExxonMobil, O’Reilly Media, and many others. Josh has written several books, including Designing for Touch and Tapworthy. He speaks around the world about what’s next for digital interfaces.

Before the internet swallowed him up, Josh was a producer of national PBS programs at Boston’s WGBH. He shared his three words of Russian with Mikhail Gorbachev, strolled the ranch with Nancy Reagan, hobnobbed with Rockefellers, and wrote trivia questions for a primetime game show. In 1996, he created the popular “Couch-to-5K” (C25K) running schedule, which has helped millions of skeptical would-be exercisers take up jogging. (His motto is the same for fitness as it is for software user experience: no pain, no pain.)

Behind the Story

Storytelling appears to be a magic word when it comes to creating user experience—we use it to evoke design ideals, to summon the creative spirit, or to cry out for a narrative link across the complex world of brand identity, multiple devices and short attention spans. In the context of design, we often talk about using the three-act structure, characters, and how conflict is a key essential ingredient. But is it all there is?

Steph spent a few years learning from the art of making documentaries, crime fiction, novels and the shortest of stories. In this session, Steph will show how understanding the essence and practice of story opens a world of possibilities and adds another dimension to your UX toolset. Better still, it’s less of a mystery than what you might think.

Video

Steph Troeth

Steph is an independent strategist and researcher. She was most recently the Head of Research at digital agency Clearleft, where she helped companies and organisations build customer intelligence through combining design research with other disciplines. She previously led design research at the Telegraph and spearheaded European customer research with MailChimp. Currently, she is a senior researcher on site at Google with Adecco.

In 20 years of working in the digital industry, Steph has worn many hats, including a product lead for a startup in digital publishing and a director of technology at a digital agency. She is also a regular speaker at conferences and guest lectures annually at the University of Greenwich. When not bound to a digital device, she makes things by hand, grows edible flowers and has a tendency to cook enough to feed a continent at a time. She now lives on her 4th continent on her 4th island in the UK.

A New Era of Design Process & Culture

As technology and design becomes increasingly powerful and central to human life, it’s never been more critical to offer compelling experiences that deliver long-term value. In order to successfully build these experiences, we need to craft the right product design process that incorporates user values and quality as well as business impact and velocity into our practice. And, most importantly, we need to build a strong design-driven culture that integrates user experience design into product decision making and inspires teams to go above and beyond.

In this talk, Basak will dig deeper into the new era of design culture that evolves around courage, values, and innovation and discuss ways to accelerate the product design process thoughtfully and maximize design maturity in organizations.

Video

Başak Haznedaroğlu

Başak is a multi-disciplinary thinker, educator, designer, and mentor for several startups across the globe. Currently, she is a Director of Design at InVision, helping shape the direction of company's game-changing tools for product designers. Prior to that, she held roles at Microsoft and Foursquare, where she explored the relationship between media, technology and the human element. She is a huge believer in how design, code and storytelling can synthesize into meaningful and intuitive products and services.

Başak has crafted digital experiences for global brands, organizations, and tech companies such as Puma, Red Cross and LG electronics. When she is not working, she travels, takes pictures, paints, and experiments with creative writing.

Building Better Interfaces

This session is a deep-dive into the areas of interface design that Hakim has specialized in for over a decade—interactivity and animation. He's going to take an in-depth look at a few different UI components to highlight common pitfalls and present concrete solutions. He’ll talk about the correlation between having fun at work and building interfaces that are fun to work with. Most of all, he’s going to share practical tips for building better and more enjoyable user interfaces on the web.

Video, slides

Hakim El Hattab

Hakim is a Swedish front-end developer who loves to work on visual JavaScript experiments and user interface concepts. He co-founded and is currently building Slides.com, a fully featured presentation platform built on top of his open source presentation framework, reveal.js.

The Technical Side of Design Systems

You can have a killer style guide website, a great-looking Sketch library, and robust documentation, but if your design system isn't actually powering real software products, all that effort is for naught. At the heart of a successful design system is a collection of sturdy, robust front-end components that powers other applications' user interfaces. This talk covers what's involved in establishing a technical architecture for your design system, including front-end workshop environments, CSS architecture, implementing design tokens, popular libraries like React and Vue.js, deploying design systems, managing updates, and more.

Video

Brad Frost

Brad is a web designer, speaker, writer, and consultant located in beautiful Pittsburgh, PA. He is the author of the book Atomic Design, which introduces a methodology to create and maintain effective design systems. In addition to co-hosting the Style Guides Podcast, he has also helped create several tools and resources for web designers, including Pattern Lab, Styleguides.io, Style Guide Guide, This Is Responsive, Death to Bullshit, and more.

UX, Psychology and your Product

What do an overnight 40% drop in road accidents, a night in on the sofa watching TV and a good night's sleep have to do with digital product design?

Humans only have limited mental capacity and no-one is ever operating at 100%.

We are all influenced by the world around us and by how our minds work. As designers we need to be able to understand this and design for it.

Combining psychology theory, the latest in UX techniques Joe will outline a modern design framework that matches the modern complex world we and our users live in.

After all a designer who doesn’t understand psychology is going to be no more successful than an architect who doesn’t understand physics.

Video, slides

Joe Leech

@MrJoe, Joe to his friends, is the author of the book Psychology of Designers. He helps big organisations and start ups do the right things in the right order for the right reasons in the right way.

A recovering neuroscientist, then a spell as a elementary school teacher, Joe started his UX & product career 14 years ago. He has worked with big organisations like MoMa, Raspberry Pi, AO.com, Disney, eBay and Marriott as well as helping to supercharge high growth businesses and startup. He is also a director and shareholder for small portfolio of startups.

Pretty, but not Usable

“Don't worry about the UI, we have a framework for that” they say. Then the designer's job is merely to paint over whatever product comes out of it. Does that sound frustratingly familiar?

How can we change this situation to bring user needs back in the process, while still working with an imposed framework? Let me share with you some stories from my projects, what worked but also failed. I want to help and inspire you find a collaboration process that will also work for your own teams.

Video, slides

Stéphanie Walter

With a decade of experience as UX Designer, Stéphanie focuses on building a great user experience for anything from mobile apps to complex dashboard up to responsive websites! She is a Google Dev expert in Product Design and likes to share her passion for her work. She teaches and talks about UX design patterns, mobile UX design and a few other things like PWAs. Her claim to fame: she once helped redesign monitoring panels for tower cranes. Don't hesitate to reach out to her for questions and advice.

Beyond The UX Tipping Point

For the longest time, making a great experience for the user was a business-strategy luxury item. A great product only had to work and ship. A great experience was a nice-to-have, not a requirement. Times have changed. The cost of delivering a product is no longer a barrier to entry. Quality is no longer a differentiator. What’s left? The user’s experience.

Every part of the organization must be infused with an understanding of great design. Your organization has to cross the UX Tipping Point. You must increase everyone’s exposure to users, communicate a solid experience vision, and install a culture of continual learning. With that, design will become your organization’s competitive advantage.

Jared will show you and your team:

• Which path organizations take to become design-infused
• How a centralized UX team is a stepping stone to a more UX capable organization
• Why the market needs to demand a better experience before it will matter
• What your organization will need to do to cross the UX Tipping Point

Video

Jared M. Spool

Jared is a Maker of Awesomeness at Center Centre/UIE. Center Centre is the school he started with Leslie Jensen-Inman to create industry-ready User Experience Designers. UIE is Center Centre’s professional development arm, dedicated to understanding what it takes for organizations to produce competitively great products and services.

In the 39 years he's been in the tech field, he's worked with hundreds of organizations, written two books, published hundreds of articles and podcasts, and tours the world speaking to audiences everywhere. When he can, he does his laundry in Andover, Massachusetts.

Your MC: Tab Atkins

I'm Tab Atkins Jr, and I wear many hats. I work for Google on the Chrome browser as a Web Standards Hacker. I'm also a member of the CSS Working Group, and am either a member or contributor to several other working groups in the W3C.

Refactoring (the way we talk about) CSS

Rachel Andrew has been writing CSS for 20 years, and teaching people the things she has learned for almost as long. Since the early days of CSS, and certainly since "CSS for Layout" became a thing, we've been teaching CSS in pretty much the same way. Here is a block thing, here is an inline thing, this is the Box Model ... and here is this weird jumping through hoops that makes a layout. It's time for a change.

In this talk Rachel will explain how, in the last few years, CSS has been refactored to an extent that to really explain how CSS works we need to change the way we teach and talk about the language. We need to look again at what it is to learn CSS. We need to leave our old ideas behind. It is only when we do, that we will stop supporting the idea that CSS is the fragile, broken, quirky language that its detractors would like to believe.

Video, slides

Rachel Andrew

Rachel Andrew lives in Bristol, England. She is one half of web development company edgeofmyseat.com, the company behind Perch CMS and Notist. Her day to day work can include anything from product development to devops to CSS, and she writes about all of these subjects on her blog at rachelandrew.co.uk.

Rachel has been working on the web since 1996 and writing about the web for almost as long. She is the author or co-author of 22 books including The New CSS Layout, and a regular contributor to a number of publications both on and offline. She is a Google Developer Expert for Web Technologies a member of the CSS Working Group representing Fronteers, and Editor in Chief of Smashing Magazine.

Line breaking and related properties from CSS Text

Wrapping text into multiple lines may seem trivial at first, but there's actually a lot of subtleties, and many possible variations. Even more so when you consider the diversity of typographical practices in various languages and writing systems, but even when you don't. Luckily, CSS has tools to help you with that. However, as there is quite a few pieces interacting together, it may not be obvious at first sight how it all fits together, and the somewhat odd naming of the properties doesn't help.

In this talk, Florian Rivoal will do a tour of all the relevant properties, explain how each work, how they interact, how a few special HTML elements and unicode characters fit into this picture, and the differences in behavior associated with different languages. He will also go through some practical limitations of existing implementations and possible work arounds, and will illustrate how to put all this into practice in a number of examples.

Video, slides

Florian Rivoal

Florian is an independent web standards consultant operating from Kyoto, Japan. He is most active in the CSS Working Group which he first joined in 2011 and where he maintains a few specifications, and is an elected member of the W3C's Advisory Board. He used to work on the Opera Software and Vivliostyle, and often hangs out with the Japanese publishing industry.

CSS Line Layout and Vertical Rhythm

Now that Grid and Flexbox have dramatically improved the high-level layout possibilities in CSS, the CSS Working Group is moving on to the next-most-broken frontier of CSS layout: line layout. In this session we'll go over upcoming features to improve CSS's line box model, control half-leading, and maintain vertical rhythm.

Video, slides & resources

Elika J. Etemad (fantasai)

Elika is a senior spec-writer in the CSS Working Group and a former Mozilla layout engine QA & dev contributor. Since joining W3C as an Invited Expert in 2004, she’s worked on a long list of specs including CSS2.1, Selectors, Writing Modes, Grid, Scroll Snap, and many others.

Refactoring UI

Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.

We’ll be looking at some of the more common problems faced by designers and developers—from simple forms to complex data—showing what a difference a few small cosmetic changes can do to bring design to the next level.

Video, slides

Steve Schoger

Steve is a multidisciplinary designer from Canada where he runs Duke Street Studio, an independent design and illustration studio. Steve is one half of Refactoring UI, a project started with Adam Wathan to help developers get better at designing awesome UI's. Through a series of blog posts, screencasts, and Twitter tips, the duo have demonstrated that design can be taught with tactics instead of talent.

CSS Grid Layout Implementation Details

Igalia has been working on the CSS Grid Layout implementation in Chromium/Blink and Safari/WebKit since 2013. You heard about grid for a long time and it was finally shipped in Firefox, Chrome and Safari almost simultaneously in 2017. Most of you probably know how to use grid and you might already be using it in your projects. In this talk we are not going to talk about how grid layout works, instead we will discuss how it's implemented in the browser.

Manuel Rego has been part of the team working on Grid Layout since 2014. He will share his experience implementing a CSS spec in a web rendering engine as well as address different aspects of the implementation process, highlighting some interesting details and explaining some issues that appeared along the way. Hopefully, after the talk you'll better understand what's going on behind the scenes when you use CSS Grid Layout in a webpage, and what it takes to implement a CSS feature in a web browser.

Video, slides

Manuel Rego Casasnovas

Manuel Rego is a free software developer working on the Web Platform at Igalia. Over the past few years, he has been working on the implementation of different CSS standards, particularly CSS Grid Layout, in Chromium/Blink and WebKit for which he is an owner and reviewer, respectively. Manuel has also been a member of the CSS Working Group since 2017.

Algorithms in CSS

CSS can be a source of deep frustration for developers, especially those more familiar with the imperative nature of JavaScript. Over time, this has resulted in a portion of the web community with a fundamental misunderstanding of CSS, not only of how to write it, but of what CSS is in the first place: a declarative, domain-specific programming language.

How can those of us who know and love CSS convince this group to include CSS in their definition of programming language, and why is it so important? This talk will provide your talking points for that conversation.

Video, slides

Lara Schenck

Lara (@laras126) is fascinated by the profound, yet subtle, overlap between programming, computer science fundamentals, and CSS. She spreads her enthusiasm for this topic through speaking, community involvement, and at her job as a Design Engineer for Penske Media Corporation, where she leads the design systems effort for big media publications powered by WordPress.

She writes about her work and life on her blog, illustrates friendly monsters in her spare time, and, someday, hopes to write a memoir.

CSS at the Intersection

Throughout the talk I discuss the mental models we construct in tech, the cognitive dissonance we experience when confronted with new ideas, specifically about CSS.

We know CSS has a separate mental model because we keep hearing the same debate rage on: “Is CSS broken or awesome?” This talk is about enabling teams to communicate and accommodate these different mental models. I share examples of effective tools, and how they change the way designers and developers interact.

Video, slides

Natalya Shelburne

Natalya (@natalyathree) is a developer, designer, educator, speaker, and occasional sketch note artist. She is a front end developer at The New York Times and an instructor at Harvard Extension School. Previously, she worked as an Art Director in the non-profit world. Natalya holds bachelor's degrees in studio art and psychology, and a master's in creativity and talent development. Encouraging all things multidisciplinary and facilitating collaboration between design and development is at the heart of much of her work. When Natalya is not writing code, she is painting, writing, or drinking coffee.

Flexbox Holy Albatross

With the Lobotomized Owl Selector and now the Flexbox Holy Albatross I'm worried people are going to think I have a thing about birds. I mean, it's pretty cool that birds are essentially fluffy dinosaurs. Then again, crocodiles are kind of actual, real dinosaurs, still living today! So, like, they win on that count. Wait, how did crocodiles survive the meteorite impact when all the other dinosaurs died off? What did they know that velociraptors didn't? Did they have bunkers? In any case, this talk is the story of a peculiar and peculiarly named CSS layout technique I came up with, what it means to write algorithmic layouts, and how to integrate this layout primitive into your design system via the custom elements spec'.

Video

Heydon Pickering

Heydon is a frontend developer and interaction design consultant, specializing in inclusive design. He wrote Inclusive Components and curates the generative art site mutable.gallery. He's currently working with The BBC to document their design patterns. He likes distorted guitars and greyhounds. He dislikes capitalism and soup.