Whenever we build simple or complex layouts using CSS Grid, we’re usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). Positioning items with line numbers is a fine way to lay things out, though CSS Grid has numerous ways to accomplish the same with an undersized cognitive encumbrance. One of those ways is something I like to think of as the “ASCII” method.

The ASCII method in a nutshell

The method boils down to using grid-template-areas to position grid items using custom-named areas at the grid container level rather than line numbers.

When we declare an element as a grid container using display: grid, the grid container, by default, generates a single-column track and rows that sufficiently hold the grid items. The container’s child elements that participate in the grid layout are converted to grid items, irrespective of their display property.

For instance, let’s create a grid by explicitly defining columns and rows using the grid-template-columns and grid-template-rows properties.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 200px);
}

This little snippet of CSS creates a 3×2 grid where the grid items take up equal space in the columns, and where the grid contains three rows with a track size of 200px.

We can define the entire layout with named grid areas using the grid-template-areas property. According to the spec, the initial value of grid-template-areas is none.

grid-template-areas = none | <string>+

+ is listing the group of strings enclosed with a quote. Each string is represented as a cell, and each quoted string is represented as a row. Like this:

grid-template-areas: "head head" "nav main" "foot foot";

The value of grid-template-areas describes the layout as having four grid areas. They are,

• head
• nav
• main
• foot

head and foot span two column tracks and one row track. The remaining nav and main each span one column track and one row track. The value of grid-template-areas is a lot like arranging ASCII characters, and as Chris suggested a while back, we can get a visualization of the overall structure of the layout from the CSS itself which is the most trouble-free way to understand it.

OK, so we created our layout with four named grid areas: head, nav, main, foot.

Now, let’s start to position the grid items against named grid areas instead of line numbers. Specifically, let’s place a header element into the named grid area head and specify the named grid area head in the header element using the grid-area property.

Named grid areas in a grid layout are called idents. So, what we just did was create a custom ident named head that we can use to place items into certain grid tracks.

header { grid-area: head; }

We can other HTML elements using other custom idents:

nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: foot; }

Writing named area values

According to CSS Grid Layout Module Level 1, all strings must be defined under the following tokens:

• Named cell token: This represents the named grid area in the grid. For instance, head is a named cell token.
• Null cell token: This represents the unnamed grid area in the grid container. For instance, an empty cell in the grid is a null cell token.
• Trash token: This is a syntax error, such as an invalid declaration. For instance, a disparate number of cells and rows compared to the number of grid items would make a declaration invalid.

In grid-template-area, every quoted string (the rows) must have the same number of cells and define the complete grid without ignoring any cell.

We can ignore a cell or leave it as an empty cell using the full-stop character (.)

.grid { 
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot .";
}

If that feels visually awkward or imbalanced to you, we can use multiple full-stop characters without any whitespaces separating them:

.grid {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot ....";
}

A named cell token can span multiple grid cells, But those cells must form a rectangular layout. In other words, we’re unable to create “L” or “T”-shaped layouts, although the spec does hint at support for non-rectangular layouts with disconnected regions in the future.

ASCII is better than line-based placement

Line-based placement is where we use the grid-column and grid-row properties to position an element on the grid using grid line numbers that are automatically indexed by a number:

.grid-item {
  grid-column: 1 / 3; /* start at grid column line 1 and span to line 3 */
}

But grid item line numbers can change if our layout changes at a breakpoint. In those cases, it’s not like we can rely on the same line numbers we used at a specific breakpoint. This is where it takes extra cognitive encumbrance to understand the code.

That’s why I think an ASCII-based approach works best. We can redefine the layout for each breakpoint using grid-template-areas within the grid container, which offers a convenient visual for how the layout will look directly in the CSS — it’s like self-documented code!

.grid {
  grid-template-areas:
    "head head"
    "nav main"
    "foot ...."; /* much easier way to see the grid! */
}

.grid-item {
  grid-area: foot; /* much easier to place the item! */
}

We can actually see a grid’s line numbers and grid areas in DevTools. In Firefox, for example, go to the Layout panel. Then, under the Grid tab, locate the “Grid display settings” and enable the “Display line number” and “Display area names” options.

This ASCII approach using named areas requires a lot less effort to visualize and easily find the placement of elements.

Let’s look at the “universal” use case

Whenever I see a tutorial on named grid areas, the common example is generally some layout pattern containing header, main, sidebar, and footer areas. I like to think of this as the “universal” use case since it casts such a wide net.

It’s a great example to illustrate how grid-template-areas works, but a real-life implementation usually involves media queries set to change the layout at certain viewport widths. Rather than having to re-declare grid-area on each grid item at each breakpoint to re-position everything, we can use grid-template-areas to “respond” to the breakpoint instead — and get a nice visual of the layout at each breakpoint in the process!

Before defining the layout, let’s assign an ident to each element using the grid-area property as a base style.

header {
  grid-area: head;
}

.left-side {
  grid-area: left;
}

main {
  grid-area: main;
}

.right-side {
  grid-area: right;
}

footer {
  grid-area: foot;
}

Now, let’s define the layout again as a base style. We’re going with a mobile-first approach so that things will stack by default:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
}

Each grid item is auto-sized in this configuration — which seems a little bit weird — so we can set min-height: 100vh on the grid container to give us more room to work with:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
  min-height: 100vh;
}

Now let’s say we want the main element to sit to the right of the stacked left and right sidebars when we get to a slightly wider viewport width. We re-declare grid-template-areas with an updated ASCII layout to get that:

@media (min-width: 800px) {
  .parent {
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 100px 1fr 1fr 100px;
    grid-template-areas:
      "head head"
      "left main"
      "right main"
      "foot foot";
  }
}

I tossed some column and row sizing in there purely for aesthetics.

As the browser gets even wider, we may want to change the layout again, so that main is sandwiched between the left and right sidebars. Let’s write the layout visually!

