Archive

Archive for August, 2022

Using Grid Named Areas to Visualize (and Reference) Your Layout

August 26th, 2022 No comments

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.

(Full size GIF)

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.

Enabling grid settings.

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

Line-based placement versus ASCII Art placement.

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.

The Holy Grail layout in rectangles.

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";
}
CodePen Embed Fallback

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.

Implicitly assigned line names.

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-startgrid-area goes like this:

grid-area: block-start / inline-start / block-end / inline-end;
Showing the block and inline flow directions in a left-to-right writing mode.

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;
Block and inline axis.

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;
}
CodePen Embed Fallback

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:

A row of weightlifting photos above a heading, blurb, then a row of three links.

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.

Showing grid lines on the stacked mobile version of the page.

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:

Showing grid lines for a table-sized layout of the page.

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:

Showing grid lines for a large table sized layout of the page.

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  .....";
}
CodePen Embed Fallback

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:

Three images positioned around a fancy heading.

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;
}
Showing grid lines on a mobile layout of the page.

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!

Showing grid lines for a table-sized layout of the page.

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 .....  .....  .....  .....  .....  .";
}
Showing grid lines for a desktop-sized layout of the page.

Here’s the full demo:

CodePen Embed Fallback

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.

Categories: Designing, Others Tags:

Not Sure How to WordPress Anymore?

August 25th, 2022 No comments

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:

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.

Categories: Designing, Others Tags:

Better Video Streaming With imgix

August 25th, 2022 No comments

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.

Categories: Others Tags:

What Customer-First Web Design Looks Like

August 24th, 2022 No comments

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.

Categories: Designing, Others Tags:

The Effectiveness of Testimonials and Reviews in your Content Marketing Strategy

August 24th, 2022 No comments

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?

Canva

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:

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

Canva

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

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

Canva

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

Canva

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.

Categories: Others Tags:

The Effectiveness of Testimonials and Reviews in your Content Marketing Strategy?

August 24th, 2022 No comments

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:

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:

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.

Categories: Others Tags:

Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project

August 24th, 2022 No comments
CSS Cascade Layers with Tailwind CSS layers in DevTools.

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. 

— but sometimes it’s easier to just write CSS:

@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;
  }
}

Let’s say in just one instance we want to override the outline-color from blue to something else. Let’s say the element we’re working with has both the Tailwind class .outline-red-600 and our own .radio-container:has(:focus-visible) class:

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

Which outline-color will win?

Ordinarily, the higher specificity of .radio-container:has(:focus-visible) would mean the Tailwind class has no effect — even if it’s lower in the source order. But, unlike the Tailwind @layer directive that relies on source order, the CSS standard @layer overrules specificity.

As a result, we can use complex selectors in our own custom styles but still override them with Tailwind’s utility classes when we need to — without having to resort to heavy-handed !important usage to get what we want.


Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Removing jQuery from GOV.UK

August 23rd, 2022 No comments

The GOV.UK team recently published “How and why we removed jQuery from GOV.UK“. This was an insightful look at how an organization can assess its tooling and whether something is still the best tool for the job. This is not a nudge to strip libraries out of your current project right now! Many of us may still be supporting legacy projects and browser requirements that prevent this from being a viable option.

Some of the criticism appears to be that the library size argument is negligible on modern network speeds and caching.

GOV.UK posted an update to address this criticism with metrics – “The impact of removing jQuery on our web performance“.

This article also makes the case for improving maintenance. Instead of upgrading disparate outdated versions of code and having to address security updates in a piecemeal approach, removing the dependency reduces this footprint. This is the dream of having the luxury for addressing technical debt.

Previously, GitHub also documented how they incrementally decoupled jQuery from their front-end code. Improving maintenance and developer experience played a role into their decision.

What caught my eye in particular was the link to the documentation on how to remove jQuery. Understanding how to decouple and perform migration steps are maintenance tasks that will continue to come up for websites and it’s reassuring to have a guide from someone that had to do the same.

Further musing on this subject turned up the old chestnuts “You Might Not Need jQuery” (2014), “(Now More Than Ever) You Might Not Need jQuery” (2017), “Is jQuery still relevant? (1)” (2016), and “Is jQuery still relevant? (2)” (2017).

To Shared LinkPermalink on CSS-Tricks


Removing jQuery from GOV.UK originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Smashing Podcast Episode 51 With Ben Callahan: What’s The Value Of A Design System?

August 23rd, 2022 No comments

This article is a sponsored by Wix

In this episode of the Smashing Podcast, we ask how you can prove the value of a Design System and how you can pitch it effectively to stakeholders. Vitaly talks to Ben Callahan to find out more.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: He studied computer science and worked as a software engineer, as an audio engineer for independent films, as an animator and of course, as a front-end developer focused on standard-based web development. These days, he’s the design system researcher and consultant working with wonderful people, almost sparkling people at Sparkbox to build a better web. Now, he’s always in learning mode and there is no better way to describe him as an explorer, maybe even Internet Explorer, with a very strong focus on design systems. Now, he lives in Dayton, Ohio, loves cooking, poetry, travel, photography, coffee; that was an important one. And has two, pretty as well kiddos, my threshing friends, please welcome. And I hope I can hear the cheers and applause right here, Ben Callahan. Hello Ben, how are you?

