Smashing Newsletter #258: Custom Dropdowns, CSS, Performance and Building Tools

With custom dropdowns, front-end build tools, CSS, performance monitoring and high contrast mode.Issue #258 Tue, July 7, 2020 View in the browser 💨

Smashing Newsletter

Dear Friend,

No project comes without a deadline or tough constraints. So it’s not very surprising that when encountering an interface challenge, we tend to rely on patterns that used to work in previous projects — we just don’t have the time, resources, or even see the need to reinvent the wheel all the time. However, more often than not, that’s a dangerous route to take.

Hiding important navigation and search behind an icon is usually a bad idea that hurts traffic and conversion. It’s not surprising, is it? We shouldn’t be expecting more traffic coming to sections of the page that are hidden — be it the last slices of a carousel, or tiny, grey links. Important navigation has to be displayed at all times.

If you’d like more people to search, show a search box, not a search icon. Showing an annoying install app prompt might boost some business metrics, but might also end up with increased marketing costs, customer support inquiries, return fees, and abandonment rates. And it’s not surprising that tiny grey “progress” dots in a carousel never work as well as something more contextual, e.g. a thumbnail, or a grid of images.

We always walk a fine line between finding that perfect balance between business objectives and great user experience, and often our job is to find just the right compromise to achieve both. Yet, quite often we smoothly move along the paths our past experiences have shaped for us, crafting products that don’t use the opportunity to help both customers and brands thrive.

Healthy Business Metrics Mix
A healthy business metrics mix will account for conversion, but also performance, time for repeat purchases and upgrade, life-time-values and marketing and support costs involved. (Large view)

The next time you have a conversation about hiding the navigation behind a hamburger icon, perhaps you could challenge your team to think about which parts of that navigation need to be exposed at all times. Maybe you want to use a search icon instead of a search box; ask yourself if you want to encourage more searches or focus on navigation instead. If you are looking into pushing the visibility of your newsletter, measure the impact of that newsletter box pop-up on general conversion, abandonment, time to first share, repeat purchases, and time to first upgrade.

To help businesses succeed, we need to have a more holistic overview of the business metrics we’re trying to improve. The conversion rate is just one of them, while improving trust and loyalty with our customers is another.

We take it close to our hearts, and so we work on books and workshops to dive just into that. You can find more strategic advice and guidance in our new Smashing book “Click!”, by Paul Boag, plus we have a couple of online workshops on psychology, design and front-end as well.

We have an incredible opportunity to make things better for companies and their customers, and we have great techniques and strategies to get there — we just need a bit of time to stop and think about the tiniest decisions we make. More often than not, they have impactful consequences for all parties involved.

Happy challenging status quo!
— Vitaly (@smashingmag)

Table of Contents

1. Determining The Best Build Tool For Your Project
2. Continuous Performance Measurements Made Easy
3. Turning A Flat Image Into A Folded Poster
4. Quick Tips For High Contrast Mode
5. Striking A Balance Between Native And Custom Select Elements
6. The Making Of A Typeface
7. Dealing With Browser Font Rendering Inconsistencies
8. Upcoming In Smashing Membership
9. Our Next Smashing Workshops
10. New On Smashing Job Board
11. Our Most Popular Articles

1. Determining The Best Build Tool For Your Project

Build tools aim to make the lives of developers easier by streamlining workflows and codifying best practices. However, picking the right build tool for a project can be a challenge. To help you make a more informed decision, folks from the Google Chrome developer relations team built Tooling.Report.

Tooling Report

Based on a suite of tests to assess how well a build tool adheres to best practices, Tooling.Report gives you an overview of various bundlers and the features they support. It’s not only a quick way to determine the best tool for a project but also a reference for incorporating best practices into existing codebases — with the long-term goal of improving all build tools and, thus, the health of the web. (cm)

2. Continuous Performance Measurements Made Easy

When launching a website, it’s common to run performance tests to ensure the site is fast and follows best practices. But how do we keep it fast as soon as deploys are happening every day? Speedlify is Zach Leatherman’s answer to this question.


Speedlify is a static site published as an open-source repository that uses Lighthouse and Axe to continuously measure performance and publish the performance statistics — at most once an hour and automatically once a day. You can run it manually, locally on your computer and check in the data to your repo, or, if you’re using Netlify, it can run entirely self-contained. A great way to keep performance always in sight. (cm)

3. Turning A Flat Image Into A Folded Poster

Some coding experiments leave even the most experienced developers in awe. And even if it’s something you won’t be using every day, it’s always inspiring to see fellow developers think outside the box and explore what’s possible with web technologies. The folded poster effect that Lynn Fisher created with pure CSS is such an experiment.

