Smashing Newsletter: Issue #203

Editorial

What would be the best way to improve your skills and learn? How about by observing designers and developers working live? Well, starting from this year, we’ll be exploring new conference formats, and one of them is a focus on talks without… slides!

Our upcoming SmashingConf Freiburg 2018 (Sept. 10–11) will feature a number of interactive live sessions, showing how web designers design and how web developers build — including setup, workflow, design shortcuts, debugging, naming conventions, and everything in between.

Let’s try something new: Meet SmashingConf Freiburg 2018 (Sept. 10–11), with practical, interactive, live sessions.

As a mix of focused and practical talks, you can expect everything from interface design and copywriting to CSS/JS coding, debugging, and live perf/accessibility audits — with Dan Mall, Andrea Drugay, Mina Markham, Seb Lee-Denisle, and many others.

The night before the conference, we’ll be hosting a warm-up party named “FailNight” with the following twist: every single session will highlight how we’ve all failed on a small or big scale, and what we all can learn from it. Sounds like fun? Well, that’s probably because it will be!

Taking place in our wonderful home town Freiburg, Germany 🇩🇪 with 13 funky speakers, a handful of practical workshops, and a broad range of topics with all things web. Only 260 tickets are available. Early-bird tickets go on sale at 2:00 PM CET, on April 24. We look forward to seeing you in Freiburg… again! ;-)

Let’s reinvent the conference experience,
— Vitaly (@smashingmag)

Contextual Styling Made Easy
Freebie: A New Take On A Classic
A Look Inside display: contents
A Gold Mine Of CSS Snippets
Getting Color Management Right
Optical Adjustments For A More Harmonious Design
Does Your Site Deserve Recognition?

1. Contextual Styling Made Easy

Imagine you want to have multiple themes on the same page, e.g. a light main area and a dark hero and footer section. Styling them contextually is usually quite a hassle, but custom properties can make the undertaking at least a bit easier, as Simurai explains.

How to do it? Well, first, you need to define a default theme with different variables. Then you can create components using the variables, and, finally, have them picked up with a simple attribute. Once you’ve done that, you can start to define more theme regions and add them to your markup. The components will stay context-unaware and, thus, you can use them in multiple themes — even on the same page. A promising solution for colors, sizes, fonts, or anything else you’d like to define as variables. (cm)

2. Freebie: A New Take On A Classic

Back in 1971, Andrzej Heidrich (creator of the Polish banknotes), designed the cursive style “Bona” typeface. Inspired by the Italian renaissance antiqua, it was a real beauty with its classical proportions and subtle contrast — one that only existed as a metal type set, though. More than 45 years later, the young designer Mateusz Machalski decided to awake it from its slumber and get the typeface ready for our digital times: It was the birth of Bona Nova.

Bona Nova is more than a digitized version of the classic. It expanded the original character set with small caps, alternates, and OpenType features. It also introduced two entirely new versions: regular and bold. Distributed under the Open Font License, you can download and use Bona Nova for free. (cm)

3. A Look Inside `display: contents`

When designing for the web, we usually think in rectangular boxes: the actual box, consisting of border, padding, and margin areas, plus the content area which hosts the content of the box. The new CSS display property now lets us control how this box and its children are drawn to the page — and whether an element in the markup will generate a box at all.

As Ire Aderinokun explains, the newly specced contents value will draw the contents of the box as normal when applied to display, but the surrounding box will be omitted entirely. The feature isn’t widely supported yet (only in Chrome, Firefox 65+ and Safari 11.1+), and, thus, it should still be considered a progressive enhancement and only be used with an appropriate fallback. (cm)

4. A Gold Mine Of CSS Snippets

Do you have a favorite CSS snippet you use again and again? Michael Scharnagl asked the same question on Twitter recently, and, well, with almost 800 replies and more than 2,300 likes, it hit a nerve.

To prevent all the useful little snippets that emerged in the conversation from living an existence only in a Twitter thread, Michael collected the ones that got mentioned most often in one place. An overview of useful snippets, covering everything from responsive media and box sizing, to Grid, aspect ratio, and even HTML for email. (cm)

5. Getting Color Management Right

Color management is essential, but are the settings you have in place really the best ones for your assets and the platforms you’re designing for? After all, you need to be able to rely on what you see on your screen. Not only is it crucial when it comes to choosing colors, but also for assessing contrast and legibility.

To help you improve your color management, the team at bjango summarized everything you need to know about it. You’ll learn to choose the best color space for your needs and when you should assign a color profile vs. when it’s better to convert to one. As a bonus, the article also takes a look at popular design programs and how to get the most out of their color management options. (cm)

6. Optical Adjustments For A More Harmonious Design

A text block that doesn’t look centered in its box, a shadow appearing darker than it actually is, a button looking slightly unaligned. No matter how hard you tried to make things look right, your eyes (or those of your site’s visitors) often tell you a different story. As Anton Lovchikov explains, the reason why things might look “a bit off” often lies in our brains and how we perceive objects in real life. So what can you do against it? Easy! Fool the viewer’s brain back.

Anton collected examples of where the technical settings and our visual perception drift apart. The content inside a modal can be perfectly centered, for example, but since we’re living in a world in which gravity is king, the content might appear lower than it actually is because our brain applies its real-world expectation that an object will necessarily fall down to the design. So, to align it optically, you need to counter-compensate for these expectations and lift it up a bit. Be sure to check out Anton’s article for more valuable insights like this one. (cm)

7. Does Your Site Deserve Recognition?

Hoping to get an award? Recommended as a resource? Used as a case study? If you want your site to get recognition, certain things will be expected. Does My Site Deserve Recognition provides a baseline of what can be considered a good example so you can either polish up your own site or assess if other sites are worth being recognized or awarded something.

The guide is a ten-point checklist that addresses anything from accessibility and code validation to browser compatibility and page weight. Links to further reading material and helpful tools are included, too. One for the bookmarks. (cm)

April 10, 2018 Smashing Newsletter: Issue #203

Previous Issues