Smashing Newsletter: Issue #235

Editorial

August is often a calmer month of a year, when things slow down a little, and the frequency of Slack reminders and sales notifications goes down. That's a good thing as it gives us all a bit of time to reflect and get prepared for the rest of the year. And it's just about what it's like in the Smashing family these days. Some of us are on well-deserved vacations, while others enjoy a couple of productive days to get some work done.

For a long time I believed that a strong team is made of stars — extraordinary world-class individuals who can generate and execute ideas at a level no one else can. These days, I feel that a strong team is the one that feels more like a close family than a constellation of stars. A family where everybody has a sense of predictability, trust and respect for each other. A family which deeply embodies the values the company carries and reflects these values throughout their work. But also a family where everybody feels genuinely valued, happy and ignited to create.

That last part is often underrated. So as things are slowing down, take a look around, at your desk and at your workflow, and explore issues and blockers that keep annoying you over and over. Maybe it's the frequency of email notifications. Or maybe it's heavy browser extensions that slow you down. Or maybe you want to be challenged, and wanted to get that one book or tool that you've bookmarked months ago. Or perhaps you've seen your colleagues struggling with something recently, so approach them and see if you could help somehow.

August is just the time to address all these issues. And who knows, maybe before you know it, when everybody gets back to the daily routine in September, all those little things will be out of the way, making everybody's work more enjoyable and streamlined. That's the goal worth investing into.

Slow down and take care!
— Vitaly (@smashingmag)

Freebie: Grenze, A Hybrid Typeface System
Designing A Responsive Table Of Contents
Design Systems Survey 2019
Quantity-Dependent Columns With CSS
Lessons Learned From Web Platform Testing
Custom Text Underlines
A Free-To-Use Micro-Animations Library
Context-Dependent Image Loading
Freebie: Isometric SVG Illustrations
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Freebie: Grenze, A Hybrid Typeface System

Designed by Renata Polastri and Omnibus-Type, the typeface system Grenze combines the best of two worlds: as a hybrid between Roman and Blackletter styles, it transports a sense of boldness and texture while at the same time offering the readability of classical forms.

The family includes nine weights (Thin, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold and Black) with matching italics and comes with some useful advanced features such as ligatures, ornaments, extended language support, and various figure sets. Open-sourced under the SIL Open Font License 1.1, so you can download and use Grenze for free for private and commercial projects. (cm)

2. Building A Responsive Table Of Contents

On the web, a table of contents is usually not much more than just a list of items, stacked horizontally on small and large screens. But what if you wanted to introduce a slightly more dynamic table of contents? Just recently we released the first issue of our brand new printed magazine, and Veerle Pieters took the time to design a quite vibrant and dynamic table of contents for it.

Olivia Ng has turned a static table of contents into a dynamic one. She has built a responsive table of contents with CSS Grid, where the interconnections between chapters are re-aligned and resructured based on the viewport width. A beautiful solution for a component that’s usually overlooked. Thanks, Olivia! (vf)

3. Design Systems Survey 2019

For quite a while now, design systems have been a topic of conversation in teams around the world. And that for a good reason: they establish consistency in design and code, help increase accessibility and usability, and make the design and development process more efficient.

In the 2019 Design Systems Survey, Sparkbox wanted to learn more about the challenges and benefits that design systems bring along. So they asked around about how people use design systems. Common reason for design systems to fail were difficulties in adoption, maintenance and staffing. And common attributes of successful design systems were a dedicated team and deep integration into the developer workflow.

Need more insights? Take a look at the Design Systems Handbook by InVision, and Alla Kholmatova published a lil’ book on design systems as well. (cm)

4. Quantity-Dependent Columns With CSS

How do you avoid lengthy lines of text in a simple one-column layout? What about a good old multi-column layout? Ideally, we do need to prevent vertical and horizontal overflow that makes users scroll too much. Based on this idea, Heydon Pickering experimented with an interesting concept: quantity-dependent columns.