CSS Folded Poster Effect

With a bit of CSS, Lynn makes your average image look like a folded poster. With paper creases running over the image horizontally and vertically and a background shadow that gives the poster a 3D effect. A cool little project that beautifully shows what can be achieved with CSS. (cm)

From our sponsor

Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.

4. Quick Tips For High Contrast Mode

Designing for different display modes can bring along some unforeseen surprises. Windows High Contrast Mode in particular behaves differently than other operating system display modes and completely overrides authored colors with user-set colors. Luckily, there are often simple solutions to most high contrast mode issues.

Quick Tips For High Contrast Mode

In her article “Quick Tips for High Contrast Mode”, Sarah Higley shares five tips to solve high contrast mode bugs. They include custom focus styles, dealing with SVGs, using the -ms-high-contrast media query to respect a user’s color choices, as well as what you should keep in mind when testing. A handy little guide. If you want to dive deeper into the topic, Sarah also collected some further reading resources. (cm)

5. Striking A Balance Between Native And Custom Select Elements

How do you build a styled select element that is not only styled on the outside but on the inside, too? In her article “Striking a Balance Between Native and Custom Select Elements”, Sandrina Pereira shares her attempt to create a good-looking, accessible select that benefits from as many native features as possible.

Striking A Balance Between Native And Custom Select Elements

The idea is to make the select “hybrid”, which means that it’s both a native <select> and a styled alternate select in one design pattern. Users of assistive technology will get a native <select> element, but when a mouse is being used, the approach relies on a styled version that is made to function as a select element. Clever! (cm)

6. The Making Of A Typeface

It’s always insightful to sneak a peek behind the scenes of how other design teams work and think. Chris Bettig, Design Director at YouTube, now shares an interesting case study on how he and his team created YouTube Sans, a tailor-made font that doubles as a brand ambassador.

YouTube Sans

Before the new typeface made its appearance, YouTube used the iconic play button and a modified version of Alternate Gothic for the wordmark. However, as Chris Bettig explains, there was no clear typographical guidance. Designed to work across the entire range of YouTube’s products and reflecting the platform’s worldview as well as the community of creators who use it, YouTube Sans changed that. For more insights into how the font came to life and the challenges the design team faced along the way, be sure to check out the case study. (cm)

From our sponsor

Webinar: Ladders of Leadership in Testing

Ladders of Leadership illustration: Wednesday, July 8 at 9 PM PST
What can we expect from testing in the second half of (a very long) 2020? On July 8, join in the webinar with three women leaders who will share their experiences and dive into how they are working to enact change in their fields and improve team management.

7. Dealing With Browser Font Rendering Inconsistencies

We all know those moments when a bug literally bugs us but we can’t seem to figure out how to solve it. Stephanie Stimac recently came across such an issue: When she opened her personal website in Safari, she noticed how drastically different the title of her page was rendering compared to other browsers. It appeared much bolder than expected.

Browser Font Rendering Inconsistencies

To find the reason for these rendering inconsistencies, Stephanie started to dissect differences between the user agent style sheet and the computed CSS properties and soon found herself far down the rabbit hole, comparing the confusing behavior with Chrome, Firefox, and Edge. There’s no simple answer to the question which browser is actually handling the styling correctly, but after running a number of tests, Stephanie found out how to prevent the browser from deciding how to bold font-weights: you need to explicitly define the font weight with numerical values. A small detail that makes a significant difference. (cm)

8. Upcoming In Smashing Membership

Click! How to Encourage Clicks Without Shady Tricks is finally here, our new practical guide on how to build trust, increase conversion, and boost business KPIs effectively — without alienating people along the way. The eBook (PDF, ePUB, Kindle) is, and always will be, available to Smashing Members for free.️

Topple busy recording new content for Smashing TV

We’re also busy preparing new Smashing TV live sessions at the moment, so be sure to keep an eye on the schedule to not miss out on anything.

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

9. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Design Workshops

Front-End Workshops

Practicing skills matters. Meow!
Meet Smashing Online Workshops on front-end & UX, with Brad Frost, Yiying Lu, Natalia Tepluhina, and many others.

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

10. New On Smashing Job Board

  • Sr. Deep Learning Engineer at Pathmind, Inc. (San Francisco, CA)
    “Integrate machine learning functionality with production applications in deployment. Utilize extensive understanding of ML/DL/RL (Machine Learning, Deep Learning, Reinforcement Learning) as well as mathematical understanding of deep neural network training techniques to solve complicated and challenging problems.”
  • Lead Product Designer at (Los Angeles, CA)
    “As our Lead Product Designer, you’ll be our in-house voice and lead for design. You’ll work closely alongside our CEO and technical team to develop, prototype and iterate product concepts across the social shopping arena.”
  • Faculty, Visual Communication (UX/UI) at Austin Community College District (Austin, TX)
    “Join us as a full-time professor of user experience design at the Visual Communication Department at Austin Community College. ACC is the first community college in the country to offer a two-year, associates degree for user experience design.”

