July 7, 2020 Smashing Newsletter: Issue #258

Editorial

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.

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

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.

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.

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)

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.

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.

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.

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)

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.

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

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

• Design Systems with Brad Frost (July 7-21)
• Designing for Emotion with Aarron Walter (July 28-29)
• Behavioral Design Workshop with Susan and Guthrie Weinschenk (Aug 17-31)
• Designing for a Global Audience with Yiying Lu (Aug 20 - Sep 4)
• Smart Interface Design Patterns with Vitaly Friedman (Sep 22 - Oct 6)

Front-End Workshops

• Web Application Security with Scott Helme (Aug 6-14)
• Front-End Testing with Umar Hansa (Aug 19 - Sep 3)
• Jamstack! with Jason Lengstorf (Sep 1-16)
• The CSS Layout Masterclass with Rachel Andrew (Sep 10-11)
• Vue.js: The Practical Guide with Natalia Tepluhina (Sep 17 - Oct 2)

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

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.