An Event Apart https://aneventapart.com/ en-us Wed, 19 Jun 2019 18:41:55 -0700 Wed, 19 Jun 2019 18:41:55 -0700 “Building More Expressive Products” by Val Head – An Event Apart video https://aneventapart.com/news/post/building-more-expressive-products-by-val-head-aea-video Tue, 11 Jun 2019 08:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/building-more-expressive-products-by-val-head-aea-video The products we design today must connect with customers across different screen sizes, contexts, and even voice or chat interfaces. As such, we create emotional expressiveness in our products not only through visual design and language choices, but also through design details such as how interface elements move, or the way they sound.

In a dynamic 60-minute presentation recorded live at An Event Apart Orlando 2018, Val Head shows how to harness the design details from different media to build overarching themes—themes that persist across all screen sizes and user and interface contexts, creating a bigger emotional impact and connection with your audience.

You’ll learn how to use every tool at your disposal, including audio and animation, to create more expressive products that feel cohesive across all of today’s diverse media and social contexts.

Val Head is a web animation expert, author, and Design Evangelist at Adobe. She’s the author of Designing Interface Animations, published by Rosenfeld Media, and teaches CSS Animation on LinkedIn Learning.

Enjoy all the videos in An Event Apart’s library! There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
Making Motion Inclusive, by Val Head https://aneventapart.com/news/post/making-motion-inclusive-by-val-head Mon, 10 Jun 2019 09:17:00 -0700 Eric Meyer https://aneventapart.com/news/post/making-motion-inclusive-by-val-head It’s a common misconception that things like inclusive design and accessibility only come at the cost of design details like motion, but that’s just not the case. Whether it’s micro-interactions, animated illustrations, or larger animated experiences, a little care and consideration can give your users the best of both worlds.

In a dynamic session at last month’s An Event Apart Boston conference, Adobe Design Advocate Val Head showed us how to build animated interactions with inclusivity in mind. Val shared how to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

If you missed it…

Nothing takes the place of being there, but these resources related to Val’s presentation will help you get up to speed on how to have your inclusive design cake and eat your motion effects, too:

Learn more!

For more about Val, check her An Event Apart biography, subscribe to her UI Animation Newsletter, or read her book, Designing Interface Animations from Rosenfeld Media.

And if you wish you hadn’t missed Making Motion Inclusive, the good news is you have four more chances to see it this year, at An Event Apart shows in Washington DC: July 29–31, Chicago: August 26–28, Denver: October 28–30, and San Francisco: December 9–11.

In addition to Val, all four shows feature 16 other industry-leading speakers. Give us three days, and we’ll fill you in on everything you need to know to up your web game and stay current or ahead of the curve on the rapid-fire changes in this industry. Each show is three days packed with design, code, and content for UX designers and front-end specialists. You’ll come away inspired, and ready to work!

]]>
SVG Filters: The Crash Course with Sara Soueidan https://aneventapart.com/news/post/svg-filters-the-crash-course-with-sara-soueidan Tue, 04 Jun 2019 11:14:00 -0700 admin https://aneventapart.com/news/post/svg-filters-the-crash-course-with-sara-soueidan When it comes to graphical effects, CSS has come a long way in the last few years with the introduction of CSS filters and blend modes. Yet compared to the effects available in editors like Photoshop, CSS still lags a long way behind. SVG, on the other hand, comes with a set of filter primitives that enable you to recreate Photoshop-grade effects in the browser, using just a few lines of code.

In a detail-packed talk at this month’s An Event Apart Boston conference, Sara Soueidan showed us how to do just that. Sara’s first-ever AEA appearance was a tip-filled crash course on SVG filters: why they’re awesome, how they work, and how to use them to create a dazzling range of inspiring and powerful special effects.

While the syntax and attributes of these filters may have seemed intimidating at first, Sara’s natural teaching style helped the designers and developers at AEA quickly grasp how they work—leaving us with plenty of great ideas on how to push the boundaries of what’s possible in our websites.

If you missed it…

While nothing can replace watching Sara in action, these articles can help those who missed her session begin coming to terms with the magical creative possibilities of SVG on today’s web:

Learn more

For more about Sara, check her AEA bio and this nifty interview from a few months ago.

And if you wish you hadn’t missed SVG Filters: The Crash Course, the good news is, you have two more chances to see it: at An Event Apart DC, July 29–31, and An Event Apart San Francisco, December 9–11.

In addition to Sara, both shows feature 16 more industry-leading speakers. Each show is three education-packed days of design, code, and content for UX and front-end specialists. You’ll come away inspired, and ready to get to work.

Don’t miss out!

]]>
Same Bat-Time! Same Bat-Channel! by Mike Essl – An Event Apart video https://aneventapart.com/news/post/same-bat-time-same-bat-channel-by-mike-essl-aea-video Tue, 28 May 2019 08:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/same-bat-time-same-bat-channel-by-mike-essl-aea-video What connects Batman, Wonder Woman, Thomas Edison, Madonna, Bazooka Joe, and Alfred E. Neuman? Is it type? Is it graphic design? Who is Peter Cooper? Find out in this special inspirational presentation by Mike Essl, Dean of The Cooper Union School of Art.

