Cleaning Up Forms: Why Smashing Dropped Floating Labels

When Smashing Magazine published Adam Silver’s article on why floating labels cause accessibility and autofill problems, the discussion that followed hit close to home. The site’s own forms still used them, so the team decided to test Silver’s advice directly by removing the labels and placing them above the input fields instead.

The visual result was cleaner, but the real work started when the team began styling autofill states. The :-webkit-autofill CSS pseudo-class — used to match inputs whose values the browser has auto-filled — is inconsistently supported, and it triggered validation headaches whenever a visitor left a field with an auto-filled value.

That opened a longer list of design questions:

  • How should fields look with no data provided at all?
  • What happens when values are restored from localStorage but autofill never fires?
  • How do you handle a mix of auto-filled fields and untouched fields?
  • When should inline validation run?
  • How should errors appear on auto-filled inputs?
  • What should input values look like in :active and :focus states?

The team pushed the changes live roughly two weeks after Silver’s original article, resolving a number of accessibility and mobile layout issues in the process. Whether the redesign moves business metrics is still unclear — that measurement will have to wait for a major book release.

Mobile Performance Finally Hits Green

Smashing’s performance work through 2020 ended the year on a low note: desktop scores were mostly green, but mobile Lighthouse scores hovered between 60 and 70 for most articles. The pressure to fix that intensified when Google Search Console flagged more than 3,590 articles with a poor CLS score (greater than 0.25) on February 19th. The team initially suspected their recent cookie banner changes were the culprit, but a Google Search Update appeared to be applying stricter CLS penalties.

After asking the community for suggestions on Twitter, several concrete fixes surfaced. Patrick Meenan recommended delaying the service worker install to avoid contention with LCP, which the team implemented the same day. Gael Metais suggested more aggressive font subsetting and investigating AVIF caching issues; the font changes shipped the next day. Barry Pollard then proposed a more unusual experiment: base64-encoding images to eliminate browser requests.

Base64 encoding seemed counterintuitive in an HTTP/2 world, but a prototype showed strong results. The team ended up serving the LCP author profile photos through a hybrid approach:

  • AVIF-supporting browsers receive a base64-encoded string of the AVIF image, with no browser request.
  • Non-AVVIF browsers get a properly cached JPEG.
  • Content negotiation is handled through <picture> and srcset.

The approach only applies to author profile photos on the homepage and article pages. Because about 35% of mobile traffic is on iOS — which doesn't support AVIF — encoding both formats would have bloated the HTML for marginal benefit. The build now generates base64 strings for AVIF files automatically, making the scheme easy to abandon if necessary.

Further cleanup followed: duplicate CSS was removed using YellowLab.Tools, styles were refactored based on CSS auditing tool reports, and the browserslist config was adjusted to scale back IE10 and IE11 optimizations. The cumulative effect was a 38% reduction in web font payload, a 14% smaller critical CSS file, an 8% smaller JavaScript bundle, and roughly a 1% HTML size increase.

The result was the first green mobile Lighthouse scores in years: 90–95 on mobile and 96–100 on desktop, despite a React application running in the background. More work remains — particularly around JavaScript — and the team plans to implement f-mods with help from Simon Hearne.

A New Series: Tooling Round-Ups

Beyond performance and form fixes, Smashing launched a new article series in March focused on tools and resources for designers and developers. The format is a curated take on round-ups, intended as a reference readers can revisit over time. The series began with CSS-specific tooling: CSS Auditing Tools and CSS Generators, with more planned across other front-end topics.

The site is also inviting authors to contribute case studies from ongoing projects — whether in accessibility, CSS/JS, performance, migration, or refactoring — and welcomes submissions from developers who have released open-source tools. First-time writers are encouraged to reach out, as the editorial team provides guidance throughout the process.

Workshops and Community Events

Smashing's online workshops have been running for nearly a year. The team offers bundles that let attendees pick 3, 5, or 10 tickets across ongoing, upcoming, or future workshops. Subscribers to the mailing list receive early-bird ticket access and get notified when new sessions are announced.

On April 27, the free Smashing Meets online meetup will run an "Actions Speak Louder" edition in which three experts design and code live to help an NGO improve its website. A Smashing Membership — starting at 3 USD per month — provides access to digital Smashing Books, webinars, and discounts on events and services.

The Smashing Podcast continues to publish a new episode every two weeks, having passed 56,000 downloads with 34 guests so far. The team is open to topic suggestions; listeners can reach host Drew McLellan or the podcast's Twitter account anytime.

What’s In The Newsletter This Time Around

The Smashing Newsletter continues to collect practical, working material from around the web industry — no filler, no third-party mailings, and no hidden ads. Subscriptions directly support the publication, and each issue rounds up genuinely useful pieces worth sharing. Recent editions covered a broad spread of front-end topics, from build tooling to accessibility.

JavaScript, Bundlers, And Frameworks

  • Guidance on choosing the right bundling tool for your project
  • A framework selection primer
  • A closer look at this vs. that in JavaScript
  • A quick-reference lookup for JavaScript operators
  • Practical strategies for migrating a codebase to TypeScript
  • A curated reading list for JavaScript developers

CSS Techniques And Tools

  • What 100% really means in different CSS contexts
  • The less obvious properties CSS can animate
  • Generating randomness with pure CSS
  • Building robust, modern one-line layouts
  • How to audit your stylesheets effectively
  • Advanced CSS selectors beyond the basics
  • Using overlays to improve text contrast

Workflow, Email, And Meetings

  • Mapping code review feedback with feedback ladders
  • Strategies for protecting time for important work
  • Ideas for improving email workflows
  • Syncing color themes across your development environment
  • Methods for collecting better client feedback
  • Advice on writing effective job advertisements

Front-End Accessibility

  • Building accessible modal dialogs and tabs
  • Implementing app-wide keyboard navigation
  • Finding and fixing common accessibility issues
  • Honoring user preferences via prefers-reduced-* media features
  • Creating accessible autocomplete widgets and icon links

If any of these topics resonate, the newsletter remains the simplest way to stay current — and a direct way to support the small, distributed team behind Smashing Magazine.