Chris Coyier is a designer and co-founder of CodePen, a writer at CSS-Tricks, a podcaster at ShopTalk, and the author of Practical SVG (A Book Apart, 2016). We caught up with the immensely busy and remarkably creative designer/developer for a quick chat about redesigns, team management, and more.

Let’s get the tie-in out of the way first: you have a talk and a full-day learning session (A Day Apart) this year at An Event Apart. What will they cover, and what will attendees take away from each?

This will be the first season of AEA since the publishing of my book Practical SVG, so I’m honored to get the chance to keep talking about SVG! The talk is secretly about getting the audience excited about using SVG. I talk about things like building your SVG muscle memory and reaching for SVG when it’s the appropriate tool, instead of falling back to another format that might be more comfortable, because perhaps you came up as a front-end developer when SVG wasn’t as well supported and was largely ignored for good reason. 

Part of getting excited about SVG and building that muscle memory is seeing a lot of SVG in action. I have heaps and heaps of examples I can show, so the trick for me is narrowing down the best stuff to show you at AEA!

With A Day Apart, as one might expect, we get to cover more ground. I’m going to take on something near and dear to me: the job of being a front-end developer as a whole. To frame that, we’re going to build a website together. Or at least look at the process of building a website from the design to the “finished” product. This will give us a chance to talk about tools, process, languages, abstractions…the whole nine yards!

Okay, now to the news: CSS-Tricks has a brand-new design, with animated SVG and all kinds of great stuff.  Tell us more about the thinking and goals!  Also, any cool bits that people should check out?

It’s a little thing, really. I know, from experience, that site redesigns can be monumental efforts. They can take months, involve big teams, and meetings on top of meetings. All the CSS-Tricks redesigns—this one, as well as most of the last 15—are more like a long weekend and a sixpack of Diet Mountain Dew. I typically don’t tear the whole thing down and start from nothing. It’s more of a facelift, and a checklist of a dozen or so other things I want to accomplish, bundled together.

Taxonomies were something I wanted to address in this design. We’ve been tagging things for a while, so I wanted to finally expose that. For example, you might see a post about some SVG feature, read it, and want to see other SVG-related stuff. We have a tag for that. 

Tags are hardly something new, but it’s a start toward making the site more browseable, content more findable, and circulating all the articles on the site in a better way. We have thousands and thousands of bits of content on CSS-Tricks, so this stuff needs to get thought about more and more. Another thing I’m excited about, coming soon, are pages that allow us to hand-curate collections of posts—like recommended reading on a particular subject.

I honestly had a lot of fun with the randomized SVG stuff going on in the headers/footers. Some different bits of tech come together to pull those tricks off:

1. They are <path> elements, which is the canonical drawing method in SVG.
2. I construct each <path> with some fixed coordinates, and some pseudo-random numbers in pre-defined ranges. 
3. At different timed intervals, I construct a new set of coordinates and stitch it all together as a string. (ECMAScript 6 template literals make this easier.)
4. I replace the d attribute of the paths with that new string. That instantly visually changes the shape.
5. In Chrome, you’ll see the shapes transition, because the d attribute is a transitionable attribute there. Presumably other browsers will do the same eventually.

Between CodePen and CSS-Tricks, you’re managing at least two teams. How do you make it all happen and keep track of everything?

We can toss ShopTalk Show on that pile too, as that certainly takes some time and planning. But I can tell ya…I don’t work particularly hard. I have a time-tracking app that measures everything I do, and I work about 40 hours a week. Rarely does it approach 50. The fact that I don’t commute and don’t yet have kids certainly frees up some time.

“Teams” is the word. Everybody I work with is amazing. Smart, generous, and driven. They don’t need me pretending to be their manager. At least not yet. Perhaps as we grow and my development skills finally completely give out, they’ll let me keep an office in the basement and call me a “manager.”

I like to trot out a quote from a documentary I like. In it, an old fella is hard at work in a shack dipping baby alligator heads into shellac, as you do, for sale in Louisiana tourist shops. His son is part of the business too, but clearly doesn’t do as much of the baby-alligator-head-dipping. With a bit of part-prodding part-fatherly-wisdom quip he says:

It’s amazing how much you can get done in a day if you just sit and you do it.

What are some tools, tricks, and/or techniques you can’t work without?

We recently moved to GitLab on CodePen, and that’s been a huge new tool for us. We quite literally couldn’t work without it, because it’s the hub of all our projects. It’s just like GitHub, only open source, and we host it on our own servers. We kinda went all-in with it, moving all our project management to it as well. So it’s our git repos, testing, deployment, issue tracking, time tracking, and kanban boards all-in-one super-tool.

We use Slack for the vast majority of real-time-ish communication. Zoom is our video tool of choice, because it has a pretty great track record of Just Working, in my experience.

Well, and I use CodePen a lot, too.

What has you most excited these days?

I’m as excited as the next person about tech stuff. The way websites can be built is changing rapidly. Like, for real. CSS stuff like Grid Layout is a huge deal and dropping in stable browsers soon. JavaScript is evolving quickly, which is an even bigger deal, because the buy-in from developers has been so swift and widespread. The JavaScript you see these days is barely recognizable (to me, at least) from the JavaScript you’d see a few years ago—thanks to new syntax, new frameworks and libraries, and new APIs, modules, and build processes. Thank god it feels like HTML is taking a break with the new stuff right now.

But I’m just as excited about some of the non-tech side of running a business. How do you keep it happy and healthy? How do you help a community be its best self? How do you move things in the right direction in a timely fashion? Those are exciting things to consider.

Chris Coyier will present his talk “10 Things You Can and Should Do With SVG” at several AEAs in 2017, and deliver his full-day session on front-end development at An Event Apart Seattle (April 3-5) and Chicago (August 28-30). Don’t miss your chance to learn from Chris and our other fantastic speakers—find your event and register today!

With multi-screen use progressively increasing among web users, creating a unified user experience across screens is imperative to our work. Responsive Web Design laid the foundation for designing multi-screen UX within the browser; Unified Design aims to build on that foundation by unifying the entire internet experience—browser or not.

In this 60-minute presentation captured live at An Event Apart Austin 2015, designer and founder of Authentic Jobs Cameron Moll examines what’s required to deliver a unified, consistent user experience regardless of where the digital experience begins, continues, or ends.

You’ll learn how to unite your entire internet presence, not just your web presence, and you’ll take away practical advice for creating unified user experiences and fostering a mindset of unity among your organization.

Enjoy all the videos in An Event Apart’s library. There are over 30 hours of them—all absolutely free! And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest. Subscribers get exclusive access to our latest videos weeks before anyone else!

Responsive Patterns with Ethan Marcotte

Veteran AEA presenter Ethan Marcotte is the inventor of responsive web design (which he debuted on our stage), the author of Responsive Web Design and Responsive Design Patterns & Principles, and the co-author (with Jeffrey Zeldman) of Designing With Web Standards, 3^rd Edition. We caught up with the Boston-based designer/developer to get his perspective on what’s new and exciting in our field.

How’d you get your start in design, and on the web (if the two are different)?

Professionally, my design career started in the last years of the dot-com bubble. I’d been tinkering on the web for some time before that. But, once I got my first agency job, I was surrounded by folks who’d fallen into the web from different career paths, like fine art, photography, and even medical school.

In other words, they were folks like me. Somehow, I’d landed a job working alongside great, inquisitive people, each figuring the web out at the same time I was. And to do so, they each brought a different background—a different perspective—to the table. And even someone like me, who was a year or three behind most of them in experience, was welcome to contribute.

That’s something I’ve always remembered; it’s critical to make space on teams for different perspectives, and to listen to—and encourage—newer, younger voices.

What’s new and interesting in the land of responsive web design?

Hmm! Well, this probably isn’t a surprise, given my biases, but the overlap between responsive design and design patterns is a big part of my work right now. Because, as both concepts move further into the mainstream, the focus for most organizations shifts from just creating a style guide, to figuring out how to maintain and govern those patterns at scale. Folks like Jina Bolton and Stef Rewis have really been leading the way here.