Ben Callahan: Hi, Vitaly. I am smashing.

Vitaly: Well. That is fantastic to hear, while you do look smashing as well. If I may say so, Ben, let’s start right away and dive right in there. How does a person who just happens to be a software engineer turn into a design system researcher? Can you show a bit of your journey to get there? Because I know that you’ve been working on design systems probably before it was even a thing. So I want to hear it all.

Ben: Yeah, absolutely. Thank you for having me, Vitaly. I do appreciate it. I’m super excited because I love design systems. And one of the reasons that I think it’s become an area of focus for us is because I have seen how it has helped organizations create a lot of unity inside their teams, which is something that I’ve always wanted. And so, if you’re asking about my journey, the reason I’m pointed in this direction is because of that. And if I go back, I did study computer science.

Ben: I was frustrated working in the corporate world feeling like I didn’t have a lot of… There wasn’t just a lot… This wasn’t a vision for the things I wanted to work on. And so eventually, I stepped out of that space, took a year to just explore different technologies like animation and audio, and just other things that I was interested in, and ended up starting a business, doing video production and audio engineering.

Ben: And then we did a website for one of our clients. And as soon as the rest of our customers saw that we offered that, it just was the only thing they wanted. This was early days of the web, and so I ended up buying my partner in that business out and transitioning it to a web studio, a very local web studio here in Ohio. And eventually merged that with a few other folks who were doing good creative technical work in town, and the result over a few years of us churning to figure out what we really wanted to do was again a focus on the web.

Ben: And that’s how Sparkbox was born. I’m really fortunate because we’ve grown slowly and steadily over the last 14 years. And that means that as a front-end engineer, as a computer science guy, I’ve transitioned out of writing code every day. And instead, I get to focus on where I want us to be headed. What do I think is important for us to be learning, and how can we best serve our customers? And that’s really how I pretty naturally ended up digging in deeper to design system work. Because I actually do believe that it is a unifying opportunity for a team, so that’s how I landed here.

Vitaly: Oh, that sounds very exciting, indeed. And I think in many ways, we are everybody who is listening to the show now as well; I think we all have been in one place, and then we moved to a slightly different one just steadily and slowly. And I know a couple of people who used to, I don’t know, sell glasses before the internet was a thing. And then off you go becoming a designer, developer, manager into design systems and all things like that, so that’s really exciting to see that.

Vitaly: Interestingly, talking about design systems, I think we are in a very interesting position right now because it feels like we have been playing, and doing, and experimenting, and working around design systems for many, many, many, many, many, many years now. And I don’t know about you and probably have, of course, way more experience than that. Many teams already have one, right? Or they’re trying to get one, and it might be up-to-date, maybe not, but they’re definitely not something new and shiny around the block that we just need to try out.

Vitaly: Many people have tried to do that, you did spend a bit of time trying to understand what makes a design system mature. So maybe you could actually dive a little bit more into this and explain, based on your experiences, of course, the Sparkbox as well. What is the maturity model for a design system? So what does it entail?

Ben: Yeah, you’re right, Vitaly, that we have been as an industry working very systematically for a long time, years before we started to use the word design system. And Sparkbox, like many other studios or consultants, had been working in that way for a long time. I think when you put a name on a thing like design systems when you give it a name, it takes on a life of its own.

Ben: And so definitely, there was a point probably six years ago when our clients just started asking us for that, six or seven years ago. And so I think when that starts to happen, as an organization, as a leader in an organization, I feel like it’s my job to better understand that. And for us, what that has meant is for the last five years, we’ve done what we call the design system survey.

Ben: And that’s just to open to the industry. And as part of that process, I get to ask; I get to do lots of interviews with folks who I just find online, who are doing this work in an interesting way. And I just ask if I can have half an hour or an hour of their time, and I just ask them a ton of questions.

Ben: And so that has given me a lot of exposure to very broad perspectives on what’s happening in the space. And so with all of that, as part of an input for me, what I have done over the last four or five years is each year talk to lots of folks and then sit down and try to find some cohesion in all the different stories that I’m hearing.

Ben: So, a couple of years ago, leading up to the release of our survey for 2021, I had done that series of interviews. And I realized that there were some patterns that I was seeing emerging in terms of how systems were moving and maturing. And that’s where we landed on these four stages that we think most design system programs move through. And that we tried to keep these quite simple because I don’t want this to be something that’s super theoretical.

Ben: I want it to be practical and useful, but at a high level. The model is there are these four stages; the first is just building version one, so that’s literally everything you do up until you release something for subscribers inside your organization to start using. And then pretty much every team that I’ve spoken with who has gone through that and actually got something out the door, their next big focus is almost always on adoption.

Ben: And that makes a lot of sense, right? You spend a bunch of time building a thing. Of course, you want to see if other folks are interested in using it. And so that second stage is driving adoption. And then, if you’re able to make it easy to become a subscriber, and if you do a really good job supporting folks who are using your system. And if you continue to evolve the system in a way that it shows value to lots and lots of different types of subscribers inside your organization, then you can reach this third stage, which we just call surviving the teenage years.

Ben: And it’s a tricky season, because there’s lots happening, right? You’re having a lot more people use the system. I can guarantee you that they’re probably going to try to do things with it. You never imagined they would. This is where you heard of having to make a decision. Are we actually going to treat this like a product? Are we going to offer support in a really healthy way? Are we going to come alongside the subscribers and engage with them been good ways?

