An Event Apart https://aneventapart.com/ en-us Mon, 22 Apr 2019 17:44:44 -0700 Mon, 22 Apr 2019 17:44:44 -0700 “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!

]]>
“Scenario-Driven Design Systems” by Yesenia Perez-Cruz—An Event Apart video https://aneventapart.com/news/post/scenario-driven-design-systems-by-yesenia-perez-cruz-aea-video Tue, 19 Feb 2019 12:02:00 -0800 Eric Meyer https://aneventapart.com/news/post/scenario-driven-design-systems-by-yesenia-perez-cruz-aea-video Design systems aren’t new, but they’ve become incredibly popular in the past few years. They’re essential to building, maintaining, scaling, and evolving our sites and products, but creating a unified system that scales to serve a variety of content and use cases can be challenging. In this hour-long talk filmed live at AEA Orlando 2018, Yesenia Perez-Cruz shares insights from her experience creating a unified design system for eight media brands with eight distinct editorial strategies. See how to approach a design system via a user-centered lens, and learn how being scenario-driven helps you create a scalable design system that responds flexibly to specific contexts.

Yesenia Perez-Cruz is a design director at Vox Media, where she works on the on-platform user experience and design system of The Verge, Vox, SB Nation, Eater, Polygon, Racked, Curbed, and Recode. Earlier in her storied career, she created beautiful, functional design systems for clients like MTV, BBVA Compass, Papa John’s, and Harvard University while at Happy Cog and Intuitive Company, and helped clients improve site performance via asset budgets.

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.

]]>
Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need https://aneventapart.com/news/post/paint-the-picture-not-the-frame-how-browsers-provide-everything-users-need Tue, 19 Feb 2019 06:56:00 -0800 admin https://aneventapart.com/news/post/paint-the-picture-not-the-frame-how-browsers-provide-everything-users-need By Eric Bailey

Each month, A List Apart’s editors select an article An Event Apart attendees shouldn’t miss, and we share it here. Enjoy this month’s essential reading!—Ed.

Kip Williams, professor of psychology sciences at Purdue University, conducted a fascinating experiment called “cyberball.” In his experiment, a test subject and two other participants played a computer game of catch. At a predetermined time, the test subject was excluded from the game, forcing them to only observe as the clock ran down.

From the cyberball game, three outlined figures playing catch. Player 1 is mid-throw to Player 3.

The experience showed increases in self-reported levels of anger and sadness, as well as lowering levels of the four needs. The digital version of the experiment created results that matched the results of the original physical one, meaning that these feelings occurred regardless of context.

After the game was concluded, the test subject was told that the other participants were robots, not other human participants. Interestingly, the reveal of automated competitors did not lessen the negative feelings reported. In fact, it increased feelings of anger, while also decreasing participants’ sense of willpower and/or self-regulation.

In other words: people who feel they are rejected by a digital system will feel hurt and have their sense of autonomy reduced, even when they believe there isn’t another human directly responsible.

So, what does this have to with browsers?

Every adjustment to the appearance and behavior of the features browsers let you manipulate is a roll of the dice, gambling on the delight of some at the expense of alienating others.

When using a browser to navigate the web, there’s a lot of sameness, until there isn't. Most of the time we’re hopping from page-to-page and site-to-site, clicking links, pressing buttons, watching videos, filling out forms, writing messages, etc. But every once in awhile we stumble across something new and novel that makes us pause to figure out what’s going on.

Every website and web app is its own self-contained experience, with its own ideas of how things should look and behave. Some are closer to others, but each one requires learning how to operate the interface to a certain degree.

Some browsers can also have parts of their functionality and appearance altered, meaning that as with websites, there can be unexpected discrepancies. We’ll unpack some of the nuance behind some of these features, and more importantly, why most of them are better off left alone.

Scroll-to-top

All the major desktop browsers allow you to hit the Home key on the keyboard to jump to the top of the page. Some scrollbar implementations allow you to click on the top of the scrollbar area to do the same. Some browsers allow you to type Command+Up (macOS) / Ctrl+Up (Windows), as well. People who use assistive technology like screen readers can use things like banner landmarks to navigate the same way (provided they are correctly declared in the site’s HTML).