Mike Essl is a graphic designer, educator, and Mr. T memorabilia collector. With over twenty years in the field, Essl’s bold approach has earned him equal acclaim for his elevation of comic books with DC Comics and Rizzoli as for websites with Wikipedia and San Francisco Opera.

At The Chopping Block (co-founded 1996) and on his own, Essl led projects that were featured by the AIGA, ComicCon, the Cooper Hewitt, and MoMA. Essl’s illustrations have been included in the New York Times, New York Magazine, and the Yale University Art Gallery, and his outspoken commentary has been featured on Design Matters with Debbie Millman, The Howard Stern Show, and VH1’s Totally Obsessed. Essl is presently the Dean of the Cooper Union School of Art, where he has been an Associate Professor of graphic design since 2002.

Enjoy all the videos in An Event Apart’s library! There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
Meeting Expectations: A Few Words with Kevin M. Hoffman https://aneventapart.com/news/post/meeting-expectations-a-few-words-with-kevin-m-hoffman Tue, 21 May 2019 08:00:00 -0700 Eric Meyer https://aneventapart.com/news/post/meeting-expectations-a-few-words-with-kevin-m-hoffman Tell us a little about yourself and what you've been doing recently.

I’ve been working in the field of web and application design since 1995, but more recently I’ve been drawn to work in service and product design. I’ve got a lovely collection of titles and business cards—remember those?—which include Webmaster, Director of Communications, UX Director, Founder, and Vice President.

Over the last few months, I’ve been training designers to become better facilitators based on material from my latest book, Meeting Design. I’m very interested in continuing to learn about and explore how we normalize design methods and quality of work for different sized teams and different kinds of organizations. This includes things like emerging practices in design operations and strategies for building agreement on what it means to do great work under the real-world constraints designers face every day.

Common constraints I’ve seen are misunderstandings around what design can/cannot/is supposed to do, confusion about where accountability lies for decision making, and the prioritization, and occasional false correlation, of velocity over direction and clarity—faster doesn’t mean better. Real insights about people are hard earned and our digital behaviors are constantly evolving. Shipping more code more often doesn’t get you ahead of that.

What are some tools you find indispensable to your work?

My number one tool is a whiteboard, or a piece of paper and a pencil. There is not a problem or idea that cannot be more clearly understood by spending a little time sketching it out alone or together. Everything from simple use cases to complex UI choices can be quickly illustrated, discussed, and addressed by visualizing things in a rough fashion. Even the most talented visual designers in the world do some of their best thinking through sketching.

Most of the rest of my work involves talking to people, listening, and writing things down, so I’d be dead in the water without good ways of managing text. I’m a huge fan of Bear Notes for iOS, and use it several times a day for capturing and then easily finding all the cool things I learn from the people I work for and with. I particularly dig how it syncs across devices.

Finally, what’s new and coming up with you?

I’m thrilled to announce that I’ve recently joined the United States Digital Services (USDS) team. I’m going to start by working on digital services and products that serve America’s veterans, working with the Digital Services team at the Veterans Administration (DSVA). If you’ve ever been frustrated dealing with a health insurance claim to get the care you need, just imagine layering on the complexity associated with government processes and policies. I’m excited to contribute to the application of great design and user experience in support of streamlining and innovating services for veterans who have been of great service to American citizens.


See Kevin share his hard-won insights in “What is Design Ops, and Why Do I Care?” at An Event Apart DC (July 29-31, 2019). Don’t miss your chance to see Kevin and sixteen other top-notch speakers!

]]>
“Maintaining Design Systems” by Brad Frost – An Event Apart video https://aneventapart.com/news/post/maintaining-design-systems-by-brad-frost-aea-video Tue, 14 May 2019 11:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/maintaining-design-systems-by-brad-frost-aea-video By now, ’most every in-house team has some form of design system initiative underway. Yet many designers and developers on those teams still struggle to make the system really take root in their organization. Working together, designers and developers create wonderful, reusable components, tools, guidelines, and documentation. But if those elements don’t reflect the reality of how the organization builds its products, all their effort is for naught.

Having spent years creating, evangelizing, and teaching design systems and corporate integration of same, Brad Frost is here to help. In this 60-minute presentation from An Event Apart Orlando 2018, he shares strategies and methods to ensure that your design system stands the test of time. You’ll learn how to keep your system and the products it serves in sync, and you'll understand how to maintain and evolve your design system to give your users get the best possible experience.

Brad Frost is a web designer, speaker, writer, and consultant located in beautiful Pittsburgh, PA. He’s passionate about creating web experiences that look and function beautifully on a never-ending stream of connected devices, and loves helping organizations do the same. He’s the author of Atomic Design, and has also helped create several tools and resources for web designers, including This Is Responsive, Pattern Lab, and Styleguides.io.