Ben: And if you can continue to survive that stage, you reach what we call stage four, which is just evolving a healthy product. And this is really where the design system team actually takes a role in terms of leadership inside the design organization itself. And these teams that are stage four are doing incredible things. When I talk to people inside these organizations, they talk about the design system team as the place where the most skilled workers in their organization operate.

Ben: They say things our design system team was ready for us. When my product team came and said, “Hey, we want to try view.” That they had already done a spike on the design system team to show they could support that. They’re very proactive. They’re not reactive. And that’s, I think, a really healthy place to be at the table for big conversations, to be driving decisions inside the org. That’s what I think is possible if you mature in that way.

Vitaly: Well, that sounds very exciting. But then in your experience, looking again at the work that your clients are doing, where would you see most companies are at this point? How many actually reach level four, and where do most companies struggle?

Ben: Yeah, that’s great. I’m glad you’re asking that because I think doing that work, one of the outputs I was hoping for is to make it clear how to move through these stages in a healthy way. I think you said something earlier that I’ll just harken back to you which was… You said most folks have a system already. What I’m seeing is that many organizations are on their second, third, fourth, or fifth attempt at doing this work.

Ben: So it’s not just that they have a system; it is that they have been struggling to build a successful system for years in some cases. Most of the time, I would say most organizations that I get a chance to interact with are stuck somewhere between two and three. And it’s actually really common to get stuck there because this is where everything before stage three is about building something people will value and use.

Ben: And in order to transition into three, you have to… What it seems like right now is that you need to increase the size of your design system team. And the skill sets that are needed are a little bit different. This is where you have to actually add in a product support team, like customer service for your subscribers, right? And it’s because the system is if it’s going to take root, it’s going to be a really fundamental piece of any interface work that your organization does. And for that to be the case, you have to really actually support those folks in a really healthy way. If they don’t feel like you’re there for them, if they’re going to use your product, you have to show them that you’re trustworthy, and so-

Vitaly: That’s right.

Ben: … that requires more people, there’s just more to do. And so that’s a tough spot. I see folks oftentimes moving between two and three quite a bit. I haven’t spoken with a ton of folks who have reached that stage for more mature, really driving more proactive decisions inside the org yet, but they’re out there.

Vitaly: Yeah. One interesting thing for me was when I encountered working with one of the bigger companies from Romania, actually, and they’ve been working on a design system for six to seven years, pretty much aligned to what you were saying as well, where everybody was on the gold-rush design systems, gold-rush in a way. And I was extremely impressed with just how concise, how well established, how reliable, and how sophisticated the design system was.

Vitaly: And so that took a lot of iteration, of course, as well, but it also takes a big commitment from the top. And I know that you also have been speaking for a while now about how to sell design systems because very often it is expensive. And very often, you still need to convince the right people that this is the right amount of effort and that the return on investment will be worth it. Would you say that at this point, it’s something that’s already considered to be true most of the time? Or is it something that you actively have to prove every single time with some metrics or KPIs? How does this work for you?

Ben: Yeah. It’s not proven. I think, I mean there are organizations who have done that work for their use case and I think that’s great. This is a tough area, and I don’t have a single answer. I have more of an approach. I think that has helped us. So I have had the opportunity to speak with a lot of leadership inside organizations where they’re trying to make a decision if they should be investing heavily in a system.

Ben: And I think that’s actually probably the right first step. I’m not somebody who is absolute in this. I think there are situations where a design system is really helpful, really beneficial. There are situations where I probably wouldn’t recommend it. That doesn’t mean some variation of patterns and components and things isn’t needed in most cases.

Ben: But if you have a single product and a small team and you’re in startup mode, it’s probably not worth investing all this time and money to build a design system to support a single product. It’s just the bang is not there for your bucks. So there are definitely use cases. That’s one of many where I probably wouldn’t recommend it.

Ben: In terms of once you’ve made that decision to pursue it, then it is about making sure leadership is on board at some stage in there, you have to make that transition to getting leadership really bought in. Not every system starts that way. We talk about in the maturity model, there’s a concept called origin stories, which is just really how involved and aware and supportive your leadership is in those early stages.

Ben: And there are many systems that are very successful now that started without any… No leadership involvement at all. It’s a transition; it’s maturity that has to happen. And as part of a successful system, you do need that long-term, but the way we help our clients figure out how to get support from leadership is that we do what you would do with any other product as we go. And we talk to those folks, and we try to understand what their needs are and what their goals are.

Ben: And how can a design system be shaped to serve those things that are important to them? And if you can reposition, the effort in a way that it solves problems for folks, they’re going to be willing to support it. The other big thing to talk about in those early days when you’re selling the systems especially is that you… A design system is only going to show its value over a very long period of time.

Ben: So this is truly an investment, right? It’s the kind of thing you put time and money into, and you have to trust that over the years, you’ll start to see a return on that, but it’s not a quick thing. So being clear about that upfront is actually really helpful in the work. And your last question was about, is it something you just sell once? And then you’re done.

Ben: I’ve never seen that really work. It’s a constant. That actually is part of the maturity model. We talk about three things, education, which is convincing folks, talking to folks, casting the vision, explaining why, what, how, and all those things. Engagement, which is getting folks involved in the work with you. It’s not a one-way thing.