However, not every device has an easily discoverable way to invoke this functionality: many laptops don’t have a Home key on their keyboard. The tap-the-clock-to-jump-to-the-top functionality on iOS is difficult to discover, and can be surprising and frustrating if accidentally activated. You need specialized browser extensions to recreate screen reader landmark navigation techniques.

One commonly implemented UI solution for longer pages is the scroll-to-top button. It’s often fixed to the bottom-right corner of the screen. Activating this control will take the user to the top of the page, regardless of how far down they’ve scrolled.

If your site features a large amount of content per page, it may be worth investigating this UI pattern. Try looking at analytics and/or conducting user tests to see where and how often this feature is used. The caveat being if it’s used too often, it might be worth taking a long, hard look at your information architecture and content strategy.

Three things I like about the scroll-to-top pattern are:

  • Its functionality is pretty obvious (especially if properly labeled).
  • Provided it is designed well, it can provide a decent-sized touch target in a thumb-friendly area. For motor control considerations, its touch target can be superior to narrow scroll or status bars, which can make for frustratingly small targets to hit.
  • It does not alter or remove existing scroll behavior, augmenting it instead. If somebody is used to one way of scrolling to the top, you’re not overriding it or interrupting it.

If you’re implementing this sort of functionality, I have four requests to help make the experience work for everyone (I find the Smooth Scroll library to be a helpful starting place):

  • Honor user requests for reduced motion. The dramatic scrolling effect of whipping from the bottom of the page to the top may be a vestibular trigger, a situation where the system that controls your body’s sense of physical position and orientation in the world is disrupted, causing things like headaches, nausea, vertigo, migraines, and hearing loss.
  • Ensure keyboard focus is moved to the top of the document, mirroring what occurs visually. Applying this practice will improve all users’ experiences. Otherwise, hitting Tab after scrolling to the top would send the user down to the first interactive element that follows where the focus had been before they activated the scroll button.
  • Ensure the button does not make other content unusable by obscuring it. Be sure to account for when the browser is in a zoomed-in state, not just in its default state.
  • Be mindful of other fixed-position elements. I’ve seen my fair share of websites that also have a chatbot or floating action button competing to live in the same space.
A red chat icon overlaps with a corner of the scroll to top icon, obscuring a portion of the arrow.

Scrollbars

If you’re old enough to remember, it was once considered fashionable to style your website scrollbars. Internet Explorer allowed this customization via a series of vendor-specific properties. At best, they looked great! If the designer and developer were both skilled and detail-oriented, you’d get something that looked like a natural extension of the rest of the website.

However, the stakes for a quality design were pretty high: scrollbars are part of an application’s interface, not a website’s. In inclusive design, it’s part of what we call external consistency. External consistency is the idea that an object’s functionality is informed and reinforced by similar implementations elsewhere. It’s why you can flip a wall switch in most houses and be guaranteed the lights come on instead of flushing the toilet.

While scrollbars have some minor visual differences between operating systems (and operating system versions), they’re consistent externally in function. Scrollbars are also consistent internally, in that every window and program on the OS that requires scrolling has the same scrollbar treatment.

If you customize your website's scrollbar colors, for less technologically literate people, yet another aspect of the interface has changed without warning or instruction on how to change it back. If the user is already confused about how things on the screen work, it’s one less familiar thing for them to cling to as stable and reliable.

You might be rolling your eyes reading this, but I’d ask you to check out this incredible article by Jennifer Morrow instead. In it, she describes conducting a guerilla user test at a mall, only to have the session completely derailed when she discovers someone who has never used a computer before.

What she discovers is as important as it is shocking. The gist of it is that some people (even those who have used a computer before) don’t understand the nuance of the various “layers” you navigate through to operate a computer: the hardware, the OS, the browser installed on the OS, the website the browser is displaying, the website’s modals and disclosure statements, etc. To them, the experience is flat.

