September 24, 2024 Smashing Newsletter: Issue #475
This newsletter issue was sent out to 195,028 subscribers on Tuesday, September 24, 2024.
Editorial
From awesome new CSS features to web performance optimization tips, accessibility considerations, and a pledge to make the web a safe and healthy community, no matter what the future might bring — in this newsletter issue, we’ll dive deep into the shiny world of front-end, what’s currently happening, and where it’s heading.
Ready to dig deeper? Then you might want to join us for SmashingConf New York 🇺🇸 in less than 2 weeks (Oct 7–10). Focused on real-world problems and solutions, this is going to be quite a ride through all things front-end and UX.
In New York, we’ll explore accessibility, React, design systems, modern CSS, AI, and much more. There are only a few tickets left — so be quick if you’d like to join us in person. Or join the fun right from the comfort of your own desk with one of our online conference tickets. We’d love to see you there!
If you are looking for a friendly evening, join in Meets Live Design Challenge with Pablo Stanley, Christine Vallaure, and Oliver Schöndorfer on Sept 26.
Have a wonderful Tuesday,
— Cosima from the Smashing Mag Team
1. Contrast Ratio And The Human Factor
Color contrast is a reliable indicator of accessibility. However, sometimes, things aren’t as clear as the maths suggests. Take an orange button with black text and an orange button with white text. Which one is more accessible? According to the contrast ratio — the one with the black text. However, the one with the white text turns out to be more legible for many people.
Ericka O’Connor faced exactly this problem when she was working on a client project, and she decided to figure out why this was happening. In her post “Orange You Accessible?” she deconstructs the disparity, measuring color contrast and surveying color-blind users to learn more about the human factor of color accessibility. Interesting insights are guaranteed. (cm)
2. Improving Google Fonts Performance
How can we make Google Fonts load faster? Scott Jehl set up a repository for testing Google’s default font embed code against more optimal approaches. The setup loads the SUSE Google Font from Google’s font server in a variety of ways to find out which approach is most efficient.
As Scott’s tests show, loading fonts with @font-face is faster than the render-blocking default embed we get from Google. The greatest performance improvements show when @font-face is combined with font-display: swap. In this case, text rendering happens a full second sooner than the default Google embed. And even when the page doesn’t use font-display: swap, using @font-face still renders the pages 300ms earlier than the Google standard solution. (cm)
3. Accessibility Checklist
Some questions are too complex to be answered with a simple “yes” or “no.” “Is this accessible?” is such a question. Nevertheless, Adrian Roselli is often approached by people who want to hear his opinion about whether a particular product, site, or service is accessible. To enable everyone to better assess accessibility, Adrian created a master list of questions you can ask yourself to come to a conclusion.
“What do you mean by accessible?”, “What prompted you to ask the question?”, and “What work have you already done to check?” are the three overarching questions under which Adrian lists more detailed questions that help you get a better idea of how accessible something is. With links to useful resources, the list is also suited for people who are completely new to accessibility. One for the bookmarks. (cm)
4. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Oct 10 – 18 - Cascading Style Systems: Resilient & Maintainable CSS dev
with Miriam Suzanne. Oct 14 – 18 - Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1 – Dec 2 - Advanced Design Systems workflow
with Brad Frost. Nov 12–20 - Figma Workflow Masterclass design
with Christine Vallaure. Nov 14–22 - Jump to all workshops →
5. Ethical Web Principles
As designers and developers, we have a responsibility — for our users but also for the web in general, as every decision we make today contributes to how the web evolves. The W3C recently published their Ethical Web Principles to codify ethics and behavioral principles for making the web a safe and healthy community that provides a positive social benefit.
The twelve principles seek to ensure that the web is for everyone, providing freedom of expression, verifiable information, individual control, sustainable resources, and platform-agnostic experiences where decisions are made transparently and respectfully of how people choose to consume the web. A must-read for every web professional. (cm)
6. The Future Of View Transitions
CSS has shipped many awesome features in recent times, and view transitions are one of them. They make it possible to transition between views with just CSS, even across pages of the same origin. What makes view transitions stand out is also how quickly they shipped in browsers and made it into production contexts — the first public draft was published in 2022, and we can already see some exciting examples of them today.
Given how new the API is, view transitions are still evolving, and we need to keep an eye on them as changes happen. For example, a CSS Working Group meeting recently discussed what exactly should be included in a view transition snapshot before it transitions into the new view. If you want to dig deeper, Juan Diego Rodríguez summarized the key takeaways from the discussion. Exciting times for CSS! (cm)
7. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.