Ben: It’s definitely very… There’s a lot of work required from all the different groups involved and then evolution, which is just simply making the system better over time. So if you’re not doing all three of those things all the time, you get stuck in that, in those steps to mature, so that’s what we’ve learned.

Vitaly: Right. Well, that’s very exciting. I’m wondering, and I really want to know more about what you have learned because you did mention that you and the wonderful team at Sparkbox have released the design systems survey 2022. And I’m really curious about some of the new things that you maybe haven’t uncovered there. What were some of the most surprising findings that you discovered there during that research?

Ben: Yeah. I mean, each year, we do that. This is our fifth year releasing that; each year, we come away with some really interesting insights, and this year’s no different. One of the things that really stood out to me I remember when we were working on what questions we would ask this year. And there was a series of questions in the survey this year about your top challenges. And we give folks a list of options to choose from, and then what are your top priorities? And we give them the same list.

Ben: And I remember reading that question and saying to my team, aren’t people just going to pick the same things here, right? If these are my challenges, then why wouldn’t those be the things I’m prioritizing? But they convinced me to leave it in, and they thought we would find something insightful there. And, of course, they were right. One of the things that are really interesting to me is in that survey; there are a handful of areas where you can see a difference in what is important to people in terms of what is a challenge and what they’re actually able to prioritize and work on?

Ben: The one that stands out the most is staffing. And this ties in actually with what we were just speaking about, Vitaly, around that stage two to stage three transition where you need to grow the team, the number of folks working on this, like the volume of work gets much larger as you move from stage two to three. And if you don’t have the support from leadership to increase staff, which is what that is hinting at, you can’t really do that well. You can’t make that transition well, and to me, the way I’ve interpreted this is that a lot of folks in the survey data say staffing is a big challenge, but it’s not; it can’t be a priority for them.

Ben: And it’s interesting because I think what that means is there’s a separation in the things that the design system team has the authority to prioritize, right? So they may be able to say, “Here are the things objectively that we have as challenges,” but maybe they don’t have the authority to choose how to spend the money or how to prioritize things, which I feel is a disconnect. If we’re going to trust these folks to run this design system program, we have to trust them to set their own priorities. So that’s one that stood out to me for sure.

Vitaly: Right. Right. It’s always kind of a story because I think in many ways when I deal with companies that choose to go ahead and give the green light to the team for design system, there is still always a little bit of trust that this is a simple, relatively simple site project, which is not going to drive us away from the main core product that we’re working on. So if designers, in this case, believe that this is the right thing, surely this cannot be the priority. And so surely there will be no extra stuff involved in making this happen.

Vitaly: And so that’s pretty much, I guess, aligned with what you are saying here as well. And obviously, people are important. So I’m wondering, though, in your experience, maybe that would be interesting to explore. What would you say are some of the important ingredients of a successful design system? When do you know that you are on the right track? Or how do you know, do you ever know, Ben? Do you ever know?

Ben: Yeah, it’s hard, man. It’s hard because it gets into the promises you make early on, which are the things that people are going to expect you to prove later. So I think successful systems can look very different inside different organizations, and it’s really. I wish there were a simple answer. I think there are some common things; we talk about a lot of those things in our survey we ask each year, do you feel your system is successful?

Ben: And then we can take that information and look at the other characteristics of design system programs that where they feel they are successful? And then we can make some interesting observations. One of the things that we always see is that having better engagement almost always means that individuals feel that the system is more successful. So, in other words, you can’t operate on this. You can’t build and offer a system unless you’re actually working alongside the people who need it.

Ben: It’s like any other product, you have to understand their needs, and you have to get down into the work with them. And so that’s what we encourage and help our clients set up as those engaging practices. I think the educational side of it is always key too. And this is where, in fact, this year, one of the things I’ve been focused on is just going back to what a design system is.

Ben: And this sprung out of a couple of consulting engagements last year, where big companies that have had systems for years, and we get in there and ask a ton of questions. And what we understand very quickly is all the people here have very different ideas about what a system is. Why it’s important? How should it be done? And this is seven, eight years into folks working on this stuff. And people still don’t actually understand what a design system is? And so that’s a problem, right? And-

Vitaly: Right, right.

Ben: … I’m not saying that you have to have the same exact definition that I do, but if you internal to your organization, don’t have that defined, that’s where the real problem is. So we did a bunch of work this year to lay out what we just call the anatomy of a design system, which is a very simple breakdown of what a system is. It gives us some common language to use, and that’s been really helpful for our clients and for us as we work alongside them. So I think going through that exercise with your own internal team is one way to make sure that you’re going to be setting yourself up for success. There are probably many more.

Vitaly: Right. But then, Ben, can you maybe shed a bit more light on things like, “Hmm, how would I put it best?” So if I’m working with semi design system in the company, and I’m pretty confident that things are going in the right direction, and it seems like everything is reasonably well structured within the organization, there are people who are working on it. It goes as it’s supposed to be. What would you say as some of those red flags that one usually should be aware of? Just avoid… I don’t know, deterioration, I guess, of a design system in the company.

Ben: Yeah. There are definitely seasons. I think folks go through where they feel like, “Hey, we’ve got things figured out. We have a good groove. We’re following our processes. Everything’s good.” I think one of the things that we’ve seen is that, like any other product, there is a level of stability you have to aspire to as well. And the same challenges that we’re used to solving for our externally facing products are also going to be the reality for us with an internal product, like a design system.

