Subset Numerals so They’re as Awesome as the Rest of Your Content

You’re putting the finishing touches on your new million-dollar-idea — your copy is perfect, your color scheme is dazzling, and you’ve found a glorious font pairing (who knew Baskerville and Raleway looked so great together? You did.) but there’s one problem: Raleway’s pesky lowercase numbers make your shopping cart look confusing and overwhelm the user.

This is a fairly mundane problem, but an issue that can make beautiful typefaces unusable if numbers are an important part of your site; a store or an analytics dashboard for example. And this isn’t just an issue with lowercase numerals. Non-monospaced numerals can be equally distracting when glancing at a list of numbers.

We’re going to look at a few techniques to combat this problem, but first we need to find a font whose numerals we can use instead of our main body font. There’s no cut-and-dry way of finding your font twin. The most important characteristics to search for are the weight and width so that you can match it to that of your original font. If you intend to use numerals at multiple weights, try looking at fonts that have a wide range of weights to up your chances at matching your original. You may end up needing a different numeral font for each weight or mismatching the weights of the font pairs, but that’s fine because there are in fact no font police.

Here are a few Google Font pairings that match well enough to not be noticeable at small sizes:

Method 0: Wrap ‘em in spans

@import url('https://fonts.googleapis.com/css?family=Raleway:400|Nunito:300'); body { font-family: 'Raleway', sans-serif;
} .numeral { font-family: 'Nunito', 'Raleway', sans-serif;
}
Your total comes to $<span class="numeral">15</span>.<span class="numeral">99</span>

This is not a good solution. Having to add to the markup is bad, and loading both fonts in their entirety is not great, but if you don’t have a lot of content and want a simple solution, then there’s no shame in it.

What we’d prefer to find is a CSS-only solution that isolates the numerals of the number font and loads them instead of (or before the main font) without having to change the HTML. Read on.

How font-family works

The following methods rely on creating a @font-face declaration which only refers to our preferred subset of numerals, and references them in the font stack as normal:

body { font-family: 'Custom Numeral Font', 'Main Font', sans-serif;
}

By ordering the subsetted font first in your font-family declaration, the browser will default to it and will fallback to the subsequent fonts for glyphs that are not available in the first. This is a really important distinction — the browser is not only checking that the declared font is available (locally or imported via @font-face), but it is also checking that its character map contains the requested character and will pass onto the next font if it doesn’t, on a character-by-character basis. By the way, the spec for the font-matching algorithm is a surprisingly interesting read.

It’s important to note that the browser will prioritize the font family over the font weight and style, so if you subset the numerals for only a normal weight and then have a number inside a bold-style element, the browser will choose to show the normal-weight character from the numeral font rather than the bold-weight character of the main font. Basically, if you’re doing this, make sure you do it for all the font weights you’ll show numbers in.

Method 1: Font Squirrel custom subsetting

If you self-host your font files instead of serving them from a hosted service like Adobe Fonts or Google Fonts, then you can use the expert configuration of Font Squirrel’s Webfont Generator to create files that only contain the numeral subset. Read the font’s license agreement to make sure this type of manipulation is okay before proceeding.

Setting the Character Type for the replacement font to Numbers in the Font Squirrel interface.

Once you have the subsetted font files, you can use them as you normally would. Check out this article for more information about @font-face and file type browser support.