.grid-container {
  grid-template-columns: 200px 1fr 200px; /* again, just for sizing */
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Leveraging implicit line names for flexibility

According to the spec, grid-template-areas automatically generates names for the grid lines created by named grid areas. We call these implicitly-named grid lines because they are named for us for free without any additional work.

Every named grid area gets four implicitly-named grid lines, two in the column direction and two in the row direction, where -start and -end are appended to the ident. For example, a grid area named head gets head-start and head-end lines in both directions for a total of four implicitly-named grid lines.

We can use these lines to our advantage! For instance, if we want an element to overlay the main, left, and right areas of our grid. Earlier, we talked about how layouts have to be rectangular — no “T” and “L” shaped layouts allowed. Consequently, we’re unable to use the ASCII visual layout method to place the overlay. We can, however, use our implicit line names using the same grid-area property on the overlay that we use to position the other elements.

Did you know that grid-area is a shorthand property, sort of the same way that margin and padding are shorthand properties? It takes multiple values the same way, but instead of following a “clockwise” direction like, margin — which goes in order of margin-block-start, margin-inline-end, margin-block-end, and margin-inline-start — grid-area goes like this:

grid-area: block-start / inline-start / block-end / inline-end;

But we’re talking about rows and columns, not block and inline directions, right? Well, they correspond to one another. The row axis corresponds to the block direction, and the column axis corresponds to the inline direction:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

Back to positioning that overlay element as a grid item in our layout. The grid-area property will be helpful to position the element using our implicitly-named grid lines:

.overlay {
  grid-area: left-start / left-start / right-end / main-end;
}

Creating a minimal grid system

When we focus on layouts like the “universal” use case we just saw, it’s tempting to think of grid areas in terms of one area per element. But it doesn’t have to work like that. We can repeat idents to reserve more space for them in the layout. We saw that when we repeated the head and foot idents in the last example:

.grid-container {
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Notice that main, left, and right are also repeated but in the block direction.

Let’s forget about full page layouts and use named grid areas on a component. Grid is just as good for component layouts as full pages!

Here’s a pretty standard hero component that sports a row of images followed by different blocks of text:

The HTML is pretty simple:

<div class="hero">
  <div class="image">
    <img src="..." alt="" />
  </div>
  <div class="text">
    <!-- ... -->
  </div>
</div>

We could do this for a real fast stacked layout:

.hero {
  grid-template-areas:
    "image"
    "text";
}

But then we have to reach for some padding, max-width or whatever to get the text area narrower than the row of images. How about we expand our ASCII layout into a four-column grid instead by repeating our idents on both rows:

.hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* maintain equal sizing */
  grid-template-areas:
    "image image image image"
    "text  text  text  text";
}

Alright, now we can place our grid items into those named areas:

.hero .image {
  grid-area: image;
}

.hero .text {
  grid-area: text;
}

So far, so good — both rows take up the entire width. We can use that as our base layout for small screens.

But maybe we want to introduce the narrower text when the viewport reaches a larger width. We can use what we know about the full-stop character to “skip” columns. Let’s have the text ident skip the first and last columns in this case.

@media (min-width: 800px) {
  main {
    grid-template-columns: repeat(6, 1fr); /* increase to six columns */
    grid-template-areas:
      "image image image image image image"
      "..... text  text  text  text  .....";
  }
}

Now we have the spacing we want:

If the layout needs additional tweaking at even larger breakpoints, we can add more columns and go from there:

.hero {
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "image image image image image image image image"
    "..... text  text  text  text  text  text  .....";
}

Dev tool visualization:

Remember when 12-column and 16-column layouts were the big things in CSS frameworks? We can quickly scale up to that and maintain a nice visual ASCII layout in the code:

main {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "image image image image image image image image image image image image"
    "..... text  text  text  text  text  text  text  text  text  text  .....";
}

Let’s look at something more complex

We’ve looked at one fairly generic example and one relatively straightforward example. We can still get nice ASCII layout visualizations with more complex layouts.

Let’s work up to this:

I’ve split this up into two elements in the HTML, a header and a main:

<header>
  <div class="logo"> ... </div>
  <div class="menu"> ... </div>
</header>
<main>
  <div class="image"> ... </div>
  <h2> ... </h2>
  <div class="image"> ... </div>
  <div class="image"> ... </div>
</main>

I think flexbox is more appropriate for the header since we can space its child elements out easily that way. So, no grid there:

header {
  display: flex;
  justify-content: space-between;
  /* etc. */
}

But grid is well-suited for the main element’s layout. Let’s define the layout and assign the idents to the corresponding elements that we need to position the .text and three .image elements. We’ll start with this as our baseline for small screens:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "image1 image1 .....  image2"
    "texts  texts  texts  texts"
    ".....  image3 image3 .....";
}

You can already see where we’re going with this, right? The layout is visualized for us, and we can drop the grid items into place with the custom idents:

.image:nth-child(1) {
  grid-area: image1;
}

.image:nth-last-child(2) {
  grid-area: image2;
}

.image:nth-last-child(1) {
  grid-area: image3;
}

h2 {
  grid-area: texts;
}

That’s our base layout, so let’s venture into a wider breakpoint:

@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      ". image1 image1 ...... ......  ...... image2 ."
      ". texts  texts  texts  texts   texts  image2 ."
      ". .....  image3 image3 image3  image3 ...... .";
  }
}

I bet you know exactly how that will look because the layout is right there in the code!

Same deal if we decide to scale up even further:

.grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    ". image1 image1 .....  .....   .....  .....  .....  .....  .....  .....  ."
    ". texts  texts  texts  texts   texts  texts  texts  texts  texts  image2 ."
    ". .....  image3 image3 image3  image3 .....  .....  .....  .....  .....  .";
}

Here’s the full demo:

I’m using the “negative margin hack” to get the first image to overlap the heading.

Wrapping up

I’m curious if anyone else is using grid-template-areas to create named areas for the benefit of having an ASCII visual of the grid layout. Having that as a reference in my CSS code has helped de-mystify some otherwise complex designs that may have been even more complex when dealing with line numbers.

But if nothing else, defining grid layouts this way teaches us some interesting things about CSS Grid that we saw throughout this post:

• The grid-template-areas property allows us to create custom idents — or “named areas” — and use them to position grid items using the grid-area property.
• There are three types of “tokens” that grid-template-areas accepts as values, including named cell tokens, null cell tokens, and trash cell tokens.
• Each row that is defined in grid-template-areas needs the same number of cells. Ignoring a single cell doesn’t create a layout; it is considered a trash token.
• We can get a visual ASCII-like diagram of the grid layout in the grid-template-areas property value by using required whitespaces between named cell tokens while defining the grid layout.
• Make sure there is no whitespace inside a null cell token (e.g. .....). Otherwise, a single whitespace between null cell tokens creates unnecessary empty cells, resulting in an invalid layout.
• We can redefine the layout at various breakpoints by re-positioning the grid items using grid-area, then re-declaring the layout with grid-template-areas on the grid container to update the track listing, if needed. There’s no need to touch the grid items.
• Custom named grid areas automatically get four implicitly assigned line names — -start and -end in both the column and row directions.

Using Grid Named Areas to Visualize (and Reference) Your Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Neither do I! And that’s probably because there’s a lot happening in WordPress-land. The evolution towards full-site editing (FSE) introduces frequent changes to the way we build themes and plugins, and at such break-neck speed that the documentation itself is either non-existent or nearly stale upon being published. Heck, the term “full-site editing” might even change.

Tom McFarlin was musing about this in his post titled “Writing Tutorials in These Gutenberg Times”:

I know Gutenberg has been in development for five years and I know that it’s matured a lot over the course of that time. But [t]he number of tutorials explaining how to do something that’s already outdated was absolutely incredible.

The truth is that I wouldn’t know where to start if I was asked to make a new WordPress site. As I see, there are a number of ways to go in this evolving era of WordPress:

• Make a virtually empty theme that leverages the Site Editor for templating and block patterns for layouts.
• Make a child theme based on the existing Twenty Twenty-Two theme (because it supports FSE out of the box and is minimal enough to customize without much fuss).
• Make a classic theme.
• Ditch theming altogether and make a headless front-end that consumes the WordPress REST API.

I mean, we have so many tools for extending WordPress as a CMS that the front end of a WordPress site may vary from site to site. We can quite literally build an entire custom WordPress site with nothing but some tweaks to the theme.json file and fiddling around with layouts in the Block Editor.

It’s amazing and dizzying all at once.

It can also be frustrating, and we saw some of the frustration boil over when Matt Mullenweg commented on the recent design updates to the WordPress.org homepage and the amount of time took to complete:

[…] it’s such a basic layout, it’s hard to imagine it taking a single person more than a day on Squarespace, Wix, Webflow, or one of the WP page builders.

(And, yes, someone proved that a nearly identical copy of the design could be created in 20 minutes.)

I think Matt’s comments have more to do with the process and solving the right problems than they are criticizing the approach that was taken. But reading the comments on that post is a nice microcosm of what I believe is an existential dilemma that many WordPress developers — including myself — are feeling after five years of living between “classic” and FSE themes.

I’ll be honest: I feel super out of touch with FSE development. So out of touch that I’ve wondered whether I’ve fallen too far behind and whether I’ll be able to catch up. I know there’s a huge effort to bolster learning (Learn WordPress is a great example of that), but it feels like there’s still something missing — or some sorta disconnect — that’s preventing the community from being on the same page as far as where we are and where we’re heading.

Could it be a lack of communication? Nah, there’s lots of that, not to mention lots of opportunities to attend meetings and view meeting notes. Could it be a lack of stable documentation? That’s legit, at least when I’ve tried seeking information on block development.

Perhaps the biggest shortcoming is the dearth of blog posts that share tips, tricks, and best practices. The WordPress community has always been a vast army of folks who generously share their talents and wisdom. But I think Tom summed it up best when he tweeted:

my sympathy to anyone who duckduckgo’s/googles a tutorial for how to create a gutenberg block and cannot find a single consistent tutorial.

what a mess.

— Tom McFarlin (@tommcfarlin) August 17, 2022

I, for one, would love to be writing about WordPress as much as I have in the “classic” era. But again, there’s that elusive starting point that prevents me from feeling confident about anything I’d say.

Not Sure How to WordPress Anymore? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

This article is a sponsored by imgix

Adding video to your website immediately adds value, but also a new level of complexity to your web development. Can I use the tag? Do I need a JavaScript video player? What formats should the video be in for the best browser support? How do I account for different network speeds in different environments? How do I make sure that my videos will always play back with minimal buffering?

It sounds like a lot (and you might even consider throwing your hands up in the air asking, “Why don’t we just put it up on YouTube?”) This is a valid response — the more you dig into video and video delivery, more and more complexities arise that your developers will have to deal with.

For some, “toss it all on YouTube” might be an adequate solution to handle the complexities of video. But YouTube is based on ads and watching videos, and you probably don’t want an ad appearing in your mission critical content — even worse if it is an ad from your competition! Your goals with video delivery conflict directly with the goals of YouTube’s video delivery platform, making it a less than ideal solution for most enterprises.

Does That Mean We Are Back To Square One?

With the biggest (and cheapest) service removed from consideration, what are the best ways to solve all of the questions in the first paragraph? It is entirely possible to ‘build your own’ video platform, but this leads us back to complexities and pulling your development team away from core features to handle video delivery. From time to market, cost (and cognitive overhead), the best way to add video is to utilize a video streaming service. The great thing today is that you can use the same technologies used by Netflix or Hulu to deliver your videos.

What Is Video Streaming And Why You Need Adaptive Bitrate Video

Video streaming is the way that most video content is delivered on the web today. It features a number of advantages to just using a static video in the tag.

The coolest feature that video streaming introduces is Adaptive Bitrate Video. Before adaptive bitrate video was developed, only one bitrate of the video could be delivered to the customer, regardless of the device or bandwidth environment. This solution is fine when network speeds are fast, but it can be problematic when network speeds are not fast (or fluctuate). And if there is one thing we all know — we cannot control the speed network our customers are using.

On a slow network connection, a traditional video will be very slow to start and very likely to stall. (Stalling is the video streaming term for the video stopping and a “spinner of death” appearing). Adaptive bitrate videos have multiple versions of the video available and can adapt to the network speed of your customer. That ensures that the video will start playback quickly and is much less likely to stall during playback — no matter the speed of your user’s internet connection.

If the network suddenly slows down, the player can also adapt (in the middle of the playback) and begin playing a lower bitrate version of the video. All of these features of adaptive bitrate streaming lead to a better video experience for your customers. It almost sounds like magic, but let’s look at the technology and how it works.

HLS: The Magic Behind Smooth Video Streaming

The industry standard for video streaming is HTTP Live Streaming (HLS). The term Live in the name is a little misleading. While HLS can be used to stream live video, HLS is primarily used for playback of recorded videos, and can be found powering many of the top streaming services.

So how does HLS video work? The first step occurs on video upload when the streaming service generates a number of copies of the video in different bitrates. Then, each copy of the video is sliced into short segments — usually about 5-10 seconds long.

During playback, the video player handles the download and playback of the video. If the rate of download begins to slow compared to the rate of playback — it is possible that the video might stall. So when the player requests the next 5-10 second segment of the video, it requests a lower bitrate version — since lower bitrates download faster, and the chance of video stall is mitigated.

This is the magic of the adaptive bitrate playback — the player adapts the video to meet the network speeds of each unique viewer of your content!

You Mention A Player. Do Browsers Not Support HLS?

HLS is not natively supported in many browsers (it does have native support in Safari). In order to play an HLS video, you’ll need a JavaScript player as a part of your site to play back the video.

This Sounds Complicated

With time and development, it is possible to build your own video streaming platform — delivering an incredible video experience by re-encoding the video to HLS and delivering a customized player to your audience. But, building a video encoding/streaming platform will take a lot of developer time, pulling the team away from building your product. This is why my recommendation is to use a video streaming platform.

What Makes A Good Video Processing Solution?

Outsourcing complicated problems to the experts is a smart idea — you’re hiring domain experts to handle the complicated things rather than tackling them yourself. So what are the features that you should look for in a video streaming solution?

• Think of the advantages of HLS adaptive bitrate streaming.
  If you’re paying for high-quality and robust video delivery, you want to make sure the best streaming solution is in place.
• Support conversion from all major file formats.
  Mp4 (h264 and 265), MOV, WebM, and others. Videos come in a myriad of formats; there’s no reason to convert to a new format before uploading.
• Your video streaming tool should fit into your existing media pipeline.
  The media solution should be able to find your videos in your current process — when videos are added to the cloud, they should be automatically processed into streams.
• An out-of-the-box video player.
  As discussed, HLS streams don’t play in all browsers. Does your solution include a customizable player that you can plug into your current website?
• If you deliver both images and videos, you want a solution that includes an asset management dashboard that allows you to visualize and organize images and videos
• Last but not least, analytics.
  How many viewers have watched your videos, and how long was each view? You also want to see processing analytics on how many videos have been fully encoded.

What Service Offers All Of These Features?

imgix has recently released a Video API that meets all of these requirements. Your videos are automatically encoded and streamed from any cloud folder — and with native support for AWS S3, Google Cloud and Azure, imgix can fit seamlessly into your existing workflow.

The imgix API will create either HLS or MP4 versions of your video based on your needs, and you’ll have a customized playback URL to add to your website. You can see all your videos in their Asset Manager, as well as detailed playback analytics. You also get an out-of-the-box video player that easily works in React, Vue, static HTML, and other popular frontend frameworks.

Most importantly, if you need to deliver a large number of images and videos, a solution like imgix can optimize and process both types of assets without you having to build it from the ground up or cobble together different solutions. It’s truly a one-stop platform for visual media processing.

The purpose of a website is to reach new customers and keep current ones engaged. Therefore, customer-first should be at the top of your list for design features. After all, without your clients, your business won’t grow or succeed.

Customer-first has been a buzzword for a few years now. In a nutshell, it’s easy to imagine what customer-first design means. The needs of consumers come before anything else. However, the concept isn’t quite as simple in practice. A lot of nuances enter the equation.

Just what does it mean to have a customer-first web design? What are the must-haves to reach users on their level and keep their attention for the long haul?

Embracing quality customer experiences has driven loyalty for as long as anyone can remember. However, we now live in a time of uncertainty, and when people leave companies on a dime if they’re dissatisfied with any aspect. So you must hit the high notes on every song – your website is your purest online persona and must engage users and keep them entertained.

Whether you embrace causes that matter to your customers and share information on them or tweak your design to meet accessibility guidelines, many factors come into play with a customer-centric design.

In a recent report, researchers found that about 88% of company leaders feel customer engagement impacts revenue. You can’t control every variable, but you can ensure your website hits all the strong points for a customer-first web design that grabs them and keeps them on your page.

Here are our favorite tips to create a customer-first approach. You may already be doing some of these things. Pick and choose what makes the most sense for your business model. Even small changes can have a big impact.

1. Know Your Customers

Before creating a website centered around your customers’ needs, you must know who they are. What are the demographics of your typical clients? Survey them and find out what their needs and expectations are. How can you best help them?

You may also want to survey them about your website. What’s missing that might help them? Is there anything they love? What do they hate? The more you know, the better your design can match their expectations. Create buyer personas based on their preferences.

At the same time, buyers will sometimes say one thing but actually feel another way. No one is quite sure why people do this when being surveyed. One way around that issue is to do some A/B testing to see how they actually feel about various changes. Do they respond the way you thought? What other adjustments need to be made?

2. Find the Right Color Palette

Different industries trend toward various hues. For example, businesses in the banking industry trend toward blues and occasionally reds. Blue elicits trust from users and has a calming effect. On the other hand, the fashion industry might tap into brighter shades, such as lime green. Think about what colors people expect in your industry, and then find your color palette.

Each hue has its emotional impact. For example, red is a color of power and can elicit excitement in the viewer. Choose your shades accordingly to get the most emotional punch possible.

3. Accept Feedback

One of the best ways to improve your site over time to match the needs and preferences of your audience is by allowing feedback. Add reviews, place a feedback form in your footer, and even send out requests for feedback to your mailing list.