Enjoy all the videos in An Event Apart’s library! There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
Articles, Links, and Tools From An Event Apart Boston 2019 https://aneventapart.com/news/post/resources-from-boston-2019 Sun, 05 May 2019 06:00:00 -0700 Eric Meyer https://aneventapart.com/news/post/resources-from-boston-2019 Jeffrey Zeldman

Mina Markham

Art Direction, Design & Creativity

Progressive

Localized

Cross-Functional

Inclusive

Systematic

Val Head

Eric Meyer

Rachel Andrew

The code examples can be found in this CodePen Collection.

Flexbox

Sizing

Logical Properties and Values

Scroll Snap

Subgrid (Grid Level 2)

Paged Media

Multicol

Fragmentation

Regions

Exclusions

Jen Simmons

Jason Pamental

Code

The following code examples from the presentation can be tried out live.

Sara Soueidan

The following series of articles is basically the talk written down in more depth:

More resources that I used to learn SVG Filters and find inspiration from:

Sarah Parmenter

Tools I use that are relevant to this work:

Dan Mall

Michael Austin Sui

Marcy Sutton

Jason Grigsby

Web form best practices

Sign-up and login

Checkout and payment

Autofill

Gerry McGovern

]]>
“Why Design Systems Fail” by Una Kravets https://aneventapart.com/news/post/why-design-systems-fail-by-una-kravets Tue, 30 Apr 2019 08:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/why-design-systems-fail-by-una-kravets Design systems are hot right now, and for good reason. They support a modular approach to building a product, promote organizational unity, and ensure stability via reusable code snippets and utility styles. They make prototyping a breeze, and provide a common language for both designers and developers. But sometimes design systems are underutilized within organizations. Why is that, when they’re so darn useful?

In this 60-minute presentation from An Event Apart Orlando 2018, Una Kravets draws on years of experience to explore what makes design systems successful, analyze real examples of success and failure, and show how to make sure your design system has the building blocks it needs to grow into a successful product.

Una Kravets is a Developer Advocate at Google. She’s also a technical writer, and has written for A List Apart, Smashing Magazine, and Sitepoint. Una co-hosts the Toolsday podcast, started both the Washington DC and Austin Sass Meetups, and is involved in the open source community as a design advocate and the maintainer of the CSSgram project.

Enjoy all the videos in An Event Apart’s library! There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
The Survey for Web & UX Professionals https://aneventapart.com/news/post/the-survey-for-web-ux-professionals Wed, 24 Apr 2019 10:00:00 -0700 Eric Meyer https://aneventapart.com/news/post/the-survey-for-web-ux-professionals Attention, front-enders and UX-ers. Listen up, designers and coders, writers and strategists. The wait is over: it’s time to take this year’s Survey for Web and UX Professionals—brought to you, as always, by An Event Apart and A List Apart.

Whether you spend your day in Coda or Sketch, in Google Docs or Slack, or in some combination of all the above and more, we want to hear from you. By filling out our brief survey, you’ll be helping let the world know exactly who makes the websites and apps that consume so much of our world’s attention.

We’ve been publishing this survey (with a few years off here and there) since 2007. Back then we called it “the survey for people who make websites.” Also back then, we were largely unseen. Oh, people had heard of Mark Zuckerberg, but nobody really knew who the people doing the day-to-day work were. Over the past decade-plus, through surveys like ours and others, that picture became more clear.

This year’s survey begins at surveyapart.survey.fm/ala-survey-2019. It’s simpler and more streamlined than the surveys of years past, and should take only a few minutes to complete. Please fill it out, and please ask your friends and colleagues to do the same. The more of us who share our experience, quirks, beliefs, and preferences, the better this industry will know itself. So please spread the word far and wide, using the hashtag #WebProSurvey (if hashtagging is your thing). We thank you for your time and all you do for the industry!

]]>
Taking the Long View: A Few Words With Marcy Sutton https://aneventapart.com/news/post/taking-the-long-view-marcy-sutton Tue, 23 Apr 2019 08:14:00 -0700 Eric Meyer https://aneventapart.com/news/post/taking-the-long-view-marcy-sutton Hey, Marcy! Tell us a little bit about you.

I have a background in photojournalism and web design, and after struggling to get a job I pivoted into web development back in 2007. After working as a mainstream web developer at an agency, I became hooked on digital accessibility and steadily grew closer to the action until I worked on accessibility testing tools full time. In January of this year, I pivoted again and joined a new team as the Head of Learning at Gatsby, a web development startup with a great community. I’m really enjoying bringing an accessibility focus to such a high-impact project!

In my free time I love to cook, snowboard, hike, and ride bicycles, and I very recently started kayaking. My dog and cat frequently make me laugh and it’s amazing I get ever anything done with them around.

