We talk to Miriam Suzanne, the co-founder of OddBird, an agency that creates scalable, accessible, and performant web applications with a human-centred design. She will be running her Advanced CSS for Modern Applications workshop and talking about Dynamic CSS: Layouts & Beyond at generate New York from 24 - 25 April.
You have been working at OddBird for over 10 years and must have seen a lot of technologies, tools and trends come and go. So, what’s exciting you most in the field of web design right now?
I started in this industry around the time Zen Garden went live and we formed the company just a year before media queries found support in the browser. We got to witness the web-standards movement and CSS language grow into central driving-forces of the community. Exciting! We saw the rise of grid frameworks and then responsive web design and now something new: what Jen Simmons has called “Intrinsic Web Design”.
Despite CSS facing a new backlash in parts of the community, we’re just starting to explore the possibilities that box-alignment, writing modes, logical properties, intrinsic sizes, variables, Flexbox, variable fonts and grid will open up. We’re no longer limited to hacking px-to-% calculations or using inline block to fake vertical centring – we can start to build truly fluid and dynamic applications with the full range of tools at our disposal. It’s an exciting time for CSS and the web!
You’ve helped create a host of open-source tools, including Susy, a lightweight grid-layout engine for Sass. What interests you about this kind of collaborative approach and what else have you help create?
Susy was inspired by Natalie Downe and her 2008 CSS Systems talk – an attempt to build tools that are opinionated about system-thinking and best-practice, without pushing any code you might need to override down the road. At first, Susy had too many opinions baked in and I was quickly pushed by the community to make things more flexible. Those interactions taught me the value of careful abstraction and the absolute necessity of testing and documentation. While the era of %-layouts and grid-systems has come to an end, I’m really excited about taking that same philosophy into new tools.
As a byproduct of Susy, we also built the first Sass unit-testing framework – called True – which seems to be gaining even more attention these days. We’ve also been working on Accoutrement & Herman, a hands-off and framework-agnostic set of tools for defining and documenting Design Systems. I don’t think those are solved problems, though people like Mina Markham and Jina Anne have done amazing work to get us to this point. We’re certainly not the only ones working on it. But I really hope we can again push the Susy vision for more flexible and adaptable tooling: tools that help build what you want, rather than tools that tell you what to build.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
You’ve helped a lot of people polish their CSS skills through your work at CSS Tricks and speaking at various conferences. What encouraged you to focus on educating people about CSS?
When I was getting started, I took a lot of inspiration from the web standards advocates: people like Molly Holzschlag, Bruce Lawson, Estelle Weyl, Jeffery Zeldman and all the rest of them. I loved the way they thought about code as a philosophy – and had a vision for a more open and accessible future. I want to be part of carrying on that movement they started. Beyond that, I learn something new from every conversation I have after a talk and every question I field in a workshop. This isn’t a one-direction thing. The more people treat me like a teacher, the more they teach me. I enjoy taking that inspiration in and then sharing it with someone else.
CSS layouts have come a long way in the last few years. You talk about Dynamic CSS in your generate talk. How has this influenced the design of layouts?
CSS layout went through a fundamental shift with Responsive Web Design back in 2004-2011 – and we’re seeing that again. Intrinsic design isn’t just responsive-plus, but a whole new way of thinking. With Dynamic CSS, I wanted to capture another side of that shift: the ability for CSS variables and calc functions to reclaim aspects of design that we’ve long relegated to JavaScript. There’s been an effort to cast CSS as a static and outdated language but that’s never been less true. CSS was designed to create dynamic layouts with largely unknown content on an unknown canvas – how audacious is that?! We’re finally watching that vision pay off thanks to the work of people like Elika Etemad, Rachel Andrew, Tab Atkins and Jen Simmons – and, of course, many others.
CSS is the key feature of your talk and workshop at generate NYC. What can anyone coming to the conference expect to learn from you?
In a large part, I want to inspire people about the current state of CSS and what we have coming down the pipeline. This is a carefully designed, specced and implemented language – built to be resilient and contextual in a very chaotic environment. I’ll be teaching a lot of specifics around CSS variables, layouts and code-organisation / design-systems – but I mostly want to teach the underlying vision that makes it all work. More than any other languages, HTML and CSS are designed to be a collaboration between the code, browser, device and the human on the other end. It’s a radical project and one that I hope inspires people to experiment and play with the possibilities.
Want to learn more from Miriam Suzanne about advanced or dynamic CSS?
If you want the chance to discover more about advanced and dynamic CSS, make sure you attend Miriam Suzanne's workshop and talk at generate New York from 24 - 25 April. Get your tickets now!
Related articles:
