August 25, 2020 Smashing Newsletter: Issue #263
This newsletter issue was sent out to 185,082 subscribers on Tuesday, August 25, 2020.
Editorial
How often do we come across something we’ve never seen before? A few years ago, I’ve made it my new habit to explore topics that I don't know much about. I’ve attended a corporate meet-up with lawyers and teachers, joined a Georgian cooking class, and spent hours watching people excited about flags, stamps, plants, beetles, wine and piano keys.
Every single time I learned something unexpected, and every single time I left amazed about the little insights, vocabulary, and excitement all these wonderful people brought together to share what they’ve learned.
We can learn from everyone around us. Once exposed and energized by people who care about their craft, this excitement and these insights can magically carry over like pieces of a puzzle to produce new extraordinary ideas. So next time you have a chance, perhaps explore topics outside the scope of your work and meet people with different views, thoughts, and experiences. And then bring them back to your work, to reshape your mindset and your way of working.
The same thinking lies at the very heart of everything we do at Smashing. We want to encourage conversations between designers and developers and marketing teams and testers, and explore design systems and accessibility as well as HTML email design and internationalization. It’s all a part of what we all have to know and do anyway as we are all in this boat together. In our upcoming SmashingConf Freiburg Online (Sept. 7–8) and front-end online workshops, we’ll cover just that: everything front-end, from design to development.
We’d love to see you there. And if we don’t meet there, perhaps find a way to bring insighs from other industries to your life, to get a chance to be exposed to topics that we all wouldn’t normally learn in the hectic of daily routine.
— Vitaly (@smashingmag)
- A Journey Through Japanese And Cyrillic Web Design
- Fonts In Use
- The Just In Case Mindset In CSS
- Cloud Diagrams Made Easy
- Free Vector Illustrations And Animations
- Coming Up Next on Smashing
1. A Journey Through Japanese And Cyrillic Web Design
The web spans the entire globe, however, when we talk about web design, the examples and showcases usually revolve around the 26 characters of the Latin alphabet. Other writing systems are often not part of the discussion — with the effect that a lot of brilliant websites stay unnoticed for a lot of us. Time to change that.
If you’re up for a journey through Japanese web design, Responsive Web Design JP is for you. The examples in the collection shine with a unique lightness and concentration on the essential, and, even if you don’t master Japanese, you can browse the showcase by technique.
Another inspiring site that lets us take a look beyond the Latin writing system is Cyrillic Design, dedicated to sites that use Cyrillic typefaces. Lots of beautiful designs can be discovered in there and it’s particularly interesting to see how type is used to make bold statements. Two fantastic reminders to look for inspiration outside of our own comfort zones. (cm)
2. Fonts In Use
Do you need to decide on a typeface for a project but are missing some inspiration? Or maybe you have a sweet spot for all things typography? Either way, Fonts In Use, might be just what you’ve been looking for.
Fonts In Use is an archive of typography indexed by typeface, format, industry, and period. From vintage invoices and newspaper adverts from the beginning of the 20th century to candy packaging and movie title sequences from today, the site is a treasure chest of typographic samples of all origins. A great way to discover new fonts. (cm)
3. The Just In Case Mindset In CSS
When building with CSS, often we design with a particular length in mind: for words, names, amounts and pretty much any content. But how do we make sure we are prepared when a text string is way too lengthy, or a translated call to action doesn’t fit the layout any more?
In his short article on The Just in case Mindset in CSS, Ahmad Shadeed covers a few use cases when just that happens, and how to deal with it. By using "safe" margins, adjacent-sibling combinators, text truncation and auto values, we can avoid issues showing up down the line. Think of at least 3 types of placeholders — for text strings, avatars, labels and everything in-between: short, medium and lengthy, and test for them appropriately. For example, using Sketch Craft plug-in.
Also, take a look at Keith Clark’s CSS Feature Toggle DevTools Extension — it’s an extension that helps us toggle-off CSS features, allowing us to see how sites and apps render and fallback in browsers that don't support modern CSS features, e.g. CSS Grid.
4. Cloud Diagrams Made Easy
Making complex relationships and contexts visible, a well-made diagram can often replace lengthy explanations. A fantastic little tool to help you next time you need to visualize a cloud architecture, comes from Mark Mankarious: Isoflow.
Isoflow works right in the browser and provides an easy-to-use interface that makes creating beautiful, isometric diagrams a matter of only a few minutes. Just drag and drop the elements you need onto the canvas, connect them, and add labels. Once you’re happy with the result, you can export the diagram for print or web — thanks to vector icons, it will look sharp at any size. A true timesaver. (cm)
5. Free Vector Illustrations And Animations
A cow kidnapped by aliens, a dropped ice cream cone with a sad face, the Lochness monster emerging from the water. These are some of the fun error state animations that the folks at Pixel True Studios offer for free download in their set of vector illustrations and animations.
Apart from error state animations, the set includes illustrations, icons, and animations to depict everything a web project could call for: security, search, contact, e-commerce, SEO, and a lot more. The illustrations are available as SVGs, the animations are made with Lottie. Released under an MIT License, you can use them for free both in personal and commercial projects. A great way to add a fun and friendly touch to a design. (cm)
6. Coming Up Next on Smashing
With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:
- “Accessibility With(out) Priorities” with Chen Hui Jing— September 1 at 14:00 London time
- “The Good, The Bad And Ugly Of Prototyping” with Adekunle Oduye— October 1 at 19:00 London time
We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.
- Jamstack! (Sep 1–16)
- The CSS Layout Masterclass (Sep 10–11)
- Smart Interface Design Patterns (Sep 22–Oct 6)
- Vue.js: The Practical Guide (Sep 17–Oct 2)
- Build, Ship & Extend GraphQL APIs (Oct 15–30)
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.