Smashing Magazine - #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 Events
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:


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.

View transitions

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
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


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

unsubscribe update preferences view in your browser

Older messages

#474: Web Accessibility + Free Workshop

Tuesday, September 17, 2024

With guidelines on inclusive design, designing for ADHD, dyslexia, neurodiversity, dyscalculia and general do's and don'ts. Issue #474 • Sep 17, 2024 • View in the browser 💨 Smashing Newsletter

#473: Motion and Animation

Tuesday, September 10, 2024

Practical guides to transition animations, cheatsheets, a library of loading and progress indicators and how to design systems that focus on animation UX.Issue #473 • Sep 10, 2024 • View in the browser

#472: Enterprise UX

Tuesday, September 3, 2024

Healthcare UX, complex applications and how to run UX research in complex, legacy-ridden enterprise environments. Issue #472 • Sep 3, 2024 • View in the browser Smashing Newsletter Guten Tag Smashing

NL #471: Design Systems

Tuesday, August 27, 2024

Decision trees for UI components, organizing design systems, design tokens, how to design a new component, and variable mapping. Issue #471 • Aug 27, 2024 • View in the browser Smashing Newsletter God

#470: What’s New In Front-End?

Tuesday, August 20, 2024

Web components, CSS Grid Areas, @property in CSS, accessibility, bug reporting and box-shadows. Issue #470 • Aug 20, 2024 • View in the browser Smashing Newsletter Bună după-amiază Smashing Friends,

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