Ben: And that’s when things change around. And so many times we’ve come into work with an organization where they felt they had a great program running and leadership changed, like a new director comes in, or a new VP comes in. And they have a very different perspectives on how to approach the work. And they haven’t been there for the journey that you have been on. And so, all of a sudden, you’re thrust into this instability where you have to, again, prove that you’re a valuable part of the organization and the process you have to show.

Ben: Sometimes, this is where the metrics come in, where you have to not just tell them which you have to actually show them. And so that’s one tiny example, but shifts in the market, right? Pivoting a product like a rebrand, all of these kinds of things can impact that. What feels like that stability? And so we try to think about… We’ve done a bunch of work to try to figure out what are the things that we can have in place in the seasons where things are feeling good. How do we make sure we’re creating more stability that will actually help our system last through those kinds of changes?

Ben: And there’s three big things we’ve identified. The first is authority, which is that real visible support from leadership. The second is value, which is that you’re continuously monitoring the product you’re offering. The design system itself is actually valuable to the folks you’re asking to use it; that’s engagement, right? You have to be making sure that it’s doing something helpful for you… It has to be the easiest way to work, and then tradition is the third.

Ben: And that’s a little bit different in that you earn that over time, right? Having authority and being valuable over time, you become the way an organization builds interfaces. And that tradition of this is how we work. Actually is quite a stabilizing force in the context of a lot of change. So those are the three things we help our customers put in place in order to create systems that last beyond just those seasons of feeling like we’ve got it figured out.

Vitaly: Right. But I also think the underlying asset behind all of that is something that we spoke about in Berlin when you were here. I remember that cup of coffee. That was a very nice cup of coffee.

Ben: Yeah. That was good.

Vitaly: And also very nice conversation that we had back then. And we were talking about culture.

Ben: Yeah.

Vitaly: We’re talking specifically about… For all of this to succeed, we need to have proper culture and companies and organizations that not only support and enable a design system but also have a little bit of a design system sprinkled pretty much everywhere in the organization. So maybe you could share a bit more on that because I know that you spent quite a bit of time working around design systems and culture.

Ben: Yeah. Yeah. This is what I’ve been working on most recently. And I’m so excited about it. I think I have learned a bit from a couple of our engagements with clients where… Any place where people are getting together consistently, a culture is formed. So that means if you work at a big company, there’s an organizational culture that is created from all of these folks coming together to work on a thing. But also, each day, you’re probably not interacting with every employee.

Ben: And so, your small team that you interact with on a daily basis will form a subculture that exists inside of that larger organization’s culture. And there are probably hundreds or thousands of subcultures inside big organizations, right? The group of folks who get together on Zoom and knit over lunch, there’s going to be a subculture formed there, right? The book club where they’re reading about whatever science fiction book just came out.

Vitaly: Well, I love a Good Book Club.

Ben: Yeah. See, there’s a subculture being formed there, right? I have been doing a bunch of research by just reading papers from the last few decades of other folks much smarter than I who have been researching organizational culture. And I’ve been looking at that because I feel like there’s a missing piece in what we’re talking about with design systems. And that’s an observation that I’ve made just in our work.

Ben: And one of the things that I think is helping us to frame that challenge up a little better is understanding the different types of cultures that can exist. And there’s lots of material on this. There’s a model that I love. That’s, I think, from the late or early ’90s, which is called the competing values framework. And I’ll send you a link that at least you can share in the show notes, but—

Vitaly: Absolutely.

Ben: … it’s really nice. And it just takes two ideas on a spectrum X and Y. And it gives you four high-level general types of cultures that can exist in an organization. And one of the things that I’ve learned is in my interviews, almost every single one of our design system teams that I’ve talked to is on the left side of this diagram, which means they’re internally oriented. So they’re either collaborative or they’re controlling. Those are the two culture types that are the most common for a design system team.

Ben: And that makes sense, right? A collaborative approach is when you’re saying, “Hey, everybody come help me do this.” And together we’ll build something that we can all use. That’s very common. And then controlling is a little different. And that’s we’re saying, “Hey, this design system is in place to ensure that the output is consistent.” And so you cannot veer from this. It’s more like us being restrictive.

Vitaly: Like a strict guideline that we need to stick to, right? Mm-hmm.

Ben: That’s right. So those are the two… This is very general, but those are the two general ideas of cultures that exist really in design system teams, but there are two others, and those are more externally oriented. And one of those is competitive, which is about being driven by the market, and the other is more entrepreneurial and it’s creative, it’s called. And these are folks who are just trying to disrupt stuff. And so, with these four ideas, what I’ve learned is some of these cultures work well together, and some of them don’t.

Ben: And as a design system team, you don’t get to choose the culture of your organization, right? You are going to be a subculture. And so what we’re learning now is there’s a lot of nuance in being smart about how to structure the culture, how to curate the culture of your design system team in a way that it can operate successfully inside the larger organization’s culture.

Ben: And that’s a lot of the work that I’ve been doing. And I’m real. I just feel like there’s so much to this. I have a lot more research to do, but it’s already starting to show a lot of value in our consulting work, so-