It’s also a good idea to find a mentor who has been successful at running a business. Ask them to look at your site and give you advice. You might also enlist the help of a marketing professional.

4. Stick With the Familiar

Have you heard of Jakob’s Law? The rule of thumb states that people prefer common design patterns they’re most familiar with. So when they see a pattern they know, such as a navigation bar layout, it boosts their mood and improves their memory of the site.

When making edits, don’t make significant changes. Instead, implement minor adjustments over time to give your followers a chance to acclimate to the shift.

5. Cut the Clutter

If you want users to feel wowed by your page and engage, you have to limit their choices. Add in too many options, and they may not know where to go first.

Start by choosing an objective for the page. Cut anything that doesn’t point the user toward the goal. Ideally, you’d have a little info, an image, and a call to action (CTA) button. However, this may vary, depending on where your buyer is in the sales funnel and how much information they need to decide to go from browser to customer.

6. Choose Mobile Friendliness

Recent reports indicate about 90% of people use mobile devices to go online at times. With phones gaining greater capabilities and 5G bringing faster speeds to communities, expect people to use their mobile devices even more frequently for internet browsing.

Making sure your site translates well on smaller screens makes sense for your company and for your customers. Be sure to test everything. Click through all links. Fill in forms. Ensure images and text auto-adjust to the correct size, so people don’t have to scroll endlessly.

7. Make Multiple Landing Pages

Like most businesses, you probably have several buyer personas as you segment your audience. Don’t just create a single home page and expect it to fulfill the purpose of every reader. Instead, create unique pages for each persona to best meet their needs.

Make sure each landing page speaks in the natural language patterns of your specific audience. Think about the unique needs of each group. How do their pain points differ? How can you best meet their needs?

8. Keep Important Info Above the Fold

People are busy. They work, have families, and might visit your site on the 15-minute break they get in the afternoon. Most consumers want the information they need to decide and don’t want to dilly-dally around with other things.

Place the essential headlines and info they need above the fold, so they see it first. Make it as readable as possible by using headings and subheadings. Add in a few bullet points. People also absorb information easier in video format, so add a video highlighting your product’s or service’s main benefits.

You should also place a CTA button above the fold if it makes sense for your overall design. Keep in mind people may have visited and already read some of the information. Some users return just to sign up and want to find the CTA quickly.

Step Into Your Customers’ Shoes

Look at your site through the eyes of your audience. What works well? What needs to be adjusted? Over time, you’ll develop a customer-first web design that speaks to those most likely to buy from you. Then, keep making changes and tweaking your site until it hits the perfect balance for your customers.

Featured image via Freepik.

Source

The post What Customer-First Web Design Looks Like first appeared on Webdesigner Depot.

Word-of-mouth is a powerful tactic that every marketer could dream of. Positive word-of-mouth can influence buyers purchasing intentions, build trust, and drive your conversion rate higher. You may be surprised, but it can help your search engine optimisation (SEO) efforts too.

Reviews and testimonials are one of the ways customers help build the trust and credibility that is needed for those all-important conversions. But many businesses will not realise the potential of reviews or testimonials, leaving them out of their content marketing strategy despite how effective they are. 

What are reviews?

You may not realise it, but online reviews are very impactful and have a big influence on your online presence. As e-commerce sites and online shopping continues to grow year on year, the importance of reviews will continue to grow too.

But what are reviews? A review is feedback that a customer will give on the experience they received from using a product or service. A review can be positive or negative and are usually publicly available for all to see. Reviews can include a rating (or star) system, as well as short comments, outlining the customer’s experience.

It’s estimated that around 90% of customers will look at reviews before visiting a business or making a purchase. While reviews can improve trust and credibility, leading to potentially higher conversion rates, a lack of reviews or negative reviews can have the opposite effect.

Reviews are mainly hosted on third-party sites, such as Google, review sites, or listings on business directories. However, businesses can also host their own reviews on their own website or e-commerce platform. We’ve all looked at the Amazon reviews before buying an item, haven’t we? The same goes for any other e-commerce store.

Reviews help other potential customers to get an insight into whether the solution you are offering for a particular problem or pain point resolved such issues. They can also be used by businesses to measure customer satisfaction. Where negative feedback is given, it provides a business with a chance to improve its service or product.

What are testimonials?

A testimonial is similar to a review, providing much more detail and insight. As testimonials are longer, there is much more scope for outlining an experience using a product or service as a story. 

Unlike reviews, a testimonial is directly collected and managed by the business. Despite this, testimonials are still very effective in a B2B environment, unlike reviews that are more suited for B2C. A testimonial usually includes the company the person works for, their name, and a profile picture.

Even though businesses collect and manage testimonials, they are still effective in influencing potential buyers. Testimonials’ strength is in their length. Testimonials that provide as much detail as possible are much more effective than shorter testimonials.

Testimonials can take different forms, including:

• Text
• Video testimonials
• Quotes
• Audio
• Case studies
• Social media
• Peer and press review

Reviews work much better as shorter items, but in greater quantities. The opposite is true for testimonials. However, testimonials that go beyond 3 paragraphs are typically less effective. As potential buyers can relate to the problems outlined in a testimonial, it allows an emotional connection to be made, which helps alter buying intentions.

Testimonials are typically given by customers or clients that have used a product or service. While the person giving the testimonial will be unknown to potential buyers, the experience they have using a product/service and their pain points help form a connection with potential buyers. 

Recommendations from influencers with strong followings don’t class as testimonials. That’s influencer marketing. While influencer marketing is an effective way to generate and amplify word-of-mouth and alter buying intentions, the two are different techniques entirely.

The importance of reviews and testimonials

Reviews and testimonials have a strong impact on potential customers. Just take a look at these 2 statistics to see how:

• 88% of customers trust reviews as much as a personal recommendation from friends or family.
• A business or product with excellent reviews (typically 5 stars) is likely to increase customer spending by 31%.

Here are more reasons why reviews and testimonials are important:

• It helps to build trust and credibility for your business and brand
• You can build a stronger connection with your customers
• Letting customers express their experiences helps develop brand advocates
• Helps increase brand awareness
• Increases lead generation and conversion rates
• Higher click-through rates
• Influences buyers’ decisions toward your brand, product, or service offering

