Heading levels are still important, especially for assistive technology like speaking browsers.
Tantek Çelik and An Event Apart’s Jeffrey Zeldman talk about the secret history of web standards, healing the rift between CSS lovers and toolchain fans, and whether the #indieweb can save us from the downsides of social media on The Big Web Show podcast, № 186.
James Nash explores the wonders of the cascade for component styling in A Tale of Two Buttons.
AEA co-founder Eric Meyer shares a small hack for showing breakpoint information on-screen during development.
CSS keyloggers are just the start: Jake Archibald demonstrates why Third party CSS is not safe.
In this Layout Land video, AEA speaker Jen Simmons shows exactly how to create a common card layout by nesting a Flexbox layout inside a Grid layout, all while thinking through accessibility and using zero media queries.
CSS Basics: Fallback Font Stacks for More Robust Web Typography by Chris Coyier.
Styling Empty Cells with Generated Content and CSS Grid Layout by Rachel Andrew.
Discover what runs a website: whatruns is “a free browser extension that helps you identify technologies used on any website at the click of a button.”
The Multi-Grid One-Page Layout: An experiment using Flexbox & CSS Grid with HTML5 Sections by Nikki Pantony.
Hugo Giraudel shows how to leverage CSS counters to create automatic, accessible footnotes.
Is your site’s footer ready for next year? Get some common code snippets to do it automatically.
You’ve just been onboarded to an existing project to replace a departing developer. Or maybe you just opened that old project of yours from a few years ago. You are faced with dread and horror when looking at the code. You can do only one thing: Clean up the mess! Hugo Giraudel shows how.
Just like it says: How to design a payment form your customers will actually complete by Dilem Akıner Akışık.
“This is where a distinct design system can be helpful: to solve your organization’s unique problems in a way a generic tool isn’t designed to help with.” – Dan Mall, Distinct Design Systems
Using Type: Typesetting in the new United States Web Design System 2.0 means understanding the relationship between font family, font size, and line-height. Font normalization FTW!
We are Colorblind provides helpful tips to make sure your design works for the more than 300 million people who have some form of colorblindness.
Variable Fonts is a simple resource for finding and trying variable fonts. Enjoy!
Making CSS Animations Feel More Natural by Brandon Gregory.
V6: Color—A new approach to one of my biggest design weaknesses, using basic color theory, HSL, and Sass by Rob Weychert.
Adam Wathan and Steve Schoger share seven rock-solid design “cheats”—worth reading even if you're a pro.
If you want to support emoji in your design but don’t want to run afoul of copyrighted sets like Apple’s, EmojiOne is for you!
In Who Should Pay? Aaron Gustafson discusses the importance of putting the user experience ahead of our own convenience, even when that means changing how we work.
Three takeaways for web developers after two weeks of painfully slow internet.
MailChimp has done it again—their complete style guide is online and free for all to see. Use it as a template or to spark ideas of your own.
Check out this great visualization of Crayola’s color history.
A comprehensive guide to font loading strategies. And he means comprehensive! Zach Leatherman shares the joys, sorrows, and especially the trade-offs of getting real type onto the web.
A curated collection of the The 40 Best Google Fonts according to Typewolf, who keeps it updated. (We used it to pick the fonts for this collection!)
Happy three-year anniversary to Design for Real Life, by Sara Wachter-Boettcher and An Event Apart’s own Eric Meyer.
How fast is AMP, really? Tim Kadlec is on the case.
Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML. It’s great for small teams and cleanly structured websites.
“Presenting our work with a realistic desktop environment challenged the way we thought about desktop interfaces.” Desktop Prototyping by Zach Johnston of Dropbox Design.
Speaking of accessibility, how about a “visual screen reader?” Nathan Smith’s ‘construct.css’ is here to deliver just that.
Colorable v1.0.5 is a web color combination contrast tester for WCAG 2 compliance.
Little Things I Like to Do with Git. From Harry Roberts at CSS Wizardry.
Brad Frost built an interactive Performance Budgeting Builder just for you.
Sagi Shrieber shares a simple, five-step method to convert any web page to an editable vector Sketch document.
The internet company as an old, ruined, brick-and-mortar storefront. An art project by Andrei Lacatusu.
Swapping Images with the Sizes Attribute, from the filament group.
Retina, non-Retina, 1X, 2X, 3X, and more—designer Peter Nowell explains how pixel density works and how it affects your designs.
Are you familiar with chroma subsampling? Neither were we, but it turns out it can get you close to 20 percent reduction in image sizes. Fairly technical, but well worth the read.