Vitaly: Yeah. Yeah. That makes sense. Because once you have an organization that already has a culture in place, you probably can’t change that, but you might change the way how your design system would operate in that environment to make the best out of that.

Ben: That’s right.

Vitaly: Well, I hope that at some point you will be, I don’t know, writing articles, maybe even books about this.

Ben: Yes.

Vitaly: Either hear something, a rumor about an upcoming book on just that eventually.

Ben: That’s the plan. Yeah. Trying to put something together that has these three big concepts, the anatomy of a system. So actually getting some nuts and bolts about being very clear and articulate about what a system is? Understanding how systems mature, as we’ve already spoken about, and then recognizing the impact of an organization’s culture on the design system team and how we can structure that in a way that it’s successful? So those kinds of the big—

Vitaly: Any deadlines that you’ve put yourself in your calendar?

Ben: I’m hoping to have my draft done this year. And then from there, that the whole process of editing and all of it, so-

Vitaly: Yeah. I even know a publisher who might be interested in publishing at some point-

Ben: Oh, yeah.

Vitaly: … who knows you.

Ben: Yeah. Give me their name.

Vitaly: Yeah, I will, I will maybe let’s just spend a bit more time thinking more hands-on about what are some of the things that designers developers working in organizations, working in companies on a design system? What can they do to make things a bit better for the process, for collaboration, for the workflow, for everything?

Vitaly: Let’s start maybe just by you briefly maybe highlighting, how do you start the kickoff projects when it comes to design systems with your clients? What do you usually start with? Obviously, there is going to be some research involved and all, but what would be the initial steps to get to a solid foundation early on?

Ben: Yeah, you’re right. It is research. We call this phase onboarding at Sparkbox and what we try to recognize is that those early days of an engagement like that, or the days when you know the least, right? And so we try to embrace the idea that we’re going to know a little bit more tomorrow than we did today. And we try to be very iterative. I think those early days for us are oftentimes about building relationships with the folks inside the organization.

Ben: And we do often ask to be introduced to lots and lots of people, even if we’re not going to work with them daily in the design system work. We still need to know what they’re dealing with? What they’re going through? How are they accomplishing their tasks each day? What are their goals? And what we’re trying to do is I think, model for our clients that you cannot do design system work effectively unless you really truly understand the needs of your users, your subscribers.

Ben: And so that is where we start. And so it’s about… We do that in a lot of different ways. So we may run a small internal survey and send that to lots and lots of people. We may schedule three to five interviews with each discipline. And one of the things that’s a little bit of a pet peeve of mine is that we talk so much about how a design system can benefit a designer or a developer, but we ignore a lot of other disciplines.

Ben: And so one of the things that we’re intentional about is making sure we’re not only speaking to the designers and the developers but also let’s talk to some folks in QA, let’s talk to the product owners. So let’s talk to UX research folks. I think the system should be broad in its goal of serving lots of different disciplines. And so the only way that we can do that is if we understand the needs of all of those folks so that’s how we get rolling.

Vitaly: Right. And then, as time progresses in terms of collaboration, let’s say between designers and developers, right? It’s still always a topic handoff or no handoff. Den Mole and Brett Frost are speaking about the hot potato model as we throw.

Ben: Yeah.

Vitaly: The stuff from designer to developer, from developer to designer, it’s all alternative. And there is no notion of a handoff because it’s just happening all the time in small bits and pieces. What do you see working? Or do you see it working best or maybe not working well at all?

Ben: Yeah, it’s funny there. This is a spectrum; there are so many organizations that are more iterative in that way. There are a lot of organizations out there that are still very linear, and I definitely fall more in the camp of iteration where we believe, but I talk with our team a lot about this idea of empathy. And I’m not talking about empathy for our end users. I’m talking about empathy for the other disciplines that we have to work alongside.

Ben: And I think that is key to doing this work well, is understanding that every decision you make, say you’re a developer, every line of code that you write to build an interface has an impact on the visual side of the things, right? So, and the experience for the end customer. So recognizing that all of our decisions are interplaying with each other, I think, is necessary. And that’s where building relationships with those people is the way that you can do better work.

Ben: So we encourage that. And that’s why I love design systems because it forces all of us onto the same team instead of us thinking about, “Oh, I’m on this products team.” No, we’re actually all trying to build stuff that better serves our end customers, right? And the one way we can do that is with a system.

Vitaly: Right. And when it comes to… Let’s say those little fine little details; for example, many teams will be working with storybook on the coding side of things and then Figma on the design side of things. How do we then, the ultimate, the billion dollar question from me to you? Ben, of course, how do you breach that gap? Will tools save us? Will processes save us workflows, Slack channels? I don’t know. You give me an answer, Ben. I don’t know.

Ben: Yeah. I definitely don’t think tools are going to save us. I get asked a lot about tools because right now, especially with design system stuff, there are so many tools coming on the market, and every tool that’s out there is investing heavily in offering better and better services. And that’s great. We need that innovation happening in the space for sure. And I’m not saying you shouldn’t use tools, of course, but I don’t think tools will save us.

Ben: I think it’s… So in our anatomy of a design system model, we talk about every layer of the system consisting of three different parts. And those are, of course, the assets, which are the things everybody thinks about, the files, the components and react, the Figma designs, all of it. But those are important, right? But also, we talk about documentation, which is like a major piece, which is offering a really actual, insightful explanation of what a component is or what a token is. Or whatever the thing you’re documenting.