The power of word-of-mouth

So, we’ve mentioned word-of-mouth being a powerful marketing tactic, but just how powerful is word-of-mouth? Word-of-mouth is considered to be much more effective at driving 5x more sales and generating leads than any form of paid marketing. Not only is word-of-mouth free but it’s also organic.

Long before the days of social media, reviews and testimonials, word-of-mouth was a powerful promotional technique. However, as it is now much easier to share and express opinions online, the power of word-of-mouth has only amplified and grown stronger.

Word-of-mouth is so powerful and impactful as customer trust is factored above all other forms of marketing. While 92% of people believe recommendations made from friends and family have the strongest ability to alter purchasing intentions, recommendations from others can still be very strong.

Word-of-mouth has the power to both attract and convert customers. Word-of-mouth is very good at raising brand awareness, and when used in the right places, can lead to a customer converting and taking that all-important action at the end of the buyer’s journey.

Customer reviews and testimonials are just one of the many ways a business can generate word-of-mouth. But remember, word-of-mouth isn’t just spreading positive experiences. Negative word-of-mouth can be just as influential for all the wrong reasons!

Other forms of generating word-of-mouth include:

• User-generated content
• Affiliate marketing
• Influencer marketing
• Referral marketing
• Partner programs
• Brand ambassadors
• Social media

Using reviews and testimonials in content marketing

Now we’ve covered how impactful reviews and testimonials can be as a form of word-of-mouth, how can you implement them into your content marketing strategy? Here are a few ways you can:

Include on your website

One of the first places many businesses will add reviews and testimonials is on their website. Whether it be a separate page dedicated to customer testimonials or reviews on individual product/service pages.

You could also include them on your homepage, which is the page that will see the most traffic. You even have the opportunity of embedding reviews into your site from third-party sources, such as Google. If you have great reviews, why let them sit idle when they can be used to highlight the value and benefits your product brings for solving a problem?

Add to your blog

Including testimonials in your blog posts can be a tricky one as you don’t want them to overshadow your content or distract the user from digesting your message. Yet when placed correctly, testimonials can be a welcome addition to your blog posts. Consider including testimonials in the sidebar to prevent any distractions and increase the chances of a customer becoming more interested in your brand or product.

Social media

With so many users and the ease of sharing content, using testimonials and reviews on your social media pages is a sure way of influencing potential customers. When many will form an opinion about your brand based on what you post on social media, social media is an ideal platform for sharing your testimonials. Combine with your optimal posting times for maximum effect.

Case studies

Case studies are very similar to testimonials but written from a business perspective. For that reason, case studies don’t have as much influence on buyers. But there’s nothing to stop you from including testimonials in your case studies, especially in the results or outcome section.

Email marketing

If you’re sending out regular emails to your subscribers, consider including reviews and testimonials to help drive conversions. Emails that are sent to leads can have a much stronger and more meaningful impact when paired with testimonials that highlight the benefits or strengths of your product. Just make sure the reviews and testimonials are relevant.

Near call-to-actions

What better place to include reviews and testimonials than near to where a customer is going to act? Placing reviews and testimonials in a strategic location near your call-to-actions will help increase the likelihood a user will act and make that all-important click.

How to get reviews and testimonials

You can’t use reviews and testimonials in your content marketing if you don’t have any to start with. So, here are some ways you can start building up your reviews and gathering testimonials.

• Ask your customers or clients after making a purchase, it’s estimated that around 70% who are asked to leave a review will.
• Exchange testimonials with your clients
• Encourage customers to leave reviews by offering an incentive. Be careful about this though as you could be breaking the conditions of some platforms, such as Google.
• Use the reviews on your Google Business Profile alongside business directory and listing sites, such as Trustpilot, TripAdvisor, and Yell.
• Conduct marketing research, such as surveys, to find out customers’ opinions
• Use your existing praise from customers, but ask permission first
• Set up Google Alerts to track mentions of your site and reviews on third-party sites, such as news reports or testimonials on other blogs.

Responding to reviews

It’s not enough just to get reviews. You need to take the time to reply and respond to reviews, whether they be positive (and especially) or negative. If you don’t take the time to respond to reviews, it may seem to your potential customers that you don’t care once they’ve purchased from you.

When responding to reviews, there are some tips you should consider to help develop a positive experience and build relationships with your customers. Whether you are responding to a positive review or a negative review, consider these tips:

• Try to respond to the review as quickly as possible
• Thank the customer for their custom and for leaving a review
• Use the customer’s first name
• Keep your reply short and sweet
• For bad reviews, apologise and sympathise with the customer and acknowledge a mistake was made. Avoiding responsibility or denial only makes the situation worse.
• Address the problem and try to provide a solution (where possible)
• If there’s an issue, take the conversion to a private form of communication, such as email, chat, or phone)

Righting any wrongs is a chance to turn a negative into a positive. It also means you may not have lost that customer either. Correcting any mistakes and admitting responsibility shows you are open and honest.

You also can respond to reviews with your targeted keywords, such as your business name or products. Not only will you be building better relationships with your customers, but your SEO efforts will get a little boost too.

By dealing with the problem, a customer who left a negative review may be more inclined to stay with you in future. After all, it’s 7 times cheaper to retain your existing customers than to acquire a new one. Why not give customers a second chance?

Conclusion

Reviews and testimonials are powerful marketing tools that every business should consider making use of. Not only does it help in building trust and credibility, but the influence word-of-mouth has on altering buying intentions shows just how effective reviews and testimonials can be in your content marketing. So, why not get started?

The post The Effectiveness of Testimonials and Reviews in your Content Marketing Strategy appeared first on noupe.

Word-of-mouth is a powerful tactic that every marketer could dream of. Positive word-of-mouth can influence buyers purchasing intentions, build trust, and drive your conversion rate higher. You may be surprised, but it can help your search engine optimisation (SEO) efforts too.

Reviews and testimonials are one of the ways customers help build the trust and credibility that is needed for those all-important conversions. But many businesses will not realise the potential of reviews or testimonials, leaving them out of their content marketing strategy despite how effective they are. 