@font-face { font-family: 'Nunito'; src: url('nunito-light-webfont.woff2') format('woff2'), url('nunito-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal;
} body { font-family: 'Nunito', 'Raleway', sans-serif;
}

If you’re being performance-conscious, you can also subset your main font to remove its numeral glyphs and shave off a few extra bytes.

Method 2: @font-face unicode-range subsetting

The unicode-range property of @font-face is mostly used to declare the character set the font files contain in order to help the browser decide whether or not to download the files; a big potential performance boost for multi-language sites that use non-Latin alphabets. The flip-side is that unicode-range also restricts the @font-face declaration to the specified range, meaning that we can only use it to make certain portions of the font files available for use in the browser.

@font-face { font-family: 'Nunito'; src: url('nunito-light-webfont.woff2') format('woff2'), url('nunito-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; unicode-range: U+30-39; /* 0-9 /
} body { font-family: 'Nunito', 'Raleway', sans-serif;
}

This is worse for performance than the previous method as the browser still has to download the whole font file to use the numerals, but preferable if the license agreement disallows manipulation of the files.

Sadly, we can’t use this method to subset fonts already loaded by an external service, but it can be used on local fonts:

@font-face { font-family: 'Times Numeral Roman'; src: local('Times New Roman'); unicode-range: U+30-39; /* 0-9 */
}

This is a neat way of tweaking particular characters of your main font, perhaps subsetting for just an ampersand or preferred curly quotes (in which case you’d have to give up the “Times Numeral Roman” pun), with no performance loss as the local font will just be ignored if it doesn’t exist. You can check common system font availability here. And you can become Queen of the Type Nerds by making a site that can only be appreciated properly if you have all its subsetted fonts downloaded locally, premium esoteric.

Support for unicode-range is pretty good, but note that the subset font will be used for all text if it’s not supported, so maybe don’t make it Papyrus. Or if you really want to use Papyrus, you can be sneaky and add another web-safe font first so that unsupported browsers will default to it instead of Papyrus:

@font-face { font-family: 'Backup Font'; src: local('Arial'); unicode-range: U+60; /* backtick because I can't think of a more innocuous character */
} @font-face { font-family: 'Papyrus Ampersand'; src: local('Papyrus'); unicode-range: U+26; /* & */
} body { font-family: 'Backup Font', 'Papyrus Ampersand', 'Main Font', sans-serif;
}

Method 3: Google Fonts text subsetting

The Google Fonts API comes with a few handy extra options to aid optimization by specifying only particular font weights, styles and alphabets (the subset parameter takes a list of alphabets like greek,cyrillic and not a unicode range, sadly), but there’s also a little-known “beta” parameter called text which is ostensibly for use in titles and logos but works equally well for our purpose:

@import url('https://fonts.googleapis.com/css?family=Raleway:400');
@import url('https://fonts.googleapis.com/css?family=Nunito:300&text=0123456789'); body { font-family: 'Nunito', 'Raleway', sans-serif;
}

So simple! So elegant!

The text parameter can take any UTF-8 characters, but make sure to URL encode them if they’re not alphanumeric. The only possible issue with this method is that we’re not creating a custom name with @font-face, so if the user already has the subset font on their system, it will use that font in its entirety.

I haven’t been able to find any other hosted font services that offer this level of granularity for subsetting but do comment below if you come across one.

A few use cases

Live Demo
Live Demo
Live Demo
Live Demo

The post Subset Numerals so They’re as Awesome as the Rest of Your Content appeared first on CSS-Tricks.

The Secret Designer Halloween Special: Nightmare Clients (and How to Defeat Them)

Friends, I come with a warning…not to alarm, but to assist. Grab your crucifix, gather your silver bullets, prime your chainsaw, because I’m about to shine a light on nightmare clients that will chill the heart of the most experienced web professional.

Nightmare clients everywhere, await the unsuspecting designer. They’ll suck the time from your day, relentlessly pursue you, and trap you in a project that you’ll never escape.

My friends, forewarned is forearmed. This collection of fearsome fiends is easy to tackle…if you know their weaknesses. So pay attention, because what I’m about to share, may just save your life (or at least your weekend).

The Nosferatu Client

The Nosferatu client creeps into your home at night, sucking the life from you to feed his own self-importance. Whether it’s a late-night call, weekend texts, or meetings booked for 7am, the Nosferatu client wants to own you, and every second of your life.

The key to defeating the Nosferatu client is setting boundaries and sticking to them.

The Nosferatu’s chief weapon is flattery. You are invaluable to him. Your quick-thinking is keeping the project on track. The work you’re doing is award-winning quality. It is all designed to make it impossible for you to say, “No.”

The Nosferatu client is always looking for ways into your life. If he discovers that you’re working the weekend, he’ll expect you to be available every weekend. Don’t open the door to him.

How to Defeat a Nosferatu Client

The key to defeating the Nosferatu client is setting boundaries and sticking to them.

Let your clients know that you work regular office hours, even if you really work until midnight every night.

Never invite the Nosferatu client into your spare time, once he’s invited in, he’ll never leave.

Never call, post on Slack, email, text, upload files, or make any other sign that you are working after hours. If you finish a deliverable 30 minutes after your official close-of-business, then upload it the following morning.

Never invite the Nosferatu client into your spare time, once he’s invited in, he’ll never leave.

The Mephistopheles Client

Like the devil of Faustian folklore, the Mephistopheles client has a great deal for you. A deal too good to turn down. The opportunity of a lifetime. Never mind the small print, just sign here…

Lots of clients will offer you a terrible deal. It’s easy to turn down solicitation that only offers “exposure”; the Mephistopheles client traps you with a deal that on the surface looks enticing, but has a hidden sting in the tail.

Your terms are a litmus test; if a client wants to modify them, or work under different terms, then look closely at exactly what you’re agreeing to.

Is the client offering you a higher than expected rate of pay? Is the client offering you unlimited creativity? Is the client overly eager to sign you up? Any deal that looks too good to be true, probably is.

It could be that the client has sneaked a clause into the contract that gives him unlimited revisions. It may be that he’s sneaked in a clause that specifies payment on acceptance instead of payment on completion—yes, that has happened to me, and no, the acceptance never materialized.

How to Defeat a Mephistopheles Client

Have a comprehensive terms of service, and attach it to every single quote you send out. Make it clear that these are the terms under which the quote is issued.

Write your terms in plain-English (you probably don’t need a lawyer to draft them). The terms aren’t to cover you legally, or for use in court, they’re to establish ground rules and promote a healthy working relationship.

Your terms are a litmus test; if a client wants to modify them, or work under different terms, then look closely at exactly what you’re agreeing to.

The Zombie Client

The Zombie client is perhaps the most common of nightmare clients, there are millions of them.

The typical Zombie client is slow: sign-off takes weeks, not days; content arrives in months, not weeks.

Be warned…working with one Zombie client will attract more.

The Zombie client knows who his target demographic is. It’s people just like him. He’s certain there are thousands of them, and he intends to use you as bait.

What is worse, the Zombie client is aimless. He doesn’t have a defined goal, and is rarely able to supply a brief. Stray too close to a Zombie and he’ll make you aimless too.

How to Defeat the Zombie Client

The Zombie client is relatively harmless, if kept at arm’s length, but you do need some form of barrier to keep him at bay. The web professional equivalent of electrified fencing is a well-honed project plan.

The Zombie needs to be herded, and actually enjoys being given direction.

Despite his slow speed, and aimless wandering, it is almost impossible to rid yourself of a Zombie client. Years after you think he’s vanquished, the Zombie client will reappear, more often than not asking if you have a copy of his logo on file. Keep an archive of important files like this so you can send it to him and escape; the faster you respond the less likely the Zombie client is to catch up to you.

Be warned, the Zombie client knows countless other Zombie clients, and working with one Zombie client will attract more.

The Wolfman

The Wolfman client often appears to be a regular, even good client. The Wolfman client often doesn’t know he’s a Wolfman. But beware, for the Wolfman is ever-changeable.

Changes define the Wolfman client. One day he’s signed-off on a deliverable, the next day he’s revisiting the project brief.

When the Wolfman client changes his mind he’s like a dog with a bone. The fickleness of his decisions is matched only by his certainty that this one final change will bring the whole project together.

The Wolfman client spends much of his working life confused. The Wolfman will wake, the day after a meeting, unable to recall what was agreed (and wondering where all these chicken feathers came from).

How to Defeat the Wolfman Client

The Wolfman client isn’t a monster, simply a victim of his own nature. But that doesn’t mean you should allow him to make a victim out of you too.

The Wolfman will wake, the day after a meeting, unable to recall what was agreed…

When dealing with a Wolfman client, get all decisions in writing. If a decision is made in a meeting, or on a call, write it down while your memory is still fresh and post it to your project management system (or at the very least pop it in an email). Keep a paper trail.

The Wolfman client is often unaware of his own nature. If you spot one, then try to get off a fixed project fee and onto an hourly rate as quickly as possible; getting bitten by the Wolfman’s changeable nature is a lot less painful when you’re getting paid for every revision.

Fin

Clients often feel like nightmares, because we don’t understand them. The Wolfman doesn’t want to be changeable, he doubts his decisions. Mephistopheles often doesn’t want to trap you, he’s worried about being trapped himself. The Nosferatu client will respect your boundaries, provided you let him know what they are. The Zombie client will hang around, but is relatively harmless unless you let him slow you down.

When we take the time to establish good working relationships, by managing expectations, setting boundaries, and keeping our work process transparent, nightmare clients have a lot less bite.

So the next time you find yourself confronting one of these fearsome fiends, remember this advice dear friends, and you’ll escape unscathed.

Happy Halloween!

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Colorful Inspiration For Gray Days (November 2018 Wallpapers)

Colorful Inspiration For Gray Days (November 2018 Wallpapers)

Colorful Inspiration For Gray Days (November 2018 Wallpapers)

Cosima Mielke

How about some colorful inspiration for those gray and misty November days? We might have something for you. Just like every month since more than nine years already, artists and designers from across the globe once again tickled their creativity and designed unique wallpapers that are bound to breathe some fresh life into your desktop.

The wallpapers all come in versions with and without a calendar for November 2018 and can be downloaded for free. As a little bonus goodie, we added a selection of favorites from past November editions to this post. Because, well, some things are too good to be forgotten somewhere down in the archives, right? Enjoy!

Further Reading on SmashingMag:

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Outer Space

“This November, we are inspired by the nature around us and the universe above us, so we created an out of this world calendar. Now, let us all stop for a second and contemplate on preserving our forests, let us send birds of passage off to warmer places, and let us think to ourselves — if not on Earth, could we find a home somewhere else in outer space?” — Designed by PopArt Studio from Serbia.

Outer Space

Stars

“I don’t know anyone who hasn’t enjoyed a cold night looking at the stars.” — Designed by Ema Rede from Portugal.

Stars

Running Through Autumn Mist

“A small tribute to my German Shepherd who adds joy to those grey November days.” — Designed by Franke Margrete from The Netherlands.

Running Through Autumn Mist

Magical Foliage

“Foliage is the most mystical process of nature to ever occur. Leaves bursting and falling in shades of red, orange, yellow and making the landscape look magical.” — Designed by ATop Digital from India.

Magical Foliage

Sad Kitty

Designed by Ricardo Gimenes from Sweden.

Sad Kitty

The Light Of Lights

“Diwali is all about celebrating the victory of good over evil and light over darkness. The hearts of the vast majority are as dark as the night of the new moon. The house is lit with lamps, but the heart is full of the darkness of ignorance. Wake up from the slumber of ignorance. Realize the constant and eternal light of the Soul which neither rises nor sets through meditation and make this festive month even brighter and more vibrant.” — Designed by Intranet Software from India.

The Light Of Lights

Her

“I already had an old sketch that I wanted to try to convert to a digital illustration. The colors of the drawing were inspired by nature that at this time of the year has both the warm of fallen leaves as it has the cold greens of the leaves that make it through winter.” — Designed by Ana Matos from Portugal.

Her

Mesmerizing Monsoon

“Monsoon is all about the chill, the tranquillity that whizzes around, a light drizzle that splashes off our faces, the musty aroma of the earth and more than anything – a sense of liberation. The designer here has depicted the soul of monsoon, one that you would want to heartily soak in.” — Designed by Nafis Mohamed from London.

Mesmerizing Monsoon

Universal Children’s Day

“Universal Children’s Day, 20 November. It feels like a dream world, it invites you to let your imagination flow, see the details, and find the child inside you.” — Designed by Luis Costa from Portugal.

Universal Children Day

Stay Little

“It is believed that childhood is the happiest time cause this period of life cannot be matched with any other phases of life. During this month of November, let’s continue celebrating Children’s Day no matter how old you are, by sharing wishes to your children and childhood friends.” — Designed by Taxi Software from India.

Stay Little

Gezelligheid

“This month’s wallpaper is dedicated to the magical place of Barcelona that has filled my soul with renewed purpose and hope. I wanted to recreate the enchanting Parc Güell where I’m celebrating Thanksgiving with the people I’ve met that have given me so much in so little time.” — Designed by Priscilla Li from the United States.

Gezelligheid

Falling Rainbow

“I have a maple tree in my yard that sometimes turns these colors in the fall – red on the outer leaves, then yellow, and the inner leaves still green.” — Designed by Hannah Joy Patterson from South Carolina, USA.

Falling Rainbow

Origami In The Night Sky

Designed by Rita Gaspar from Portugal.

Origami In The Night Sky

Oldies But Goodies

Below you’ll find some November goodies from past years. Please note that these wallpapers don’t come with a calendar.

Colorful Autumn

“Autumn can be dreary, especially in November, when rain starts pouring every day. We wanted to summon better days, so that’s how this colourful November calendar was created. Open your umbrella and let’s roll!” — Designed by PopArt Studio from Serbia.

Colorful Autumn

Time To Give Thanks!

Designed by Glynnis Owen from Australia.

Time To Give Thanks!

No Shave Movember

“The goal of Movember is to ‘change the face of men’s health.’” — Designed by Suman Sil from India.

No Shave Movember

Welcome Home Dear Winter

“The smell of winter is lingering in the air. The time to be home! Winter reminds us of good food, of the warmth, the touch of a friendly hand, and a talk beside the fire. Keep calm and let us welcome winter.” — Designed by Acodez IT Solutions from India.

Welcome Home Dear Winter

Deer Fall, I Love You!

Designed by Maria Porter from the United States.

Deer Fall, I Love You!

Mushroom Season!

“It is autumn! It is raining and thus… it is mushroom season! It is the perfect moment to go to the forest and get the best mushrooms to do the best recipe.” — Designed by Verónica Valenzuela from Spain.

Mushroom Season!

Little Mademoiselle P

“Black-and-white drawing of a little girl.” Designed by Jelena Tšekulajeva from Estonia.

Smashing Wallpaper - november 11

Autumn Wreath

“I love the changing seasons — especially the autumn colors and festivals here around this time of year!” — Designed by Rachel Litzinger from the United States.

Autumn Wreath

November Nights On Mountains

“Those chill November nights when you see mountain tops covered with the first snow sparkling in the moonlight.” — Designed by Jovana Djokic from Serbia.

November Nights On Mountains

Hello World, Happy November!

“I often read messages at Smashing Magazine from the people in the southern hemisphere ‘it’s spring, not autumn!’ so I’d liked to design a wallpaper for the northern and the southern hemispheres. Here it is, northerners and southerns, hope you like it!” — Designed by Agnes Swart from the Netherlands.

Hello world, happy November!

A Gentleman’s November

Designed by Cedric Bloem from Belgium.

A Gentleman's November

Branches

“The design of trees has always fascinated me. Each one has it’s own unique entanglement of branches. With or without leaves they are always intriguing. Take some time to enjoy the trees around you — and the one on this wallpaper if you’d like!” — Designed by Rachel Litzinger from Chiang Rai, Thailand.

Branches

Simple Leaves

Designed by Nicky Somers from Belgium.

Simple leaves

Captain’s Home

Designed by Elise Vanoorbeek (Doud) from Belgium.

Captain’s Home

Me And the Key Three

“This wallpaper is based on screenshots from my latest browser game (I’m an indie games designer).” — Designed by Bart Bonte from Belgium.

me and the key three

Red Leaves

Designed by Evacomics from Singapore.

Red Leaves

Autumn Choir

Designed by Hatchers from Ukraine / China.

Smashing Wallpaper - november 12

Real Artists Ship

“A tribute to Steve Jobs, from the crew at Busy Building Things.” Designed by Andrew Power from Canada.

Smashing Wallpaper - november 11

Late Autumn

“The late arrival of Autumn.” Designed by Maria Castello Solbes from Spain.

Smashing Wallpaper - november 11

Autumn Impression

Designed by Agnieszka Malarczyk from Poland.

Smashing Wallpaper - november 11

Flying

Designed by Nindze.com from Russia.

Smashing Wallpaper - november 11

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

Thank you to all designers for their participation. Join in next month!

Preventing Suicide with UX: A Case Study on Google Search

I came clean about my long-running and ongoing battle with chronic depression last year in a blog post on my personal site. But don’t worry, things are no worse than they were then and this post is about something else. This post is about designing empathetic user experiences.

Several other sites have been posting on this topic, whether it’s how UX can improve mental health or how it can be used to prevent suicide.

It’s the latter I’d like to focus on here. In fact, Lucas Chae did such a fantastic job on that post that you should stop reading this right now and head over there. Seriously, if you only have time to read one post today, that’s the one.

Lucas goes to great lengths to show how UX can prevent suicide using Google search as a case study. I don’t disagree with any of his ideas. I love them. But anything has room for improvement or at least refinement, and I have a few ideas I’d like to toss in the ring. Again, not because the ideas are bad or screaming to be fixed, but because I have a personal connection to this topic and am interested in seeing great ideas like this move forward.

Let’s briefly rehash the context

I really hope you took up my suggestion to pop over to Lucas’s post, but if you didn’t the main gist of it goes:

  • Roughly 500,000 people submit suicide-related searches on Google every month.
  • Google returns some helpful information pinned to the top of the results, but it feels like a requirement more than a helpful interaction.
  • Lucas mocked up a proposed experience that replaces the existing pinned result with UI that feels more conversational and relatable.

There’s a lot more nuance to it, but that’s roughly what we’re looking at. My four suggestions are merely standing on the shoulders of what’s proposed there.

Gut check

At this point, you might be asking how much responsibility Google has in preventing suicide and whether it really needs to invest more into this than it already does. I like the way Lucas phrases it in his proposal:

“We are only a search engine, and cannot give you answers to your hardest questions. But we can help you get there.”

That is a good line to draw. And, yes, Google is technically already doing that to some extent, but this is an opportunity to provide recommendations that are as relevant as the search results that are Google’s bread and butter.

It’s also worth couching this entire diatribe with a note that there are zero expectations and absolutely no responsibility for Google to do anything proposed in this post. This is merely demonstrating the impact that UX design can have on a real-world problem using Google as the vehicle to drive these points home. We really could have done this with Bing, Yahoo, DuckDuckGo or any similar product.

Suggestion 1: Reach the user earlier

Lucas’s work zeroes in on what Google delivers after the search query has been made. Thinking about this as a user flow, we’re looking at something like this:

StepDescriptionExpected OutcomeEmotions
1User is contemplating suicide, reaches for phone, computerAble to start up a device and fire up a browser to navigate to Google Hopeless
Sad
Lonely
2Enters “How to kill myself” into the search fieldPossibly some related search suggestions, but ultimately a means to submit the search.Probably not much different than the previous step, but maybe some pensiveness over what search term will produce the best results.
3Submits searchA page refresh with relevant links Anxious
Scared

The majority of Lucas’s work is driven by Step 3 (and beyond). I think we can narrow the gap of time between contemplation and search submission by zooming in on Step 2.

Have you ever typed a partial query into Google? The auto-suggestions are often extremely useful (at least to me) but they can be pretty hilarious as well. Take, for example:

I’m not sure why that was the first thing that came to mind as an example but, hey, it’s still nuts that those are actual examples of user submissions and have made the list of predicted suggestions. I mean, of course, Russell Crowe is alive… right?

(Does some more searching.)

Right!

Funny (or not funny) enough, Google does not provide those suggestions for suicide-related searches. Or, more accurately, it weeds out suicide-related results and provides others until it simple can’t suggest anything:

😂 LOL, did you catch “how to kill mysql process” in there?

I understand why Google would want to exclude suicidal terms from their suggestions. Why plant ideas in people’s heads if that is not what the user is actually looking for? Seems like something to avoid.

But what if it’s an opportunity rather than an obstacle? If we have a chance to interact with someone even a few seconds earlier in the process, then it’s possible we’re talking about saving some lives.

I would suggest embracing the prediction engine and even beefing it up to take sensitive searches head on. For example, what if we took Lucas’s initial idea of interacting with the user right from here instead of waiting for a submitted search and its results?

Suggestion 2: Amp up the personalization

Let’s all agree that Google knows way too much about people in general. I know, I know. Some people love it and see it as a potential force for good while others are wary of the impact a digital footprint can have IRL. I read The Circle, too.

Either way, Google likely knows a thing or two about the user, even if they are not logged in. But, assuming that the user is logged and has at least a partial profile (both of which I think are safe assumptions given Google’s ubiquitous nature, prevalent reliance on it for oAuth, and that the user turned to it instead, say, Bing), then we can make a personal appeal to that user instead of generalized content.

For example, we can make use of avatars, names, locations, search history, etc. And, yes, the likelihood of Google having all of this among many, many (MANY!) other bits of data are extremely good — nay, great!

If we are going to utilize the predictive search feature, then we can put Google’s treasure trove of user data into play to grab the user’s attention and extend an invitation to engage before the search has even happened. That said, while I’m suggesting that we “amp” up the personalization, let’s agree that any attempt to be too smart can also lead to poor user experiences and, at worst, even more personal pain.

So, while we have a treasure trove of data, keeping the scope to a personalized greeting or introduction will suffice.

Suggestion 3: Leverage Google’s technical arsenal

The biggest criticism of Google’s existing experience is that it feels like a requirement. I wholeheartedly agree with Lucas here. Just look.

And, yes, that is now in my search history.

What that uninviting and impersonal approach has going for it is that it provides the user with two clear paths to get help: phone and online chat. Google has developed products that make calls and power video chats, so there’s no reason why we can’t take these already great innovations and put them to use in this new context.

The proposed design from Lucas maintains a call link in the UI, but it seems buried beneath the core interaction and totally removes online chat. If Google has the technical means to apply one-on-one interactions that narrow geographical distances between hurt and help, and has influence to partner with suicide prevention groups and mental health professionals, then by all means! Those are things I would absolutely work into the UI.

Suggestion 4: Go further to maintain the Google brand

Lucas makes a stellar point that any improvement to the UX should be mindful of Google’s own brand and positioning:

This is a redesign, not a new service that I am launching. One principle I value the most when redesigning an existing interface is respecting the original design principles. Design is never just about making it look pretty. Design is a manifestation of a company’s philosophy and core-values based on years of research and testing.

Amen!

Lucas absolutely nails the grid system, color palette, iconography and baseline card component that come straight from the Material Design guidelines. Still, I think there is room to be even more faithful to Google’s design DNA.

There is a specific point where Lucas deviates from the card component guidelines — the UI that allows the user to categorize feelings.

The animation and general interaction is slick. However, it does feel off-brand… at least to me. We’ll get to my mockups in a bit, but I wanted to make sure any new UI took the card component as far as it could go, always using established Google components. For example, I took the UI Lucas created for feeling categories and “dumbed” it down to literal card patterns as they’re described in the docs.

OK, onto the mockups…

Looking past my lack of design chops, here’s where I landed with everything we’ve covered so far.

Predictive search interface

The user has landed on google.com and is in the process of typing, “how to kill myself.” Rather than disabling predictive suggestions like the current functionality does, we tackle the tough query head on and engage the user, making a personalized plea and making an offer to point the user to positive answers.

Notice that the “Continue” text link is in a disabled state. That’s to add a little friction in the flow to encourage the user to engage with the slider. Of course, we’re also creating a clear path to “Call Help” if the user does indeed need to talk with someone and bail on this UI.

Interacting with the user

What’s the slider? Well, it’s more or less an interpretation of the UI Lucas created that allows the user to provide more detail for the pain they’re suffering:

I find that my proposed pattern is more in line with Google’s Material Design guidelines, specifically with sliders.

The slider is a nice way for users to make a selection across a wide variety of options in a small space. In this case, we’re allowing the user to slide between the same categories Lucas defined in his research and introducing sub-categories from there as text links.

One thing we want to make sure of is that the intent of the options in the slider are not misinterpreted. For example, is “Love & Relationships” first because it’s the most important? It’d be a shame if that’s the way it came across. One idea (among others, I’m sure) is to float a little information icon in there that displays a tooltip on hover explaining that the options are in no particular order.

I think the outcome here, again, is a nice way to get the same level of detail that Lucas mocked up into a smaller space while gaining valuable feedback from the user that helps us learn the context of their feelings.

The first step to help

Once the user has made a selection in the slider and clicked on a sub-category, we can provide the same encouraging, inspiring content Lucas proposed, perhaps pulled from real articles on the subject.

Note that we technically changed the state of the “Continue” text link from disabled to active in the last screen. We can use the context the user has provided so far to allow them to proceed with a much safer and productive search query based on the category/sub-category that is selected.

Additional guidance

Will the UX so far prevent a suicide? Maybe. I hope! But there’s a chance it won’t.

But, hey, we now have better context for the user’s feelings and can provide a relevant path to suggest answers. So, if the user has chosen the category “Love & Relationships” and selected the “Death of a loved one” sub-category, then we can send the user to search results for that subject rather than “How to kill myself” — which would inevitably lead to a more destructive set of search results than something on love and relationships.

Google already does a pretty darn good job of this…

Seriously, say what you want about the lack of design flare, but having a featured result up top that the user can personally relate to, additional search suggestions, and the organic results at the end makes for a pretty compelling experience. A much better place to send the user!

The only change I would suggest is to maintain the ability to make a call to or initiate a chat with a trained professional. It’s doesn’t need to scream for attention in the UI, but be available. Material Design’s banner component seems pretty relevant here, though I can see push back on that as far as the literal use case.

Are we making progress?

I give the greatest hat tip of all hat tips to Lucas Chae for broaching such a hard topic. Not only does he do a bang-up job to solve a real-world problem, but brings awareness to it. Obviously, it’s something I’m able to relate to on a deep personal level and it’s encouraging to see others both empathizing with it and pushing forward ideas to deal with it.

Thank you for that, Lucas.

I hope that by putting my own ideas on the table that we can keep this conversation moving. And that means getting even more ideas on the table and seeing where we can take this bad boy as a community.

So, do you have feedback on anything you’ve seen so far? Maybe ideas of your own you’d like to mock up and share? Please do! The web community is a great one and we can accomplish amazing things together. 💪


Note: My sincere thanks to Chris, Andy Bell and Eric Bailey for providing thoughtful, insightful and thorough feedback on earlier drafts of this post.

The post Preventing Suicide with UX: A Case Study on Google Search appeared first on CSS-Tricks.

Styled Payment Forms with Wufoo

(This is a sponsored post.)

Thanks so much to Wufoo for the support of CSS-Tricks! Wufoo is a form builder where you can quickly build forms of any complexity. From simple contact forms to multi-page logic-riddled application forms that sync to Salesforce and handle site-integrated exit surveys, it handles lots of use cases!

There is another powerful feature of Wufoo: taking payments. it’s especially worth knowing about, in my opinion, because of how affordable it is. It’s essentially eCommerce without costing you any fees on top of your paid Wufoo account and payment processing fees. Not to mention you can integrate them into your own site and style them however you like.

Say you were having a Pledge Drive. A Wufoo form can easily accept money with a form like this, which you can build yourself or find in the gallery and install:

Using the Theme Builder, we can do a lot to style it, including options for coloring, typography and more:

We have full CSS control as well, if you really wanna get hands-on:

Then attach your payment processor to it. Wufoo supports all the biggest and best payment processors like Square, PayPal, Stripe, Authorize.net, etc.

I’d bet you could be up and running with a payment-enabled form in under and hour, all without having to deal with spam or security or any of that. Thanks Wufoo!

Direct Link to ArticlePermalink

The post Styled Payment Forms with Wufoo appeared first on CSS-Tricks.

Voice-Controlled Web Visualizations with Vue.js and Machine Learning

In this tutorial, we’ll pair Vue.js, three.js and LUIS (Cognitive Services) to create a voice-controlled web visualization.

But first, a little context

Why would we need to use voice recognition? What problem might something like this solve?

A while ago I was getting on a bus in Chicago. The bus driver didn’t see me and closed the door on my wrist. As he started to go, I heard a popping sound in my wrist and he did eventually stop as the other passengers started yelling, but not before he ripped a few tendons in my arm.

I was supposed to take time off work but, typical for museum employees at that time, I was on contract and had no real health insurance. I didn’t make much to begin with so taking time off just wasn’t an option for me. I worked through the pain. And, eventually, the health of my wrist started deteriorating. It became really painful to even brush my teeth. Voice-to-text wasn’t the ubiquitous technology that it is today, and the best tool then available was Dragon. It worked OK, but was pretty frustrating to learn and I still had to use my hands quite frequently because it would often error out. That was 10 years ago, so I’m sure that particular tech has improved significantly since then. My wrist has also improved significantly in that time.

The whole experience left me with a keen interest in voice-controlled technologies. What can we do if we can control the behaviors of the web in our favor, just by speaking? For an experiment, I decided to use LUIS, which is a machine learning-based service to build natural language through the use of custom models that can continuously improve. We can use this for apps, bots, and IoT devices. This way, we can create a visualization that responds to any voice — and it can improve itself by learning along the way.

GitHub Repo

Live Demo

preview of three-vue-pattern with different moods

Here’s a bird’s eye view of what we’re building:

birds-eye view of LUIS demo

Setting up LUIS

We’ll get a free trial account for Azure and then go to the portal. We’ll select Cognitive Services.

After picking New → AI/Machine Learning, we’ll select “Language Understanding” (or LUIS).

new cognitive services

Then we’ll pick out our name and resource group.

create new luis

We’ll collect our keys from the next screen and then head over to the LUIS dashboard

It’s actually really fun to train these machines! We’ll set up a new application and create some intents, which are outcomes we want to trigger based on a given condition. Here’s the sample from this demo:

You may notice that we have a naming schema here. We do this so that it’s easier to categorize the intents. We’re going to first figure out the emotion and then listen for the intensity, so the initial intents are prefixed with either App (these are used primarily in the App.vue component) or Intensity.

If we dive into each particular intent, we see how the model is trained. We have some similar phrases that mean roughly the same thing:

You can see we have a lot of synonyms for training, but we also have the “Train” button up top for when we’re ready to start training the model. We click that button, get a success notification, and then we’re ready to publish. 😀

Setting up Vue

We’ll create a pretty standard Vue.js application via the Vue CLI. First, we run:

vue create three-vue-pattern
# then select Manually... Vue CLI v3.0.0 ? Please pick a preset: default (babel, eslint)
❯ Manually select features # Then select the PWA feature and the other ones with the spacebar
? Please pick a preset: Manually select features
? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config
❯ ESLint + Standard config ESLint + Prettier ? Pick additional lint features: (Press <space> to select, a to toggle all, i to invert selection)
❯ ◉ Lint on save ◯ Lint and fix on commit Successfully created project three-vue-pattern.
Get started with the following commands: $ cd three-vue-pattern
$ yarn serve

This will spin up a server for us and provide a typical Vue welcome screen. We’ll also add some dependencies to our application: three.js, sine-waves, and axios. three.js will help us create the WebGL visualization. sine-waves gives us a nice canvas abstraction for the loader. axios will allow us a really nice HTTP client so we can make calls to LUIS for analysis.

yarn add three sine-waves axios

Setting up our Vuex store

Now that we have a working model, let’s go get it with axios and bring it into our Vuex store. Then we can disseminate the information to all of the different components.

In state, we’ll store what we’re going to need:

state: { intent: 'None', intensity: 'None', score: 0, uiState: 'idle', zoom: 3, counter: 0, },

intent and intensity will store the App, intensity, and intents, respectively. The score will store our confidence (which is a score from 0 to 100 measuring how well the model thinks it can rank the input).

For uiState, we have three different states:

  • idle – waiting for the user input
  • listening – hearing the user input
  • fetching – getting user data from the API

Both zoom and counter are what we’ll use to update the data visualization.

Now, in actions, we’ll set the uiState (in a mutation) to fetching, and we’ll make a call to the API with axios using the generated keys we received when setting up LUIS.

getUnderstanding({ commit }, utterance) { commit('setUiState', 'fetching') const url = `https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/4aba2274-c5df-4b0d-8ff7-57658254d042` https: axios({ method: 'get', url, params: { verbose: true, timezoneOffset: 0, q: utterance }, headers: { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': ‘XXXXXXXXXXXXXXXXXXX' } })

Then, once we’ve done that, we can get the top-ranked scoring intent and store it in our state.

We also need to create some mutations we can use to change the state. We’ll use these in our actions. In the upcoming Vue 3.0, this will be streamlined because mutations will be removed.

newIntent: (state, { intent, score }) => { if (intent.includes('Intensity')) { state.intensity = intent if (intent.includes('More')) { state.counter++ } else if (intent.includes('Less')) { state.counter-- } } else { state.intent = intent } state.score = score
},
setUiState: (state, status) => { state.uiState = status
},
setIntent: (state, status) => { state.intent = status
},

This is all pretty straightforward. We’re passing in the state so that we can update it for each occurrence — with the exception of Intensity, which will increment the counter up and down, accordingly. We’re going to use that counter in the next section to update the visualization.

.then(({ data }) => { console.log('axios result', data) if (altMaps.hasOwnProperty(data.query)) { commit('newIntent', { intent: altMaps[data.query], score: 1 }) } else { commit('newIntent', data.topScoringIntent) } commit('setUiState', 'idle') commit('setZoom')
})
.catch(err => { console.error('axios error', err)
})

In this action, we’ll commit the mutations we just went over or log an error if something goes wrong.

The way that the logic works, the user will do the initial recording to say how they’re feeling. They’ll hit a button to kick it all off. The visualization will appear and, at that point, the app will continuously listen for the user to say less or more to control the returned visualization. Let’s set up the rest of the app.

Setting up the app

In App.vue, we’ll show two different components for the middle of the page depending on whether or not we’ve already specified our mood.

<app-recordintent v-if="intent === 'None'" />
<app-recordintensity v-if="intent !== 'None'" :emotion="intent" />

Both of these will show information for the viewer as well as a SineWaves component while the UI is in a listening state.

The base of the application is where the visualization will be displayed. It will show with different props depending on the mood. Here are two examples:

<app-base v-if="intent === 'Excited'" :t-config.a="1" :t-config.b="200"
/>
<app-base v-if="intent === 'Nervous'" :t-config.a="1" :color="0xff0000" :wireframe="true" :rainbow="false" :emissive="true"
/>

Setting up the data visualization

I wanted to work with kaleidoscope-like imagery for the visualization and, after some searching, found this repo. The way it works is that a shape turns in space and this will break the image apart and show pieces of it like a kaleidoscope. Now, that might sound awesome because (yay!) the work is done, right?

Unfortunately not.

There were a number of major changes that needed to be done to make this work, and it actually ended up being a massive undertaking, even if the final visual expression appears similar to the original.

  • Due to the fact that we would need to tear down the visualization if we decided to change it, I had to convert the existing code to use bufferArrays, which are more performant for this purpose.
  • The original code was one large chunk, so I broke up some of the functions into smaller methods on the component to make it easier to read and maintain.
  • Because we want to update things on the fly, I had to store some of the items as data in the component, and eventually as props that it would receive from the parent. I also included some nice defaults (excited is what all of the defaults look like).
  • We use the counter from the Vuex state to update the distance of the camera’s placement relative to the object so that we can see less or more of it and thus it becomes more and less complex.

In order to change up the way that it looks according to the configurations, we’ll create some props:

props: { numAxes: { type: Number, default: 12, required: false }, ... tConfig: { default() { return { a: 2, b: 3, c: 100, d: 3 } }, required: false }
},

We’ll use these when we create the shapes:

createShapes() { this.bufferCamera.position.z = this.shapeZoom if (this.torusKnot !== null) { this.torusKnot.material.dispose() this.torusKnot.geometry.dispose() this.bufferScene.remove(this.torusKnot) } var shape = new THREE.TorusKnotGeometry( this.tConfig.a, this.tConfig.b, this.tConfig.c, this.tConfig.d ), material ... this.torusKnot = new THREE.Mesh(shape, material) this.torusKnot.material.needsUpdate = true this.bufferScene.add(this.torusKnot)
},

As we mentioned before, this is now split out into its own method. We’ll also create another method that kicks off the animation, which will also restart whenever it updates. The animation makes use of requestAnimationFrame:

animate() { this.storeRAF = requestAnimationFrame(this.animate) this.bufferScene.rotation.x += 0.01 this.bufferScene.rotation.y += 0.02 this.renderer.render( this.bufferScene, this.bufferCamera, this.bufferTexture ) this.renderer.render(this.scene, this.camera)
},

We’ll create a computed property called shapeZoom that will return the zoom from the store. If you recall, this will be updated as the user’s voice changes the intensity.

computed: { shapeZoom() { return this.$store.state.zoom }
},

We can then use a watcher to see if the zoom level changes and cancel the animation, recreate the shapes, and restart the animation.

watch: { shapeZoom() { this.createShapes() cancelAnimationFrame(this.storeRAF) this.animate() }
},

In data, we’re also storing some things we’ll need for instantiating the three.js scene — most notably making sure that the camera is exactly centered.

data() { return { bufferScene: new THREE.Scene(), bufferCamera: new THREE.PerspectiveCamera(75, 800 / 800, 0.1, 1000), bufferTexture: new THREE.WebGLRenderTarget(800, 800, { minFilter: THREE.LinearMipMapLinearFilter, magFilter: THREE.LinearFilter, antialias: true }), camera: new THREE.OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 1000 ),

There’s more to this demo, if you’d like to explore the repo or set it up yourself with your own parameters. The init method does what you think it might: it initializes the whole visualization. I’ve commented a lot of the key parts if you’re peeping at the source code. There’s also another method that updates the geometry that’s called — you uessed it — updateGeometry. You may notice a lot of vars in there as well. That’s because it’s common to reuse variables in this kind of visualization. We kick everything off by calling this.init() in the mounted() lifecycle hook.

It’s pretty fun to see how far you can get creating things for the web that don’t necessarily need any hand movement to control. It opens up a lot of opportunities!

The post Voice-Controlled Web Visualizations with Vue.js and Machine Learning appeared first on CSS-Tricks.

3 Essential Design Trends, November 2018

When looking at good design, I often look for things that aren’t totally obvious. There’s an instinct that you like something before you know why. That’s the common thread among this month’s three essential design trends.

From animations that delight and take projects to the next level, to white space that makes a design so approachable, to dark color overlays that enhance readability, these trends contribute to better user experiences.

Here’s what’s trending in design this month:

1. Next-Level Animation

Nothing makes you want to click around and engage with a website like a delightful animation.

While full-screen video is still one of the most popular animated effects of the year, other opportunities for animation can be just as impressive. Use animation to bring attention to certain elements, create the scene for your story and grab user attention or prompt continued engagement with an interesting way to navigate a design. Each of these techniques is used in the examples below (you should definitely click through each to see the animated effects in action).

What makes a good animation? Here’s how each of these designs takes animation to the next level:

Mistretta Coiffure uses a water effect over still images so that the whole background seems to be right below the surface of a pool. Text elements are static to ensure readability. The effect isn’t overwhelming and it’s something that feels unique to the content of the website for a salon—which uses a lot of water.

Wonderland uses animation in a more interactive way, meaning users have to engage to activate it. Each of the photos in the row across the bottom of the screen serves as a secondary navigation element. Hover over any one and it pops up into a larger element and impacts the background as well. This instance of a cool hover animation can help encourage users to interact more with the design.

Naturalis Topstukken takes a completely different approach—every card in the design is part of the complete website. User-controlled animation allows you to drag and drop elements on the screen to enter different parts of the website. It almost feels like a game. The design is highly engaging and for those that don’t quite “get it” the screen scrolls on its own after a few seconds to encourage that first click.

2. Large White Margins

One of the most dramatic—and easy—ways to draw attention to a design or specific element is through appropriate use of white space. While many designs have trended toward more packed full-screen designs recently, there’s a growing shift back to open space.

And there’s a reason for it.

This technique and design make content the focus for users. Elements surrounded by white space are obvious focal points. The simplicity and balance of such as design is easy to engage with and isn’t overwhelming to the user.

Maybe one of the best things about a design with so much white space is that it feels approachable. The clean white space in the design does draw you in.

Think about some of the color associations of white—purity, light, goodness, perfection, cleanliness, safety—all of these are inviting and welcoming feelings that come with an open white background.

Looking at the examples below from Panda Monk, It’s Alive, and Centros, it’s easy to see how this feeling comes from each of the designs. It’s as if each website is inviting users to engage and learn more.

3. Dark Color Overlays

One of the website design trends that’s been popular is use of dark backgrounds in design projects. That trend has extended to the foreground with dark color overlays on images as well.

While this technique can look cool and help emphasize brand colors, there’s another key reason for using dark color overlays. This technique can help make text elements more readable over photos or backgrounds elements with varying light and dark colors.

Each of the examples below uses this concept in a slightly different way:

Lafayette Grande frames an image with a dark color overlay with a double-stacked navigation menu using brand colors. It creates a solid frame that then drives users down to the main headline.

Julius Silvert uses a full screen video b-roll background where all of the images have a mostly transparent dark color overlay. On scroll, the overlay darkens to a mostly saturated box so that text is easy to read while the video still runs in the background. This is a great solution to the probable presented by moving images—it can be tough to find a good place to put text elements so that they are easy to read at all times. The dark color overlay solves this problem nicely.

Scalzo Design uses a dark background plus dark color overlay on images to draw users into his portfolio. The overlay shows that there are visual elements to explore but maintains a focus on the words first, before users get too deep into visual content. This leaves users with the information that Scalzo is a designer first and showcases the work second for a strong first impression.

Conclusion

While some of the animated techniques featured here are more complex techniques, you can start small with a similar idea. The key to using any trendy design element is that it works with the content in the design, contributing to the overall message.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Popular Design News of the Week: October 22, 2018 – October 28, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

New Adidas Site Takes it Back to the ’90s

 

100 Days CSS

 

The Evolution of Website Web Design Trends from the 90s to Now

 

Don’t Be Design Shamed Because You like What Adobe is Doing

 

8 Tips for Great Code Reviews

 

The Scandinavian Rule that Every Designer Should Follow

 

Websites in 2018

 

Is Gutenberg the End or a New Beginning for WordPress?

 

Crack Adobe CC with this Keyboard Cheat Sheet

 

Bird Scooter Redesign

 

Keep Notes on the Web is the Latest to Get a Material Design Refresh

 

Dangerous Times in Design

 

Bad Practices on Phone Number Form Fields

 

User Experience: How to Improve your Website UX with Humor And Cuteness

 

6 Ways to Improve Contrast in your Designs

 

Site Design: Friends, a Collaborative Design Company

 

Chrome 70’s Best New Feature is Picture-in Picture

 

Now You See It: Dark Patterns in Design

 

Confessions of a Flawed Designer

 

Typographica: Our Favorite Typefaces of 2017

 

UI Design Inspiration – Oct 2018

 

Web Accessibility for 2019

 

You Know your Web Page Sucks When it Cost 7-million Dollars To read!

 

Black Light Pro – Color Effects on a Schedule

 

Making your Design Systems Dynamic

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The CSS Working Group At TPAC: What’s New In CSS?

The CSS Working Group At TPAC: What’s New In CSS?

The CSS Working Group At TPAC: What’s New In CSS?

Rachel Andrew

Last week, I attended W3C TPAC as well as the CSS Working Group meeting there. Various changes were made to specifications, and discussions had which I feel are of interest to web designers and developers. In this article, I’ll explain a little bit about what happens at TPAC, and show some examples and demos of the things we discussed at TPAC for CSS in particular.

What Is TPAC?

TPAC is the Technical Plenary / Advisory Committee Meetings Week of the W3C. A chance for all of the various working groups that are part of the W3C to get together under one roof. The event is in a different part of the world each year, this year it was held in Lyon, France. At TPAC, Working Groups such as the CSS Working Group have their own meetings, just as we do at other times of the year. However, because we are all in one building, it means that people from other groups can more easily come as observers, and cross-working group interests can be discussed.

Attendees of TPAC are typically members of one or more of the Working Groups, working on W3C technologies. They will either be representatives of a member organization or Invited Experts. As with any other meetings of W3C Working Groups, the minutes of all of the discussions held at TPAC will be openly available, usually as IRC logs scribed during the meetings.

The CSS Working Group

The CSS Working Group meet face-to-face at TPAC and on at least two other occasions during the year; this is in addition to our weekly phone calls. At all of our meetings, the various issues raised on the specifications are discussed, and decisions made. Some issues are kept for face-to-face discussions due to the benefits of being able to have them with the whole group, or just being able to all get around a whiteboard or see a demo on screen.

When an issue is discussed in any meeting (whether face-to-face or teleconference), the relevant GitHub issue is updated with the minutes of the discussion. This means if you have an issue you want to keep track of, you can star it and see when it is updated. The full IRC minutes are also posted to the www-style mailing list.

Here is a selection of the things we discussed that I think will be of most interest to you.

CSS Scrollbars

The CSS Scrollbars specification seeks to give a standard way of styling the size and color of scrollbars. If you have Firefox Nightly, you can test it out. To see the examples below, use Firefox Nightly and enable the flags layout.css.scrollbar-width.enabled and layout.css.scrollbar-color.enabled by visiting http://about:config in Firefox Nightly.

The specification gives us two new properties: scrollbar-width and scrollbar-color. The scrollbar-width property can take a value of auto, thin, none, or length (such as 1em). It looks as if the length value may be removed from the specification. As you can imagine, it would be possible for a web developer to make a very unusable scrollbar by playing with the width, so it may be better to allow the browser to decide the exact width that makes sense but instead to either show thin or thick scrollbars. Firefox has not implemented the length option.

If you use auto as the value, then the browser will use the default scrollbars: thin will give you a thin scrollbar, and none will show no visible scrollbar (but the element will still be scrollable).

A scrolling element with a thin scrollbar
In this example I have set scrollbar-width: thin.(Large preview)

In a browser with support for CSS Scrollbars, you can see this in action in the demo:

See the Pen CSS Scrollbars: scrollbar-width by Rachel Andrew (@rachelandrew) on CodePen.

The scrollbar-color property deals with — as you would expect — scrollbar colors. A scrollbar has two parts which you may wish to color independently:

  • thumb
    The slider that moves up and down as you scroll.
  • track
    The scrollbar background.

The values for the scrollbar-color property are auto, dark, light and <color> <color>.

Using auto as a keyword value will give you the default scrollbar colors for that browser, dark will provide a dark scrollbar, either in the dark mode of that platform or a custom dark mode, light the light mode of the platform or a custom light mode.

To set your own colors, you add two colors as the value that are separated by a space. The first color will be used for the thumb and the second one for the track. You should take care that there is enough contrast between the colors, as otherwise the scrollbar may be difficult to use for some people.

A scrolling element with a purple and white scrollbar
In this example, I have set custom colors for the scrollbar elements. (Large preview)

In a browser with support for CSS Scrollbars, you can see this in the demo:

See the Pen CSS Scrollbars: scrollbar-color by Rachel Andrew (@rachelandrew) on CodePen.

Aspect Ratio Units

We’ve been using the padding hack in CSS to achieve aspect ratio boxes for some time, however, with the advent of Grid Layout and better ways of sizing content, having a real way to do aspect ratios in CSS has become a more pressing need.

There are two issues raised on GitHub which relate to this requirement:

There is now a draft spec in Level 4 of CSS Sizing, and the decision of the meeting was that this needed further discussion on GitHub before any decisions can be made. So, if you are interested in this, or have additional use cases, the CSS Working Group would be interested in your comments on those issues.

The :where() Functional Pseudo-Class

Last year, the CSSWG resolved to add a pseudo-class which acted like :matches() but with zero specificity, thus making it easy to override without needing to artificially inflate the specificity of later elements to override something in a default stylesheet.

The :matches() pseudo-class might be new to you as it is a Level 4 Selector, however, it allows you to specify a group of selectors to apply some CSS, too. For example, you could write:

.foo a:hover,
p a:hover { color: green;
}

Or with :matches()

:matches(.foo, p) a:hover { color: green;
}

If you have ever had a big stack of selectors just in order to set the same couple of rules, you will see how useful this will be. The following CodePen uses the prefixed names of webkit-any and -moz-any to demonstrate the matches() functionality. You can also read more about matches() on MDN.

See the Pen :matches() and prefixed versions by Rachel Andrew (@rachelandrew) on CodePen.

Where we often do this kind of stacking of selectors, and thus where :matches() will be most useful is in some kind of initial, default stylesheet. However, we then need to be careful when overwriting those defaults that any overwriting is done in a way that will ensure it is more specific than the defaults. It is for this reason that a zero specificity version was proposed.

The issue that was discussed in the meeting was in regard to naming this pseudo-class, you can see the final resolution here, and if you wonder why various names were ruled out take a look at the full thread. Naming things in CSS is very hard &mdashbecause we are all going to have to live with it forever! After a lot of debate, the group voted and decided to call this selector :where().

Since the meeting, and while I was writing up this post, a suggestion has been raised to rename matches() to is(). Take a look at the issue and comment if you have any strong feelings either way!

Logical Shorthands For Margins And Padding

On the subject of naming things, I’ve written about Logical Properties and Values here on Smashing Magazine in the past, take a look at “Understanding Logical Properties and Values”. These properties and values provide flow relative mappings. This means that if you are using Writing Modes other than a horizontal top to bottom writing mode, such as English, things like margins and padding, widths and height follow the text direction and are not linked to the physical screen dimensions.

For example, for physical margins we have:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

The logical mappings for these (assuming horizontal-tb) are:

  • margin-block-start
  • margin-inline-end
  • margin-block-end
  • margin-inline-start

We can have two value shorthands. For example, to set both margin-block-start and margin-block-end as a shorthand, we can use margin-block: 20px 1em. The first value representing the start edge in the block dimension, the second value the end edge in the block dimension.

We hit a problem, however, when we come to the four-value shorthand margin. That property name is used for physical margins — how do we denote the logical four-value version? Various things have been suggested, including a switch at the top of the file:

@mode "logical";

Or, to use a block that looks a little like a media query:

@mode (flow-mode: relative) { }

Then various suggestions for keyword modifiers, using some punctuation character, or creating a brand new property name:

margin: relative 1em 2em 3em 4em;
margin: 1em 2em 3em 4em !relative;
margin-relative: 1em 2em 3em 4em;
~margin: 1em 2em 3em 4em;

You can read the issue to see the various things that are being considered. Issues discussed were that while the logical version may well end up being generally the default, sometimes you will want things to relate to the screen geometry; we need to be able to have both options in one stylesheet. Having a @mode setting at the top of the CSS could be confusing; it would fail if someone were to copy and paste a chunk of the stylesheet.

My preference is to have some sort of keyword value. That way, if you look at the rule, you can see exactly which mode is being used, even if it does seem slightly inelegant. It is the sort of thing that a preprocessor could deal with for you; if you did indeed want all of your properties and values to use the logical versions.

We didn’t manage to resolve on the issue, so if you do have thoughts on which of these might be best, or can see problems with them that we haven’t described, please comment on the issue on GitHub.

Web Platform Tests Discussion

At the CSS Working Group meeting and then during the unconference style Technical Plenary Day, I was involved in discussing how to get more people involved in writing tests for CSS specifications. The Web Platform Tests project aims to provide tests for all of the web platform. These tests then help browser vendors check whether their browser is correct as to the spec. In the CSS Working Group, the aim is that any normative change to a specification which has reached Candidate Recommendation (CR) status, should be accompanied by a test. This makes sense as once a spec is in CR, we are asking browsers to implement that spec and provide feedback. They need to know if anything in the spec changes so they can update their code.

The problem is that we have very few people writing specs, so for spec writers to have to write all the tests will slow the progress of CSS down. We would love to see other people writing tests, as it is a way to contribute to the web platform and to gain deep knowledge of how specifications work. So we met to think about how we could encourage people to participate in the effort. I’ve written on this subject in the past; if the idea of writing tests for the platform interests you, take a look at my 24 Ways article on “Testing the Web Platform”.

On With The Work!

TPAC has added to my personal to-do list considerably. However, I’ve been able to pick up tips about specification editing, test writing, and to come up with a plan to get the Multi-Column Layout specification — of which I’m the co-editor — back to CR status. As someone who is not a fan of meetings, I’ve come to see how valuable these face-to-face meetings are for the web platform, giving those of us contributing to it a chance to share the knowledge we individually are developing. I feel it is important though to then take that knowledge and share it outside of the group in order to help more people get involved with developing as well as using the platform.

If you are interested in how the CSS Working Group functions, and how new CSS is invented and ends up in browsers, check out my 2017 CSSConf.eu presentation “Where Does CSS Come From?” and the information from fantasai in her posts “An Inside View of the CSS Working Group at W3C”.

Smashing Editorial (il)
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google