Gone Floating Labels And Green Lighthouse Scores — Smashing Magazine

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX …
More about
Vitaly

Gone Floating Labels And Green Lighthouse Scores

Gone Floating Labels And Green Lighthouse Scores

  • 13 min read
  • Smashing Monthly Roundup
  • Saved for offline reading
Interested? Don’t miss the next article.
Wondering what’s happenin’ at Smashing? Well, with so much going on, it’s nice to have a quick overview all in one place. Meet an overview of the things we’ve been working on, and what is changing on Smashing.

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. So, here’s your monthly Smashing update.

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 accessibility and autofill issues. 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:

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

Working around improving performance was an ongoing journey on SmashingMag for a while. In the end of last year we’ve noticed that we’ve seen quite a drop in performance in 2020, so we rolled up our sleeves and got to work. By changing the delivery of CSS and JavaScript we landed in the green score area for most pages on the site in desktop view; yet the performance on mobile was still quite low, averaging between the Lighthouse scores of 60-70 for most articles.

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:

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)

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:

The impact was quite noticeable! For the first time in years, we’ve found our way to the green score zone of 90–95 on mobile, while also making our rounds around 96–100 on desktop. And that with a React application running in the background and plenty of scripting happening behind the scenes. Still quite a bit of work to do, especially in the JavaScript world, but we seem to be on the right track.

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.

Dates Workshop Speaker Topic
March 30–31 Designing The Perfect Navigation Vitaly Friedman UX, Design
April 8–16 Architecting Design Systems Nathan Curtis & Kevin Powell Workflow & Code
April 20 – May 5 Web Performance Harry Roberts Workflow, Code
April 22 – May 6 Smart Interface Design Patterns Vitaly Friedman UX, Design
May 3–11 Make Design Systems People Want to Use Dan Mall Workflow, Code
May 6–14 Psychology For UX and Product Design Joe Leech UX, Design
May 20 – June 4 The React Performance Ivan Akulov Workflow, Code
May 25 – June 8 Dynamic CSS Lea Verou Workflow, Code
June 9–23 New Adventures In Front-End 2021 Vitaly Friedman Workflow, Code
July 8–22 Level-Up With Modern CSS Stephanie Eckles Workflow, Code

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!

If you don’t see a topic you’d like to hear and learn more about, please don’t hesitate to reach out to host Drew McLellan or get in touch via Twitter anytime — we’d love to hear from you!

Friendly Smashing Email Newsletter

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. ❤️

Interested in getting featured in our newsletter? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you as soon as they can.

We can’t wait to see you online or in person, but one thing is for certain: we sincerely appreciate you being smashing month after month, and for that we are eternally grateful. Thanks for reading so far, and we’ll keep you updated for sure! 😉

Smashing Editorial
(cm, vf)

This content was originally published here.