What are reviews?

You may not realise it, but online reviews are very impactful and have a big influence on your online presence. As e-commerce sites and online shopping continues to grow year on year, the importance of reviews will continue to grow too.

But what are reviews? A review is feedback that a customer will give on the experience they received from using a product or service. A review can be positive or negative and are usually publicly available for all to see. Reviews can include a rating (or star) system, as well as short comments, outlining the customer’s experience.

It’s estimated that around 90% of customers will look at reviews before visiting a business or making a purchase. While reviews can improve trust and credibility, leading to potentially higher conversion rates, a lack of reviews or negative reviews can have the opposite effect.

Reviews are mainly hosted on third-party sites, such as Google, review sites, or listings on business directories. However, businesses can also host their own reviews on their own website or e-commerce platform. We’ve all looked at the Amazon reviews before buying an item, haven’t we? The same goes for any other e-commerce store.

Reviews help other potential customers to get an insight into whether the solution you are offering for a particular problem or pain point resolved such issues. They can also be used by businesses to measure customer satisfaction. Where negative feedback is given, it provides a business with a chance to improve its service or product.

What are testimonials?

A testimonial is similar to a review, providing much more detail and insight. As testimonials are longer, there is much more scope for outlining an experience using a product or service as a story. 

Unlike reviews, a testimonial is directly collected and managed by the business. Despite this, testimonials are still very effective in a B2B environment, unlike reviews that are more suited for B2C. A testimonial usually includes the company the person works for, their name, and a profile picture.

Even though businesses collect and manage testimonials, they are still effective in influencing potential buyers. Testimonials’ strength is in their length. Testimonials that provide as much detail as possible are much more effective than shorter testimonials.

Testimonials can take different forms, including:

• Text
• Video testimonials
• Quotes
• Audio
• Case studies
• Social media
• Peer and press review

Reviews work much better as shorter items, but in greater quantities. The opposite is true for testimonials. However, testimonials that go beyond 3 paragraphs are typically less effective. As potential buyers can relate to the problems outlined in a testimonial, it allows an emotional connection to be made, which helps alter buying intentions.

Testimonials are typically given by customers or clients that have used a product or service. While the person giving the testimonial will be unknown to potential buyers, the experience they have using a product/service and their pain points help form a connection with potential buyers. 

Recommendations from influencers with strong followings don’t class as testimonials. That’s influencer marketing. While influencer marketing is an effective way to generate and amplify word-of-mouth and alter buying intentions, the two are different techniques entirely.

The importance of reviews and testimonials

Reviews and testimonials have a strong impact on potential customers. Just take a look at these 2 statistics to see how:

• 88% of customers trust reviews as much as a personal recommendation from friends or family.
• A business or product with excellent reviews (typically 5 stars) is likely to increase customer spending by 31%.

Here are more reasons why reviews and testimonials are important:

• It helps to build trust and credibility for your business and brand
• You can build a stronger connection with your customers
• Letting customers express their experiences helps develop brand advocates
• Helps increase brand awareness
• Increases lead generation and conversion rates
• Higher click-through rates
• Influences buyers’ decisions toward your brand, product, or service offering

The power of word-of-mouth

So, we’ve mentioned word-of-mouth being a powerful marketing tactic, but just how powerful is word-of-mouth? Word-of-mouth is considered to be much more effective at driving 5x more sales and generating leads than any form of paid marketing. Not only is word-of-mouth free but it’s also organic.

Long before the days of social media, reviews and testimonials, word-of-mouth was a powerful promotional technique. However, as it is now much easier to share and express opinions online, the power of word-of-mouth has only amplified and grown stronger.

Word-of-mouth is so powerful and impactful as customer trust is factored above all other forms of marketing. While 92% of people believe recommendations made from friends and family have the strongest ability to alter purchasing intentions, recommendations from others can still be very strong.

Word-of-mouth has the power to both attract and convert customers. Word-of-mouth is very good at raising brand awareness, and when used in the right places, can lead to a customer converting and taking that all-important action at the end of the buyer’s journey.

Customer reviews and testimonials are just one of the many ways a business can generate word-of-mouth. But remember, word-of-mouth isn’t just spreading positive experiences. Negative word-of-mouth can be just as influential for all the wrong reasons!

Other forms of generating word-of-mouth include:

• User-generated content
• Affiliate marketing
• Influencer marketing
• Referral marketing
• Partner programs
• Brand ambassadors
• Social media

Using reviews and testimonials in content marketing

Now we’ve covered how impactful reviews and testimonials can be as a form of word-of-mouth, how can you implement them into your content marketing strategy? Here are a few ways you can:

Include on your website

One of the first places many businesses will add reviews and testimonials is on their website. Whether it be a separate page dedicated to customer testimonials or reviews on individual product/service pages.

You could also include them on your homepage, which is the page that will see the most traffic. You even have the opportunity of embedding reviews into your site from third-party sources, such as Google. If you have great reviews, why let them sit idle when they can be used to highlight the value and benefits your product brings for solving a problem?

Add to your blog

Including testimonials in your blog posts can be a tricky one as you don’t want them to overshadow your content or distract the user from digesting your message. Yet when placed correctly, testimonials can be a welcome addition to your blog posts. Consider including testimonials in the sidebar to prevent any distractions and increase the chances of a customer becoming more interested in your brand or product.

Social media

With so many users and the ease of sharing content, using testimonials and reviews on your social media pages is a sure way of influencing potential customers. When many will form an opinion about your brand based on what you post on social media, social media is an ideal platform for sharing your testimonials. Combine with your optimal posting times for maximum effect.

Case studies

Case studies are very similar to testimonials but written from a business perspective. For that reason, case studies don’t have as much influence on buyers. But there’s nothing to stop you from including testimonials in your case studies, especially in the results or outcome section.

Email marketing

If you’re sending out regular emails to your subscribers, consider including reviews and testimonials to help drive conversions. Emails that are sent to leads can have a much stronger and more meaningful impact when paired with testimonials that highlight the benefits or strengths of your product. Just make sure the reviews and testimonials are relevant.

Near call-to-actions

What better place to include reviews and testimonials than near to where a customer is going to act? Placing reviews and testimonials in a strategic location near your call-to-actions will help increase the likelihood a user will act and make that all-important click.

How to get reviews and testimonials

You can’t use reviews and testimonials in your content marketing if you don’t have any to start with. So, here are some ways you can start building up your reviews and gathering testimonials.

• Ask your customers or clients after making a purchase, it’s estimated that around 70% who are asked to leave a review will.
• Exchange testimonials with your clients
• Encourage customers to leave reviews by offering an incentive. Be careful about this though as you could be breaking the conditions of some platforms, such as Google.
• Use the reviews on your Google Business Profile alongside business directory and listing sites, such as Trustpilot, TripAdvisor, and Yell.
• Conduct marketing research, such as surveys, to find out customers’ opinions
• Use your existing praise from customers, but ask permission first
• Set up Google Alerts to track mentions of your site and reviews on third-party sites, such as news reports or testimonials on other blogs.

Responding to reviews

It’s not enough just to get reviews. You need to take the time to reply and respond to reviews, whether they be positive (and especially) or negative. If you don’t take the time to respond to reviews, it may seem to your potential customers that you don’t care once they’ve purchased from you.

When responding to reviews, there are some tips you should consider to help develop a positive experience and build relationships with your customers. Whether you are responding to a positive review or a negative review, consider these tips:

• Try to respond to the review as quickly as possible
• Thank the customer for their custom and for leaving a review
• Use the customer’s first name
• Keep your reply short and sweet
• For bad reviews, apologise and sympathise with the customer and acknowledge a mistake was made. Avoiding responsibility or denial only makes the situation worse.
• Address the problem and try to provide a solution (where possible)
• If there’s an issue, take the conversion to a private form of communication, such as email, chat, or phone)

Righting any wrongs is a chance to turn a negative into a positive. It also means you may not have lost that customer either. Correcting any mistakes and admitting responsibility shows you are open and honest.

You also can respond to reviews with your targeted keywords, such as your business name or products. Not only will you be building better relationships with your customers, but your SEO efforts will get a little boost too.

By dealing with the problem, a customer who left a negative review may be more inclined to stay with you in future. After all, it’s 7 times cheaper to retain your existing customers than to acquire a new one. Why not give customers a second chance?

Conclusion

Reviews and testimonials are powerful marketing tools that every business should consider making use of. Not only does it help in building trust and credibility, but the influence word-of-mouth has on altering buying intentions shows just how effective reviews and testimonials can be in your content marketing. So, why not get started?

The post The Effectiveness of Testimonials and Reviews in your Content Marketing Strategy? appeared first on noupe.

If a utility class only does one thing, chances are you don’t want it to be overridden by any styles coming from elsewhere. One approach is to use !important to be 100% certain the style will be applied, regardless of specificity conflicts.

The Tailwind config file has an !important option that will automatically add !important to every utility class. There’s nothing wrong with using !important this way, but nowadays there are better ways to handle specificity. Using CSS Cascade Layers we can avoid the heavy-handed approach of using !important.

Cascade layers allow us to group styles into “layers”. The precedence of a layer always beats the specificity of a selector. Specificity only matters inside each layer. Establishing a sensible layer order helps avoid styling conflicts and specificity wars. That’s what makes CSS Cascade Layers a great tool for managing custom styles alongside styles from third-party frameworks, like Tailwind.

A Tailwind source .css file usually starts something like this:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

Let’s take a look at the official Tailwind docs about directives:

Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects. Use the @tailwind directive to insert Tailwind’s base, components, utilities and variants styles into your CSS.

In the output CSS file that gets built, Tailwind’s CSS reset — known as Preflight — is included first as part of the base styles. The rest of base consists of CSS variables needed for Tailwind to work. components is a place for you to add your own custom classes. Any utility classes you’ve used in your markup will appear next. Variants are styles for things like hover and focus states and responsive styles, which will appear last in the generated CSS file.

The Tailwind @layer directive

Confusingly, Tailwind has its own @layer syntax. This article is about the CSS standard, but let’s take a quick look at the Tailwind version (which gets compiled away and doesn’t end up in the output CSS). The Tailwind @layer directive is a way to inject your own extra styles into a specified part of the output CSS file.

For example, to append your own styles to the base styles, you would do the following:

@layer base {
  h1 {
    font-size: 30px;
  }
}

The components layer is empty by default — it’s just a place to put your own classes. If you were doing things the Tailwind way, you’d probably use @apply (although the creator of Tailwind recently advised against it), but you can also write classes the regular way:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

The CSS standard is much more powerful. Let’s get back to that…

Using the CSS standard @layer

Here’s how we can rewrite this to use the CSS standard @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

Unlike the Tailwind directive, these don’t get compiled away. They’re understood by the browser. In fact, DevTools in Edge, Chrome, Safari, and Firefox will even show you any layers you’ve defined.

You can have as many layers as you want — and name them whatever you want — but in this example, all my custom styles are in a single layer (my-custom-styles). The first line establishes the layer order:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

This needs to be provided upfront. Be sure to include this line before any other code that uses @layer. The first layer in the list will be the least powerful, and the last layer in the list will be the most powerful. That means tailwind-base is the least powerful layer and any code in it will be overridden by all the subsequent layers. That also means tailwind-utilities will always trump any other styles — regardless of source order or specificity. (Utilities and variants could go in separate layers, but the maintainers of Tailwind will ensure variants always trump utilities, so long as you include the variants below the utilities directive.)

Anything that isn’t in a layer will override anything that is in a layer (with the one exception being styles that use !important). So, you could also opt to leave utilities and variants outside of any layer:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

What did this actually buy us? There are plenty of times when advanced CSS selectors come in pretty handy. Let’s create a version of :focus-within that only responds to keyboard focus rather than mouse clicks using the :has selector (which lands in Chrome 105). This will style a parent element when any of its children receive focus. Tailwind 3.1 introduced custom variants — e.g. 

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

<div class="outline-red-600 radio-container"> ... </div>