Community Resources, Weekly Newsletter, And Boosting Skills Online — Smashing Magazine

Interface Design Checklists: A New Smashing Release

Smashing Magazine has added a new resource to its library: the Interface Design Patterns Checklists. Co-founder Vitaly Friedman compiled and refined these checklists over several years, resulting in a deck intended to support designers and developers working on virtually any interface component. The cards are currently available in PDF format only; print versions are planned once worldwide shipping becomes feasible again.

Friedman will also host an upcoming online workshop, Smart Interface Design Patterns (2020 Edition), covering hundreds of practical examples across five 2.5-hour live sessions. For context, the release follows a wider update to Smashing Magazine's own navigation, which now highlights curated guides on major topics. A newly published SEO guide is also available.

Conferences And Workshops Move Online

All physical Smashing events for 2020 have been moved online to maintain community connections during the pandemic. The upcoming schedule includes:

• SmashingConf Live (August 20–21) — interactive and live sessions from a range of speakers.
• SmashingConf Freiburg Online (Sept. 7–8) — the "hometown" conference, now open to everyone.
• SmashingConf Austin Online (Oct. 13–14) — combining Austin and New York events in a timezone-friendly format.
• SmashingConf San Francisco Online (Nov. 10–11) — two days of front-end and UX talks.

The conferences run on Hopin, chosen for its quality, reliability and accessibility. Attendees need no installation; a magic link is sent before each event, providing access to reception and networking areas, sponsor booths and breakout sessions.

To accommodate busy schedules, workshops have been divided into 2.5-hour segments spread across days and weeks, with materials and recordings included. Those planning to attend multiple sessions can explore bundle discounts of up to US$100. A template titled Convince Your Boss is available for anyone needing to justify participation to their employer.

Podcast And Free Virtual Talks

Drew McLellan hosts the bi-weekly Smashing Podcast, where design and development experts discuss their work. Episodes arrive every second Tuesday and can be subscribed to via any podcast app. Topic suggestions or speaker recommendations can be sent to the podcast's Twitter account.

Two upcoming Smashing TV sessions will feature invited speakers. Chen Hui Jing presents "Accessibility With(out) Priorities" on September 1, discussing how to persuade clients and bosses to invest in accessibility. Adekunle Oduye follows on October 1 with "The Good, The Bad And Ugly Of Prototyping," covering efficient prototyping techniques and how to apply a prototype framework within an organization. Note that these talks use Zoom, so attendees should install the Meetings client in advance.

Recent Popular Articles

A new article is published every day, with the RSS feed available for early notification. Reader favorites from the past month include:

• "How To Create A Porsche 911 With Sketch," by Nikola Lazarević
• "Can You Design A Website For The Five Senses?," by Suzanne Scacca
• "How To Configure Application Color Schemes With CSS Custom Properties," by Artur Basak
• "Modern CSS Techniques To Improve Legibility," by Edoardo Cavazza
• "Translating Design Wireframes Into Accessible HTML/CSS," by Harris Schneiderman

Weekly Newsletter: Shorter, Topic-Focused Editions

The Smashing Newsletter is shifting to a weekly format, with shorter issues dedicated to specific topics — accessibility, CSS, or UX, depending on the week. The goal is to share useful content and highlight interesting community work across the web industry, with no third-party mailings or hidden ads. Subscriptions help cover the costs of running the publication.

For those interested in supporting the newsletter through sponsorship, partnership options are available — the team can be reached at [email protected].

Industry Surveys and Salary Guides

To get a sense of where the web stands, surveys such as State of CSS and State of JS track trends across those two core languages. Additional studies cover design systems, front-end tooling, and open-source security. For practical comparisons, salary resources like Levels.FYI and the UX Designer Salaries guide are worth a look, along with the Design Census 2019. The State of Remote Work 2020 report also covers efficiency trends for distributed teams. It’s worth noting that survey results can carry demographic bias, so treat them as directional rather than definitive.

Interactive CSS and HTML Vocabulary

Developers who struggle to name the exact part of a stylesheet or markup structure may find relief in interactive references created by Ville V. Vanninen. The projects include clickable CSS terms and an HTML vocabulary list, where selecting a term on the side highlights the corresponding code sample on the page. Both resources offer multi-language support.

Rebranding With a Product Persona

When a product matures, teams often wonder whether it’s time for a rebrand. The team at Overflow recently faced that decision, driven by the evolution of their tool from a simple diagramming utility into a platform for design communication and presentation. Their write-up, Evolving the Overflow Brand, documents their process and the lessons learned.

One technique that made the challenge more manageable: conceptually treating the product as a human being and imagining how that person looks and feels. That framing helps visualize a new brand identity before committing to visual designs.

The Case Against Disabled Buttons

Hampus Sethfors makes a strong case that disabled buttons are a problematic UI pattern. When an action-oriented button like "Send" does nothing on click, users experience confusion and frustration. Beyond the UX friction, disabled buttons also create accessibility barriers: low contrast can make them hard to see, and assistive technologies often cannot navigate to them at all.

Sethfors suggests an alternative: keep buttons enabled and display a meaningful error message when the user submits invalid input. If a disabled state is necessary, CSS can visually gray the button — while preserving adequate contrast — but the element should remain focusable and enabled. This subtle shift gives users clear feedback instead of a silent dead end.

Testing the "Back" Button in Complex Flows

Analytics can capture a lot about user behavior, but metrics often miss what happens when things go wrong. The true quality of an experience surfaces in unexpected situations, such as a shopper accidentally refreshing a checkout page mid-purchase, or editing a typo in a review step and losing the entire form.

In single-page applications, the "Back" button frequently produces severe usability issues, documented by Baymard Institute. Common problem areas include overlays, lightboxes, anchor links, infinite scroll and "load more" behavior, filtering, accordions, checkout flows, and inline editing. The browser’s HTML5 History API — specifically history.pushState() — can invoke a URL change without a full page reload, and the Baymard article breaks down how to handle these tricky states properly.

Modern CSS for Classic Layout Problems

Styling checkboxes, building fluid type scales, customizing list markers, and creating accessible dropdown navigation remain recurring challenges. Stephanie Eckles addresses these in her Modern CSS series, which explores reliable techniques for modern browsers. Each installment includes demos and ready-to-use code snippets, making the content practical for immediate adoption.

New References for Form Design

Forms are ubiquitous — in subscriptions, filters, and dashboards — and notoriously difficult to get right. A crop of recent resources focuses on making them better:

• Geri Reid compiled Form Design Guidelines, bringing together best practices, research findings, and examples.
• Michael Scharnagl’s Fun With Forms highlights obscure facts and creative approaches.li>
• Adam Silver writes web form best practices and has released a form design system.
• Heydon Pickering covers inclusive component patterns in his ongoing blog series.

These resources serve as guardrails against costly design mistakes, from inline validation to error messages and autocomplete behavior.

Animated Underline With a Wrapping Twist

Extending underlines beyond text-decoration: underline is an interesting CSS challenge. Nicky Meulemann explored this after seeing a hover effect on Cassie Evans’ site: a colored underline where the line retreats on hover and is replaced with a contrasting color.

The tricky part is ensuring the underline sits beneath every line of a wrapped link, and that the two lines do not overlap during the animation. Meulemann’s tutorial offers a step-by-step approach to building it.

Mac Development Environment Setup

Sourabh Bajaj maintains a comprehensive guide to configuring a Mac development machine, contributed to by a number of community members. It covers everything from Homebrew and Node to Python, C++, and Ruby, providing clear instructions for either a fresh environment or adding a new language can make the setup process far less intimidating.