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](#a1) 2. [Continuous Performance Measurements Made Easy](#a2) 3. [Turning A Flat Image Into A Folded Poster](#a3) 4. [Quick Tips For High Contrast Mode](#a4) 5. [Striking A Balance Between Native And Custom Select Elements](#a5) 6. [The Making Of A Typeface](#a6) 7. [Dealing With Browser Font Rendering Inconsistencies](#a7) 8. [Upcoming In Smashing Membership](#a8) 9. [Our Next Smashing Workshops](#a9) 10. [New On Smashing Job Board](#a10) 11. [Our Most Popular Articles](#a11) --------------------------------------------------------------- #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]( 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 [Northwestern: Online Master’s in 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 and a styled alternate select in one design pattern. Users of assistive technology will get a native 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 [Webinar: Ladders of Leadership in Testing]( 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.️ [SmashingConf Workshops]( 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) [SmashingConf Workshops]( 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 vitaly@smashingconf.com 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 Demand.io (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 rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](