Smashing Newsletter #251: Design Checklists, Passwords, Dropdowns and Tooltips

With interface design checklists, HTML email, dropdowns, CSS and print design inspiration. Issue #251 • Tue, March 31, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, I hope that this email finds you safe and well, and that if you are one of the newly working from home you are beginning to get used to your new normal. We’ve got a little gift for you this week, as Vitaly has released his [“Smart Interface Design Patterns Checklists”](. These free PDF checklists are based on the work Vitaly has been doing for many years, exploring and examining examples of desktop and mobile interfaces. Learning what works and what doesn’t in usability tests and user interviews. We’re offering these in return for signing up to this newsletter, but as an existing subscriber we don’t want you to miss out. So you can [get your checklists PDF for free](. We hope you’ll find them useful — let us know! [Smart Interface Design Patterns Checklists]( [Smart Interface Design Patterns Checklists]( [Smart Interface Design Patterns Checklists]( [“Smart Interface Design Patterns”]( a free PDF deck with 150+ questions to ask when designing and building any component. If you have friends and colleagues who would find these checklists useful, we would love for you to kindly point them to [this post]( so they can sign up and get their own copy. Take care! — Rachel Andrew ([@rachelandrew]( --------------------------------------------------------------- Table of Contents 1. [How To Write Good Email Code](#a1) 2. [Generate Compound Grids With Ease](#a2) 3. [Why It’s Good To Allow Users To Paste Their Passwords](#a3) 4. [Collaborative Diagrams](#a4) 5. [A Complete Solution For Tooltips, Popovers, And Dropdowns](#a5) 6. [Create CSS Color Gradients With Ease](#a6) 7. [Open-Source Tool To Make Animated Product Mockups](#a7) 8. [Print Design Inspiration From The Past](#a8) 9. [Upcoming In Smashing Membership](#a9) 10. [Our Next Smashing Workshops](#a10) 11. [New On Smashing Job Board](#a11) 12. [Our Most Popular Articles](#a12) --------------------------------------------------------------- #1. How To Write Good Email Code Maybe you’ve been in that situation before where you had to code an HTML email but struggled with email code best practices. To help you master the challenge, Mark Robbins set up a [library for good email code](. You can simply copy and paste the code and use it in your emails or you can learn more about the theory behind it. [Good Email Code]( Priority lies in making sure the code is semantic, functional, accessible, and meeting user expectations, as Mark points out. Consistency between email clients and pixel perfect design are important, too, but always secondary. One for the bookmarks. (cm) --------------------------------------------------------------- #2. Generate Compound Grids With Ease [Compound grids]( offer enormous flexibility and a lot of room for creativity. Made up of two or more grids of any type (column, modular, symmetrical, and asymmetrical) on one page, they can occupy separate areas or overlap. [Compound Grid Generator]( A little tool to help you generate compound grids and save time drawing endless variations now comes from Michelle Barker: the [compound grid generator](. All you need to do is enter the number of columns for each of your grids, and they’ll be merged into a compound grid. A great addition to your digital toolbox. (cm) --------------------------------------------------------------- #3. Why It’s Good To Allow Users To Paste Their Passwords Some things have an instant common sense appeal to them and become best practice without being questioned. One such “best practice” is to not accept pasted passwords on a site. But, as it turns out, disabling password pasting doesn’t improve security, it actually has the opposite effect. [Let them paste passwords]( As the [National Cyber Security Centre found out already in 2017]( (thanks to Addy Osmani for [reminding us of the source]( pasting passwords does not only prevent typos and, thus, frustration, it also makes your site work well with password managers. An important fact that enables users to have different complex (and more secure) passwords for the services they use. If you want to dive deeper into the false security promise of disabling paste on password fields and why you should refrain from it, [Troy Hunt wrote a great article]( on the topic back in 2014. A timeless piece. (cm) --------------------------------------------------------------- From our sponsor Northwestern online MS in Information Design — build in-demand skills, apply now [Online Masters in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #4. Collaborative Diagrams Pen and paper are often hard to beat when you want to visualize an idea with a quick diagram. If you’re looking for a digital alternative that is just as straightforward and easy to use as your analog tools, you might want to check out [Excalidraw](. [Excalidraw]( Excalidraw is a virtual whiteboard that you can draw on. You can choose from a set of shapes, connect them with arrows or lines, add text, and color. There are some other styling options, too, but the tool is kept rather simple so that you can focus on what’s really important: visualizing your idea. A great feature that comes in especially handy now that a lot of teams work remotely: You can share a live-collaboration session with your team members or your clients. Export and save options are included, too, of course. (cm) --------------------------------------------------------------- #5. A Complete Solution For Tooltips, Popovers, And Dropdowns If you’re looking for a quick and easy solution for tooltips, popovers, dropdowns, and menus, you might want to take a look at [Tippy.js](. The library provides the logic and styling involved in all types of elements that pop out from the flow of your document and get overlaid on top of the UI. [Tippy.js]( Tippy.js is optimized to prevent flipping and overflow, it’s WAI-Aria compliant, works in all modern browsers, and, so the promise, it even delivers high performance on low-end devices. You can style the elements with custom CSS and TypeScript is supported out of the box, too. Handy! (cm) --------------------------------------------------------------- #6. Create CSS Color Gradients With Ease Hand-picking colors to make a color gradient requires design experience and a good understanding of color harmony. If you need a gradient for a background or for UI elements but don’t feel confident enough to tackle the task yourself (or if you’re in a hurry), the [color gradient generator]( which the folks at My Brand New Logo have created has got your back. [Color gradient generator]( Powered by color gradient algorithms, the generator creates well-balanced gradients based on a color you select. There are four different styles of gradients that go from subtle to a mother-of-pearl effect and an intense, deep color gradient. You can adjust the gradient with sliders and, once you’re happy with the result, copy-paste the generated CSS code to use it in your project. Nice! (cm) --------------------------------------------------------------- From our sponsor Free coaching to help you be seen in tech — Get a free resume review Are you looking for a tech job where you clock in... or for a career where you’ll be seen? Seen by Indeed, a matching service for software engineers, product managers and other tech pros, sorts through 1000s of companies like Twilio, Overstock, VRBO, and Paypal, and matches tech talent like you to the role that’ll take you further. [Free coaching to help you be seen in tech]( Free coaching to help you be seen in tech [join for free](. --------------------------------------------------------------- #7. Open-Source Tool To Make Animated Product Mockups What do you do when you’re missing a tool for a specific purpose? You build it yourself. That’s what Alyssa X did when she was looking for a tool to make animated GIFs and videos to showcase a product. Her take on the subject: [Animockup](. [Animockup]( With Animockup, you can showcase your product in action within a device mockup. Just drag some screen footage into the browser-based tool, and Animockup automatically places it into your desired mockup. You can add text, images, and adjust the styling, and choose from a selection of presets to optimize your mockup for sharing on Twitter, Dribble, Instagram and the like. A useful little helper. (cm) --------------------------------------------------------------- #8. Print Design Inspiration From The Past Typography, layout, color, patterns — vintage magazines provide an endless source of inspiration. If you’re up for some eye candy, the folks at Present & Correct have collected a selection of print design goodies over time. [Industrial Art News magazine covers]( Among them are covers from the East German design magazine [Form + Zweck]( which was published between 1956 and 1990, just like covers of Switzerland’s oldest typographic journal [Typographische Monatsblätter](. The Japanese magazine [Industrial Art News]( with its bold and vibrant cover art is also part of the collection. For some more contemporary inspiration, be sure to also check out the site of the Japanese [IDEA magazine]( where you can peek inside past issues and even browse them by keyword. Eye candy to get lost in. (cm) --------------------------------------------------------------- #9. Upcoming In Smashing Membership A few weeks ago, we released [The Ethical Design Handbook]( and [Smart Interface Design Checklists]( and, of course, they are and always will be free for Smashing Members. Please [check your dashboard]( (“eBooks” and “Goodies”) to download them. [SmashingConf Workshops]( - “[Power Of Shaders]( with Yuriy Artyukh— April 2 at 17:00 London time 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. 😉 --------------------------------------------------------------- #10. 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 intended to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk! - [Bundle: “CSS Layout Masterclass + Smart Responsive Design Patterns”]( with Rachel Andrew and Vitaly Friedman Apr 2-17 at 9–11:30 AM PDT. - [CSS Layout Masterclass]( with Rachel Andrew Apr 14–15 at 9–11:30 AM PDT. [SmashingConf Workshops]( - 🇺🇸 [SmashingConf Austin]( (June 9–10) in Austin, Texas, USA. - 🇩🇪 [SmashingConf Freiburg]( (Sept. 7–8) in Freiburg, DE. - 🇺🇸 [SmashingConf New York]( (Oct. 20–21) in New York, USA. 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) --------------------------------------------------------------- #11. New On Smashing Job Board - [UX Research Writer & Analyst]( at Baymard Institute (Remote) Would you like to join a team of dedicated usability research writers, who analyze and write about cutting-edge User Experience research? - [Technical Delivery Consultant Security & Identity (m/w/d)]( at Microsoft (Reading) If you would like to join a team where you help customers use the latest technology and where you receive cutting edge training and where you’re empowered to make a difference, then we really want to get to know you. - [Solution Architect]( at Microsoft (Schiphol) The Solution Architect within the Global Domain organization is responsible for delivering high quality architectural solutions and business outcomes based on the Microsoft Platform. --------------------------------------------------------------- #12. Our Most Popular Articles - [How To Increase Mobile Conversions With Category Page Design]( Recent research has found that e-commerce category pages have higher click-through rates in search than individual category pages. So, if your e-commerce site is struggling to attract shoppers and convert them, your category pages (specifically, those on mobile) might be in need of a redesign. - [Creating Sortable Tables With React]( Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, we’re going to implement all you need to sort out all of your table sorting needs. - [How Indigo.Design Usability Testing Takes The Guesswork Out Of Web Design]( There isn’t a ton of mystery when it comes to what makes for an attractive and modern-looking design these days. What’s not always clear, however, is the usability aspect of it. In other words, have the pathways you’ve designed for users intuitive enough? The truth is, it’s all really just a guessing game unless you start getting user feedback early on. Thankfully, Indigo.Design has a usability testing solution to help us out. --------------------------------------------------------------- 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](