Congratulations on the new position! What will you be doing at Gatsby?

My job is to lead the learning experience and own the docs, making sure that users of all skill levels feel welcome and empowered to create Gatsby sites. Before joining, I'd recently redesigned and developed my website with Gatsby, as I was drawn to its method of building static HTML pages that rehydrate with React.js, with great defaults for performance and accessibility. Getting to work on such a big open source project full-time got me really excited, so I jumped at the chance! Themes are a big new feature that I anticipate will have an impact on the web soon, and I look forward to keeping an accessibility focus in the ecosystem.

What are some tools you find indispensable in your work?

I use color contrast tools a lot: the contrast ratio color picker in the Chrome devtools for web things, and the Color Contrast Analyzer from Paciello Group for sampling colors from PDFs, images and other things I can’t analyze in the browser.

Along with the Accessibility Inspectors in Chrome, Firefox and Safari, I regularly use the axe Chrome extension for testing webpage accessibility. I use Voiceover on the Mac, as well as a Windows virtual machine for testing with the JAWS and NVDA screen readers. This also enables me to test my CSS in Windows High Contrast Mode–which has a nifty media query that is in the process of being standardized for other browsers!

And you’re talking about CSS and accessibility at AEA. Does that come out of the work you’ve been doing?

Some of my work on Gatsby will apply to my talk; specifically, improving workflows for users who don’t exactly love CSS-in-JS or workflows outside of the thoroughly-documented “happy path.” There is some tension in the web development community over inclusive tooling, and as someone who cares deeply about accessibility, HTML and CSS as well as JavaScript, I feel right in the middle of that. I’m grateful for the opportunity to act as a bridge between communities, and hope to inspire people to do their best work in ways that they enjoy the most.


See Marcy’s talk “Emerging CSS Techniques and What They Mean for Accessibility” at An Event Apart Boston (May 5-7, 2019) and Chicago (August 26-28). Don’t miss your chance to see Marcy and sixteen other expert speakers!

]]>
“Tech Humanism: Data, Meaning, and Human Experience” by Kate O’Neill https://aneventapart.com/news/post/tech-humanism-data-meaning-and-human-experience-by-kate-oneill Tue, 16 Apr 2019 08:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/tech-humanism-data-meaning-and-human-experience-by-kate-oneill With so much emphasis in business on artificial intelligence, automation of various kinds, and digital transformation, the future of human work — and even humanity itself — can feel uncertain. What should a truly integrated human experience look and feel like?

In this 60-minute presentation from An Event Apart Orlando 2018, “Tech Humanist” Kate O’Neill presents the case for why the future of humanity is in creating more meaningful, dimensional, and integrated experiences, and shows how emerging technologies like chatbots, wearables, IoT devices, and more can be included in this kind of human-centric design.

Kate O’Neill is an executive consultant, keynote speaker, and author who advises corporate and cultural leaders on hot to take a human-centric approach to digital transformation. Her latest book, Pixels and Place: Connecting Human Experience Across Physical and Digital Spaces, launched in late 2016.

Enjoy all the free videos in An Event Apart's library. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
Talking Type and Tools with Jason Pamental https://aneventapart.com/news/post/talking-type-and-tools-with-jason-pamental Tue, 09 Apr 2019 10:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/talking-type-and-tools-with-jason-pamental Jason Pamental is a typography expert and consultant based near Providence, RI, where he thinks deeply about web typography and takes his dogs Tristan and Tillie for long walks. The author of Responsive Typography, he’s also written articles for publications and for the Mozilla Developer Network, and in a past position built the first live-text race commentary application for the America’s Cup in 2003. We managed to catch up with him and the pups to ask a few questions.

Hey, Jason! Tell us a little bit about yourself.

I’ve worked on the web since about 1994 doing all sorts of different design and development things, gradually moving more into leading teams at agencies, working with clients on their digital strategy, and getting very nerdy about web typography. I just love the intersection of how a typeface can make us feel, how it can influence how we read, and how it impacts our experience based on how it has been technically implemented in a site or application. Each aspect impacts all the others, making it a super interesting challenge. So last year I quit the agency where I was working to see if I can focus more on typography and helping organizations and teams put it into practice better.

Oh, nice. How has that been going?

Over the past few months I’ve been working with the Digital Services team for the State of Georgia, designing and helping implement a whole new typographic and design system for their new web platform. They let me go all-in on everything I’ve talked about over the years: dynamic typographic scale using variable fonts and fallback font “tuning” and font loading management, all set up progressively enhancing based on browser capabilities. Older browsers get static web fonts, newer ones get variable fonts. I’m super proud of it, and excited to see what Lullabot, the development partner on the project, does with all the stuff we put together. They’ve been really amazing to work with on the project.

