June 23, 2020 Smashing Newsletter: Issue #257
This newsletter issue was sent out to 187,039 newsletter subscribers on Tuesday, June 23, 2020.
Editorial
We’ve just updated our workshops page with a whole collection of amazing new online workshops. There really is something for everyone in our upcoming sessions. You can also bundle workshops and make a saving. Take a look at the workshops, and let us know if you would like to attend another one.
Along with the online workshops, we have also enjoyed spending time with so many of you in our Smashing Meets events. In our recent Monthly Roundup, we link to the video from our last two events, including the latest event held on June 9th. Watch talks from Henri Helvetica, Christian Nwamba, Yiying Lu, and me! We hope to have some other online events to announce soon, but we hope you enjoy these video presentations in the meanwhile.
On a personal note, I know that our whole team would want to thank our Smashing Community for your support over the last few months. The pandemic has made life unpredictable and scary for many people. At Smashing, we’ve had to very quickly figure out new ways of delivering great content — in a way that supports the business but also our speakers and workshop leaders. We have been encouraged by the enthusiasm from the community, the messages of support, and the willingness to try these new formats.
And, we see positive things coming out of it all. Many people attending the online workshops are excited to see these come online as travel to an in-person workshop was impossible even in more normal times. We’re learning very quickly, along with other conference organizers, how to make good online events. We’re able to be more inclusive — not just for attendees but for speakers, too!
We hope to be able to invite people to speak who would normally struggle to travel and speak at events. We’re able to do these all these wonderful things because of your support, and we truly and sincerely appreciate it.
Stay safe,
Rachel Andrew (@rachelandrew)
Table of Contents
- The Anatomy Of A Push Notification
- Hybrid Positioning With CSS Variables And
max() - Stories From The Dark Side Of The Web
- Free Fonts With Personality
- Useful Resources For Designing With Email
- Editing Keyframe Animations Live
- The Design Inspiration Search Engine
- Upcoming In Smashing Membership
- Our Next Smashing Workshops
1. The Anatomy Of A Push Notification
Push notifications were first introduced on iOS back in 2009, web push followed five years later. Today, they are supported across a lot of platforms and browsers — from iOS and Android to Amazon Echo, Windows, Chrome, Safari, Firefox, Edge, and more. Each one of these platforms is a bit different, though, making it complicated for designers to wrap their heads around what exactly goes into a push notification.
A useful reminder comes from Lee Munroe. He summarized how many lines of text you need on which platform, requirements for images, if there are character restrictions, and other details that can be hard to remember. The overview also comes in handy to assess what your notification will look like on operating systems you don’t have access to. One for the bookmarks. (cm)
2. Hybrid Positioning With CSS Variables And max()
Some ideas require you to think outside the box and explore new paths to make them happen. Imagine this example: You want to have a page navigation on the side, right under the header when it’s scrolled all the way to the top. It is supposed to scroll with the page when the header is out of view and stay at the top for the rest of the scrolling. That’s exactly what Lea Verou wanted to achieve in a recent project.
You might say, that’s a case of position: sticky, but there’s a more finely-tuned approach to getting the job done, as Lea shows. Without any JavaScript. Her solution relies on CSS variables and the new max() function that lets you apply min/max constraints to CSS properties. A fallback helps in browsers that don’t support max() yet. Clever! (cm)
3. Stories From The Dark Side Of The Web
Hackers, data breaches, shadow government activities, cybercrime, hacktivism — a lot is going on on the dark side of the web. But who are the people behind these activities? And what’s their “mission”? Jack Rhysider dedicated a podcast to the stories that happen on the hidden parts of the network: Darknet Diaries.
No matter if it’s the story of a gambler who finds a bug in a video poker machine that lets him win excessive amounts of money, the story of a penetration tester breaking into buildings, or a nation state hacking into a company within another nation, the Darknet Diaries is full of gripping insights into a secret world. The podcast adheres to journalistic standards by fact-checking and ethical sourcing of information, and while all of this is great entertainment, it also aims at explaining the culture around cybersecurity to make listeners more responsive, informed citizens of their digital lives. Be sure to tune in. (cm)
4. Free Fonts With Personality
Typography is a powerful communication tool, a way to express ideas, and a trigger for creativity. Based on this understanding, the Argentinian-based type foundry Rostype creates fonts that are free to use for anyone, in personal and commercial projects.
There are currently 15 fonts available, and each one of them shines with a unique personality. Some are designed with a special focus on readability, others are the perfect display typefaces, made to stand out, some are retro-inspired, others more futuristic and dynamic. There’s even a typeface inspired by the coronavirus lockdown. A treasure chest if you’re looking for a typeface that is a bit more distinctive. (cm)
5. Useful Resources For Designing With Email
Do you design and build emails? A well-equipped digital toolbox helps ease the job. We already covered Can I Email and Good Email Code in previous newsletter issues, and since designing for email is a topic that can cause quite some headaches, here are some more resources to help you master the challenge (a special thanks goes to Mark Robbins for bringing them to our attention).
One of the useful little helpers comes from Dylan Smith: a cheatsheet for targeting email clients. To remove unused CSS from email templates, there’s Email Comb, and if you want to send a quick test email, sendtest.email helps you do just that. All you need to do is paste your HTML email into the browser and hit ‘send’. Last but not least, Rémi Parmentier maintains a GitHub repository with all those weird email client behaviors you might come across — to help you understand what’s going on and to report each bug to the concerned company. So feel free to contribute to it. Happy emailing! (cm)
6. Editing Keyframe Animations Live
When you’re creating animations, it’s always helpful to see the animation in action as you tweak it. Unfortunately, that also involves a lot of switching back and forth between your text editor and the browser. Mitch Samuels was tired of doing that, so he built a tool to save him time: Keyframes.app.
The tool lets you create a CSS keyframe animation with a visual timeline editor. You can add steps to a timeline, use the simple UI to adjust the CSS properties you want your target element to have at each step, and the animated preview will update live. Once you’re happy with the result, you can copy the CSS and use it in your project right away. Keyframe.app is also available as a Chrome extension. A real timesaver. (cm)
7. The Design Inspiration Search Engine
Have you heard of Muzli yet? The search engine mines leading web sources to provide you with the design inspiration you’re looking for.
Maybe you’re working on a landing page and need some inspiration to develop a creative solution or you’re looking for some color inspiration, just enter a keyword into the search engine for a quick inspiration shot. Fueled by more than 150 sources from Dribbble and Behance to Mashable and Techcrunch, Muzli combines automated curation with human discovery to uncover design, UI, and UX inspiration and news to keep you in-the-know and help you overcome a creative low. Worth trying out. (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.
- Buy! The eCommerce UX Workshop with Vitaly Friedman (July 2-17)
- Design Systems with Brad Frost (July 7-21)
- Behavioral Design Workshop with Susan and Guthrie Weinschenk (Aug 17-31)
- Designing for a Global Audience with Yiying Lu (Aug 20 - Sep 4)
- 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
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.