We all are creatures of habit. How often have we added a drop-down for country selection just because we could reuse it from our previous project? What about plugging in a “confirm your email” input field to make sure that the customer doesn't make a mistake there — just because we’ve all been doing it for so many years? What about hiding navigation options behind a hamburger icon just because it’s a convention we’ve been following for years?
Living in the era of reusable and modular solutions, we often get stuck with the same solutions being used over and over again. It’s not for the lack of creative spirit or freedom that we do so; it’s just infinitely more time-consuming to come up with something new every time. And, frankly, often it’s not really necessary at all.
But sometimes it is. In general, it’s better to avoid drop-downs when there are more than 10 or fewer than 5 options. For navigation, hiding an important item automatically reduces user engagement, while highlighting it prominently increases its use. This should be quite obvious, but instead of prominently highlighting critical call-to-actions, how often do we tuck them away because it’s simply an established pattern?
Email verification right before the purchase, on yours Smashing Magazine.
On Smashing Magazine, we’ve learned that the infamous “confirm your email” input field doesn’t work as most people copy-paste their email anyway. So when is the better time to ask the customer to verify it? We’ve learned that it’s just before they are about to click that final “Purchase” button, and just after they've clicked it.
What solution have you integrated recently just because it's always been done this way? What if we looked at the interface we so thoroughly craft and question the defaults we've been relying on for so long? Pick a battle to make the experience better by testing things you’ve never tested before. With the wonderful winter season slowing down, it might be a good starting point to boost your engagement and performance in 2019, so let’s use the opportunity to break out of all the broken patterns we’ve got so used to over all these years!
— Happy experimenting!
Table of Contents
- Performance Tips And Tricks
- SmashingConf San Francisco 2019 (Apr 16-17)
- Notifications Done Right
- Big List Of Naughty Strings
- Assets To Enqueues Converter
- Mobile Pattern Inspiration
- The Dogs Of CodePen
- Upcoming In Smashing Membership
Performance often gets overlooked. To make it easier for your team to adopt a performance strategy, Harry Roberts distilled the types of performance testing you can do into three distinct categories. He explains how and when they should be carried out and what the outcomes should be.
Speaking of performance: If the performance of your site is flawed, the issue might be your CSS. As Harry points out, CSS is a potential bottleneck on the network — in itself and for other resources. His tips help you shorten the Critical Path and reduce time to Start Render. Last but not least, a performance-related question a lot of developers ask themselves: inlining or caching? Scott Jehl’s answer is “both please!” His summary of how to use the new caches API and service workers to avoid a longstanding drawback of inlining files is definitely worth diving into. (cm)
We like breaking out of the predictable patterns. We take pride in putting our heart and soul into crafting friendly, inclusive and practical events, and SmashingConf San Francisco 2019 won’t be an exception. Instead of showing Keynote slides, our speakers will show how they work in a text editor, how they build, design, deploy and play right on stage — exploring front-end & UX techniques.
What to expect? Live debugging, live sketching, live designing and live coding, of course. Check the topics.
Meet SmashingConf, a friendly, inclusive event for people who care about their work. With front-end & UX techniques you can bring back to your team and apply right away.
Some wonderful speakers such as Miriam Suzanne, Chris Coyier and Sara Soueidan are already revealed. And if you need to convince your manager, we’ve prepared a neat Convince Your Boss PDF (417 KB) and a letter template for your manager’s approval. Ah, early birds are now available as well. Off to the tickets!
Her experiments gave her a lot of insights into the possibilities and limits of brain-computer interfaces. Now she shares what she’s learned. Her next endeavor: experimenting with raw data and machine learning. The future is here! (cm)
Notifications are a double-edged sword. When done right, they add value to the user experience, but when they aren’t purposeful or come at the wrong time, a user might turn away from your product. So what is it that makes a notification useful? The folks at CanvasFlip wrote a comprehensive article in which they share tips on when to use notifications and how to design them to improve the experience.
If you want to dive in deeper, Julia Chen summarized what it takes to develop a meaningful in-app messaging strategy. She also explores how notifications which have gone wrong could be turned into moments of value. Another good read comes from Moses Kim: in “Don’t @ me”, he ponders about the UX of notifications in 2019. A thought-provoking article about our attention being a battlefield and how care and respect need to shine through in order for a notification — and user experience — to be successful. (cm)
Some strings have a high probability of causing issues when used as user-input data. Trying to tweet a zero-width space on Twitter, for example, leads to an internal server error. And although it’s uncommon that a user would actually enter weird unicode characters, an internal server error for unexpected input isn’t a positive experience.
Max Woolf’s Big List of Naughty Strings helps you detect the strings which are likely to cause issues when a user inputs them. Please note that the list is intended to be used only for testing purposes for software you own and manage. As some of the Naughty Strings can indicate security vulnerabilities, using them with third-party software may be a crime. (cm)
If you often create WordPress themes out of HTML templates, you know how boring it is to convert HTML assets to proper WordPress enqueues. Giorgos Sarigiannidis’ Assets to Enqueues Converter changes that. Paste in a list of assets, and the converter will output it to enqueues with just one click. A real timesaver. (cm)
Which design patterns do really work on mobile? Mobile Patterns features some great examples. The site collects UI/UX patterns from successful apps and categorizes them into categories from onboarding and engagement, to components, navigation, actions, and more. Little details that make a difference. (cm)
The Smashing universe might be inhabited by cats, but who said we don’t have a sweet spot for their canine friends, too? Now mix a dog’s cuteness with the mighty powers of CSS, and you get The Dogs of CodePen, a showcase of 12 animated dogs. From Charles the CSS Corgie to a barking little fellow made up of cardboard boxes — imagination has no limits. (cm)
We recently added our newest book Form Design Patterns to the Smashing Membership, an eBook on designing and coding accessible and progressively enhanced web forms. The eBook is included in the Smashing Membership. Each member makes a difference and gets valuable content from it, too!
- 📺 Smashing TV: “Introduction To Machine Learning And Artificial Intelligence” with Allan Kent. (Nov 27, 11:00 AM Eastern)
- “The State of the Web in South-East Asia” with developers from Indonesia, the Philippines and Singapore. (Dec 4, 11:00 AM Eastern)
- “Ethics in Design” with Trine Falbe. (Dec 11, 11:00 AM Eastern)
We are very grateful for the kind and generous support of 1,310 members — so grateful, we’ll be sending a gift to our first Members to celebrate our first anniversary at the end of the month! Your support allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Thank you so much for making it happen!
Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.
You can always unsubscribe with just one click.
- Custom Dropdowns, CSS, Performance and Building Tools
- Hybrid CSS Positioning, Free Fonts, Push Notifications
- Black Illustrations, CSS, Data Science and Licenses
- SmashingConf Live, Speed Profiler, CSS and SVG
- Custom CSS Cascades, Focus Blocks and CORS
- React, Accessible Components, Terminal, Video Player
- BEM, DOM Scripting, SVG Masks, Vintage Games, Posters
- Design Checklists, Passwords, Dropdowns and Tooltips
- Accessible Inputs, Console, Free Illustrations, SVG
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.