We should not expect these users to juggle this kind of cognitive overhead. These kinds of abstractions are crafted to be analogous to real-world objects, specifically so people can get what they want from a digital system without having to be programmers. Adding unnecessary complexity weakens these metaphors and gives users one less reference point to rely on.

Remember the cyberball experiment. When a user is already in a distressed emotional state, our poorly-designed custom scrollbar might be the death-by-a-thousand-paper-cuts moment where they give up on trying to get what they want and reject the system entirely.

While Morrow’s article was written in 2011, it’s just as relevant now as it was then. More and more people are using the internet globally, and more and more services integral to living daily life are getting digitized. It’s up to us as responsible designers and developers to be sure we make everyone, regardless of device, circumstance, or ability feel welcome.

In addition to unnecessarily abandoning external consistency, there is the issue of custom scrollbar styling potentially not having sufficient color contrast. The too-light colors can create a situation where a person experiencing low-vision conditions won’t be able to perceive, and therefore operate, a website’s scrolling mechanism.

This article won’t even begin to unpack the issues involved with custom implementations of scrollbars, where instead of theming the OS’s native scrollbars with CSS, one instead replaces them with a JavaScript solution. Trust me when I say I have yet to see one implemented in a way that could successfully and reliably recreate all features and functionality across all devices, OSes, browsers, and browsing modes.

In my opinion? Don’t alter the default appearance of an OS’s scrollbars. Use that time to work on something else instead, say, checking for and fixing color contrast problems.

Scrolling

The main concern about altering scrolling behavior is one of consent: it’s taking an externally consistent, system-wide behavior and suddenly altering it without permission. The term scrolljacking has been coined to describe this practice. It is not to be confused with scrollytelling, a more considerate treatment of scrolling behavior that honors the OS’s scrolling settings.

Altering the scrolling behavior on your website or web app can fly in the face of someone’s specific, expressed preferences. For some people, it’s simply an annoyance. For people with motor control concerns, it could make moving through a site difficult. In some extreme cases, the unannounced discrepancy between the amount of scrolling and the distance traveled can also be vestibular triggers. Another consideration is if your modified scrolling behavior accidentally locks out people who don’t use mice, touch, or trackpads to scroll.

All in all, I think Robin Rendle said it best:

Scrolljacking, as I shall now refer to it both sarcastically and honestly, is a failure of the web designer’s first objective; it attacks a standardised pattern and greedily assumes control over the user’s input.

Highlighting

Another OS feature we’re permitted to style in the browser is highlighted text. Much like scrollbars, this is an interface element that is shared by all apps on the OS, not just the browser.

Breaking the external consistency of the OS’s highlighting color has a lot of the same concerns as styled scrollbars, namely altering the expected behavior of something that functions reliably everywhere else. It’s potentially disorienting and alienating, and may deny someone’s expressed preferences.

Some people highlight text as they read. If your custom highlight style has a low contrast ratio between the highlighted text color and the highlighted text’s background color, the person reading your website or web app may be unable to perceive the text they’re highlighting. The effect will cause the text to seemingly disappear as they try to read.

Other people just may not care for your aesthetic sensibilities. Both macOS and Windows allow you to specify a custom highlight color. In a scenario where someone has deliberately set a preference other than the system default, a styled highlight color may override their stated specifications.

For me, the potential risks far outweigh the vanity of a bespoke highlight style—better to just leave it be.

Text resizing

Lots of people change text size to suit their needs. And that’s a good thing. We want people to be able to read our content and act upon it, regardless of whatever circumstances they may be experiencing.

For the problem of too-small text, some designers turn to text resizing widgets, a custom UI pattern that lets a person cycle through a number of preset CSS font-size values. Commonly found in places with heavy text content, text resizing widgets are often paired with complex, multicolumn designs. News sites are a common example.

Before I dive into my concerns with text resizing widgets, I want to ask: if you find that your site needs a specialized widget to manage your text size, why not just take the simpler route and increase your base text size?

Like many accessibility concerns, a request for a larger font size isn’t necessarily indicative of a permanent disability condition. It’s often circumstantial, such as a situation where you’re showing a website on your office’s crappy projector.