I’ve also had some really exciting developments in getting involved with a couple other organizations. I’ve been elected to the board of ATypI, the Association Typographique International, and hope to use that association to help develop typography curriculum for digital design programs. And more recently I’ve been accepted as an Invited Expert on the W3C’s Web Fonts Working Group, where we’re working on a new specification that could fundamentally change how fonts are served on the web. I really can’t believe I get to be even a small part of that. It’s incredibly exciting.

I’ve also started an email newsletter where I’m sending out a new tip every week. Each one will have a bit of history into the typographic/design origins, examples from print and how you would do it in HTML & CSS. Reception has been great so far, and I’m excited to see that community grow this year.

What are some tools that you’ve found indispensible to your work?

It’s been an interesting turn since AEA Orlando last year: I completely rewrote my talk in HTML & CSS, so one of the standby tools for speaking changed completely! I used to do everything in Keynote. So:

  • A code editor like Coda or VS Code — I’ve been trying to switch over to VS Code, but habits are hard! I want to keep at it because the flexibility and configurability of VS Code is fantastic for both general work and also for projecting during workshops and talks.
  • Browsers — I switched to Firefox as my default this year, and its font dev tools are amazing.
  • Sketch, Photoshop, and Illustrator still get lots of use, but mainly in a supporting role—mainly for creating artwork, illustrations, and a much more limited number of style tiles and comps.
  • I still do a lot of my writing in Evernote. I love the cross-device/platform ability to read and edit, and it’s got years of notes, articles, references, bios, talk descriptions—you name it.
  • Probably the most significant addition to my toolbox over the past year: adding CodePen. I’ve used it to publish an essay showcasing Monotype’s first variable font (FF Meta), to collaborate on demos for TypeNetwork, to prototype the examples I used in writing the Variable Fonts Guide on the Mozilla Developer Network, and most recently to host all of the code examples in my newsletter.

I like that all of these things come together: talking about web typography and showing it live in the browser on stage was (albeit somewhat terrifying) the best decision I’ve ever made. It just feels right. So expect more of that to come this year!

We do! And speaking of talks, what do you have planned for AEA this year?

I’ve always felt there were three audiences that I’m talking to when I speak about web typography, and I honestly don’t want to leave any of them behind. There are trained designers who have studied typography but don’t know how much of it they can practice on the web; web/UX/UI designers who often have no formal typographic education; and developers who are tasked with implementing typography and fonts, rarely with a strong grounding in why they’re being asked to do so.

They all need to be able to connect the “why” and the “how.” I want people to come away inspired, with a little more grounding in what happens outside their own personal area of responsibility, and how to talk to their colleagues about what they are trying to accomplish. In truth, the developers are a really important part of the equation. They make design decisions in the process of coding up the front end all the time. I want them to have a good grounding in what makes typography work, so they’re better equipped to fill in the gaps between comps.

This year I’m going to be pushing the boundaries a bit both conceptually and technically, so I’ll be asking a bit more of the audience in following along—but I think it’s really important to “teach just past the smartest student in the class,” as my friend Mitch Goldstein puts it. That way everyone leaves with not only a vision of what typography can bring to their design, but a concrete way to get there.


See Jason talk type in “Dynamic Typographic Systems and Variable Fonts: Scalable, Fast, and Fabulous” at An Event Apart Boston (May 5-7, 2019), Chicago (August 26-28), and Denver (October 28-30). Don’t miss your chance to see Jason and sixteen other top-notch speakers!

]]>
“Everything You Know About Web Design Just Changed” by Jen Simmons https://aneventapart.com/news/post/everything-you-know-about-web-design-just-changed-by-jen-simmons Tue, 02 Apr 2019 10:00:00 -0700 Eric Meyer https://aneventapart.com/news/post/everything-you-know-about-web-design-just-changed-by-jen-simmons We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen Simmons will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.

Jen Simmons is a Designer and Developer Advocate at Mozilla, where she advocates for web standards and researches the coming revolution in graphic design on the web. She is the creator of Layout Land and Jen Simmons Labs and the host and executive producer of The Web Ahead, winner of the 2015 Net Award for Podcast of the Year. Jen launched her first client website in 1998; her clients include CERN, the W3C, Google, Drupal, Temple University, and the Annenberg Foundation.

Enjoy all the videos in An Event Apart’s library. There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
The Animated Future: A Few Words with Sarah Drasner https://aneventapart.com/news/post/the-animated-future-a-few-words-with-sarah-drasner Tue, 26 Mar 2019 08:35:00 -0700 Eric Meyer https://aneventapart.com/news/post/the-animated-future-a-few-words-with-sarah-drasner Sarah Drasner is a core member of the Vue team, Lead of Emerging Markets with the Cloud Advocates team at Microsoft, and an inveterate pusher of the boundaries of the web with experiments and techniques like those found in her CodePen Public Pens, her GitHub account, and her articles at CSS-Tricks. We chatted with her for a few minutes between projects.

What motivates you to keep doing everything you do?

