Dear Friend,
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)
Table of Contents
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)
From our friends
Meet Clarity 2019: A Design Systems Conference
We're always happy to support our friends and colleagues. Jina is running Clarity, a design systems conference, focused on how we work together. We all provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. We elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration. A great conference with great content. Check the line-up, and join the conference!
Clarity is a design systems conference taking place on August 20-21 in San Francisco.
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)
Online Masters in Information Design and Strategy
Earn your master's degree online.
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:
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. New On Smashing Job Board
- Senior PHP Developer at VONQ (Rotterdam, The Netherlands)
"We are a growing organization in the transition to a software-driven business, and YOU can make an impact on that! You are a true PHP expert and you get excited when it comes to practices such as domain driven design, event sourcing & CQRS." - UI Design Mentors and Tutors at CareerFoundry (Anywhere)
"We are looking for experienced and passionate UI designers all over the world to join our pool of experts and help define the next generation of design talent by educating and empowering students across the globe." - Digital Design Manager at The Ellen MacArthur Foundation (Cowes, Isle of Wight, UK)
"You will be collaborating with a team designing products, services and experiences that inspire and support this community to apply these ideas. Your work here will help us to reach a global audience, ensuring a high bar of quality for design and a focus on solving user needs."
12. 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:
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)
13. Our Most Popular Articles
- Text To Speech With AWS
Text to speech can help you create more versatile, accessible content. You could purchase recording equipment and spend hours recording and editing each narration, but if you want most of the benefit for only a couple of minutes and a few pennies per post, consider using AWS instead. This article will demonstrate how to use Amazon Polly to narrate your content. - Designing And Building A Progressive Web Application Without A Framework
You don't need to be a Computer Science graduate or know a JavaScript framework to create a Progressive Web Application. With some HTML and CSS knowledge and basic competency with JavaScript, you have all the skills you need. In three parts, we're going to share the journey of designing and building a simple Progressive Web Application called 'In/Out', built without a framework. - I Used The Web For A Day On A 50 MB Budget
Data can be prohibitively expensive, especially in developing countries. Chris Ashton puts himself in the shoes of someone on a tight data budget and offers practical tips for reducing our websites' data footprint.
This newsletter issue was written and researched by Cosima Mielke, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