Browsers allow users to change their preferred default font size, resizing text across websites accordingly. Browsers excel at handling this setting when you write CSS that takes advantage of unitless line-height values and relative font-size units.

Some designers may feel that granting this liberty to users somehow detracts from their intended branding. Good designers understand that there’s more to branding than just how something looks. It’s about implementing the initial design in the browser, then working with the browser’s capabilities to best serve the person using it. Even if things like the font size are adjusted, a strong brand will still shine through with the ease of your user flows, quality of your typography and palette, strength of your copywriting, etc.

Unfortunately, custom browser text resizing widgets lack a universal approach. If you rely on browser text settings, it just works—consistently, with the same controls, gestures, and keyboard shortcuts, for every page on every website, even in less-than-ideal conditions. You don’t have to write and maintain extra code, test for regressions, or write copy instructing the user on where to find your site’s text resizing widget and how to use it.

Behavioral consistency is incredibly important. Browser text resizing is applied to all text on the page proportionately every time the setting is changed. These settings are also retained for the next time you visit. Not every custom text resizing widget does this, nor will it resize all content to the degree stipulated by the Web Content Accessibility Guidelines.

High-contrast themes

When I say high-contrast themes, I’m not talking about things like a dark mode. I’m talking about a response to people reporting that they need to change your website or web app’s colors to be more visually accessible to them.

Much like text resizing controls, themes that are designed to provide higher contrast color values are perplexing: if you’re taking the time to make one, why not just fix the insufficient contrast values in your regular CSS? Effectively managing themes in CSS is a complicated, resource-intensive affair, even under ideal situations.

Most site-provided high-contrast themes are static in that the designer or developer made decisions about which color values to use, which can be a problem. Too much contrast has been known to be a trigger for things like migraines, as well as potentially making it difficult to focus for users with some forms of attention-deficit hyperactivity disorder (ADHD).

The contrast conundrum leads us to a difficult thing to come to terms with when it comes to accessibility: what works for one person may actually inhibit another. Because of this, it’s important to make things open and interoperable. Leave ultimate control up to the end user so they may decide how to best interact with content.

If you are going to follow through on providing this kind of feature, some advice: model it after the Windows High Contrast mode. It’s a specialized Windows feature that allows a person to force a high color palette onto all aspects of the OS’s UI, including anything the browser displays. It offers four themes out of the box but also allows a user to suit their individual needs by specifying their own colors.

Your high contrast mode feature should do the same. Offer a range of themes with different palettes, and let the user pick colors that work best for them—it will guarantee that if your offerings fail, people still have the ability to self-select.

Moving focus

Keyboard focus is how people who rely on input such as keyboards, switch controls, voice inputs, eye tracking, and other forms of assistive technology navigate and operate digital interfaces. While you can do things like use the autofocus attribute to move keyboard focus to the first input on a page after it loads, it is not recommended.

For people experiencing low- and no-vision conditions, it is equivalent to being abruptly and instantaneously moved to a new location. It’s a confusing and disorienting experience—there’s a reason why there’s a trope in sci-fi movies of people vomiting after being teleported for the first time.

For people with motor control concerns, moving focus without their permission means they may be transported to a place where they didn’t intend to go. Digging themselves out of this location becomes annoying at best and effort-intensive at worst. Websites without heading elements or document landmarks to serve as navigational aids can worsen this effect.

This is all about consent. Moving focus is fine so long as a person deliberately initiates an action that requires it (shifting focus to an opened modal, for example). I don’t come to your house and force you to click on things, so don’t move my keyboard focus unless I specifically ask you to.

Let the browser handle keyboard focus. Provided you use semantic markup, browsers do this well. Some tips:

The clipboard and browser history

The clipboard is sacred space. Don’t prevent people from copying things to it, and don’t append extra content to what they copy. The same goes for browser history and back and forward buttons. Don’t mess around with time travel, and just let the browser do its job.

Wrapping up

In the game part of cyberball, the fun comes from being able to participate with others, passing the ball back and forth. With the web, fun comes from being able to navigate through it. In both situations, fun stops when people get locked out, forced to watch passively from the sidelines.

Fortunately, the web doesn’t have to be one long cyberball experiment. While altering the powerful, assistive technology-friendly features of browsers can enhance the experience for some users, it carries a great risk of alienating others if changes are made with ignorance about exactly how much will be affected.

Remember that this is all in the service of what ultimately matters: creating robust experiences that allow people to successfully use your website or web app regardless of their ability or circumstance. Sometimes the best strategy is to let things be.


About the author

Eric Bailey is a Boston-based designer who helps create straightforward solutions that address a person’s practical, physical, cognitive, and emotional needs using accessible, performant, device-agnostic technology. He's an inclusive design advocate, A11Y Project maintainer, MDN Web Docs contributor, and recovering curmudgeon.

Illustration by Dougal MacPherson.

For more information every web designer and front-end developer needs, read A List Apart “for people who make websites.”

]]>
“Beyond Engagement: the Content Performance Quotient” by Jeffrey Zeldman—An Event Apart video https://aneventapart.com/news/post/beyond-engagement-the-content-performance-quotient-aea-video Tue, 05 Feb 2019 10:10:00 -0800 Eric Meyer https://aneventapart.com/news/post/beyond-engagement-the-content-performance-quotient-aea-video Our products are tasked with providing ever-higher levels of “engagement,” but should they be? For many sites, analytics demonstrating high levels of “engagement” may actually be signs of failure. In this 60-minute talk filmed live at AEA, Jeffrey Zeldman introduces a new measure of design success: the content performance quotient. Learn how relentlessly trimming content and architecture, honing UX and UI, and shoring up technical performance can create experiences that are better attuned to today’s web. You’ll even find out how to sell this change in design thinking to your bosses, clients, and colleagues.

Dubbed “King of Web Standards” by Business Week, Jeffrey Zeldman co-founded An Event Apart with Eric Meyer; publishes A List Apart and A Book Apart books; teaches in the MFA, Interaction Design program at School of Visual Arts, New York; hosts The Big Web Show (“Everything Web That Matters”) podcast; and runs the studio.zeldman design agency. Jeffrey has written two books, notably the foundational text, Designing With Web Standards, currently in a 3rd Edition. He was the first human inducted in the SXSW Interactive Hall of Fame.

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.

]]>
Have Lunch With Rams in 2019 https://aneventapart.com/news/post/have-lunch-with-rams-in-2019 Tue, 29 Jan 2019 11:11:00 -0800 Eric Meyer https://aneventapart.com/news/post/have-lunch-with-rams-in-2019 A legendary industrial designer. An award-winning documentary filmmaker. And today’s leading UX and front-end visionaries. What do they have in common? They’re all part of An Event Apart 2019. Read on to learn how.

Our back (web) pages

One of An Event Apart’s first speakers was Chicago designer Jim Coudal—publisher of coudal.com, inventor of Layer Tennis, and co-founder of the ever-popular Field Notes Brand. Jim’s not only a web and product designer, advertising art director, and entrepreneur, he’s also a filmmaker… and a close friend of legendary documentarian Gary Hustwit.

You may know Gary from such wonderful movies as Objectified, Urbanized, and Helvetica, the film that made everybody a type nerd. Gary’s latest project, Rams, is a documentary portrait of one of the most influential designers of all time: Dieter Rams, the industrial design giant who made previously humdrum products not only touchable, but downright lovable. Herr Rams’s 10 Principles of Good Design are spoken of reverently by designers from multiple disciplines.

Those ideas, and the aesthetic brilliance of his product design, had a fundamental impact on the first generation of web designers—from Clement Mok, who emulated Rams’ touchable buttons in Photoshop, to Jeffrey Zeldman and Eric Meyer, who tried to achieve the same effects in CSS. (And who later co-founded An Event Apart.)

What goes around