I have been passionate about the web and building weird projects on it for about 14 years. I’m a naturally curious person, so my projects range from SVG, three.js, and d3.js, to Serverless, Vue, Node, performance, you name it. I’m basically a web dev puppy. These days, at Microsoft, I get to do fun stuff with Azure Functions and Cognitive Services—that is, machine learning. For example, I have one that generates alt text from images, attempting to both what they are and capture any text inside the image, like there will be in most memes.

Besides the great stuff you’ve personally created, what are some tools you can’t live without?

  • For building applications, I really adore Vue and using Nuxt to get easy server-side rendering, page transitions, and routing.
  • In terms of animation tooling, my go-to is GreenSock because it is extremely intuitive and since they’ve been working on it for a decade, there are so many plugins, utilities, and finite offerings that other libraries haven’t thought of.
  • I typically still use CSS animations and transitions for smaller interactions, and have had so much fun lately playing with the combination of three.js and requestAnimationFrame for more immersive, exploratory experiences on the web.
  • For data visualizations, I love d3.js. It’s the Swiss Army knife of visualization tools, capable of so many different kinds of rendering, and domain/range capabilities.

I’ve also been super interested in combining CSS grid and flexbox to build interesting web layouts, though I’m no Rachel Andrew, Jen Simmons, or Mina Markham. [But really, who is? –Ed.]

What do you see coming in web animation?

There’s so much that the web is capable of! For example, at An Event Apart, I have a talk about the Future of Animation, and I’m so excited to give it! Usually I talk about foundational material when it comes to animation, but I think people are ready to go to the next level. Although we’ll be exploring quite a bit of code, my talk is for designers and developers alike. I’m covering what we can look forward to in the future, from teaching utility to accessibility, mesmerizing experiences that push the boundaries of what humans can create and build. It’s gonna be fun!


Catch Sarah’s talk “Animation on the Bleeding Edge” at An Event Apart Washington DC (July 29-31, 2019) and Denver (October 28-30). Don’t miss your chance to see Sarah and sixteen other world-class speakers!

]]>
“Fit For Purpose: Making Sense of the New CSS” by Eric Meyer https://aneventapart.com/news/post/fit-for-purpose-making-sense-of-the-new-css-by-eric-meyer Tue, 19 Mar 2019 08:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/fit-for-purpose-making-sense-of-the-new-css-by-eric-meyer If 2017 was the year of new CSS capabilities, 2018 was the year of trying to figure out what to do with them all. When should boxes flex, and when should they be gridded? What are the best ways to manage your team’s approach to all these new powers? What’s ready for production, and what’s useful in the shop?

In this hour-long talk, Eric Meyer turns his experienced eye for CSS on the new technologies that emerged in 2018 and explores different ways of using and thinking about them. Whether you’re new to the game or an old hand, there will be something for you to ponder, something to put to use, and something to illuminate.

Eric Meyer is an internationally recognized expert on the subjects of HTML, CSS, and web standards, and the author of Design For Real Life (A Book Apart), Cascading Style Sheets: The Definitive Guide, 4th Edition (O’Reilly & Associates), Smashing CSS (Wiley), Eric Meyer on CSS and More Eric Meyer on CSS (New Riders), CSS2.0 Programmer’s Reference (Osborne/McGraw-Hill), and CSS Web Site Design (Peachpit), as well as numerous articles for A List Apart, CSS-Tricks, Net Magazine, Netscape DevEdge, UX Booth, UX Matters, the O’Reilly Network, Web Techniques, and Web Review.

Enjoy all the videos in An Event Apart’s library. There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
Hangin’ Ten with Scott Jehl https://aneventapart.com/news/post/hangin-ten-with-scott-jehl Tue, 12 Mar 2019 10:30:00 -0700 Eric Meyer https://aneventapart.com/news/post/hangin-ten-with-scott-jehl Originally from New Hampshire, though these days he’s encamped on the sunny Gulf coast of Florida where he likes to spend his time outside surfing, skateboarding, and playing at the beach with his wife and kids, Scott Jehl has been a part of the Filament Group for the past 12 years as a web design and developer.

Hey, Scott! Tell us a little about Filament Group. A lot of us use the tools and resources that have spun out of Filament, but most of us don’t know anything about where they all come from.

Filament is an agency that does work for a variety of clients across industries from news media, to big retail, to financial tools, to workforce management. We’ve been based in Boston since the start, but our entire team is distributed around the US. We truly value and prioritize Research & Development and Open Source time, which I think is awesome – not only because it allows us keep aware of new and appropriate practices for our clients, but also because it keeps my daily work interesting, and gives me an opportunity to share what I learn at conferences like An Event Apart.

To help with coding, we use and maintain a number of snippets that help me organize and optimize page delivery. For example, tools like loadCSS for loading non-critical CSS files asynchronously, loadJS for conditionally loading asynchronous scripts, and criticalCSS for identifying and isolating the CSS most critical to initial page rendering. These are just some of Filament's projects that help us deliver page assets in a prioritized manner, so the important parts arrive and render as instantly as possible. We also maintain UI components for carousels and menus and such that aim to give us design flexibility while remaining accessible for folks with using assistive technologies.