As our designs get more modular, there’s been discussion about adding new tools to responsive design’s toolkit. There’s always been interest in “container queries” (née “element queries”) from various responsive designers and developers, but interest has really picked up in the last few months. I’m hopeful it’ll get some momentum this year, as it’d be flat-out invaluable to my work.

You recently redesigned and relaunched your blog. Very retro! Tell us a bit about that process and your goals for doing so.

Hey, thanks for noticing! I wrote about this when I launched the site, but my goals for the redesign changed pretty dramatically over a couple years. Yeah, yeah—I know, “years.” Cobbler’s children, and all that. My portfolio site was a simple one-pager, and pretty sorely out of date. But redesigning that page quickly turned into a massive content migration project, where I started moving over a decade’s worth of content from two separate blogs into one, Jekyll-managed website.

But, uh, none of that happened. And in light of [cough] recent geopolitical events, the scope got considerably more manageable, and quick. I refocused on a straightforward homepage outlining my services, and a simple space to get a few thoughts down. There’s more—much, much more—I want to do, but it feels like a good foundation to build on.

What are some tools, tricks, and/or techniques you can’t work without?

Ages ago, a writer friend once told me the secret to his work lay in “the regular and earnest application of the seat to the bench”—that is, showing up, sitting down, and doing the work. I’ve only recently learned that’s most effective when paired with disengaging the seat from the bench. In other words, when I get stuck on a particular problem, I need to remember it’s okay to get away from the screen, and do basically anything else. Going for a run, a long walk, or, heck, even making a cup of coffee can help me come back to the problem with a renewed focus, and a few new ideas.

Oh, um, I also like Sketch.

What has you most excited these days?

Various and sundry newsletters, Chance the rapper, and Sewing circles.

What GIF has you most excited these days?

Not sure about “excited,” but this one feels especially timely.

Ethan Marcotte will be an integral part of An Event Apart Seattle, April 3-5, 2017. Don’t miss a chance to learn from Ethan and eleven other fantastic speakers—register today!

Laura Martini works at the intersection of healthcare and tech. She’s built design teams at two healthcare startups, Medisas and Counsyl, and done product design work at Apple and IDEO. We asked about her path to design and how she’s focused her UX practice on work that’s both personally meaningful and helpful to society.

How’d you get your start in design, and on the web (if the two are different)?

Growing up, I always thought I wanted to be a lawyer, because I loved logical arguments and public speaking. Eventually, I realized that being a lawyer wasn’t exactly like Reese Witherspoon made it look in “Legally Blonde.” During my freshman year of high school, while I was reconsidering career plans, my family began remodeling our house. As we worked with the architects, I discovered I had a real knack for looking at blueprints and envisioning spaces. It got to the point where my parents wouldn’t make a decision about anything without me—even details like wood finishes and paint colors. When I told the architect that I wanted his job, he told me that if he had his life to live all over again, he would choose to be something I’d never heard of before: an industrial designer. The seed was planted.

Fast forward a few years to college applications. I wanted to be a designer, but didn’t have a portfolio of work that would qualify me for any caliber of design program. I found out about the MIT Media Lab, which struck me as a perfect back door to the field for someone like me, who was more comfortable with a calculator than a paint brush. My intuition was right, and a few weeks into my freshman year at MIT, I was lucky enough to have John Maeda take me under his wing and offer me a spot working in his lab. I had never touched Photoshop before, and barely knew how HTML worked, but he showed me the ropes, and gave me a lot of encouragement. I’m still close to a lot of designers from that group, who thrive at the intersection of art and technology. It’s funny, design work involves a lot of logical thinking and storytelling, which are the two elements that initially made me want to be a lawyer. I just found them in a completely different profession.

Design is such an applied field, where many important lessons can only be learned on the job. With that said, how have your degrees from MIT and Stanford been useful to you?

One of the things I love about design is that people can come into it from nearly any background. Some of the best people I’ve hired have been English majors or didn’t even go to college, which aren’t pedigrees you often find in product organizations at Silicon Valley tech companies. I’ve found that what’s most important for a startup like Medisas, where I currently work, is that a designer knows how to think about a problem deeply and can communicate with a developer. However, I still think formal education is valuable. There are two reasons for this:

The first is that school can teach you how to think. My background is a patchwork of technical (mechanical engineering), human (cultural anthropology), and design (product design). Each field gives you a different way of looking at the world. From engineering, I learned how to solve complicated problems, where you have no earthly idea what a solution looks like—but, just like in design, you have a process, and faith that you’ll be able to muddle your way through. From anthropology, I learned how to think through the ethical and human implications of a product. I draw on these skills when designing something like genetic information for an unborn child, or how to display Do Not Resuscitate information for a patient in a hospital. These are weighty projects that require more than an understanding of color theory or the latest web framework. And finally, the design degree helped me learn how to tell the story of my work, weaving coherence between a problem and a solution. This is an important skill in the workplace, where design can face headwinds from competing business and technical needs.

The second benefit of formal education is that some of the information itself turns out to be surprisingly useful. For example, I took an undergraduate biology class with Eric Lander, a leader of the Human Genome project. Who knew that a few years later, as the lead designer at a genetic testing company, it would be my job to explain to patients how DNA testing works? More recently, for a project at Medisas, I’ve had to dust off my knowledge of chemistry and biology, as I’ve been designing a better way to display lab results to doctors. While you don’t need a technical degree to design in healthcare, it certainly doesn’t hurt.

We’re really excited to have you on our stage this year, and to hear your talk “Making the Right Thing.”  What’s the talk about, and what will people take away from it?

The talk covers two different angles of what the “right” thing is to build. Designers and developers are increasingly being asked to track Key Performance Indicators (KPIs) and defend our work with data and hard numbers. I’ll talk about some of the numbers you can use to track whether a product is succeeding, and ways to figure out which metrics are important for your company.

But being effective isn’t just about solving the needs of your users (or your business team); it’s also about building something that aligns with your personal values. For me, I’ve scratched this itch by working at healthcare companies like Medisas, where I can directly see the impact of my work on human lives. But there are many ways to find connection with your work, both the paid and the volunteer variety. Finding the right thing for you to work on is an important part of building good products.

What are some tools, tricks, and/or techniques you can’t work without?

I’m a big fan of old-fashioned pen and paper for sketching ideas and taking notes. My favorite tools are Pilot fountain pens and unruled Moleskine notebooks. But I’ll happily work all day with a freebie ballpoint pen and a stack of paper I’ve nabbed from the printer near my desk.

When it comes to working out the details of my designs, the prototyping landscape is like the Wild West; the exact mix changes day-to-day as I try out tools like Zeplin, Flinto, and Lingo. Two staples that I couldn’t work without are Sketch and InVision — especially the Craft plugin for Sketch. Both started out pretty basic, but have gotten extremely powerful, and help me bridge the gap between design, the users we get feedback from, and the developers we work with.

What has you most excited these days?

I see a lot of product people fired up about using their work to make a dent in the world. There’s a lot of power that comes from building, and I see people realizing that making the world a better place isn’t just an option, it’s an obligation.

In addition to all the people I know in healthcare, I’ve also met designers working on video platforms as an outlet for helping gay teenagers, engineers working on free SAT prep software for kids who can’t afford paid courses, and so many more stories of people working on projects with social impact. I love it when people solve problems that are important to them, and also relevant to society.

Laura Martini will be an integral part of An Event Apart Boston, May 15-17, 2017. Don’t miss a chance to learn from Laura and eleven other top-notch speakers—register today!

Brad Frost is a web designer, speaker, writer, and consultant living in beautiful Pittsburgh, PA. He’s the author of Atomic Design, and has helped create numerous tools and resources for web designers, including This Is Responsive, Pattern Lab, Styleguides.io, and WTF Mobile Web. We caught up with the busy web wizard to learn more about what makes him tick.

How’d you get your start in design?

I switched my major at James Madison University from Music to a program called Media Arts and Design. The program was half media studies and half hands-on design classes. I had a Dreamweaver class and Flash class, and those were my formal introduction to the magical world of web design.

About two weeks before graduating in 2007, a couple of alumni came in to talk to our class. One said, “If you’re interested in this whole web design thing, you should read Designing With Web Standards by Jeffrey Zeldman.” Since we were in a computer lab, I ordered the book right there and then spent the first few weeks after graduation unemployed and sitting in my sister’s apartment, devouring Jeffrey’s book. The book blew my mind and I wanted more. So I ended up reading a few books about this thing called CSS by this person named Eric Meyer.