Ben: Of also, why is it important? Why is it that way? And, and then we also talk about the process as a key part of that, of this for each layer. And this is, I think I had to say what will save us; I think being intentional and thinking through the actual process that you’re going to follow and being clear about what it is and how to follow it is the way that we’re able to set these different disciplines up for success. In the example you said, designer developer, like one of the common things that one of the biggest challenges we see is that folks don’t trust the design system because the version of it that a designer used is no longer in sync with the version of it that a developer is going to use.

Ben: And that’s a problem, right? Because now, all of a sudden, I’m going to… The next time when I come around, I go through the process thinking that it’s in sync, and at the end, I realize, “Oh my gosh, I used the design system as a developer. And now, the output is different than what my designer designed. That’s a problem. I’m not going to want to use the system anymore because that issue means I have to go redo stuff, right? So that actually has taken away any efficiencies that we might have gained by having a design system because I’ve just created a bunch of rework for myself.

Ben: So the solution to that, there’s two big things, right? One is defining a process to keep these things in sync and just being clear about what that is. And the other is transparency about the current state of each piece of a system. So now, I can choose as a developer to use the system. I know if there’s transparency, and I know that it’s not quite in sync with what the designer used. That just means, oh, I might have a little bit of iteration to do on it, but I haven’t gone through expecting it to be perfect at the end so that transparency creates trust.

Ben: And the process is the way that you can say, “Hey, we know things will, at some point, become synchronized, you can choose to wait until that’s done, or you can go now and maybe help us create the synchronization.” So I think those are the two things that’s just one example, but it’s a balance, right? Of the way that we work with each other and the tools offering some of that automatically. And then when they don’t putting the process in place to do it manually, so-

Vitaly: Right, absolutely. Well, that sounds very exciting. Well, I do have to ask one more thing, Ben; as we’re wrapping up slowly, I know that you’ve been working on so many different projects with so many different companies, so many different brands, and so many different designs systems across. I don’t know how many companies and brands, at this point, do you still have a dream project that you would love to be working on one day? I don’t know, maybe it could be a design system for a big brand, or maybe it could be anything else.

Vitaly: I know that you know, you are a big audio guy, right? So you have been spending quite a bit of time with audio and as not your engineer as well, and you have so many other things that are really interesting to you, and during the conversation that we had back in Berlin, I just realized just how broad your interests really are. So if you could do anything, any big project that you would like to take on, what would it be?

Ben: Oh my goodness. Yeah. I think it’s not, for me, it’s not about the size of a company or the brand awareness, that kind of thing. I mean, we have worked with some big organizations, and that’s always fun to… When you’re talking with your family later to be like, “Oh, you went to that website; we helped build that.” That’s always a fun moment, but I think for me, it’s always been about impact.

Ben: So if there was a way to help organizations actually create that unity on their teams, that’s the thing that really is driving me at the moment. So, the idea of a book, I think, is a way to put that together and actually see folks grow from it and make better decisions within their daily work.

Ben: That’s pretty exciting to me. The other one, I think, is just that I really enjoy teaching and working with folks. And so, I think at some point in my future, I probably will find a way to give back in that way. And that’s pretty exciting for me to think about. So there’s a couple.

Vitaly: That sounds great. That’s great. So dear friends, we’ve been learning quite a bit about design systems this episode, but I’m still wondering, what have you been learning about lately, Ben, that might not be related to design systems or might be related to design systems? What keeps you busy these days? What keeps on a toast?

Ben: Yeah, that’s fun. My son is at a camp this week, and he is studying VR gaming. He’s learning how to make VR games. And so, he and I have a lot of fun. He’s learning to program as well. And so my computer science background gets me back into some code, goofing around with him. So there’s some stuff I’m learning there. I’m always learning about coffee. You can probably see some of my coffee equipment here. So I have a couple of new toys that I’m playing with within the coffee world too always, so-

Vitaly: That sounds great. So do you think we should be expecting you to become a VR developer or VR engineer or barista anytime soon?

Ben: Yes. That’s definitely. I’ll be a barista probably in the near future if nothing else works out.

Vitaly: Right. Well, that sounds about right. If you, dear listener, would like to hear more from Ben, you can find him on Twitter, where he’s @bencallahan, and will obviously post the link to it in the episode notes and also on his website @bencallahan.com. That’s not very surprising, or I would say, but you also can find him @sparkbox.com, where the wonderful sparkling Sparkboxers. Is that the right way of saying that?

Ben: That’s what we say. Sparkboxers. Yeah.

Vitaly: Spark boxers are doing all the incredible job on design systems and beyond. So thank you so much for joining us, Ben. It was a pleasure and fun as always.

Ben: Yeah.

Vitaly: Any parting words of wisdom streaming to the internet out there as an Internet Explorer?

Ben: Oh my gosh. Internet Explorer. No. Well, go check out the second draft of the tokens spec that’s coming out. There’s a lot of feedback needed there if you’re into that space, so that would be a thing. I would encourage folks to go read.

Categories: Others Tags:

What Are The Benefits Of Digital Transformation?

August 23rd, 2022 No comments