Besides the great stuff Filament has created, what are some tools you can’t live without?

As far as tools go, I think my preferences are pretty standard among web folks today.

  • A text editor — most any will do, but lately, I have been enjoying Atom, particularly for all of the great extensions available for it.
  • Sketch — We use Photoshop and Illustrator frequently as well, but more and more I’ve found myself in Sketch these days as it seems to lower the barriers in bringing designs into code.
  • Firefox devtools — Browser devtools are quite comparable these days but I prefer Firefox for browsing and have grown most accustomed to its devtools as a result.
  • Webpagetest.org — This tool is just incredible for testing a site’s performance and reliability. You an choose to test any URL from a range of worldwide locations, devices, browsers, and connection speeds and receive great detailed information on how a page loads in those conditions.
  • Browserstack.com — For testing a site in real-time on a range of devices and browsers, browserstack is amazing. It really helps us refine our interaction design across different contexts, and it has nearly replaced our need for physical testing devices.
  • Github — All of our code and discussion around it lives on Github.
  • Our in-house Continuous Integration system — we have tools that deploy live, linkable versions of every branch of our projects every time we commit changes. It really helps us collaborate and test ideas quickly.
  • Slack — Filament’s team of six is 100% remote, so real-time communication is a must.

What’s been keeping you interested of late, and what’s next?

In the past several years, I’ve been focused on the intersection of web page performance, responsive design, and accessibility, which I find are all quite complimentary to one another. This means I’ve spent a great deal of time finding tools and practices that make our sites sustainable and resilient to various browsing conditions and rapidly changing times.

Recently, I’ve been examining the common conflicts that teams face when trying to prioritize performance and access, and looking for ways that they can satisfy other priorities without compromising on their service's potential. In fact, I plan to talk at An Event Apart about a mix of performance-minded techniques we should prioritize, and common challenges that teams face when trying to implement those techniques. The session will definitely feature code examples, but it will also speak to the “why” of those code examples, so non-developers will gain an understanding of the benefits these practices bring to the business and user alike.


See Scott present “Move Fast and Don't Break Things” at An Event Apart Chicago (August 26-28, 2019). Don’t miss your chance to see Scott and sixteen other world-class speakers!

]]>
Music to Learn UX & Front-End By https://aneventapart.com/news/post/music-to-learn-ux-front-end-by Thu, 07 Mar 2019 10:30:00 -0800 Eric Meyer https://aneventapart.com/news/post/music-to-learn-ux-front-end-by Another year, another An Event Apart playlist! AEA 2019 offers a winsome and energetic blend of the popular and the obscure, the bouncy and the boomy, with something for nearly every listening taste.

World music and deep crate revivifications punctuate a pulse built on hip hop, indie, pop, punk, R&B, and soul. It has unexpected transitions to keep things interesting, with enough that’s beloved and familiar to keep you smiling between mind-expanding talks from the industry shakers and shapers on our stage. You’ll leave An Event Apart humming as well as informed, excited, and raring to return to work.

If you’re attending An Event Apart in 2019 and want to get in the mood early, head over to Spotify and have a listen!

]]>
“Graduating to Grid” by Rachel Andrew https://aneventapart.com/news/post/graduating-to-grid-by-rachel-andrew Tue, 05 Mar 2019 10:30:00 -0800 Eric Meyer https://aneventapart.com/news/post/graduating-to-grid-by-rachel-andrew When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Orlando: Special Edition, Rachel Andrew looks back at what went right or wrong in these first few months, and offers help to those struggling to transition away from legacy methods.

In a practical, example-packed hour, Rachel helps give you the confidence and practical skills to fully embrace Grid layout. She compares common framework patterns to new Grid code, and teaches how to create a workflow that is right up to date—a workflow grounded in new CSS, yet able to care for old browsers and ensure a good experience for their users.

Developer, author, and entrepreneur Rachel Andrew is one half of edgeofmyseat.com, the company behind Perch CMS and Notist. She’s an Invited Expert to the W3C on the CSS Working Group, a Google Developer Expert, and the Editor-in-Chief of Smashing Magazine. Her books include the recent Get Ready for CSS Grid Layout and HTML5 for Web Designers, Second Edition.

Enjoy all the videos in An Event Apart’s library. There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

]]>
Articles, Links, and Tools From An Event Apart Seattle 2019 https://aneventapart.com/news/post/resources-from-seattle-2019 Sun, 03 Mar 2019 09:00:00 -0800 Eric Meyer https://aneventapart.com/news/post/resources-from-seattle-2019 Jeffrey Zeldman

Margot Bloomstein

Sarah Parmenter

Tools I use that are relevant to this work:

Eric Meyer

Rachel Andrew

The code examples can be found in this CodePen Collection.

