Using AI For Neurodiversity And Building Inclusive Tools — Smashing Magazine
This article illustrates how AI can be leveraged to build tools that can be inclusive with a little bit of an additional effort.
F-Shape Pattern And How Users Read — Smashing Magazine
Scrolling, scanning, skipping: How do users consume content online? Here’s what you need to know about reading behavior and design strategies to prevent harmful scanning patterns. An upcoming part of Smart Interface Design Patterns.
How To Work With GraphQL In WordPress In 2024 — Smashing Magazine
What options do we have for integrating GraphQL with WordPress in 2024? Leonardo Losoviz describes the developments that have taken place in this space over the last three years.
Converting Plain Text To Encoded HTML With Vanilla JavaScript — Smashing Magazine
What do you do when you need to convert plain text into formatted HTML? Perhaps you reach for Markdown or manually write in the element tags yourself. Or maybe you have one or two of the dozens of online tools that will do it for you. In this tutorial, Alexis Kypridemos picks those tools apart and details the steps for how we can do it ourselves with a little vanilla HTML, CSS, and JavaScript.
How To Monitor And Optimize Google Core Web Vitals — Smashing Magazine
The three Core Web Vitals metrics don’t only tell you how visitors experience your website but also impact your Google search result rankings. In this article, we’ll look at what Core Web Vitals are, how they are measured, and how you can use DebugBear to monitor them continuously.
Sliding 3D Image Frames In CSS — Smashing Magazine
Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off. Temani Afif applies 3D effects and sliding transitions to a single `` using clever CSS techniques that demonstrate advanced, modern styling practices.
Penpot’s CSS Grid Layout: Designing With Superpowers — Smashing Magazine
Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let
Connecting With Users: Applying Principles Of Communication To UX Research — Smashing Magazine
Victor Yocco reviews the components of the Transactional Model of communication, explaining how we might apply this framework to preparing, conducting, and analysing our UX research. You will understand how many UX research best practices align with the model and get an example of a tool for tracking alignment.
The Things Users Would Appreciate In Mobile Apps — Smashing Magazine
What can we do to make a mobile app better? What subsidiary features are worth providing for our users? I have some ideas. You might, too. So, let’s compare our notes. Without any prescriptions attached, here are seven features I believe can palpably improve a user’s experience with a mobile app.
Iconography In Design Systems: Easy Troubleshooting And Maintenance — Smashing Magazine
Tatsiana Tarkan digs deep into iconography as part of a design system and shares some doable tips that will turn icon creation and maintenance into an enjoyable process.
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Remember the HTML `` element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that makes it possible with a set of images and as little HTML as possible.
Colorful Blossoms And Rainy Days (April 2024 Wallpapers Edition) — Smashing Magazine
Could there be a better way to welcome the new month than with a little inspiration boost? We might have one for you: desktop wallpapers created by the community for the community. Enjoy!
How Developers Can Strengthen Their Mental Health Amidst High-Pressure Projects — Smashing Magazine
There’s no shortage of articles about the mental health of developers, ranging from personal accounts of harrowing work experiences to round-ups of advice on how to preserve healthy work habits. But what working situations trigger things like stress, anxiety, burnout, and depression? Victor Ayomipo shares his personal triggers and how he manages them.
The Future Of User Research: Expert Insights And Key Trends — Smashing Magazine
Based on responses from over 1,200 product professionals, Maze’s Future of User Research Report uncovers how product teams conduct research to inform decision-making and build successful products. Learn about the top three trends defining the user research industry in 2024 and beyond.
Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript — Smashing Magazine
There are many ways to approach a “Dark Mode” feature that respects a user’s system color scheme preferences and allows for per-site customization. Henry Bley-Vroman walks through a new possibility that leans into cutting-edge CSS, with minimal JavaScript to support persisting the user’s color scheme preference across pages.
Crafting Experiences: Uniting Rikyu’s Wisdom With Brand Experience Principles — Smashing Magazine
Whether digital or physical, designing a customer touchpoint requires an understanding of the essential relationship between the brand and the user experience, which is also known as the **brand experience.** This article is a simple guide to building long-lasting customer relationships based on the seven rules of Rikyu in the Japanese tea ceremony for a creative and memorable twist.
Now Shipping: Success At Scale, A New Smashing Book by Addy Osmani — Smashing Magazine
It’s here, and it’s shipping! Meet our newest Smashing book, ”Success at Scale”. It’s filled with practical insights and real-world case studies of how big changes can be made on projects of any size. Addy Osmani has curated finest examples, case studies and interviews to help you get successful at scale. Jump to the details and get the book right away.
Sketchnotes And Key Takeaways From SmashingConf Antwerp 2023 — Smashing Magazine
How was the first SmashingConf in Antwerp, you ask? One of our online attendees, Krisztina Szerovay, shares her sketchnotes and takeaways of the talks that were held on both days of the conference — with photos and recordings saved as best for last. [See you live in Antwerp this year, maybe?](https://smashingconf.com/antwerp-2024)
Event Calendars For Web Made Easy With These Commercial Options — Smashing Magazine
Collection of top-notch calendar components for seamless event scheduling. Whether you prefer ready-to-use setups or enjoy tweaking code for a tailored experience, these calendars have you covered.
Success At Scale: Last Chance For Pre-Sale Price — Smashing Magazine
Our next book, “Success at Scale” is finally at the printer, which means we’ll be shipping books soon. It’s also your last chance to get the book at the presale price. Get your copy and save now!
Modern CSS Tooltips And Speech Bubbles (Part 2) — Smashing Magazine
In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes.
The End Of My Gatsby Journey — Smashing Magazine
[“Gatsby headaches”](https://www.smashingmagazine.com/2023/06/gatsby-headaches-i18n-part-1/) are over. Juan Diego Rodríguez reflects on his decision to stop using Gatsby as his go-to framework. Through a detailed examination of its strengths and weaknesses, he provides valuable insights and alternative options for developers navigating their tooling choices.
Modern CSS Tooltips And Speech Bubbles (Part 1) — Smashing Magazine
Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility.
Waiting For Spring (March 2024 Wallpapers Edition) — Smashing Magazine
Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers is for you. Designed by artists and designers from across the globe, they come in versions with and without a calendar for March 2024. Enjoy!
Reporting Core Web Vitals With The Performance API — Smashing Magazine
The Performance API is a set of standards for measuring and evaluating performance metrics with JavaScript. This article demonstrates how to use the Performance API to generate performance metrics directly in the DOM to create your own reporting.
A Designer’s Accessibility Advocacy Toolkit — Smashing Magazine
Digital designer Yichan Wang has put together this collection of strategies and selling points to help you encourage and advocate for accessibility in your place of work, including useful scripts you can use as starting points.
Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering — Smashing Magazine
It’s well-established that the web faces wide-ranging usability and performance issues, from user-hostile UI patterns and twisted search results to sluggish performance and battery-draining bloat. In this article, Frederik examines one small-but-significant aspect where developers take the reins: Painting pixels on the screen.
A Practical Guide To Designing For Colorblind People — Smashing Magazine
Color accessibility is more than just ticking boxes. Even with good contrast, some color palettes can make interfaces challenging for users. Here are some practical guidelines to ensure more inclusive design for colorblind people. An upcoming part of Smart Interface Design Patterns.
Mobile Accessibility Barriers For Assistive Technology Users — Smashing Magazine
Accessibility goes beyond making products user-friendly. It can significantly impact the quality of life for people with disabilities. Kate Kalcevich shares lessons she learned from assistive technology users — challenges and barriers they encounter on mobile devices.
How Accessibility Standards Can Empower Better Chart Visual Design — Smashing Magazine
Accessibility for data visualization extends well beyond web standards, at least if you’re trying to create an experience that’s actually useful. This article focuses on techniques for creating useful and accessible visualizations that extend well beyond compliance.
A Practical Guide To Designing For Children — Smashing Magazine
How to design for children aged 3–12, with insights into user behavior, considerations for parents, and practical UX guidelines.
How To Draw Radar Charts In Web — Smashing Magazine
A radar chart — also commonly called a spider chart — is yet another way to visualize data and make connections. Radar charts are inherently geometric, making them both a perfect fit and fun to make with CSS, thanks to the `polygon()` function. Read along as Preethi Sam demonstrates the process and sprinkles it with a pinch of JavaScript to make a handy, reusable component.
Frequently Heard In My Beginning Front-End Web Development Class — Smashing Magazine
What could we learn from entry-level students in front-end web development? As seasoned professionals, you might think you’ve seen it all, but the truth is that the newcomers are asking the most intriguing questions and making connections that those of us who have spent years on the front end may have never considered.
Web Development Is Getting Too Complex, And It May Be Our Fault — Smashing Magazine
An overwhelming number of frameworks and tooling available today gives the impression that web development has gotten perhaps too complex. Juan Diego Rodríguez explores if web development really is that complex and, most importantly, how we can prevent it from getting even more difficult than we already perceive it to be.
A Guide To Designing For Older Adults — Smashing Magazine
With one billion people aged 60 or older worldwide, inclusivity is more important than ever. Learn how to create digital experiences that empower independence and competence for older adults while enhancing usability for all. An upcoming part of Smart Interface Design Patterns.
When Words Cannot Describe: Designing For AI Beyond Conversational Interfaces — Smashing Magazine
As Artificial Intelligence evolves the computing paradigm, designers have an opportunity to craft more intuitive user interfaces. Maximillian Piras examines how the latest AI capabilities can reshape the future of human-computer interaction beyond conversation alone.
29 Days Of Inspiration (February 2024 Wallpapers Edition) — Smashing Magazine
With February just around the corner, how about a little inspiration boost? We might have one for you: desktop wallpapers created with love by the community for the community. Enjoy!
The Feature Trap: Why Feature Centricity Is Harming Your Product — Smashing Magazine
Most product teams commonly adopt a feature-centric mindset, finding them convenient for brainstorming, drafting requirement documents, and integrating into backlogs and ticketing systems. In this article, Andy Budd shows how fixation with features might be holding you back and how making a few small tweaks to your process could make an entire world of difference.
A Simple Guide To Retrieval Augmented Generation Language Models — Smashing Magazine
Language models have shown impressive capabilities. But that doesn’t mean they’re without faults, as anyone who has witnessed a ChatGPT “hallucination” can attest. In this article, Joas Pambou diagnoses the symptoms that cause hallucinations and explains not only what RAG is but also different approaches for using it to solve language model limitations.
CSS Blurry Shimmer Effect — Smashing Magazine
Taking inspiration from shadows, author Yair Even Or creates the same sort of thing, only with a blurring effect in place of the shadow. Read along for a step-by-step explanation of how it comes together using a combination of masks, gradients, and the good ol’ `backdrop-filter` property.
The AI Dilemma In Graphic Design: Steering Towards Excellence In Typography And Beyond — Smashing Magazine
AI promises a major upheaval in typography, with designers finding themselves navigating both opportunities and challenges. How will it impact quality, design roles, and our use of type in the future? As we explore this new frontier, we realise that we are at a juncture as significant as Gutenberg’s press, set to redefine how we interact with text and visual communication.
The Complex But Awesome CSS border-image Property — Smashing Magazine
The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstrates different approaches for using `border-image` to create clever decorative accents and shapes.
Top Front-End Tools Of 2023 — Smashing Magazine
Useful front-end tools for CSS and JavaScript developers that were most popular last year and will help you speed up your development workflow. Let’s dive in!
SolidStart: A Different Breed Of Meta-Framework — Smashing Magazine
Are you ready for a little exercise of pulling a framework apart and putting the pieces back together? In this article, Atila Fassina explains how meta-frameworks have evolved around core libraries in their own unique ways.
The View Transitions API And Delightful UI Animations (Part 2) — Smashing Magazine
The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the second half of this mini two-part series, Adrian Bece expands on the demos from the first article to demonstrate how the View Transitions API can be used to transition not just elements
The Magic Of New Beginnings (January 2024 Wallpapers Edition) — Smashing Magazine
Let’s start into the new year with a little inspiration boost: wallpapers created with love by the community for the community. Happy 2024!
Making Sense Of “Senseless” JavaScript Features — Smashing Magazine
JavaScript may be the most popular client-side language in the world, but it’s far from perfect and not without its quirks. Juan Diego Rodriguez examines several “absurd” JavaScript eccentricities and explains how they made it into the language as well as how to avoid them in your own code.
The View Transitions API And Delightful UI Animations (Part 1) — Smashing Magazine
The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the first part of this mini two-part series, Adrian Bece thoroughly explains why we need the API and demonstrates its basic usage.
New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine
Since the introduction of CSS viewport units in 2012, many of us have been using `width: 100vw` as a way to set an element’s width to the full width of the viewport. But, as Šime Vidas explains in this deep dive, `100vw` does not always represent the full width of the viewport due to differences in how browsers handle scrollbars.
Building Components For Consumption, Not Complexity (Part 2) — Smashing Magazine
Part 2 concentrates on the key points from Luis’ framework and practical tips about managing a design system that should be both robust and easy to adopt.
CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study — Smashing Magazine
Have you run into a situation where you need the padding of one element to align with the padding of another element? In this article, Brecht De Ruyte demonstrates the issue with a full-width slider component that breaks out of the main page container and shares a couple of techniques to keep it visually aligned with other elements on the page.
Building Components For Consumption, Not Complexity (Part 1) — Smashing Magazine
Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls.
Preparing For Interaction To Next Paint, A New Web Core Vital — Smashing Magazine
Starting in March 2024, Interaction to Next Paint will formally replace First Input Delay as a Core Web Vital metric. Learn how the two metrics differ, why we needed a new way to measure interaction responsiveness, and how you can start optimizing the performance of your site now for a seamless transition to the latest Core Web Vital metric.
Five-Second Testing: Taking A Closer Look At First Impressions (Case Study) — Smashing Magazine
Five-second testing is a popular method of usability research used in the industry, yet in essence, its core belief boils down to virtually a superstition. Eduard Kuric looks under the hood at how first impressions are affected by various factors and how UX researchers and product owners can ensure that the user’s first steps can get off on the right foot.
How Marketing Changed OOP In JavaScript — Smashing Magazine
Discussing the decisions surrounding JavaScript prototypes, the article by Juan Diego Rodriguez scrutinizes their origin, examines missteps in the design, and explores how these factors have affected the way we write JavaScript today.
Recovering Deleted Files From Your Git Working Tree — Smashing Magazine
Git is designed to assure us that we can track a project’s files at different points in time. But it doesn’t assure us that those files are always safe along the way. For those of you who have dealt with the sinking feeling that you’ve irrevocably deleted and lost files, Sanmi has a couple of approaches that, in the right situations, may help bring them back.
Cold Days, Shining Lights (December 2023 Wallpapers Edition) — Smashing Magazine
Could there be a better way to welcome the new month than with a collection of desktop wallpapers? We’ve got some eye-catching designs to sweeten up the last few weeks of the year and, if you’re celebrating, to get you in the holiday mood.
Crafting A Killer Brand Identity For A Digital Product — Smashing Magazine
In this article, Sasha guides you through crucial processes and factors to achieve a consistent brand presence across platforms. She offers an overview of the entire brand identity process, explores collaboration with UI teams, and provides essential details on the assets required for the successful implementation of a digital brand.
A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine
We’re living in somewhat of a CSS renaissance with new features, techniques, experiments, and ideas coming at us to an extent we haven’t seen since “CSS3”. It’s easy to feel overwhelmed when your profession seems to be advancing at breakneck speed, but Geoff Graham considers the ways “modern” CSS in 2023 has actually made CSS “easier” to write.
An Introduction To Full Stack Composability — Smashing Magazine
A well-designed composable system should not only consider the technical aspects but also take into account the nature of the content it handles. To help us with that, we can use a Headless Content Management system such as Storyblok.