I eventually found a company—actually, a small internal marketing agency at a real estate company—that was willing to take a chance on a greenhorn web designer. I spent a year applying the concepts I learned in those web design books until the housing bubble burst and the work dried up. I then moved to New York City, where I worked at a small ecommerce agency for a bunch of fashion brands. I was the only web developer, so I had to learn a whole lot in a short period of time. I definitely burnt myself out, but I learned a ton in the process.

Your book Atomic Design is done and available to the world—congratulations! What was the hardest part of writing it, what about it are you proudest of, and where can people get their hands on a copy?

Thanks! The hardest part of writing the book and the part I’m proudest of are one and the same: I decided to self-publish the book and share the whole project as I was writing it. I took preorders for the eventual e-book and published the latest updates on my site.

I’m super happy with how I went about publishing the book, but it was really challenging managing people’s expectations. I’ve talked to a lot of authors, who all said their book projects often take a year and a half or two years to complete. When the books are finally announced, they’re typically available to order immediately. With my project, I announced the book (and started taking preorders) as soon as I wrote the first words. That means I had to address reader expectations and concerns as I was slogging through the authoring process. People would ask, “When’s the book going to be done???” Even sending them a link to the in-progress manuscript wasn’t enough to appease them. So I’m glad I finally got the book done!

If you want to check it out, it’s available in three flavors: the paperback book, the e-book, and the combination paperback + e-book. And if you want to try before you buy, you can read the whole shebang over on my site.

You’re giving a new talk this year at AEA titled “Let’s Work Together!” What’s it about, and what will people take away from it?

I’ve been fascinated with how teams work together (or don’t work together!). No one works in a vacuum; successful work hinges on how well everyone communicates and collaborates with each other.

My talk is going to explore the methods, tools, and techniques used to help teams do effective work together. I’d like to tackle these things from both an intradisciplinary and interdisciplinary perspective. For instance, what are tools and techniques that front-end developer teams use to make sure they write clean and consistent code together? How do those same front-end developers work with UX and visual designers to ensure that the designs are successfully realized in the browser? And how is that work communicated to non-design/development stakeholders in a way that allows the work to move forward? There are obviously no “correct” answers to these questions, but I’m looking forward to talking about overarching trends and themes that can help teams work more effectively together.

What are some tools, tricks, and/or techniques you can’t work without?

I’m a bit biased, but Pattern Lab is a tool I use on almost every project. I like it because I’m able to create reusable UI patterns, include them within each other, and quickly articulate UIs in a ton of different scenarios by swapping out the dynamic content.

Historically, I’ve received best-case-scenario designs that paint an extremely rosy picture of what a UI could look like. The avatar picture looked like it was clipped from a magazine, the user’s name fit neatly onto one line (even on small screens!), and of course the user filled out every available field in their profile so the screen looks nice and full and balanced.

These best-case scenarios rarely, if ever, occur, so it’s great to be able to quickly articulate what happens when the user fails to upload a profile image, or if their name is crazy long, or any number of other less-than-ideal situations. Pattern Lab makes it easy to show all those variations.

What has you most excited these days?

That’s a good question! I’ve been working a lot and at a pretty strenuous pace for a while now, so I’m excited to try to chill out for a bit. I’m a musician and have been working on getting a recording studio off the ground, so I’m eager to start recording some music. We’ll see how that goes!

But of course I’m still very much jazzed about all the amazing stuff happening in the web community. I’m thrilled to see design systems and style guides take root at more organizations, and I’m delighted to see pattern-based design and development become the norm. I’ve had the good fortune to do workshops and consulting work for a lot of different companies, and I’m eager to continue helping teams with design systems, pattern libraries, atomic design, process and workflow, and web design best practices.  

And of course I’m super excited to be a part of An Event Apart in 2017!

Brad Frost will be an integral part of An Event Apart Boston, May 15-17, 2017. Don’t miss a chance to learn from Brad and eleven other top-notch speakers—register today!