Let’s say you have a long bullet list with rather short bullet points, for example. As Heydon suggests, you could “dynamically divide the list into two columns to prevent overflow and display the content at a glance when the viewport is wide enough”. Clever, and practical! (cm)

5. Lessons Learned From Web Platform Testing

The web-platform-tests project is W3C’s attempt to build a cross-browser test suite for the web-platform stack and, thus, make sure that the software browsers are shipping is compatible with other implementations. A vital part of keeping the web healthy. Having contributed to web-platform-test for years, the folks at Bocoup now wrote up what they learned in the past 20 months of testing. An insightful look at systematic flaws and current trends. (cm)

6. Custom Text Underlines

Link underlines are usually an element where form steps back in favor of function. But they can be used as a design element, too, as some great examples show. One of them comes from Ahmad Shadeed. Ahmad asked himself if he can create a custom link underline with SVG that is generated dynamically and randomly. And, as it turns out, he mastered the challenge beautifully.

If you want to tinker with the concept, too, Ahmad shares a step-by-step guide for you to follow along. Another great example of a custom text underline comes from Ash Stevens. His multiline text underline shines with rounded caps and turns some simple text into a bold statement. (cm)

7. A Free-To-Use Micro-Animations Library

Delightful little micro-animations, minimalist but with a fun touch — that’s useAnimations. The animations library features a rich selection of animated icons with new ones being added every week. Based on Cole Bemis’ Feather icons, they cover everything from alerts and notifications to navigation, toggles, and social media icons. The icons are supported across all devices, responsive, and fully customizable in Adobe After Effects and editable in Lottie .json. (cm)

8. Context-Dependent Image Loading

When it comes to improving web performance, the <picture> element can work wonders, as Scott Jehl shared a few days ago on Twitter. He used <picture> to load an image only on large viewport sizes where the design actually uses it. Something that wasn’t ideal as img {display: none} would download the image no matter what.

With Scott’s technique, we add base64-encoded string as a placeholder for a particular range of viewports, while serving images to other viewport ranges. If you want to dig deeper into the matter, be sure to also check out Eric Portis’ demo in which he shows how it works in detail. A nifty little trick that can go a long way. (cm)

9. Freebie: Isometric SVG Illustrations

Do you need an illustration for a project but you don’t have the time (or money) to hire an illustrator? Sergei Tikhonov has got your back. Sergei created a set of isometric SVG illustrations that you can use for free in both personal and commercial projects. The designs range from SEO and cryptocurrency to web hosting and data analysis and make a great fit for business-themed projects, just like for startups and agencies. (cm)

10. Upcoming In Smashing Membership

Thank you for being smashing! Two weeks ago we released the brand-new Smashing Magazine Print, with practical and thought-provoking articles on ethics and privacy to make us all think. Members ($5 plan) receive the digital version for free, Smashers ($9 plan) get the printed issue shipped directly to their doorsteps. And we have some new webinars coming up as well after a short summer break:

Smashing TV on August 13 at 16:00 GMT
Customer Journey Mapping: Where UX And Marketing Meet with Paul Boag
Smashing TV on August 20 at 16:00 GMT
Interactive Web Animation With SVG with Cassie Evans

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. (Ah, you could become a Smashing Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉)

11. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:

🇧🇾 Rolling Scopes (Aug 9–11) in Minsk, Belarus.
🇨🇭 Front Conference (Aug 29–30) in Zürich, Switzerland.
🇩🇪 SmashingConf Freiburg (Sept 9–10) in Freiburg, Germany.
🇨🇿 WebExpo (Sept 20–22) in Prague, Czechia.
🇺🇸 Awwwards Digital Thinkers (Sept 25–27) in NYC, USA.

Or, if you’d like to run an in-house workshop at your office, 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)

August 6, 2019 Smashing Newsletter: Issue #235

Previous Issues