There is always something happening behind the scenes at Smashing. Over the last months, we’ve been continuously working around the performance of the site, but we’ve also removed floating labels from our forms, redesigned our error messages, revamped our Membership dashboard, refactored and adjusted our responsive tables and worked with new authors on a bunch of new articles that will be published on the site over the next months.
Floating Labels Are Gone
After we’ve published Adam Silver’s piece on why floating labels are a bad idea, we’ve seen a huge discussion on Twitter and in the comments about them. Surely you can save quite a bit of vertical space with them, but the cost of it are plenty of issues with autofill and accessibility. Ironically, at the moment of publishing that article in late February, we still had floating labels used in most of our forms, and we wanted to explore if removing them would actually help us improve the overall experience on the site.
So we’ve removed the floating labels and redesigned input fields, placing the labels above the input field, just like Adam has suggested. We also used the opportunity to add some subtle adjustments to our actual forms, and we are still working on it. But the result looked better already.
After a few days of refinements, we’ve stumbled upon styling issues with autofill. We wanted to adjust the font-size and the font used with autofill with the
:-webkit-autofill CSS pseudo-class — it matches when an
<input> element has its value autofilled by the browser — but it’s not supported across a range of browsers, and frankly caused quite a bit of a hassle when an autofilled value is validated once the visitor leaves an input field.
In fact, we had to look into various cases for the form design:
- What happens when no data is provided at all?
- What happens when we retrieve the data from localStorage and plug it automatically in the input fields, but then autofill hasn’t been activated?
- What happens when some values are auto-filled, but others aren’t?
- What happens with inline validation, and when do we validate?
- What happens if some autofilled input fields have errors?
- How should the input values appear on
Frankly, this turned out to be quite a rabbit hole, and we are still looking into all these issues at the moment. Given that a vast majority of our readers — wonderful people like you — are using autofill, it’s worth spending time designing an experience around it.
After a bit of refinements, around 2 weeks after the initial article by Adam was published, we’ve pushed the changes live. We did manage to resolve plenty of accessibility issues and layout issues on mobile just by removing floating labels. But we can’t really say just yet whether it had any impact on the business metrics — well, we’ll need to wait for a big book release to see that.
Green Scores in Lighthouse on Mobile
The final prompt for a more aggressive optimization was the “Core Web Vitals” dashboard in the Google Search Console. On February 19th, over 3590 articles were flagged with a poor CLS score (>0.25) — on desktop and on mobile. We first thought that it could be related to the cookie banner adjustments we made recently, but it turned out it was a Google Search Update that seemed to be more aggressively penalizing us for a high CLS.
So we’ve turned to Twitter to ask the community if anybody had further suggestions around what we could do. The feedback was fantastic from people all over the world — with some thorough reviews submitted via Twiter’s DMs, and general thoughts by people on what we could do.
Patrick Meenan has suggested to delay the service worker install, which we implemented the same day. Apparently, the service worked was installing and activating before LCP and was causing contention.
Gael Metais suggested to more aggressively subset web fonts and look into caching issues with our AVIF files. The next day we subset the fonts and pushed them live. We couldn’t fix the AVIF issue quickly due to the way media management is running currently, but then Barry Pollard suggested to test if using base64-encoding for images would help.
Base64-encoding seemed like a slightly odd concept in the world of HTTP/2, but we’ve decided to build a small prototype to test whether it helps. So, did it? Oh yes, it surely did.
We were very surprised by early results. After a few iterations, we ended up serving our LCP author profile photos in a slightly convoluted but quite effective way:
<source type="image/avif" srcset="data:image/avif;base64,AAA...">
- If a browser supports AVIF, it gets a base64-encoded string of the AVIF image (no browser request).
- If a browser doesn’t support AVIF, it gets a JPEG file (properly cached),
- The content negotiation happens via
srcsetin the browser.
This would be working only for the LCP author profile photos on the homepage and on article pages. At the moment, around 35% of our mobile traffic is on iOS, so those users wouldn’t be getting the images faster, but encoding a large JPEG image only, or encoding both AVIF and JPEG files would unnecessarily bloat HTML which we wanted to avoid.
We then adjusted our build to generate base64-strings for AVIF files automatically during the build time (if author images are available as AVIF images). That also makes it easy for us to remove it when we don’t need it any longer.
Also, did you notice that your AVIF authors pictures were served already expired? Thus requiring CloudFront to loose time requesting the origin server before serving it?
That could reduce a tiny bit your LCP. pic.twitter.com/F2jfOEcqTe
— Gaël Métais (@gaelmetais) March 7, 2021
Additionally, we removed duplicates and redundancies with the YellowLab.Tools, refactored some CSS based on reports from CSS auditing tools, and adjusted our browserslist config to reduce optimizations for IE10 and IE11.
Overall we have:
- reduced the web fonts payload by 38%,
- reduced the size of critical CSS by 14%,
- reduced the size of JS files by 8%,
- (probably) increased the size of HTML by around 1%,
And the best bit: we wouldn’t have achieved it without the kind support of the community, and generous folks who have been sending us suggestions via Twitter. And for that, we are very grateful.
New Article Series on Smashing
In March, we’ve started working around articles dedicated to tools and resources that can help you as a designer or developer get better at your work. You could see them as good old-fashioned round-ups, but we take time to prepare pieces that you can get back to every now and again over time — and we’d love to hear your suggestions as well!
An overview of CSS generators, recently published here on SmashingMag. In action: a border-radius organic cell.
Articles published so far:
We’ve also been reaching out to invite new authors and smart folks like you to write a case study or an article for SmashingMag as well. We’d love to hear your stories! So please reach out to us if you’ve been working on an interesting and challenging project recently — be it around accessibility, CSS/JS, performance, migration, refactoring or pretty much anything else. No worries if you’ve never written before — we are here to help and guide you.
Also, if you have released an open-source tool and would love to draw more attention to it, please let us know as well and we’d love to have you presenting your project here in the magazine as well. And, of course, if you have any feedback, please leave the comments here and let us know what you think!
New Online Workshops on Smashing
Almost a year ago, we started running our very own online workshops, and each and every one has been an incredible experience to our entire team. With wonderful attendees from all over the world coming together to learn together, so many ideas have been brought to life — especially in the live design and coding sessions.
It gets even better: We have workshop bundles from which you can choose 3, 5 or even 10 tickets for the workshops of your choice — ongoing, upcoming or the ones happening in the future! Pick the online workshops of your choice — at the best price and at the best dates — for yourself, your team or your agency.
|Designing The Perfect Navigation
|Architecting Design Systems
|Nathan Curtis & Kevin Powell
|Workflow & Code
|April 20 – May 5
|April 22 – May 6
|Smart Interface Design Patterns
|Make Design Systems People Want to Use
|Psychology For UX and Product Design
|May 20 – June 4
|The React Performance
|May 25 – June 8
|New Adventures In Front-End 2021
|Level-Up With Modern CSS
We keep working on the program for this year, and there are more workshops to announce. Let us know if you’d like to run one, get in touch on Twitter DM and we promise to do our best to make it happen. Also, feel free to subscribe here if you’d like to be the first to be notified when new workshops come up. Plus, you get access to early-bird tickets as well.
Let’s Meet Online: Attend Smashing Meets For Free
On April 27, you can join us live on Smashing Meets, a friendly and inclusive, online meetup for people who work on the web. This “Actions Speak Louder” edition features three amazing sessions where our experts will design and code live — to help an amazing NGO get a better site.
Smashing Meets is free for everybody, so please tell your friends and colleagues to join in! Of coursem we’d love it if you join our community and become a member. A Smashing Membership starts at only 3 USD a month. You get access to all digital Smashing Books, webinars and receive many freebies and friendly discounts to events, services and products. 🎪
Smashing Podcast: Tune In And Get Inspired
Last year, we’ve published a new Smashing Podcast episode every two weeks, and the feedback has been awesome! With over 56k downloads (just over a thousand per week, and growing!), we’ve had 34 guests on the podcast with different backgrounds and so much to share!
Your Weekly Dose Of Smashing
With our Smashing Newsletter, we aim to bring you useful, practical tidbits and share some of the helpful things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and we’d appreciate it if you could help spread the word and give them the credit they deserve! Also, by subscribing, there are no third-party mailings or hidden advertising, and your support really helps us pay the bills. ❤️
- What’s The Right Bundling Tool?
- Strategies For Migrating To TypeScript
CSS Techniques and Tools
- What Does 100% Mean?
- The Surprising Things That CSS Can Animate
- Creating Randomness With Pure CSS
- Building Robust And Modern One-Line Layouts
- Auditing CSS
- Advanced CSS Selectors
- Improving Contrast With An Overlay
Email Productivity and Meetings
- Encoding Code Reviews With Feedback
- Making Time For What Really Matters
- Making Email Better
- Sync Color Themes For Your Dev
- Collecting Feedback From Clients
- How To Write A Job Ad
- Accessible Modals
- Accessible Tabs
- Implementing App-Wide Keyboard Navigation
- Find And Fix Accessibility Issues
- Support User Preferences With
- Accessible Autocomplete
- Making Icon Links Accessible