This cannot be denied that “digital transformation” has been the major reason for the fundamental changes in the result of businesses. Also, the way businesses are operating, and the integration of digital technology in digital transformation have a massive role in it. In the modern world, organizations are gaining benefits from digital transformation. There are numerous businesses that are replicating big names just after witnessing the benefits gained from digital transformation in their organization.

Modernizing the legacy process, effective and result-driven workflows, safe and sound security, and maximum revenue is to name a few under the line of benefits of digital transformation. The following are the top benefits for all business types, must check them out!

Top Result-Driven Benefits Of Digital Transformation

Digital transformation has allegedly changed the perspective of organizations operating systems. The process of the operating systems undergoes 4 stages such as; systems, processes, workflow, and culture all are its part. However, by taking the advantage of workflow automation, AI, and machine learning companies are gaining potential leads and increasing customer retention. See what the other 8 benefits are:

Strengthen Data Collection

There is no use in collecting tons of customer data when the data is unreal or non beneficial. What’s the catch? The data provides the real benefit of optimizing, which can later be used for business prosperity. Here comes the digital transformation handy and it accentuates the system to gather the right data and incorporate it fully into the business which can raise the business bars to a higher level.

For the organization’s betterment, it is important to know how the customers’ data is collected, stored, used, and shared across the platforms. To maintain customer relationship management (CRM), you are advised to ensure customers that their data is safe and are under high security with automation.

Enhanced Customer Experience (CX)

Customers when interacting with automated and digital resources automatically expect a lot from them. However, for any business, the best it could do is to not let its customer down. The digital transformation unlocks efficiencies that give seamless, real-time, and intuitive experience to the customers. 

Digital transformation allows you to give your customers complete agency over their data privacy, which certainly leads to customer satisfaction. According to the Accenture reports, For the substantial business growth, customer experience CX has emerged as its key”, also, it says “increase in CX even by single point can lead to millions’ growth annually”

Boost Productivity

Hence digital transformation has been following the high-end technology advancements provided by automation, AI, and machine learning in this modern world. Therefore, in the organization, having the appropriate high technology can actually boost productivity. Wondering how? It actually takes up the responsibility of the manual tasks, and lets employees focus on more important tasks. Also, it can integrate data throughout the company and let the employee feel less burdened.

Forceful Resource Management

According to the sources, the average number of applications used in businesses in 2020 is about 900 — all kudos to digital transformation. Because it makes information and resources solid for the businesses, and also, protected. For business intelligence, digital transformation can integrate applications, databases, and software. 

Whether it is a finance department, marketing, or sales, each and every department has a sensitive data that requires a safety which can be driven via digital transformation. 

For an organization, to maintain its credibility in the market it is highly advisable to equip and optimize data with easy to use tools and help the team to make their work done properly.

Data Driven Customer Insights

For best customer understanding and customer needs — you being the business owner must create a business strategy that is customer centric and must fulfill customer needs. Also, for better customer insights the ideal way to do that is to have a safe and secure data set. 

How digital transformation helps in gaining the best customer insights? With the help of structure and unstructured data. Personal customer information falls under structural data, whereas, social media metrics is an unstructured data that help the business to drive more insights. 

In addition, the collection of data enables the strategies for the business to provide relevant and personalized content. 

High and Maximum Profits

Companies that go through the digital transformation process are more efficient and profitable; it also helps companies get noticed more.

However, according to the SAP Center for Business Insights and Oxford Economics, the companies that follow the digital transformation process gain more than the usual companies. The results are as under:

More than 75% of the companies are reported to have increased profits with digital transformation.

More than 80% of businesses say that they have increased their market share

With the digital transformation companies are earning 23% better revenue in comparison of their competitors

Uplift Digital Culture

Without a doubt, the digital transformation is encouraging a digital culture by tailoring the environment with the right tools. Also, these tools help to connect in a seamless way, in addition, it moves the whole organization to a new level of digitalization

Certainly, it helps the online businesses to take advantage of the benefits of digital transformation and keeps pushing the businesses to grow in a better way. One such example is upliftment in dropshipping businesses in different industries like clothing, pets, jewelry etc. lately which has gained tremendous interest and which is possible with the help of free tools like the Woocommerce and WordPress.   

Cost Savings

Last but not the least — cost savings. Which business would not want to save the cost? ALL OF THEM! Switching to digital transformation will not only save business costs but also time. Once you have switched to it, the integration of it would make work and business more efficient.

What Are the 4 Main Areas of Digital Transformation?

Many the thoughtful researchers and many advocate digital transformation in 4 areas. However, it is further categorized in the light of Microsoft and Association Success. Let’s have a look at both of them:

According To Microsoft:

According to Microsoft CEO Satya Nadella, CEOs should focus on these areas in digital transformation:

  1. Empowering employees
  2. Engaging customers
  3. Optimize operations
  4. Services and products

According To Association Success:

According to an article on AssociationSuccess.org, businesses should have 4 specific focal points when designing a digital transformation plan:

  1. A strategic focus
  2. A customer focus
  3. A culture focus
  4. A data focus

Conclusion

Data protection and safety is no longer an IT task, it shall be looked after by digital technology & MDM solutions too. Also, the companies are redefining their shape in the light of digital transformation. However, the businesses are seen gaining in many areas such as; data collection, improved customer experience, high cost savings, maximum revenue, and more. 

The post What Are The Benefits Of Digital Transformation? appeared first on noupe.

Categories: Others Tags: