I recently had the opportunity to attend An Event Apart, a web design conference that caters to UX and front-end designers.

At the Washington, DC, event, I heard from the likes of Jeffrey Zeldman, Rachel Andrew, Jen Simmons and Eric Meyer on topics ranging from design systems to new standards in CSS. Here are highlights from three of these talks:

Beyond Engagement: the Content Performance Quotient by Jeffrey Zeldman

Jeffrey Zeldman kicked off the event with his Content Performance Quotient, a measurement he created to help those who are evaluated by engagement on their site.

For most websites, engagement is not an appropriate success measurement. Instead, the measurement should be how fast the users solve their problems or finds the information they came for. He poses the question “If a customer spends 30 minutes on our site, was she engaged… or frustrated?” This is a great way to reflect on the purpose of your site and how it should be used. As a news site, Industry Dive values engagement. However, we also strive to evaluate each of our products based on their purpose.

Zeldman pull quote

Zeldman went on to explain that we need to avoid fluff on the page and only provide purposeful content that helps a user achieve his or her goals. While there are many stakeholders on any given project and it might be easier to indulge them all, designers have to weed through their suggestions for the most essential features and content.

He ended with this advice: Design should be “faster for people who are trying to get things done” and “slower for people who are trying to comprehend.” Zeldman’s point is very relevant to the digital media industry. Slow design is crucial for sites that want the user to be immersed in the content. This is accomplished through bigger type, more whitespace and better typographic hierarchy.

Graduating to Grid by Rachel Andrew

Rachel Andrew began the CSS-focused afternoon with a discussion on CSS Grid. Her goal was to make everyone comfortable with incorporating Grid into their projects. She emphasized that “Old CSS in your project doesn’t mean you can’t use new CSS”.

Grid is a key tool to web design as all of the industry’s past layout methods were trying to replicate a grid, but were not in fact grids. Grid is finally delivering what floats and frameworks tried to recreate.

Andrew also talked about the importance of width’s “min-content” and “max-content”. These attributes are fundamental to both Grid and Flexbox. Flexbox starts under the assumption of max-content and then takes space away to fit the area. Grid on the other hand starts at min-content and then adds space to the areas as needed.

Andrew pull quote

She ended on a point about browser support. Browsers that don’t support Grid are being used on mobile or in locations where there is limited data. If you need a complicated polyfill to replicate your design, it isn’t the correct choice for that user’s experience. Using Grid still creates a better experience for those who are on unsupported browsers as it is lighter than a large framework.

Fit for Purpose: Making Sense of the New CSS by Eric Meyer

Eric Meyer, the author of The Definitive Guide to CSS, dove into more of CSS’s new features.

@supports: It accepts a valid pair of a property and a value and the declarations inside are evaluated if the browser supports the query. He emphasized that you don’t have to use the feature you checked for support in your declarations. For example, you could check for Grid but then style regular items knowing that your Grid code had been evaluated earlier on. You can also use supports with media queries to allow for even further customization.

Writing-mode and Flexbox: One common idea brought up throughout the afternoon was being aware of the “left-to-right” default writing-mode in browsers. He explained how Flexbox is writing-mode aware, which means the layout changes based on the declared writing mode. For example, Japanese and Hebrew are not written left-to-right. By declaring a different writing-mode, Flexbox will adjust how it is being displayed. This helps create a responsive layout for all different users.

Grid: Meyer showed how easy it is to now create mockups of pages with Grid and the ease of creating more complex layouts. He also discussed how to use grid-template-areas to create different layouts depending on screen size.

All three talks illustrated how front-end tools are improving to help us create products. As these tools progress, Industry Dive designers will work to think outside of the 12-column constraint or max-width area.

Top photo credit: Koko Hunt