Smashing Newsletter: Issue #251

Editorial

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 check the download link in the email version of this newsletter issue! We hope you’ll find them useful — we’d love to hear from you!

Smart Interface Design Patterns Checklists PDF — “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)

How To Write Good Email Code
Generate Compound Grids With Ease
Why It’s Good To Allow Users To Paste Their Passwords
Collaborative Diagrams
A Complete Solution For Tooltips, Popovers, And Dropdowns
Create CSS Color Gradients With Ease
Open-Source Tool To Make Animated Product Mockups
Print Design Inspiration From The Past
Upcoming In Smashing Membership
Our Next Smashing Workshops

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.

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.

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.

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)

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

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)

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.

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.

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.

Topple busy recording new content for Smashing TV

Practicing skills matters. For technical workshops or ice skating. Meow!

March 31, 2020 Smashing Newsletter: Issue #251

Previous Issues