Articles on Smashing Magazine — For Web Designers And Developers

https://www.smashingmagazine.com/

Magazine on CSS, JavaScript, front-end, accessibility, UX and design. For developers, designers and front-end engineers.

フィード

記事のアイキャッチ画像
Building A User Segmentation Matrix To Foster Cross-Org Alignment
Articles on Smashing Magazine — For Web Designers And Developers
Many organizations prioritize internal structures and services over customer-centricity, hindering effective decision-making. Through a case study, Talke Hoppmann-Walton advocates for a shift towards an outside-in perspective and proposes the use of a user segmentation matrix to foster alignment across departments and prioritize customer needs.
3日前
記事のアイキャッチ画像
Beyond CSS Media Queries
Articles on Smashing Magazine — For Web Designers And Developers
Juan Diego Rodriguez explains why media queries still occupy a vital role in responsive layouts; only they are now one tool in a larger toolbox with modern techniques that are best when used together.
4日前
記事のアイキャッチ画像
Transforming The Relationship Between Designers And Developers
Articles on Smashing Magazine — For Web Designers And Developers
Is there such a thing as harmony between designers and developers in the workplace, and if so, how can it be achieved? In this article, Chris Day explores the challenges of effective collaboration, outlines the key factors at play, and (hopefully!) empowers you to find the right solutions to help you and your team deliver to their full potential.
5日前
記事のアイキャッチ画像
Why Designers Aren’t Understood
Articles on Smashing Magazine — For Web Designers And Developers
How do we conduct UX research when there is no or only limited access to users? Here are some workarounds to run UX research or make a strong case for it. An upcoming part of [Smart Interface Design Patterns](https://smart-interface-design-patterns.com).
6日前
記事のアイキャッチ画像
The Times You Need A Custom @property Instead Of A CSS Variable
Articles on Smashing Magazine — For Web Designers And Developers
Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined animations.
7日前
記事のアイキャッチ画像
The Modern Guide For Making CSS Shapes
Articles on Smashing Magazine — For Web Designers And Developers
In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.
10日前
記事のアイキャッチ画像
The Forensics Of React Server Components (RSCs)
Articles on Smashing Magazine — For Web Designers And Developers
React Server Components (RSCs) combine the best of client-side rendering, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline.
11日前
記事のアイキャッチ画像
How To Run UX Research Without Access To Users
Articles on Smashing Magazine — For Web Designers And Developers
How do we conduct UX research when there is no or only limited access to users? Here are some workarounds to run UX research or make a strong case for it. An upcoming part of Smart Interface Design Patterns.
13日前
記事のアイキャッチ画像
How To Harness Mouse Interaction Data For Practical Machine Learning Solutions
Articles on Smashing Magazine — For Web Designers And Developers
In this article, Eduard Kuric discusses mouse interaction data, what kind of magic can be done with it, and some of the hidden pitfalls to watch out for so you get a head start incorporating them in your solutions.
14日前
記事のアイキャッチ画像
Combining CSS :has() And HTML <select> For Greater Conditional Styling
Articles on Smashing Magazine — For Web Designers And Developers
Amit Sheen demonstrates using `:has()` to apply styles conditionally when a certain `` in a `` element is chosen by the user and how we gain even more conditional styling capabilities when chaining `:has()` with other pseudo-classes, such as `:not()` — no JavaScript necessary.
18日前
記事のアイキャッチ画像
Longing For May (2024 Wallpapers Edition)
Articles on Smashing Magazine — For Web Designers And Developers
May is almost here, so what better occasion could there be for some fresh and inspiring desktop wallpapers? Created with love by artists and designers from across the globe, the wallpapers in this post come in versions with and without a calendar. Enjoy!
20日前
記事のアイキャッチ画像
Lessons Learned After Selling My Startup
Articles on Smashing Magazine — For Web Designers And Developers
Business acquisitions are common but often shrouded in mystery because they happen behind closed doors. In this article, Yaakov details the story of his company and the journey it took him on, shedding light on the process of selling a business and what he learned from the experience.
21日前
記事のアイキャッチ画像
The End Of The Free Tier
Articles on Smashing Magazine — For Web Designers And Developers
Free-tier pricing is a common marketing strategy. “Free” gets people in the door and allows them to settle in and see how things work. But, as Juan Diego Rodriguez explains, the practice of free *tiers* is often conflated with free *trials*. And while the distinction may be nuanced, the consequences of sunsetting free-tier pricing may be huge.
24日前
記事のアイキャッチ画像
Conducting Accessibility Research In An Inaccessible Ecosystem
Articles on Smashing Magazine — For Web Designers And Developers
Conducting UX research that includes participants with a variety of disabilities is vital to building inclusive technology, but most prototypes used for testing are inaccessible. Rather than continuing to leave out feedback from disabled consumers, which ultimately leads to exclusive technology, researchers must get creative in their workarounds and be relentless in their efforts.
25日前
記事のアイキャッチ画像
Using AI For Neurodiversity And Building Inclusive Tools
Articles on Smashing Magazine — For Web Designers And Developers
This article illustrates how AI can be leveraged to build tools that can be inclusive with a little bit of an additional effort.
1ヶ月前
記事のアイキャッチ画像
F-Shape Pattern And How Users Read
Articles on Smashing Magazine — For Web Designers And Developers
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.
1ヶ月前
記事のアイキャッチ画像
How To Work With GraphQL In WordPress In 2024
Articles on Smashing Magazine — For Web Designers And Developers
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.
1ヶ月前
記事のアイキャッチ画像
Converting Plain Text To Encoded HTML With Vanilla JavaScript
Articles on Smashing Magazine — For Web Designers And Developers
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.
1ヶ月前
記事のアイキャッチ画像
How To Monitor And Optimize Google Core Web Vitals
Articles on Smashing Magazine — For Web Designers And Developers
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.
1ヶ月前
記事のアイキャッチ画像
Sliding 3D Image Frames In CSS
Articles on Smashing Magazine — For Web Designers And Developers
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.
1ヶ月前
記事のアイキャッチ画像
Penpot’s CSS Grid Layout: Designing With Superpowers
Articles on Smashing Magazine — For Web Designers And Developers
Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let's explore Penpot’s latest feature, CSS Grid Layout. Penpot’s latest release is about efficiency and so much more. It gives designers superpowers and a better place at the table. Excited? Let’s take a look at it together.
1ヶ月前
記事のアイキャッチ画像
Connecting With Users: Applying Principles Of Communication To UX Research
Articles on Smashing Magazine — For Web Designers And Developers
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.
1ヶ月前
記事のアイキャッチ画像
The Things Users Would Appreciate In Mobile Apps
Articles on Smashing Magazine — For Web Designers And Developers
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.
1ヶ月前
記事のアイキャッチ画像
Iconography In Design Systems: Easy Troubleshooting And Maintenance
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
Infinite-Scrolling Logos In Flat HTML And Pure CSS
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
Colorful Blossoms And Rainy Days (April 2024 Wallpapers Edition)
Articles on Smashing Magazine — For Web Designers And Developers
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!
2ヶ月前
記事のアイキャッチ画像
How Developers Can Strengthen Their Mental Health Amidst High-Pressure Projects
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
The Future Of User Research: Expert Insights And Key Trends
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
Crafting Experiences: Uniting Rikyu’s Wisdom With Brand Experience Principles
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
Now Shipping: Success At Scale, A New Smashing Book by Addy Osmani
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
Sketchnotes And Key Takeaways From SmashingConf Antwerp 2023
Articles on Smashing Magazine — For Web Designers And Developers
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)
2ヶ月前
記事のアイキャッチ画像
Event Calendars For Web Made Easy With These Commercial Options
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
Success At Scale: Last Chance For Pre-Sale Price
Articles on Smashing Magazine — For Web Designers And Developers
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!
2ヶ月前
記事のアイキャッチ画像
Modern CSS Tooltips And Speech Bubbles (Part 2)
Articles on Smashing Magazine — For Web Designers And Developers
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.
2ヶ月前
記事のアイキャッチ画像
The End Of My Gatsby Journey
Articles on Smashing Magazine — For Web Designers And Developers
[“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.
2ヶ月前
記事のアイキャッチ画像
Modern CSS Tooltips And Speech Bubbles (Part 1)
Articles on Smashing Magazine — For Web Designers And Developers
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.
3ヶ月前
記事のアイキャッチ画像
Waiting For Spring (March 2024 Wallpapers Edition)
Articles on Smashing Magazine — For Web Designers And Developers
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!
3ヶ月前
記事のアイキャッチ画像
Reporting Core Web Vitals With The Performance API
Articles on Smashing Magazine — For Web Designers And Developers
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.
3ヶ月前
記事のアイキャッチ画像
A Web Designer’s Accessibility Advocacy Toolkit
Articles on Smashing Magazine — For Web Designers And Developers
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.
3ヶ月前