Flexbox

Sizing

Logical Properties and Values

Scroll Snap

Subgrid (Grid Level 2)

Paged Media

Multicol

Fragmentation

Regions

Exclusions

Jen Simmons

Chris Coyier

ShopTalk Show's How To Think Like a Front-End Developer Series

Dribbble Shots from our How To Think Like a Front-End Developer Series

Related CSS-Tricks Articles/Videos I've Done:

Una Kravets

Scott Jehl

Luke Wroblewski

Device Numbers

Device Usage

Performance

App Data

Churn/Retention

Push Notifications

Onboarding

Digital Transitions

Beth Dean

Bibliography

Ridesharing effects

Media and politics

Home sharing and rent

Health insurance and fitness tracking

Urban planning

The Cobra Effect

Dan Mall

Jeremy Keith

Books

Sites

Progressive Web Apps

Sarah Drasner

Page Transitions

Responsive 3d

Biofeedback

Val Head

Gerry McGovern

]]>
A Few Words With Sara Soueidan https://aneventapart.com/news/post/a-few-words-with-sara-soueidan Tue, 26 Feb 2019 08:30:00 -0800 Eric Meyer https://aneventapart.com/news/post/a-few-words-with-sara-soueidan Sara Soueidan is a freelance front-end developer and trainer based in Lebanon. She specializes in creating modern front-end foundations with focus on semantics, modern CSS, SVG, responsive design and accessibility. She’s worked with clients including Provata Health and Smashing Magazine, and conducted workshops for (among others) Netflix, TELUS Digital, and the Royal Schiphol Group. In between client projects, Sara writes articles on all things front-end for magazines including Codrops, A List Apart, Smashing Magazine, CSS-Tricks, and more, and will be joining An Event Apart for the first time in 2019.

Tell us a little about what you’ve got going on, Sara.

This year I'm helping a client modernize their front-end architecture and code by creating a library of reusable, accessible UI patterns for their growing product, using the latest techniques in front-end. In between sessions of work, I’m preparing a new accessibility-focused workshop that I’ll be running at a few of events this year, in addition to a series of articles, and a couple of exciting personal projects that I look forward to sharing with everyone by the end of the year.

What tools do you rely on to help you do what you do?

I have a few indispensable tools in my toolkit that I have grown to depend on in my work.

In addition to the classical code editor and browser, I’ve started introducing more accessibility auditing tools into my workflow for accessibility testing.

While I already use VoiceOver on my Mac and the keyboard for testing, I have come to depend a lot on Chrome’s accessibility extensions. The aXe extension combined with Chrome's Accessibility Developer Tools are excellent for doing quick accessibility auditing. They provide me with a clear overview of the state of accessibility of my UI components and suggest any changes or fixes whenever and wherever needed. They are also an excellent high-five and shoulder pat when they report full accessibility success.

For most of my CSS work, and especially CSS layout and fonts, I rely heavily on Firefox’s excellent developer tools. The Flexbox and Grid Inspectors allow you to inspect, examine, debug and modify layout and more. The Fonts editor is also designed to examine variable fonts—also one of CSS’s most exciting new features. These devtools are indispensable for my daily CSS work.

I’ve come to love Sketch for basic UI and component design. I usually team up with my clients’ teams to work on their projects, and most of my clients’ designers use Sketch as the primary design tool. In an attempt to bridge the gap more between my work and theirs, I’ve recently started taking courses all about using Sketch for creating Web interfaces and design systems. This might also allow me to provide similar services to my clients in the future, which is something I look forward to.

I use SVG images a lot in my work for iconography and illustrations and other UI elements. For optimizing the SVG files, I use the SVGO GUI—a simple drag-and-drop window which I use to optimize the icons and images before embedding them in my components.

Productivity-wise, Notion has proven to be an extremely useful tool that is steadily gaining popularity. I use it to draft articles, brainstorm ideas, take learning notes, plan client and personal projects, and more.

We hope your talk at An Event Apart is somewhere in there!

Absolutely! SVG is one of my favorite tools of the trade, and as part of my daily work, I’m also giving a talk all about the powerful format that they are. In it, I’m going to shine the light on one of the Web Platform’s most powerful features: SVG Filters, which are so powerful they can be used to create Photoshop-grade effects in the browser, using a few lines of code.

The talk will include a lot of code, but it has a perfect balance with design as well. We will be doing comparisons and we will see how we can recreate particular Photoshop effects using SVG, step-by-step. Probably the main takeaway, in addition to a lot of inspiration, will be a clear understanding of how SVG filters work, and how you can start using them and experimenting with them to create more portable and flexible graphical effects without resorting to graphics editors.


See Sara’s talk “SVG Filters: The Crash Course” at An Event Apart Boston (May 5-7), Washington DC (July 29-31), and San Francisco (December 9-11). Don't miss your chance to learn from Sara and sixteen other world-class speakers!

]]>