#475: New Front-End Adventures

With color accessibility, font performance optimization, view transitions, and ethical web principles. Issue #475 • Sep 24, 2024 • [View in the browser]( [Smashing Newsletter]( Hej Smashing Friends, 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. [SmashingConf New York 2024]( We can’t wait to be back for [SmashingConf New York 2024]( — our friendly and inclusive conference for designers and front-end developers. [Last tickets available now.]( In New York, we’ll explore accessibility, React, design systems, modern CSS, AI, and much more. There are only 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 for accessibility. However, sometimes, things aren’t as clear as the maths suggest. Take an orange button with black text and an orange button with white text. Which one is more accessible? According to contrast ratio, the one with the black text. But: the one with the white text turns out to be more legible for many people. [Orange You Accessible?]( 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. [Google Fonts Testing]( 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) --------------------------------------------------------------- From our sponsor Bridge The Gap Between Design And SEO [Wix]( Design and SEO should be a perfect match, but web creators know it’s not always that simple. When you learn to design with SEO in mind, it becomes much easier. Deliver more value and ditch costly post-design revisions for good with the [Wix Studio SEO essentials course]( taught by the industry’s most trusted experts. --------------------------------------------------------------- 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 often gets approached by people who want to hear his opinion if he thinks 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](. [Things to Do Before Asking “Is This Accessible?”]( “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. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. 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. [Ethical Web Principles]( 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) --------------------------------------------------------------- From our sponsor Taking Web Performance to the Next Level with WebPageTest & Catchpoint IPM [Catchpoint]( With Webpagetest seamlessly incorporated into Catchpoint’s Internet Performance Monitoring (IPM) platform, you can have a unified view of web performance, from front-end performance to user experience. Explore how to optimize your website’s speed, reliability, and resilience with insights from thousands of locations worldwide. [Schedule a chat today]( --------------------------------------------------------------- 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. [CSSWG Minutes Telecon]( 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 →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 8. Recent Smashing Articles - [The Timeless Power Of Spreadsheets]( - [Embracing Introversion In UX]( - [SVG Coding Examples: Useful Recipes For Writing Vectors By Hand]( - [Creating Custom Lottie Animations With SVGator]( --------------------------------------------------------------- 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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](