11. Our Most Popular Articles

  • Information And Information Architecture: The BIG Picture
    Information architecture is the process of categorizing and organizing information to create structure and meaning. To give this context, this article explores not only the basics of information architecture, but also the broader view of the information age, how we use information and how it impacts our world and our lives.
  • Make Your Sites Fast, Accessible And Secure With Help From Google
    Last week, Google’s web platform team shared some of the latest updates to the Web Platform across themes such as performance, UX and design, modern front-end development, PWAs, privacy, and security on the web.
  • Differences Between Static Generated Sites And Server-Side Rendered Apps
    Statically generated sites or prerendering and server-side rendered applications are two modern ways to build front-end applications using JavaScript frameworks. These two modes, yet different, are often mixed up as the same thing and in this tutorial, we’re going to learn about the differences between them.

This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger.

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

New Online Workshops on Front-End & UX. The Smashing Way.

Tuesday, June 30, 2020

Boost your skills on design systems, psychology, eCommerce, security and JAMStack. Our new online workshops on front-end and UX, the smashing way. With interactive exercises and a friendly Q&A.

Smashing Newsletter #257: Hybrid CSS Positioning, Free Fonts, Push Notifications

Tuesday, June 23, 2020

With front-end techniques, a detailed anatomy of push notifications, podcasts around security and hacking and free fonts for personal and commercial use. Issue #257 • Tue, June 23, 2020 • View in the

Meet “Click!”: Encourage Clicks Without Shady Tricks

Thursday, June 18, 2020

New Smashing book on how to boost business KPIs and improve loyalty with better UX. Ready, and shipping now. Brand new book: Click by Paul Boag. Dearest Friend, Nobody loves blinking ads or annoying

Smashing Newsletter #256: Black Illustrations, CSS, Data Science and Licenses

Tuesday, June 9, 2020

With CSS, data visualization, conversion, guide to licensing and Black illustrations. Issue #256 • Tue, June 9, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, This week, we were hoping

Smashing Newsletter #255: SmashingConf Live, Speed Profiler, CSS and SVG

Tuesday, May 26, 2020

With smart CSS solutions, code tidbits, SVG and illustrations for everyone. Issue #255 • Tue, May 26, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, We had such fun at Smashing Meets

Accessibility Weekly: #346: On Browser Compatibility and Support Baselines

Tuesday, May 30, 2023

Sponsored by Automattic. They're hiring. May 29, 2023 • Issue #346 View this issue online or browse the full issue archive. Featured: On browser compatibility and support baselines “Google Baseline

💰 Thriving FinTech Landing Page Designs + 🏆 Challenge Updates

Monday, May 29, 2023

This Week's UpLabs News Are Rolling Into Your Inbox 🌊 First and foremost, let's congratulate to Arjun Makwana, the winner of our latest 🚀 Notion Redesign Challenge! Congratulations!! Next, don

Dynamic Interfaces, Intel One Mono, linear(), Bad at CSS, Popover API

Monday, May 29, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 29 2023 Dynamic Interfaces What if a UI

Dynamic Interfaces

Sunday, May 28, 2023

145: What if a UI could design itself? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Latest stories

Sunday, May 28, 2023

Submit Story We Got an Invite to Google's Design Lab, Where There's a Library of More Than 1000 Swatches Peep the living room–like lounges. UX-ing with ChatGPT and MidJourney Well, today I'

9 New Design Collabs We’re Loving Right Now

Friday, May 26, 2023

Plus, why the English country kitchen endures View in your browser | Update your preferences Architectural Digest AD PRO Logo Wood flooring in an eclectically decorated sunny room with a chandelier and

Shop the Look: Kips Bay Show House New York

Friday, May 26, 2023

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Twenty-two designers and architects have beautifully reimagined the Upper West

Font Design, W3C Redesign, Single Line Comments, Thunderbird Logo, Fluent 2

Friday, May 26, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 26 2023 How to Design Fonts Has Blaze Type

Toile de Jouy, Explained

Thursday, May 25, 2023

Plus, 11 renovation mistakes every designer should avoid View in your browser | Update your preferences Architectural Digest AD PRO Logo burgundy-on-white toile print wallpaper behind a white bed with

Breached Data, Shape Builder, Graph Slider, Motion, display: contents

Thursday, May 25, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 25 2023 Find out what data is available about you online