To bring things full circle, folks who attend An Event Apart in 2019 will be treated to a special lunchtime presentation of Rams on the Tuesday of each three-day conference. It’s an overview of a giant’s legacy, influencing everything from the aesthetic of an entire generation to the product design of Apple Computer. But it’s more than that—it’s a rumination on consumerism, sustainability, and how technology is changing human behavior. The film also addresses the question of why, at 86 years old, Herr Rams now regrets being a designer. And it’s all set to an original score by pioneering musician and technologist Brian Eno.

In addition to enjoying this private screening of Rams in the company of a few hundred of your colleagues and peers, attending An Event Apart in 2019 means you’ll also enjoy seventeen superb, live presentations from the visionaries of our industry: influencers like Val Head, Gerry McGovern, Jen Simmons, and so many more. Check the schedule to find the event nearest you—or in the great city you’d most like to visit this year—and make 2019 the year you set yourself Apart.

]]>
“The Joy of Optimizing Images” by Una Kravets – An Event Apart video https://aneventapart.com/news/post/the-joy-of-optimizing-images-by-una-kravets-aea-video Tue, 08 Jan 2019 11:03:00 -0800 Eric Meyer https://aneventapart.com/news/post/the-joy-of-optimizing-images-by-una-kravets-aea-video Images are by far the greatest bottleneck to performance on the web, and with the average web page size now about 2.5MB large—images taking up 65% of that—we need to tame the beast. Running images through a compression program like ImageOptim is a good first step, but what else can we do?

In this engaging talk recorded live at An Event Apart Denver 2017, Una Kravets surveys new image formats and dives deeply into image rendering and performance optimization techniques, demonstrating practical approaches to making your web projects noticeably faster.

Una Kravets is a Senior UI Engineer at DigitalOcean. She’s a technical writer, having written for various online publications such as A List Apart, Smashing Magazine, and Sitepoint. Una also co-hosts the Toolsday podcast and started both the Washington DC and Austin Sass Meetups. Una is involved in the open source community as both an open source design advocate and maintainer of the CSSgram project. She's a performance nerd, travels frequently, and listens to way too many audio books.

Enjoy all the videos in An Event Apart’s library! There are over 30 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.

]]>
“Evaluating Technology” by Jeremy Keith – An Event Apart video https://aneventapart.com/news/post/evaluating-technology-by-jeremy-keith-aea-video Tue, 18 Dec 2018 10:16:00 -0800 Eric Meyer https://aneventapart.com/news/post/evaluating-technology-by-jeremy-keith-aea-video We work with technology every day. And every day it seems like there's more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML,CSS and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in?

In this 60-minute presentation recorded live at An Event Apart Denver 2017, Jeremy Keith helps you learn to evaluate tools and technologies in a way that best benefits the people who use the websites you design and develop. You’ll look at some of the hottest new web technologies like service workers and web components. And dig beneath the hype to find out whether they will really change life on the web for the better.

Jeremy Keith lives in Brighton, England where he makes websites with the splendid design agency Clearleft. You may know him from such books as DOM Scripting, Bulletproof Ajax, HTML5 For Web Designers, Resilient Web Design, and, most recently, Going Offline. He curated the dConstruct conference for a number of years as well as Brighton SF, and he organized the world's first Science Hack Day. He also made the website Huffduffer to allow people to make podcasts of found sounds—it‘s like Instapaper for audio files.

Enjoy all the videos in An Event Apart’s library! There are over 30 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.

]]>
“Digital Marketing Strategies for the Busy ‘Web Master’” by Sarah Parmenter – An Event Apart video https://aneventapart.com/news/post/digital-marketing-strategies-for-the-busy-web-master-by-sarah-parmenter-aea-video Tue, 11 Dec 2018 10:30:00 -0800 Eric Meyer https://aneventapart.com/news/post/digital-marketing-strategies-for-the-busy-web-master-by-sarah-parmenter-aea-video Thanks to dwindling attention spans and the pace at which online content refreshes, reaching through the screens of our customers to hold their attention is becoming increasingly difficult. Nowadays the job of the multi-faceted web designer is to not only know the latest techniques for building in Grid, but also know how to get that work seen amid the saturated world of digital marketing.

In this 60-minute presentation recorded live at An Event Apart Denver 2017, Sarah Parmenter discusses the idea of quarterly website design reviews with a “design once use everywhere” mantra, and digs into the ever-changing world of Instagram algorithms, Facebook marketing, and topical social media takeaways for immediate implementation.

Sarah Parmenter owns You Know Who, a small British design studio now in its second decade. She specializes in iOS User Interface design; regularly contributes to various online and printed media; and speaks at related conferences all over the world. Sarah’s straight-talking nature and no-fuss approach to projects have landed her many great contracts over the years, with various well-known brands in the UK, US, and abroad.

Enjoy all the videos in An Event Apart’s library! There are over 30 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 San Francisco 2018 https://aneventapart.com/news/post/resources-from-san-francisco-2018 Sat, 08 Dec 2018 17:00:00 -0800 Eric Meyer https://aneventapart.com/news/post/resources-from-san-francisco-2018 Jeffrey Zeldman

Mina Markham

Art Direction, Design & Creativity

Progressive

Localized

Cross-Functional

Inclusive

Systematic

Cameron Moll

History & Principles

Facebook

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

Regions

Exclusions

Eric Meyer

Jen Simmons

Josh Clark

More on this topic from Josh

Context

Example applications

Robot designers: AI for design and code

Machine learning APIs and data sets

Customize or construct your own model

Mental models and opaque logic

Surveillance capitalism

Designing to counter misinformation, error and bias

Manner and language as cues for confidence and interaction

Machine ethics

Laura Martini

Aaron Gustafson

Gerry McGovern

]]>
“10 Things You Can and Should Do with SVG” by Chris Coyier – An Event Apart video https://aneventapart.com/news/post/10-things-you-can-and-should-do-with-svg-by-chris-coyier-aea-video Tue, 04 Dec 2018 10:02:00 -0800 Eric Meyer https://aneventapart.com/news/post/10-things-you-can-and-should-do-with-svg-by-chris-coyier-aea-video You’re already aware of SVG. You already know it’s a vector image format. But how does that affect your daily life as a front-end developer and designer? In this fun, compelling, and information-packed live presentation recorded at An Event Apart Denver 2017, Chris Coyier counts down 10 things you could (and should!) be doing with SVG. It’s one of those technologies that is chock full of possibilities and benefits, yet conspicuously missing from most people’s tool belts. Find out why it deserves a prime spot on yours.

Chris Coyier is a web designer and developer. He writes about all things web at CSS-Tricks.com, talks about all things web at conferences around the world and on his podcast ShopTalk, and co-founded the web coding playground CodePen.

Enjoy all the videos in An Event Apart’s library! There are over 30 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.

]]>
“Performance as User Experience” by Aaron Gustafson—An Event Apart video https://aneventapart.com/news/post/performance-as-user-experience-by-aaron-gustafson-aea-video Tue, 27 Nov 2018 10:39:00 -0800 Eric Meyer https://aneventapart.com/news/post/performance-as-user-experience-by-aaron-gustafson-aea-video Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers.

In this intensely practical 60-minute live presentation recorded at An Event Apart Denver 2017, Adaptive Web Design author Aaron Gustafson explores the ins and outs of page load performance by showing how he made the website of the 10K Apart meet its own contest rules—creating a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll finish watching the video with a better understanding of the page load process as well as numerous ways you can improve the projects you’re working on right now.

As would be expected from a former manager of the Web Standards Project, Aaron Gustafson is passionate about web standards and accessibility. In his two decades working on the web, Aaron has worked with a number of companies you’ve probably heard of including Box, Happy Cog, Major League Baseball, McAfee, The New York Times, SAS, StubHub, the U.S. Environmental Protection Agency, Vanguard, Walgreens, and Yahoo. Aaron is a longtime member of Rosenfeld Media’s "experts" group and writes about whatever’s on his mind at aaron-gustafson.com. He is currently a web standards and accessibility advocate at Microsoft, working closely with the Edge browser team.

Enjoy all the videos in An Event Apart’s library! There are over 30 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.

]]>