Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS

I woke up one morning in early 2022 and caught an article called “A Whistle-Stop Tour of 4 New CSS Color Features” over at CSS-Tricks.

Wow, what a gas! A new and wider color gamut! New color spaces! New color functions! New syntaxes! It is truly a lot to take in.

Now, I’m no color expert. But I enjoyed adding new gems to my CSS toolbox and made a note to come back to that article later for a deeper read. That, of course, led to a lot of fun rabbit holes that helped put the CSS Color Module Level 4 updates in a better context for me.

That’s where Oklch comes into the picture. It’s a new color space in CSS that, according to experts smarter than me, offers upwards of 50% more color than the sRGB gamut we have worked with for so long because it supports a wider gamut of color.

Color spaces? Gamuts? These are among many color-related terms I’m familiar with but have never really understood. It’s only now that my head is wrapping around these concepts and how they relate back to CSS, and how I use color in my own work.

That’s what I want to share with you. This article is less of a comprehensive “how-to” guide than it is my own personal journey grokking new CSS color features. I actually like to this of this more as a “love story” where I fall for Oklch.

The Deal With Gamuts And Color Spaces

I quickly learned that there’s no way to understand Oklch without at least a working understanding of the difference between gamuts and color spaces. My novice-like brain thinks of them as the same: a spectrum of colors. In fact, my mind goes straight to the color pickers we all know from apps like Figma and Sketch.

I’ve always assumed that gamut is just a nerdier term for the available colors in a color picker and that a color picker is simply a convenient interface for choosing colors in the gamut.

(Assumed. Just. Simply. Three words you never want to see in the same sentence.)

Apparently not. A gamut really boils down to a range of something, which in this case, is a range of colors. That range might be based on a single point if we think of it on a single axis.

Or it might be a range of multiple coordinates like we would see on a two-axe grid. Now the gamut covers a wider range that originates from the center and can point in any direction.

The levels of those ranges can also constitute an axis, which results in some form of 3D space.

sRGB is a gamut with an available range of colors. Display P3 is another gamut offering a wider range of colors.

So, gamuts are ranges, and ranges need a reference to determine the upper and lower limits of those axes. That’s where we start talking about color spaces. A color space is what defines the format for plotting points on the gamut. While more trained folks certainly have more technical explanations, my basic understanding of color spaces is that they provide the map — or perhaps the “shape” — for the gamut and define how color is manipulated in it. So, sRGB is a color gamut that spans a range of colors, and Hex, RGB, and HSL (among others, of course) are the spaces we have to explore the gamut.

That’s why you may hear a color space as having a “wider” or “narrower” gamut than another — it’s a range of possibilities within a shape.

If I’ve piqued your interest enough, I’ve compiled a list of articles that will give you more thorough definitions of gamuts and color spaces at the end of this article.

Why We Needed New Color Spaces

The short answer is that the sRGB gamut serves as the reference point for color spaces like Hex, RGB, and HSL that provide a narrower color gamut than what is available in the newer Display P3 gamut.

We’re well familiar with many of sRGB-based color notations and functions in CSS. The values are essentially setting points along the gamut space with different types of coordinates.

  /* Hex */ #f8a100
  /* RGB */ rgb(248, 161, 2)
  /* HSL */ hsl(38.79 98% 49%)

For example, the rgb() function is designed to traverse the RGB color space by mixing red, blue, and green values to produce a point along the sRGB gamut.

If the difference between the two ranges in the image above doesn’t strike you as particularly significant or noticeable, that’s fair. I thought they were the same at first. But the Display P3 stripe is indeed a wider and smoother range of colors than the sRGB stripe above it when you examine it up close.

The problem is that Hex, RGB, and HSL (among other existing spaces) only support the sRGB gamut. In other words, they are unable to map colors outside of the range of colors that sRGB offers. That means there’s no way to map them to colors in the Display P3 gamut. The traditional color formats we’ve used for a long time are simply incompatible with the range of colors that has started rolling out in new hardware. We needed a new space to accommodate the colors that new technology is offering us.

Dead Grey Zones

I love this term. It accurately describes an issue with the color spaces in the sRGB gamut — greyish areas between two color points. You can see it in the following demo.

Oklch (as well as the other new spaces in the Level 4 spec) doesn’t have that issue. Hues are more like mountains, each with a different elevation.

That’s why we needed new color spaces — to get around those dead grey zones. And we needed new color functions in CSS to produce coordinates on the space to select from the newly available range of colors.

But there’s a catch. That mountain-shaped gamut of Oklch doesn’t always provide a straight path between color points which could result in clipped or unexpected colors between points. The issue appears to be case-specific depending on the colors in use, but that also seems to indicate that there are situations where using a different color space is going to yield better gradients.

Consistent Lightness

It’s the consistent range of saturation in HSL muddying the waters that leads to another issue along this same train of thought: inconsistent levels of lightness between colors.

The classic example is showing two colors in HSL with the same lightness value:

The Oklab and Oklch color spaces were created to fix that shift. Black is more, well, black because the hues are more consistent in Oklab and Oklch than they are in LAB and LCH.

So, that’s why it’s likely better to use the oklch() and oklab() functions in CSS than it is to use their lch() and lab() counterparts. There’s less of a shift happening in the hues.

So, while Oklch/LCH and Oklab/LAB all use the same general color space, the Cartesian coordinates are the key difference. And I agree with Sitnik and Turner, who make the case that Oklch and LCH are easier to understand than LAB and Oklab. I wouldn’t be able to tell you the difference between LAB’s a and b values on the Cartesian coordinate system. But chroma and hue in LCH and Oklch? Sure! That’s as easy to understand as HSL but better!

The reason I love Oklch over Oklab is that lightness, chroma, and hue are much more intuitive to me than lightness and a pair of Cartesian coordinates.

And the reason I like Oklch better than HSL is because it produces more consistent results over a wider color gamut.

OKLCH And CSS

This is why you’re here, right? What’s so cool about all this is that we can start using Oklch in CSS today — there’s no need to wait around.

“Browser support?” you ask. We’re well covered, friends!

In fact, Firefox 113 shipped support for Oklch a mere ten days before I started writing the first draft of this article. It’s oven fresh!

Using oklch() is a whole lot easier to explain now that we have all the context around color spaces and gamuts and how the new CSS Color Module Level 4 color functions fit into the picture.

I think the most difficult thing for me is working with different ranges of values. For example, hsl() is easy for me to remember because the hue is measured in degrees, and both saturation and lightness use the same 0% to 100% range.

oklch() is different, and that’s by design to not only access the wider gamut but also produce perceptively consistent results even as values change. So, while we get what I’m convinced is a way better tool for specifying color in CSS, there is a bit of a learning curve to remembering the chroma value because it’s what separates OKLCH from HSL.

The oklch() Values

Here they are:

  • l: This controls the lightness of the color, and it’s measured in a range of 0% to 100% just like HSL.
  • c: This is the chroma value, measured in decimals between 0 and 0.37.
  • h: This is the same ol’ hue we have in HSL, measured in the same range of 0deg to 360deg.

Again, it’s chroma that is the biggest learning curve for me. Yes, I had to look it up because I kept seeing it used somewhat synonymously with saturation.

Chroma and saturation are indeed different. And there are way better definitions of them out there than what I can provide. For example, I like how Cameron Chapman explains it:

“Chroma refers to the purity of a color. A hue with high chroma has no black, white, or gray added to it. Conversely, adding white, black, or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.”

— Cameron Chapman

I mentioned that chroma has an upper limit of 0.37. But it’s actually more nuanced than that, as Sitnik and Turner explain:

“[Chroma] goes from 0 (gray) to infinity. In practice, there is actually a limit, but it depends on a screen’s color gamut (P3 colors will have bigger values than sRGB), and each hue has a different maximum chroma. For both P3 and sRGB, the value will always be below 0.37.”

— Andrey Sitnik and Travis Turner

I’m so glad there are smart people out there to help sort this stuff out.

The oklch() Syntax

The formal syntax? Here it is, straight from the spec:

oklab() = oklab( [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )

Maybe we can “dumb” it down a bit:

oklch( [ lightness ] [ chroma ] [ hue ] )

And those values, again, are measured in different units:

oklch( [ lightness = <percentage> ] [ chroma <number> ] [ hue <degrees> ]  )

Those units have min and max limits:

oklch( [ lightness = <percentage (0%-100%)> ] [ chroma <number> (0-0.37) ] [ hue <degrees> (0deg-360deg) ]  )

An example might be the following:

color: oklch(70.9% 0.195 47.025);

Did you notice that there are no commas between values? Or that there is no unit on the hue? That’s thanks to the updated syntax defined in the CSS Color Module Level 4 spec. It also applies to functions in the sRGB gamut:

/* Old Syntax */
hsl(26.06deg, 99%, 51%)

/* New Syntax */
hsl(26.06 99% 51%)

Something else that’s new? There’s no need for a separate function to set alpha transparency! Instead, we can indicate that with a / before the alpha value:

/* Old Syntax */
hsla(26.06deg, 99%, 51%, .75)

/* New Syntax */
hsl(26.06 99% 51% / .75)

That’s why there is no oklcha() function — the new syntax allows oklch() to handle transparency on its own, like a grown-up.

Providing A Fallback

Yeah, it’s probably worth providing a fallback value for oklch() even if it does enjoy great browser support. Maybe you have to support a legacy browser like IE, or perhaps the user’s monitor or screen simply doesn’t support colors in the Display P3 gamut.

Providing a fallback doesn’t have to be hard:

color: hsl(26.06 99% 51%);
color: oklch(70.9% 0.195 47.025);

There are “smarter” ways to provide a fallback, like, say, using @supports:

.some-class {
  color: hsl(26.06 99% 51%);
}

@supports (oklch(100% 0 0)) {
  .some-class {
    color: oklch(70.9% 0.195 47.025);
  }
}

Or detecting Display P3 support on the @media side of things:

.some-class {
  color: hsl(26.06 99% 51%);
}

@media (color-gamut: p3) {
  .some-class {
    color: oklch(70.9% 0.195 47.025);
  }
}

Those all seem overly verbose compared to letting the cascade do the work. Maybe there’s a good reason for using media queries that I’m overlooking.

There’s A Polyfill

Of course, there’s one! There are two, in fact, that I am aware of: postcss-oklab-function and color.js. The PostCSS plugin will preprocess support for you when compiling to CSS. Alternatively, color.js will convert it on the client side.

That’s Oklch 🥰

O, Oklch! How much do I love thee? Let me count the ways:

  • You support a wider gamut of colors that make my designs pop.
  • Your space transitions between colors smoothly, like soft butter.
  • You are as easy to understand as my former love, HSL.
  • You are well-supported by all the major browsers.
  • You provide fallbacks for handling legacy browsers that will never have the pleasure of knowing you.

I know, I know. Get a room, right?!

Resources

Using Friction As A Feature In Machine Learning Algorithms

A common assumption in user experience design is less friction makes apps more delightful. But in practice, the happy path isn’t always the smoothest. The term “friction” in the digital sense usually refers to anything that makes experiences cumbersome. It’s an analogy to the physical resistance that occurs when objects interact. Digital friction comes in many forms, from frustrating flows to confusing copy. But plenty of scenarios actually benefit with a bit of resistance. Its killer feature is mitigating unintended consequences, such as an accidental Alexa shopping spree.

You’ve likely already encountered intentional friction many times. Most apps leverage it for destructive actions, account security, and error handling, as recommended by experts from Norman Nielsen Group to the magazine you’re currently reading.

Yet friction has found a new calling in the age of artificial intelligence. When implemented correctly, it can improve the efficiency of AI systems such as machine learning algorithms. These algorithms are often used to personalize experiences through predictive recommendations. Some applications incorporating these algorithms realize that adding a bit of friction to their interface can turn each user interaction into an opportunity to improve algorithmic quality.

While less friction makes an app smoother, a bit more may make it even smarter.

Friction As A Feature

Before venturing down the AI rabbit hole, let’s explore some simple examples showcasing the basic benefits of friction in UX. These are a helpful foundation to build off as we ascend into more complex applications for machine learning algorithms. Regardless of your familiarity, this will ground the following lessons in first principles.

Preventing Unintended Consequences

A common use for friction is error prevention, the fifth entry in Jakob Nielsen’s list of usability heuristics. In scenarios with the potential for high-cost errors, such as irreversible deletion, apps often request confirmation before executing requests. Confirmations often display in a modal, locking the rest of the screen to increase focus on copy explaining an action’s implications. This extra step provides some extra time to consider these ramifications.

“By forcing us to slow down and think at this exact moment, we’re kept from making potentially disastrous decisions by accident.”

— Archana Madhavan in Amplitude’s “Onboarding With The IKEA Effect: How To Use UX Friction To Build Retention

Sometimes more resistance is present when the consequences can be catastrophic. For instance, a confirmation may involve cognitive work such as typing “DELETE” to submit a deletion request. This level of resistance makes sense when considering the humbling fact of life from Steve Krug’s classic UX book Don’t Make Me Think, which states, “We don’t read pages. We scan them.” This makes it easy to imagine how a streamlined design can make it too easy to overlook the consequences of a click.

While these tactics may look comically cumbersome, they mitigate devastating downsides. This use of friction is like a train’s brakes screeching to a halt right in time to avoid a collision — everyone breathes a sigh of relief, crisis averted. This also outlines the basic framework for understanding when to add friction. It boils down to a cost-benefit analysis: do the rewards of streamlining outweigh the risk? If not, slow it down. Now let’s move on from a black & white example to venture into a grayer area.

Nudging Toward Healthy Behavior

Some problems aren’t classifiable as errors but still aren’t in anyone’s best interest. Trying to solve them becomes wicked because there is no right or wrong solution. Yet that doesn’t make failing to address them any less of an existential risk. Consider social media’s medley of knee-jerk, tribalistic behavior. It has led many to question the value of these apps altogether, which isn’t good for business, or society at large. In an attempt to encourage more thoughtful discourse, these platforms turn to friction.

Twitter explored adding an extra step that asks people to read articles before retweeting them. This nudge aims to craft a more trustworthy experience for everyone by slowing the spread of misinformation. According to their reporting, people shown the prompt opened articles 40% more often, and some decided not to retweet it after all. They built on this success by showing a warning before users post messages which include harmful language.

Instagram also implemented a similar feature in its fight against online bullying. Adam Mosseri, the Head of Instagram, published a blog post stating that this “intervention gives people a chance to reflect.” Although specific data isn’t provided, they suggest it had promising results in cultivating a more humane experience for their communities.

These examples show how faster is not always better. Sometimes we need restraint from saying things we don’t mean or sharing things that we don’t understand. Friction helps algorithms in a similar manner. Sometimes they also need more information about us so they don’t recommend things we won’t appreciate.

Understanding Preferences & Objectives

Let’s shift focus to AI with a simple example of how friction plays a role in machine learning algorithms. You’ve probably signed up for an app that begins by asking you a bunch of questions about your interests. Behind the scenes, an algorithm uses these answers to personalize your experience. These onboarding flows have become so common over the past decade that you may have forgotten a time before apps were smart enough to get to know you.

You may have never even questioned why you must go through a preference capture flow before getting to explore content. The value is obvious because no one wants the quickest path to something irrelevant. Many apps are simply in the business of making relevant connections, and these personalization tactics have been one of the best ways to do so. A McKinsey report illuminates this further by reporting that “35 percent of what consumers purchase on Amazon and 75 percent of what they watch on Netflix come from product recommendations based on such algorithms.”

“The top two reasons that customers churn are 1) they don’t understand your product, and 2) they don’t obtain any value from it. Customer onboarding can solve both of these issues.”

— Christina Perricone in HubSpot’s “The Ultimate Guide to Customer Onboarding

Perhaps these onboarding flows are so familiar that they don’t feel like friction. They may seem like necessary steps to unlock an app’s value. However, that perspective quickly changes for anyone designing one of these flows. The inherent tension lies in attempting to balance the diametrically opposite needs of two parties. On the one hand, an algorithm provides better output relative to its input (although asymptotes exist). Success is a function of maximizing data collection touchpoints, but this tends to result in more steps with more complex questions.

In short, the quicker an app makes a recommendation, the more likely it will be wrong. On the other hand, an extremely long onboarding flow is unlikely to make an amazing first impression on new users. I had the pleasure of walking this tightrope when designing the onboarding flow at Headliner. Each new step we added always felt like it would be the straw that broke the camel’s back. We nervously monitored our activation reports for signs we went too far but surprisingly saw no meaningful dropoff. Yet, even a slight decrease would easily be worth the improved retention that personalization yielded.

This is thanks to some clever interface innovations. TikTok’s design turns user engagement into clear signals they use to tweak their algorithms. Content recommendation quality is a direct function of this, which some refer to as an algorithm’s vision.

Optimizing an app’s key interactions to understand implicit signals makes an explicit means of capturing preferences unnecessary.

Engagement Signals

Every interaction is an opportunity to improve understanding through bidirectional feedback. An interface should provide system feedback to the user engaging with it while also reporting to the system how performance meets user expectations. Everything from button taps to the absence of action can become a signal. Interfaces that successfully incorporate this are referred to as algorithm-friendly.

A study by Apple’s Machine Learning Research Department details their success in leveraging engagement signals, which they believe “provide strong indications of a user’s true intent,” to efficiently train a machine learning model through a process called Reinforcement Learning from Human Feedback. Their results documented “significant accuracy gains in a production deep learning system,” meaning that an interface designed well enough to analyze naturally occurring user behavior is all that is needed to create personalization that feels like mind reading.

Instagram actually employs this strategy as well, although its approach is a bit less cohesive since they seem to be in a perpetual state of transition.

TikTokification

But what exactly makes an interface algorithm-friendly? In TikTok’s case, it was the design decision to only show one video at a time. That’s right, friction! By decreasing the information density in the viewport at any given time, they increased their understanding of a user’s focus. This localizes interactions (or lack thereof) to specific content as quality measures.

Gustav Söderström, the Co-President, CPO & CTO at Spotify has referred to this approach as “giving the algorithm glasses.” Compare this to the medley of distractions in other feeds, and it’s easy to imagine which one is better at collecting data.

Using friction as a tool allows designers to craft an interface that separates engagement signals from noise.

Algorithmic visibility comparison of TikTok & Instagram’s home feeds. (Source: Maximillian Piras) (Large preview)

As we return to my aforementioned framework for evaluating when to add friction, we can understand how it makes sense in this scenario. While each interaction may take slightly longer, relevant content can be found quicker. The trade-off makes sense since relevance sits atop a user’s hierarchy of needs.

Additionally, if you were to measure friction over a longer time horizon, you likely would find an experience with better personalization feels more frictionless. This is because the efficiency in helping users find what they’re looking for would consistently compound (although, again, asymptotes exist). So each subsequent visit theoretically requires less work on the user’s part, which makes the alternate approach look like the cumbersome one.

“The secret of why some of these products are so good at recommendations is not actually that they have better algorithms. It’s the same algorithms with a more efficient user interface.”

— Gustav Söderström in The Verge’s “Why Spotify wants to look like TikTok

While TikTok popularized this interface, anybody who was single in the last decade may notice a similarity to dating apps. Using directional gestures as engagement signals dates back to the swipeable card paradigm Tinder introduced in 2012. They, too, limited the viewport to one result at a time and used actions to inform subsequent recommendations. But TikTok took it mainstream since not everyone needs a dating app, and those who do will churn once they’ve met someone.

The results of using this paradigm in everyday entertainment led many platforms to copy it in hopes of the same algorithmic gains. The latest to embark on this journey is Spotify, much to the chagrin of their users. In fact, this decision even landed it on Mashable’s list of worst app updates in 2023. But Söderström says they don’t have a choice, and he believes in the long run, the signal clarity will make up for any interim backlash because of how much quicker it can learn user preferences. Critics fail to realize how important these changes are for Spotify’s future.

In the machine learning age, apps with inefficient interfaces for signal analysis risk becoming uncompetitive.

Algorithmic visibility comparison of Spotify’s old & new home feeds. (Source: Maximillian Piras) (Large preview)

Making Lemonade

The reason this approach is so powerful is due to the compounding nature of good data. Optimizing signals for any individual user creates a data network effect that benefits everyone else. It even turns negatives into positives! An individual bad experience can mitigate others from encountering the same, making the system antifragile.

This approach dates back to 2003 with the introduction of Amazon’s item-to-item collaborative filtering. You may know it as “customers who viewed this also viewed this.”

This type of filtering produces high-quality recommendations with limited user data. It does so by building relationships between items to proxy user preferences. With only two to three data points, an algorithm can draw connections across the entire dataset. It effectively piggybacks off previous patterns that are similar enough.

This means an app like TikTok only needs a few swipes before it can make high-probability assumptions about your preferences. That’s why friction is so useful in algorithm-friendly interfaces. If the initial interactions send clean signals, then an algorithm can graph a user’s interests almost immediately.

Friction In The Future

We began in the past by reviewing how friction found its way into UX toolkits through error prevention and healthy nudges. Then we moved on to its ability to help algorithms learn user preferences and objectives. While explicit onboarding flows are still in vogue, TikTok is popularizing an interface that makes them unnecessary by using implicit engagement signals leading to significant algorithmic gains. Yet the machine learning age is just beginning, and friction is only accelerating its evolution.

Inverting The Pareto Principle

We’ve focused on algorithms that recommend content, but more diverse uses of personalization may emerge due to the newfound capabilities of Large Language Models. These models unlock the ability to manipulate unstructured data at scale. This allows engagement patterns of greater complexity to be analyzed and productized. The result is algorithms can recommend much more than media and metadata.

Perhaps they can craft completely personalized feature sets based on our preferences and objectives. Imagine selecting effects in Photoshop and seeing suggestions such as “Creators who used this effect also used this one.” These capabilities could increase the usage of buried features that only power users tend to find.

Microsoft is exploring this by adding Copilot to its products. They claim the “average person uses less than 10% of what PowerPoint can do,” but AI will unlock all that latent value.

Microsoft Copilot uses LLMs in an attempt to unlock the 90% of features that most users don’t know exist. (Source: Microsoft Design) (Large preview)

Using LLMs to create feature recommendation engines is a fascinating idea. It would allow developers to stop relying on the Pareto Principle for prioritization. Especially because Joel Spolsky claims the 80/20 rule is actually a myth.

“A lot of software developers are seduced by the old “80/20” rule. It seems to make a lot of sense: 80% of the people use 20% of the features… Unfortunately, it’s never the same 20%. Everybody uses a different set of features.”

— Joel Spolsky in “Strategy Letter IV: Bloatware and the 80/20 Myth

It would be nice if irreducible simplicity in interface design were only a power law away, but feature creep is hard to combat when different people find value in different options. It’s unrealistic to believe that there is some golden 20% of features driving 80% of value. If there was, then why isn’t the Pareto Principle ever applied to content?

I can’t imagine a team at YouTube suggesting that removing 80% of videos would improve the service. Instead, it’s viewed as a routing problem: find the right piece of content for the right person. If machine learning algorithms can recommend features, I hope the value of friction goes without saying at this point. The efficiency gains unlocked by algorithm-friendly interfaces absolutely apply.

Hallucinations Or Creations

The recent inflection point in the capability of LLMs unlocks an entirely new computing paradigm. The legendary UX researcher Jakob Nielsen believes it introduces the first new UI paradigm in 60 years, which he calls Intent-Based Outcome Specification. Instead of telling computers what to do, we now explain an outcome so they can determine how to achieve it.

Using machine learning algorithms to recommend features is one example. Another fairly new example that you’re likely familiar with is chatbots like ChatGPT. Hundreds of millions of people already use it, which is a testament to how out of this world the experience is. Yet therein lies a problem: sometimes its responses literally aren’t grounded in reality because it has a tendency to make them up! This isn’t obvious to those unfamiliar with the technology’s inner workings since there aren’t many safeguards. As a result, some people become dangerously overreliant on its unverified output.

In one case, a lawyer based legal arguments on research from ChatGPT only to find out in court that multiple cited sources turned out to be completely nonexistent. The lawyer’s defense was that he was “unaware of the possibility that its content could be false.” Examples like this reinforce the importance of friction in preventing unintended consequences. While ChatGPT’s empty state mentions its limitations, they obviously aren’t stated explicitly enough for everyone.

Extra steps and prompts, such as those mentioned earlier, could better educate users about what is referred to as a “hallucination.” It’s a phenomenon of chatbots confidently outputting responses that don’t align with their training data. Similar to telling a lie when you don’t have a correct answer, although that characterization overly anthropomorphizes the software.

Yet some see hallucinations as more of a feature than a bug. Marc Andreessen, the co-founder of Netscape, states during an interview that “another term for hallucination is just simply creativity.” He views it as a significant evolution from the hyperliteral systems of the past because they can now brainstorm and improvise.

The problem is that chatbot interfaces tend to be simplistic by attempting to be one size fits all. More controls or modes would educate users about available output types so they can specify which they expect. Sometimes we may want an imaginative response from a creative partner. Other times we want the hyper-accuracy of a deterministic calculator, such as ChatGPT’s Wolfram plugin.

Perhaps a creativity slider or persona selector similar to Maggie Appleton’s exploration will better align the system to user needs. However it’s implemented, a bit of friction can maximize benefits while minimizing risks.

Finding Your Friction

We’ve covered using friction for simple error prevention to complex algorithm optimizations. Let’s end with a few tips that make implementing it as smooth as possible.

Peak-End Rule

When adding resistance to an experience, the Peak-End Rule is a useful psychological heuristic to leverage. It’s rooted in studies by Daniel Kahneman & Amos Tversky, where they found that perception of painful experiences doesn’t tend to correlate with duration. It’s the peak & end of the experience that subjects recall.

In practice, experts suggest that delight is a function of positive emotional peaks and rewarding emotional payoffs. Optimizing for the peak & end provides room to shift focus from time spent and steps taken as performance indicators; long and complex experiences can still be delightful if designed correctly.

Maps Aren’t Territories

People experience friction emotionally, but developers see it as a value on a chart. In the same way that a map is not a territory, this ratio is only an approximation of the actual experience. It’s something to consider when evaluating any strategies for adding or removing friction. Since applications are complex ecosystems, any measurements should consider a holistic view. Every step has second-order effects, which makes one-dimensional measurements prone to blind spots.

For example, when a wrong file is deleted, the data can’t report people cursing at their computer screen. Nor is it likely to include the context of them opening a new file just to recreate their old file from scratch. The same subjectivity applies to all instances of friction. For instance, are your reports equipped to measure the trade-off of an action that takes longer but results in better data collection? It might increase algorithmic efficiency, which compounds across a neural network.

As we’ve discussed, better recommendations tend to yield better retention, which tends to yield more revenue if a business model aligns with usage. Myopic measurements will miss these types of gains, so make sure to analyze friction in a way that really matters.

Keep Pushing

As software is eating the world, AI is eating software. If it’s a paradigm shift as big as social, mobile, or even the web, then applications must adapt or die. If you want to remain competitive in the machine learning age, then don’t fear friction.

Further Reading on Smashing Magazine

Why Developers Should Contribute To Open Source

Open-source software has revolutionized the world of technology, enabling developers to collaborate, innovate, and build upon existing projects. One of the key pillars of open source is the involvement of developers from around the globe, offering their time, skills, and expertise to enhance and expand these projects. In this article, we explore the reasons why developers should actively contribute to open source and how it can benefit their professional growth and the software industry as a whole.

Collaboration and Learning Opportunities

  • Exposure to diverse perspectives: Contributing to open-source projects provides developers with an invaluable opportunity to collaborate with a global community of like-minded individuals. By working with people from various backgrounds, developers gain exposure to new ideas, perspectives, and approaches, fostering a rich learning environment.
  • Enhancement of problem-solving skills: Open source projects often pose unique challenges that require innovative solutions. By contributing to these projects, developers have the chance to sharpen their problem-solving skills as they navigate through complex issues with the support of the open-source community.
  • Access to mentorship: The open-source community is made up of seasoned experts who are often willing to offer guidance and mentorship to aspiring developers. By engaging in open-source projects, developers can tap into a vast network of experienced professionals, gaining valuable insights and advancing their skill set.

Career Advancement

  • Showcase of abilities and expertise: Open source contributions serve as a tangible demonstration of a developer's abilities and expertise. Employers value candidates who actively participate in open-source projects as it showcases their commitment, passion, and willingness to learn and improve continuously.
  • Expanded professional network: Engaging in open-source projects allows developers to build meaningful connections with other professionals in the industry. These connections can lead to new job opportunities, collaborations, and professional growth, opening doors to further career advancements.
  • Stronger resumes: Having open-source contributions listed on a resume adds depth and credibility to a developer's profile. It highlights their ability to work collaboratively, take initiative, and contribute to the software community, setting them apart from other job applicants.

Growth and Improvement of Skills

  • Learning from project codebases: Open source projects often have extensive codebases that expose developers to different programming languages, frameworks, and libraries. By studying these codebases and contributing to their development, developers enhance their understanding of best practices, coding standards, and optimization techniques.
  • Refining coding and documentation skills: Contributing to open source encourages developers to write clean, maintainable code that is easily understandable by others. In doing so, developers refine their coding and documentation skills, making them more effective communicators and collaborators.
  • Understanding software development workflows: Open source projects typically follow established software development workflows, including version control systems, issue tracking, and code reviews. By actively participating in these processes, developers gain firsthand experience and understanding of these workflows, preparing them for future professional projects.

Making a Positive Impact on the Software Community

  • Contributing to the greater good: Open source projects strive to provide software solutions that benefit the community at large. By actively contributing, developers become agents of positive change, helping to improve and advance the software industry as a whole. This sense of purpose and community is deeply fulfilling and can be a driving force for developers to continue contributing to open-source projects.
  • Giving back to the community: Developers often rely on open-source software for their own projects. Contributing to open source is a way to give back to the community that has supported and empowered them throughout their careers. By sharing their knowledge and expertise, developers help create a virtuous cycle of growth and innovation within the software community.

Conclusion

Contributing to open source is a rewarding endeavor for developers, offering a multitude of benefits that extend far beyond coding proficiency. The collaborative and learning opportunities, career advancements, skill growth, and positive impact on the software community are all reasons why developers should actively engage in open-source projects. By participating in open source, developers not only enhance their own professional growth but also contribute to the advancement and evolution of the entire software industry. So, let's embrace the power of open source and join the thriving community of developers working together to build a better future.

CSS And Accessibility: Inclusion Through User Choice

We make a series of choices every day. Get up early to work out or hit the snooze button? Double foam mocha latte or decaf green tea? Tabs or spaces? Our choices, even the seemingly insignificant ones, shape our identities and influence our perspectives on the world. In today’s modern landscape, we have come to expect a broad range of choices, regardless of the products or services we seek. However, this has not always been the case.

For example, there was a time when the world had only one font family. The first known typeface, a variant of Blackletter, graced Johannes Gutenberg’s pioneering printing press in 1440. The first set of publicly-available GUI colors shipped with the 10th version of the X Window System consisted of 69 primary shades and 138 entries to account for various color variations (e.g., “dark red”). In September 1995, a Netscape programmer, Brendan Eich, introduced “Mocha,” a scripting language that would later be renamed LiveScript and eventually JavaScript.

Fast forward to the present day, and we now have access to over 650,000 web fonts, a hexadecimal system capable of representing 16,777,216 colors, and over 100 public-facing JavaScript frameworks and libraries to choose from. While this is great news for professionals designing and building user interfaces, what choices are we giving actual users? Shouldn’t they have a say in their experience?

CSS Media Features

While designers and developers may have some insights into user needs, it is very challenging to understand the actual user preferences of 7.8 billion people at any given time. Supporting the needs of individuals with disabilities and assistive technology adds a layer of complexity to an already complex situation. Nonetheless, designers and developers are responsible for addressing these user needs as best we can by providing accessible choices. One promising solution is user-focused CSS media features that allow us to customize the user experience and cater to individual preferences.

Media Features For Color

Let’s first focus on CSS media features for color. Color plays a vital role in design, impacting how we perceive brands. Studies suggest that color alone can influence up to 90% of snap judgments about products. Considering the large number of people worldwide with visual deficiencies such as color blindness and low vision, developers and designers have a significant opportunity to improve accessibility with this element alone.

@prefers-color-scheme

The @prefers-color-scheme CSS media feature helps identify whether users prefer light or dark color themes. Users can indicate their preferences through settings in the operating system or user agent.

There are two values for this CSS media feature: light and dark. Typically, the default theme presented to users is the light version, even if the user expresses no preference. However, the opposite can also be true, and websites or apps default to a dark theme and switch to a light theme using the @media (prefers-color-scheme: light) media feature and corresponding code.

Users opting for a dark mode signifies their preference for a dark-themed page. Using @media (prefers-color-scheme: dark), various theme elements, such as text, links, and buttons, are adjusted to ensure they stand out against darker background colors.

In the past, there was also a no-preference value to indicate when users had no theme preference. However, user agents now treat light themes as the default, rendering the no-preference value obsolete.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #282828;
  }

  .without [data-word="without"] .char:before,
  .without [data-word="without"] .char:after {
    color: #fff;
  }
}

The @prefers-color-scheme is one of the most widely used CSS media features today and it has a very large percentage of browser support at 94%. It is so popular that additional values may be introduced in the future to express more specific preferences or color schemes, such as sepia or grayscale.

Switching from the default light mode to dark mode is relatively straightforward. Consult the user setting guides for Mac and Windows operating systems to learn more (select the relevant hardware and operating system version), then navigate to a browser that supports this CSS media feature.

Pro-tip: A more sophisticated solution to demo user preference settings is using Chrome’s Rendering tab coupled with CSS media features emulator to easily switch from light to dark modes to emulate @prefers-color-scheme as users experience it. This solution is convenient for live demos where you need to show the user preference changes quickly or emulate media features not fully supported by your OS or browser.

@forced-colors

The @forced-colors CSS media feature enables the detection of the forced colors mode enforced by the user agent. This mode imposes a limited color palette the user chooses onto the page. This newer media feature provides an alternative approach to handle colors for non-Window devices, and we expect it will replace Windows High Contrast Mode in the future.

There are two values for the forced-colors media feature: none and active. The @media (forced-colors: none) value indicates that the forced colors mode is inactive and uses the default color scheme, while the @media (forced-colors: active) value means that the forced colors mode is active and the user agent enforces the user-selected limited color palette.

It’s worth noting that enabling @forced-colors mode does not necessarily imply a preference for higher contrast. The color adjustments align with the user’s choice, which may not strictly fit into the low or high-contrast categories.

Note: There are some properties affected by the forced-color mode that you need to be aware of when designing and testing your forced-colors theme. Check out Eric Bailey’s article “Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties” for more information about this media feature and its integration with CSS custom properties.

@media (forced-colors: active) {
  body {
    background-color: #fcba03;
  }

  .without [data-word="without"] .char:before,
  .without [data-word="without"] .char:after {
    color: #ac1663;
  }

  .without {
    color: #004a72;
  }
}

The @forced-colors CSS media feature is currently supported by 31% of the most popular browsers, including desktop versions of Chrome, Edge, and Firefox. Although the browser support for this feature is increasing, not all operating systems currently offer a setting to activate the forced colors mode. The Windows operating system is the only exception, as it provides the necessary functionality for users to create customized themes that override the default ones by utilizing the Windows High Contrast mode.

If you are using a non-Windows machine, you can emulate the behavior of this media feature by following the steps mentioned earlier in the @prefers-color-scheme section using Chrome’s Rendering tab and emulator, but with a focus on emulating @forced-colors instead.

@inverted-colors

The @inverted-colors CSS media feature determines whether to show the content in its standard colors or if it reverses the colors.

Two modes are available for the @inverted-colors media feature: none and inverted. The @media (inverted-colors: none) value indicates that the forced colors mode is not activated and uses the default color scheme. Using the @media (inverted-colors: inverted) value indicates that all pixels within the displayed area have been inverted and renders the inverted color theme when a user chooses this option.

When writing code for the @inverted-colors CSS media feature, one option is to write your code using the inverted value of what you want a user to see to ensure correct rendering after applying the user’s setting.

For example, you want your element’s background to be #e87b2d, which is a tangerine orange. In the theme code, you would write the opposite color, #1784d2, powder blue. Incorporating this inverse color into the code renders the intended tangerine orange instead of its inverse when users enable the @inverted-colors setting.

@media (inverted-colors: inverted) {
  body {
    background-color: #99cc66;
  }

  .without [data-word="without"] .char:before,
  .without [data-word="without"] .char:after {
    color: #ee1166;
  }

  .without {
    color: #111111;
  }
}

Current browser support for @inverted-colors is 20% for Safari desktop and iOS browsers. While Chrome’s Rendering tab and emulator do not work for this particular media feature, you can emulate @inverted-colors using Firefox (version 114 or newer).

  1. Open a new tab in Firefox and type or paste about:config in the address bar, and press Enter/Return. Click the button acknowledging that you will be careful.
  2. In the search box, enter layout.css.inverted-colors and wait for the list to be filtered.
  3. Use the toggle button to switch the preference from false to true.
  4. Enable the inverted colors setting in your operating system and navigate to a webpage or code example with the @inverted-colors theme to observe the inverted effect.

The setting for the @inverted-colors media feature is available on Mac and Windows operating systems.

Media Features For Contrast

Next, let’s talk about CSS media features related to contrast. Contrast plays a crucial role in conveying visual information to users, working hand in hand with color. When proper levels of color contrast are not implemented, it becomes difficult to distinguish essential elements such as text, icons, and important graphics. As a result, the design can become inaccessible not only to the 46 million people worldwide with low vision but also to older adults, individuals using monochrome displays, or those in specific situations like low lighting in a room.

@prefers-contrast

The @prefers-contrast CSS media feature detects the user’s preference for higher or lower contrast on a page. The feature uses the information to make appropriate adjustments, such as modifying the contrast ratio between colors nearby or altering the visual prominence of elements, such as adjusting their borders, to better suit the user’s contrast requirements.

There are four values for this CSS media feature: no-preference, less, more, and custom. The @media (prefers-contrast: no-preference) value indicates that the user has no preference (or did not choose one since it is the default setting), and the @media (prefers-contrast: less) value indicates a user’s preference for less contrast. Conversely, the @media (prefers-contrast: more) value indicates a user’s preference for stronger contrast.

The @media (prefers-contrast: custom) value is a bit more complex as it allows users to use a custom set of colors — which could be specific to contrast — or choose a palette. For example, a user could select a theme composed entirely of shades of blue, primary colors, or even a rainbow theme — anything they choose.

Note: When a user selects the custom contrast setting, it will align with the color palette defined by users of forced-colors: active value, so be sure to account for that in the code.

@media (prefers-contrast: more) {
  .title2 {
    color: var(--clr-6);
  }

  .aurora2__item:nth-of-type(1),
  .aurora2__item:nth-of-type(2),
  .aurora2__item:nth-of-type(3),
  .aurora2__item:nth-of-type(4) {
    background-color: var(--clr-6);
  }
}

@media (prefers-contrast: less) {
  .title {
    color: var(--clr-5);
  }

  .aurora__item:nth-of-type(1),
  .aurora__item:nth-of-type(2),
  .aurora__item:nth-of-type(3),
  .aurora__item:nth-of-type(4) {
    background-color: var(--clr-5);
  }
}

@media (prefers-contrast: custom) {
  .aurora2__item:nth-of-type(1) {
    background-color: var(--clr-1);
  }
  .aurora2__item:nth-of-type(2) {
    background-color: var(--clr-2);
  }
  .aurora2__item:nth-of-type(3) {
    background-color: var(--clr-3);
  }
  .aurora2__item:nth-of-type(4) {
    background-color: var(--clr-4);
  }
}

Currently, 91% of the most widely used browsers offer support for the @prefers-contrast media feature. However, the majority of this support is focused on enhancing contrast rather than reducing it or allowing for personalized contrast themes.

To effectively demo and test all the different contrast options for this CSS media feature, use the Chrome Rendering tab and emulator as described earlier, but with a specific emphasis on emulating the @prefers-contrast media feature this time.

@prefers-reduced-transparency

The @prefers-reduced-transparency CSS media feature determines if the user has requested the system to use fewer transparent or translucent layer effects.

It takes one of two possible values: no-preference and reduce. The @media (prefers-reduced-transparency: no-preference) value indicates that the user has not specified any preference for the system (this is also the default setting). On the other hand, the @media (prefers-reduced-transparency: reduce) value indicates that the user has informed the system about their preference for an interface that minimizes the application of transparent or translucent layer effects.

@media (prefers-reduced-transparency: reduce) {
  .title,
  .title2 {
    opacity: 0.7;
  }
}

The current browser support for @prefers-reduced-transparency stands at 0%. This CSS media feature is highly experimental and should not be utilized in production code at the time I’m writing this article.

However, if you wish to emulate the @prefers-reduced-transparency media feature behavior, you can follow these steps using Firefox (version 113 or newer).

  1. Open a new tab in Firefox and type or paste about:config in the address bar, and press Enter/Return. Click the button acknowledging that you will be careful.
  2. In the search box, type or paste layout.css.prefers-reduced-transparency and wait for the list to be filtered.
  3. Use the toggle button to switch the preference from the default state of false to true.
  4. Adjust your operating system’s transparency settings and navigate to a webpage or code example with the @prefers-reduced-transparency theme to observe the effect of reduced transparency.

Media Features For Motion

Lastly, let’s turn our focus to motion. Whether it involves videos, GIFs, or SVGs, movement can enrich our online experiences. However, this media type can also adversely affect many individuals. People with vestibular disabilities, seizure disorders, and migraine disorders can benefit from accessible media. CSS media features for motion allow us to incorporate both dynamic movement and static states for elements, enabling us to have the best of both worlds.

@prefers-reduced-motion

Using the @prefers-reduced-motion CSS media feature helps determine whether the user has requested the system to minimize the usage of non-essential motion.

This CSS media feature accepts one of two values: no-preference and reduce. The @media (prefers-reduced-motion: no-preference) value indicates that the user has not specified any preference for the system (this is also the default setting). Conversely, the @media (prefers-reduced-motion: reduce) value indicates that the user has informed the system about their preference for an interface that eliminates or substitutes motion-based animations that may cause discomfort or serve as distractions for them.

@media (prefers-reduced-motion: reduce) {
  .bg-rainbow {
    animation: none;
  }

  .perfection {
    .word {
      .char {
        animation: slide-down 5s cubic-bezier(0.75, 0, 0.25, 1) both;
        animation-delay: calc(#{$delay} + (0.5s * var(--word-index)));
      }
    }

    [data-word="perfection"] {
      animation: slide-over 4.5s cubic-bezier(0.5, 0, 0.25, 1) both;
      animation-delay: $delay;

      .char {
        animation: none;
        visibility: hidden;
      }

      .char:before,
      .char:after {
        animation: split-in 4.5s cubic-bezier(0.75, 0, 0.25, 1) both alternate;
        animation-delay: calc(
          3s + -0.2s * (var(--char-total) - var(--char-index))
        );
      }
    }
  }
}

You can compare the difference in the following videos and by viewing a live demo.

@prefers-reduced-data

Last but certainly not least, let’s examine the @prefers-reduced-data CSS media feature. This media feature determines whether the user prefers to receive alternate content that consumes less data when rendering the page.

This CSS media feature has two possible values: no-preference and reduce. The @media (prefers-reduced-motion: no-preference) value indicates that the user has not specified any preference for the system (which is also the default setting). On the other hand, the @media (prefers-reduced-data: reduce) value indicates that the user has expressed a preference for lightweight alternate content.

Unlike other CSS media features, a user’s preference for the @prefers-reduced-data media feature could vary. It may be a system-wide setting exposed by the operating system or settings controlled by the user agent. In the case of the user agent, they may determine this value based on the same user or system preference used for setting the Save-Data HTTP request header.

Note that the Save-Data network client request header is still considered experimental technology, but it has achieved a remarkable 72% browser support across various browsers, except Safari and Firefox on desktop and mobile.

@media (prefers-reduced-data: reduce) {
  .bg-rainbow {
    animation: none;
  }

  .perfection {
    .word {
      .char {
        animation: none;
      }
    }

    [data-word="perfection"] {
      animation: none;

      .char {
        animation: none;
        visibility: hidden;
      }

      .char:before,
      .char:after {
        animation: none;
      }
    }
  }
}

Similar to @prefers-reduced-transparency, the @prefers-reduced-data CSS media feature is highly experimental and should not be utilized in production code at this time as the current browser support for it stands at 0%.

However, if you wish to emulate the @prefers-reduced-data behavior, you can follow these steps using Chrome (version 85 or newer).

  1. Open a new tab in Chrome and type or paste chrome://flags in the address bar and press Enter/Return.
  2. In the search box, type or paste experimental-web-platform-features and wait for the list to be filtered.
  3. Use the dropdown option to switch the preference from the default state of disabled to enabled.
  4. Use the Chrome Rendering tab and choose the appropriate CSS media feature to emulate.

Note that you can also enable the @prefers-reduced-data feature in Edge, Opera, and Chrome Android (all behind the same experimental-web-platform-features flag), but it is less clear how you would emulate the media feature without the rendering tab and emulator found in the desktop version of Chrome.

Amplifying Inclusion Through User Choice

In the tech world, accessibility often receives criticism, particularly with aesthetics and advanced features. However, this negative perception can be changed. It is possible to incorporate stunning design and innovative functionality while prioritizing accessibility by leveraging CSS user-focused media features that address color, contrast, and motion.

Today, by incorporating all available options for each CSS media feature currently supported by browsers (with support exceeding 90%), you can provide users with 16 combinations of options. However, when the browsers and operating systems implement and support more experimental media features, the impact on user customization expands significantly to a staggering 256 combinations of options. A large number of possible options truly amplifies the potential impact designers and developers can have on user experiences.

As professionals within the technology industry, our goal should be to ensure that digital products are accessible to all individuals. By offering users the ability to personalize their experience, we can include an array of remarkable features in a responsible manner. Our job is to provide options and let people choose their own adventure.

Further Reading On SmashingMag

Designing Age-Inclusive Products: Guidelines And Best Practices

Why is it so important to take into account older adults? One person in eight on the planet is over 60, and they are more online than ever. Approximately one billion people aged 60+ are alive today. Most of them are healthy and active and have discretionary income. Moreover, it is growing faster than any other age group and is projected to be 20% of the world’s population (~2 billion people) by 2050. They are also the fastest-growing category of e-commerce shoppers.

Older people today are adopting technology more than ever before. From the use of the Internet, smartphones, tablets, and wearables to smart TVs and speakers, a growing number of older people are users. Ownership of smartphones, for example, increased from 70% to 77% among the 50+ population in the United States between 2017 and 2021. Moreover, during the Covid-19 pandemic, there was a significant rise in older adults’ motivation to use digital technology.

However, many older people still lack sufficient Internet connectivity or technological skill to use devices and consume digital services. It is estimated that two in five feel technology is not designed for them (PDF).

Opportunity To Integrate Older people Into The Digital World

More and more aspects of life are conducted on digital platforms: interpersonal communication, banking, healthcare, personal consumption, and exercising one’s rights are just some of them. Therefore, digital platforms that are challenging to use for older people have a negative impact on their quality of life. It prevents them from accessing essential services and integrating equally into society.

According to the inclusive design approach, one should take into account the needs of as many users as possible without stigmatizing or excluding a specific group by designing niche products.

If you adopt this principle, you can design a digital platform that serves a wide range of people, not just those aged 65+. Usually, a service that meets the needs of people aged 65+ will serve other audiences as well.

Adopting Age-appropriate Navigation And Orientation Practices

Advancing age can also bring with it a decrease in the rate of information processing, whether in understanding, thinking, or remembering. Plus, the ability to ignore distractions, focus on one stimulus, and perform several complex actions simultaneously also decreases.

Additionally, due to their age, some suffer from a decrease in executive functions that enable planning, executing, and delaying reactions. Therefore, there is a higher chance they will perform random actions such as clicking on unintended places, closing pages, or making errors when using apps. Some may have difficulty understanding that icons carry the same meaning across different apps or in dealing with situations that do not correspond with their expectations of the digital world. Despite such difficulties, it is essential to stress that the ability to learn from feedback — for example, via affirmations — does not diminish with age.

What Should We Do If We Want To Increase Their Engagement?

Here are a few guidelines to help you design a more inclusive product. Those guidelines can increase the usage of younger users but are highly crucial for older users:

Minimize The Number Of Required Actions And Create Shortcuts

Some people over 65 find it challenging to cope with information overload and multiple options.

Proper information architecture and hierarchy will indicate what is important to the user and require less effort. We should ensure that the required actions appear immediately and easily so that the user does not have to search for them. Some important ones to mention are white space, content placement, space, language, number of actions, and others. Below are these and some others listed with explanations:

  • White space
    Reducing the number of elements on a screen, increasing the spacing between them, and retaining whitespace will make the screen feel less crowded and, therefore, clearer and more inviting. The added value is in the feeling of simplicity it creates. This improves the user’s sense of competence and ability to focus. Clear typography following one of the established typographic scales is relevant for websites, apps, and complex data systems.

  • Dialog box
    A limited number of options prevents cognitive overload. Therefore, conduct a careful mapping of the digital platform, distilling out the most important actions and contents.
  • Central placement
    The most important themes should be positioned at the center of the screen.
  • Large & spacious
    The most important buttons should be enlarged and positioned prominently to allow immediate recognition.
  • Clear language
    Topics should be clearly labeled, and the labels should be verified in usability testing. Complicated terms should be avoided since they might not be familiar to the target audience.
  • Limited number of actions
    The number of steps (clicks and scrolls) necessary to achieve a goal should be minimized.
  • Shortcuts and multiple/redundant paths
    Make it easy for users to reach their goals by providing multiple options, such as Quick Links, as seen in the example below.

What To Know About Navigation & Orientation?

Some people aged 65+ can experience a decline in memory recall. Some are also unfamiliar with the principles of the digital world. Therefore, to enhance their sense of control, the following principles should be adopted: rely on recognition, not memory; allow going back; design clear navigation keys; be consistent in design and operation; and provide indicators. Below we will discuss several principles to facilitate navigation.

  • Recognition, not memory
    This principle means creating an interface where users do not have to use their memory to recall information. Instead, they will be asked to identify familiar and prominent components, such as quick access to previously visited pages or actions. The illustration below is an example of how Korea’s post office presents the main tasks on the main screen in a way that doesn’t require memory but recognition. Additional support is the use of color to help the users recognize how to navigate the site once they return to it.

  • Indicators and feedback:
    • Emphasize the performed actions: Use breadcrumbs to indicate which links or buttons the user has clicked on and their location.
    • Create a conspicuous and permanent back icon that takes the user to a previous page/stage. This is in addition to the browser’s back and homepage icons.
    • Clear and prominent navigation buttons: Emphasize navigation buttons and add text to explain their function.
  • Consistency
    Create an ongoing, consistent user experience using recurring items. Allow the users to learn the interface, generating a sense of success and building anticipation for the next stage. Pay attention to the location and design of fixed buttons that have the same function.
  • Progress
    Create obvious hints, such as a progress bar, that help users to understand where they are in the process.
  • Success & mistakes
    Highlight progress and successful actions. Additionally, indicate errors clearly and provide ways for easy recovery.
  • Contact Us
    Choose a prominent location for the help options. Provide contact information using various channels, e.g., telephone number and email address.

Choosing components with an age-inclusive mindset can change our day-to-day decisions and allow us to create an easy-to-operate interface.

The following guidelines relate to changes in motor functions.

Creating An Interface That Is Easy To Operate

As age increases, it may be accompanied by difficulty in touching a specific spot accurately, regulating a click’s intensity, or performing quick actions, such as double-clicking. Therefore, the following principles should be ensured: space out the keys, avoid the need for a high degree of precision, avoid gestures requiring sensory regulation, and enable users to progress at their own pace.

  • Large & spacious
    Design large and well-spaced elements.
  • Individual pace:
    • When creating pop-up/toast messages, allow users to initiate closing or at least leave the messages visible for longer for slower readers.
    • Avoid menus that open on hover. Always use click-tap menus instead.
  • Indication
    Provide clear scroll indicators (e.g., side arrows). Reduce the need for precision: Avoid small clicking areas, mouse hovering, and double-clicking.
  • Ensure that the interface is responsive on all screens.
    For touch screens:
    • Click actions should not rely on touch intensity or precision.
    • Avoid, as much as possible, long strokes and drag gestures, and reduce scroll options. At the very least, provide clear indication and instruction, and offer alternatives, such as an arrow or button directing to specific places.
    • Avoid the need for very precise actions, such as in small clicking areas, and try to keep to the minimum size for comfortable tapping/clicking of at least 44x44 px.
    • Avoid actions requiring fine motor regulation such as spread, pinch, and rotate.

Let’s examine the homepage of three famous e-commerce websites in the eyes of an older user without going into details.

Aliexpress website, as seen in the image above, is a good example of an “unfriendly” website — it suffers from visual overload. Too many buttons and tags are emphasized, which makes it hard to focus older user attention. Moreover, given the visual overload, the side menu is easy to ignore, and many users will be required to use the search bar, which needs to be more dominant and rely on their recall of items, not recognition.

On the Amazon website (see the image below), the size of each category image may be distracting, requiring the user to scroll a lot and challenging his ability to navigate.

In contrast with these previous sites, eBay does better regarding visual overload; the dominance of the search bar and even the menu placement make it easier for older users to navigate.

Wrapping Up

Every designer would probably state that they want their website and app to be inclusive, easy to navigate, and user-friendly. Yet, as we have seen in our examples above, we need to create awareness to integrate details that would make it easier for older users to navigate the Internet. As we age, all of us will experience longer reaction times, changes in selective attention, attention-splitting, and changes in our motor functions. Therefore, designing for an older audience will achieve the goals of having an inclusive, easy-to-navigate, and user-friendly for our future selves as well.

To sum up, in order to create an easy operation and orientation of an interface, we should pay attention to the following:

  • Large, spaced-out objects;
  • Operation does not require fine gestures and precision;
  • A minimum number of actions to achieve goals;
  • The user should control the rate of progress;
  • Reassuring notifications upon successful actions;
  • Consistency of design and operation;
  • Minimizing the number of choices the user must make;
  • Highlighting the actions performed by the user.

The article is based on one of the chapters of the Log In guide. The guide was created within the framework of the National Initiative to Promote Digital Literacy Among Older Adults, which is a partnership between the Israel National Digital Agency and JDC-ESHEL.

Further Reading On SmashingMag

How To Become A Better Speaker At Conferences

During my time curating the UX London and Leading Design events, I used to watch a few hundred presentations each year. I’d be looking at a range of things, including the speaker’s domain experience and credibility, their stage presence and ability to tell a good story, and whether their topic resonated with the current industry zeitgeist.

When you watch that many presentations, you start to notice patterns that can either contribute to an absolutely amazing talk or leave an audience feeling restless and disengaged. But before you even start worrying about a delivery, you need to secure yourself a spot on the stage. How? Follow me along, and let’s find out!

Choosing What To Speak About

I think one of the biggest misunderstandings people have about public speaking is the belief that you need to come up with a totally new and unique concept — one that nobody has spoken about before. As such, potentially amazing speakers will self-limit because they don’t have “something new to share.” While discovering a brand new concept at a conference is always great, I can literally count the number of times this has happened to me on the one hand. This isn’t because people aren’t constantly exploring new approaches.

However, in our heavily connected world, ideas tend to spread faster than a typical conference planning cycle, and the type of people who attend conferences are likely to be taped into the industry zeitgeist already. So even if the curator does find somebody with a groundbreaking new idea, by the time they finally get on stage, they’ve likely already tweeted about it, blogged about it, and potentially spoken about it at several other events.

I think the need to create something unique comes from an understandable sense of insecurity.

“Why would anybody want to listen to me unless I have something groundbreaking to share?”

The answer is actually more mundane than you might think. It’s the personal filter you bring to the topic that counts. Let’s say you want to do a talk about OKR’s (Objectives and Key Results) or Usability Testing — two topics which you might imagine have been “talked to death” over the years.

However, people don’t know the specific way you tackled these subjects, the challenges you personally faced, and the roadblocks you overcame. There’s a good chance that people in your audience will already have some awareness of these techniques. Still, there’s also a good chance that they’ve been facing their own challenges and want nothing more than to hear how you navigate your way around them, hopefully in an interesting and engaging manner.

Also, let’s not forget that there are new people entering our industry every day. There are so many techniques I’ve made the mistake of taking for granted, only to realize that the people I’m talking to have not only never practiced them before but might not have even come across them; or if they have, they might have only the scantest knowledge about them, gleaned from social media and a couple of poorly written opinion pieces.

In fact, I think our industry is starting to atrophy as techniques we once thought were core ten years ago barely get a mention these days. So just because you think a subject is obvious doesn’t mean everybody feels the same, and there isn’t room for new voices or perspectives on the subject.

Another easy way to break into public speaking is to do some kind of case study. So think about an interesting project you did recently. What techniques did you use, what approach did you take, what problems did you encounter, and how did you go about solving them? The main benefit of a case study type talk is that you’ll know the subject extremely well, which also helps with the nerves (more on this later).

During the past few years, there were published many excellent, very detailed case studies on Smashing Magazine — take a look at this list for some inspiration.

Invest The Right Amount of Time Doing Prep

Another thing people get wrong about public speaking is feeling the need to write a new talk every time. This also comes from insecurity (and maybe a little bit of ego as well). We feel like once our talk is out in the world, everybody will have seen it. However, the sad reality is that the vast majority of people won’t be rushing to view your talk when the video comes online, and even if they do, there’s a good chance they’ll only have taken in a fraction of what you said if they remember any of it at all.

It’s also worth noting that talks are super context-sensitive. I remember watching a talk from former Adaptive Path founder Jeff Veen at least five times. I enjoyed every single outing because while the talk hadn’t changed, I had. I was in a different place in my career, having different conversations and struggling with different things. As such, the talk sparked whole new trains of thought, as well as reminded me of things I knew but had forgotten.

It should be mentioned that, like music or stand-up comedy, talks get better with practice. I generally find that it takes me three or four outings before the talk I’m giving really hits its stride. Only then have I learnt which parts resonate with the audience and which parts need more work; how to improve the structure and cadence, moving sections around for a better flow, and I’ve learnt the bits which people find funny (some international and some not), and how to use pacing and space to make the key ideas land. If you only give a talk once, you’ll be missing out on all this useful feedback and delivering something that’s, at best, 60% of what it could potentially be.

On a practical level, a 45-minute talk can take a surprisingly long time to put together. I reckon it takes me at least an hour of preparation for every minute of content. That’s at least a week’s worth of work, so throwing that away after a single outing is a huge waste. Of course, that’s not what people do. If the talk is largely disposable, they’ll put a lot less effort in, often writing their talk “the night before the event.”

Unless you’re some sort of wunderkind, this will result in a mediocre talk, a mediocre performance, and a low chance of being asked to come back and speak again. Sadly this is one of the reasons we see a lot of the same faces on the speaker circuit. They’re the ones who put the effort in, deliver a good performance, and are rewarded with more invites. Fortunately, the quality bar at most conferences is so low that putting a little extra time into your prep can pay plenty of dividends.

Nailing The Delivery

As well as 45 minutes being a lot of content to create, it’s also a lot of content to sit through. No matter how interesting the subject is, a monotone delivery will make it very hard for your audience to stay engaged. As such, nailing the delivery is key. One way to do this is to see public speaking for what it is — a performance — and as the performer, you have a number of tools at your disposal.

First of all, you can use your voice as an instrument and try varying things like speed, pitch, and volume. Want to get people excited? Use a fast and excitable tone. Want people to lean in and pay attention? Slow down and speak quietly. Varying the way you speak gives your talks texture and can help you hold people’s attention for longer.

Another thing you can use is the physical space. While most people (including myself) feel safe and comfortable behind the lectern, the best speakers use the entire stage to good effect, walking to the front of the stage to address the audience in a more human way or using different sides of the stage to indicate different timelines or parts of a conversation.

Storytelling is an art, so consider starting your talk in a way that grabs your audience’s attention.

This generally isn’t a 20-minute bio of who you are and why you deserve to be on the stage. One of the most interesting talks I ever saw started with one such lengthy bio causing a third of the audience to get up and walk out. I felt really bad for the speaker — who was visibly knocked — so I stuck with it, and I’m so glad I did! The talk turned out to be amazing once all the necessary cruft was removed.

“When presenting at work or [at a conference or] anywhere else, never assume the audience has pledged their undivided attention. They have pledged maybe 60 seconds and will divide their attention as they see fit after that. Open accordingly.”

Mike Davidson

A little trick I like to use is to start my talk in the middle of the story: “So all of a sudden, my air cut out. I was in a cave, underwater, in the pitch black, and with less than 20 seconds of air in my lungs.” Suddenly the whole audience will stop looking at their phones. “Wait, what?” they’ll think. What’s happening? Who is this person? Where are they? How did he get there? And what the hell does this have to do with design? You’ve suddenly created a whole series of open questions which the audience desperately wants to be closed, and you’ve just bought yourself five minutes of their undivided attention where you can start delivery.

Taking too long to get to the meat of the talk is a common problem. In fact, I regularly see speakers who have spent so long on the preamble that they end up rushing the truly helpful bits. One of the reasons folks get stuck like this is that they feel the need to bring everybody up to the same base level of knowledge before they jump into the good stuff.

Instead, it’s much better to assume a base level of knowledge. If the talk stretches your audience’s knowledge, that’s fine. If it goes over some people’s heads, it might encourage them to look stuff up after the event. However, if you find yourself teaching people the absolute basics, there’s a good chance the more experienced members of the audience will zone out, and capturing their interest will become that much harder later on.

When speakers don’t give themselves enough time to prepare a good narrative, it’s easy to fall back on tried and tested patterns. One of these is the “listicle talk” where the speaker explains, “Here are twelve things I think are important, and I’m going to go through them one by one.” It’s a handy formula, but it makes people super-conscious of the time. (“Crikey, they’re still only at number five! I‘m not sure I’m going to make it through another seven of these points.”)

In a similar vein are the talks, which are little more than a series of bullet points that the speaker reads through. The problem is that the audience is likely to read through them much quicker than the speaker, so people basically know what you’re going to say in advance. As such, keep these sorts of lists in your speaker notes and pick some sort of title or image that illustrates the points you’re about to make instead.

Tame The Nerves

Public speaking is unnatural for us, so everybody feels some level of stress. I have one friend who is an absolutely amazing speaker on stage — funny, charming, and confident — but an absolute wreck moments before. In fact, it’s fairly common before going on stage to think, “Why the hell am I doing this to myself?” only to come off the stage 45 or 60 minutes later thinking, “That was great. When can I do it again!”.

One way to minimize these nerves is to memorize the first five minutes of your talk. If you can go on the stage with the first five minutes in the bag, the nerves will quickly subside, and you’ll be able to ease into your presentation some more. This is another reason why starting with a story can be helpful, as they’re easy to remember and will give you a reasonable amount of creative license.

A sure way to tame the nerves is to feel super-prepared and practiced; as such, it’s worth reading your talk out loud a bunch of times before you deliver it to an audience. It’s amazing how often something sounds logical when you say it in your head, but it doesn’t quite flow properly when said out loud. Practicing in front of people is very helpful, so consider asking friends or colleagues if you could practice on them. Also, consider doing a few dry runs with a local group before getting on a bigger stage. The more you know your material, the less nervous you’ll feel.

While some speakers like to brag about how little prep they’ve done or how little sleep they’ve got the night before, don’t get tricked into thinking that this is the standard approach. Often these folks are actually very nervous and are saying things like this in an attempt to preempt or excuse potential poor performance.

It reminds me of the kids at school who used to claim they didn’t study and revise the material and ended up getting a B-. They almost certainly did some revision, albeit probably not enough. But this posturing was actually a way for them to manage their own shortcomings. “I bet I could have gotten an A if I’d put some extra work in.” Instead, make sure you’re well prepared, well rested, and set yourself up for success.

It’s worth mentioning that most people get nervous during public speaking, even if they like to tell you otherwise. As such, nerves are something you just need to get better at managing. One way to do this is to re-frame “nerves” (which have negative connotations) to something more positive like “excitement.” That feeling of excitement you get before giving a talk can actually be a positive thing if you don’t let it get out of hand. It’s basically your body’s way of getting you ready to perform.

However, this excess energy can bleed out in some less helpful ways, such as the “speaker square dance.” This is where speakers either shift their weight from one foot to the other or take a step forwards, a step to the side, and a step back, like some sort of a caged zoo animal. Unfortunately, this constant shifting can feel very unsettling and distracting for the audience, so if you can, try to plant your feet firmly and just move with deliberate intent when you want to make a point.

It’s also great if you can try to minimize the “ums” and “ahs.” People generally do this to give themselves pause while they’re thinking about the next thing they want to say. However, it can come across as if you are a little unprepared. Instead, do take actual breaks between concepts and sentences. At first, it can feel a bit weird doing this on stage, but think of it as an aural whitespace, making it easier for your audience to take in one concept before transitioning on to the next.

Note: I feel comfortable calling these behaviors out as they’re both things I personally do, and I’m working on fixing them — with mixed results so far.

Avoid The Clichés

At least once during every conference I attend, a speaker will say something jokingly along the lines of “I’m the only one standing between you and tea/lunch/beer.” It’s meant as a wry apology, and the first time I heard it, I gave a gentle chuckle.

However, I’ve been at some conferences where three speakers in a row had made the same joke. Apart from a lack of originality, this also shows that the speakers haven’t actually been listening to the other talks, probably because they’ve been in their room or backstage, tweaking their slides. Sometimes this is necessary, but I always appreciate speakers who have been engaged with the content, make references to earlier talks, and don’t trot out the same old clichés as the previous speakers.

Note: I should also add that personally, I find the joke (“the only thing between you and beer”) by the last speaker of the day somewhat problematic, as it implies that people are here for the drink rather than the conference content, and because it also somewhat normalizes overconsumption.

One thing some speakers do in order to calm their nerves (and also to increase people’s engagement, as a side-effect) is through audience participation. If you get people from the audience interacting with each other for five minutes, it takes some of the pressure and focus off of you. It’s also five fewer minutes of content you need to prepare.

However, I see audience participation go wrong far more often than it goes right. This happens especially in front of Brits and Northern Europeans who would rather curl up into a ball and die rather than risk the social awkwardness of talking to their neighbors.

I remember seeing one American speaker walk up the aisle at a European conference encouraging the audience to whoop and cheer while they high-fived everybody or at least attempted to high-five everybody. Although this sort of hype-building might have worked well in Vegas, the assembled audience of Northern Europeans found the whole episode deeply embarrassing, and the speaker never truly recovered for the rest of the talk.

And, on the opposite side of things, if you do get your audience interacting, it can be quite hard to get them to stop a few minutes later! I have seen far too many speakers asking people to introduce themselves to their neighbors, only to cut them off 30 or so seconds later. So if you have such an activity planned, make sure you leave enough time for it to become a meaningful connection, and have a strategy on how you’re going to bring people’s focus back to you.

Another (negative) thing I see a lot of speakers do is make jokes about how they didn’t write their talk till last night or didn’t get to bed till late because they were out drinking. While it’s good to appear to be vulnerable and human, if played wrong, the message you might actually be sending is that you don’t really care about the audience, so be careful.

How To Get Invited Back?

Organizing conferences can be stressful work. You’re trying to coordinate with a bunch of different people with widely different workloads, communication styles, and response times. People are super quick to say “Yes!” to a speaking gig, but then they might go dark for months on end. This is really difficult if you’re trying to get enough information to launch your event site and start selling tickets. It’s even harder if you’re trying to organize things like travel and accommodation and you are seeing the price of everything going up.

As such, you can make conference organizers’ lives a lot easier by responding to their emails in a timely manner, sending them your talk descriptions, bio information, and headshots when asked, and confirming or booking your travel details enough time in advance so that the prices don’t double in size.

Speakers who are a pleasure to work with get recommended and invited back. Speakers who don’t respond to emails, send in overly-short descriptions or leave booking travel to the last minute often don’t. In fact, I’m a member of several conference organiser Slack groups where this sort of behaviour is regularly talked about, causing invites for certain speakers to dry up quickly.

This is, sadly, another reason why you see the same speakers talking at events time and again. Not necessarily because they’re the best speakers, but because they’re reliable and don’t give the organizers a heart attack.

Conclusion

I know this article has covered a lot of public speaking do’s and don’t’s. But before wrapping things up, it’s worth mentioning that speaking is also a lot of fun. It’s a great way to attend conferences you might not have otherwise been able to afford; you get to meet speakers whose work you might have been following for years and learn a ton of new things. It also provides a great sense of personal accomplishment, being able to share what you’ve learnt with others and “pay it forward.”

While it’s easy to assume that all speakers are extroverts, (the art of) speaking is actually surprisingly good for introverts, too. A lot of people find it quite awkward to navigate conferences, go up to strangers, and make small talk. Speaking pretty much solves that problem as people immediately have something they can talk to you about, so it’s super fun walking around after your talk and chatting with people.

All that being said, please don’t feel pressured into becoming a speaker. I think a lot of people think that they need to add a “conference speaker” to their LinkedIn bio in order to advance their careers. However, some of the best, most successful people I know in our industry don’t speak at public events at all, so it’s definitely not an impediment.

But if you do want to start sharing your experience with others, now is a good time. Sure, the number of in-person conferences has dropped since the start of the pandemic, but the ones that are still around are desperate to find new, interesting voices from a diverse set of backgrounds. So if it’s something you’re keen to explore, why not put yourself out there? You’ll have nothing to lose but potentially a lot to gain as a result.

Further Reading

Here are a few additional resources on the topic of speaking at conferences. I hope you will find something useful there, too.

  • Breaking into the speaker circuit,” by Andy Budd
    Here are some more thoughts on breaking into public speaking by yours truly. As somebody who both organizes and often speaks at events, I’ve got a good insight into the workings of the conference circuit. This is probably why I regularly get emails from people looking for advice on breaking into the speaking circuit. So rather than repeating the same advice via email, I thought I’d write a quick article I could point people to.
  • Confessions of a Public Speaker,” by Scott Berkun
    In this highly practical book, author and professional speaker Scott Berkun reveals the techniques behind what great communicators do and shows how anyone can learn to use them well. For managers and teachers — and anyone else who talks and expects someone to listen — the Confessions of a Public Speaker provides an insider’s perspective on how to effectively present ideas to anyone. It’s a unique and instructional romp through the embarrassments and triumphs Scott has experienced over fifteen years of speaking to audiences of all sizes.
  • Demystifying Public Speaking,” by Lara Hogan (A Book Apart), with foreword by Eric Meyer
    Whether you’re bracing for a conference talk or a team meeting, Lara Hogan helps you identify your fears and face them so that you can make your way to the stage, big or small.
  • Slide:ology: The Art and Science of Presentation Design,” by Nancy Duarte
    No matter where you are on the organizational ladder, the odds are high that you’ve delivered a high-stakes presentation to your peers, your boss, your customers, or the general public. Presentation software is one of the few tools that requires professionals to think visually on an almost daily basis. But unlike verbal skills, effective visual expression is not easy, natural, or actively taught in schools or business training programs. This book fills that void.
  • Presentation Zen: Simple Ideas on Presentation Design and Delivery,” by Garr Reynolds
    A best-selling author and popular speaker, Garr Reynolds, is back in this newly revised edition of his classic, best-selling book in which he showed readers there is a better way to reach the audience through simplicity and storytelling and gave them the tools to confidently design and deliver successful presentations.
  • How To — Public Speaking,” a video talk by Ze Frank
    You may benefit a lot from this video that Ze Frank made several years ago.
  • Getting Started In Public Speaking: Global Diversity CFP Day,” by Rachel Andrew (Smashing Magazine)
    The Global Diversity CFP Day (Call For Proposals, sometimes also known as a Call For Papers) is aimed to help more people submit their ideas to conferences and get into public speaking. In this article, Rachel Andrew rounds up some of the best takeaways along with other useful resources for new speakers.
  • Getting The Most Out Of Your Web Conference Experience,” by Jeremy Girard (Smashing Magazine)
    To be a web professional is to be a lifelong learner, and the ever-changing landscape of our industry requires us to continually update and expand our knowledge so that our skills do not become outdated. One of the ways we can continue learning is by attending professional web conferences. But with so many seemingly excellent events to choose from, how do you decide which is right for you?
  • Don’t Pay To Speak At Commercial Events,” by Vitaly Friedman (Smashing Magazine)
    The state of commercial web conferences is utterly broken. What lurks behind the scenes of such events is a widely spread, toxic culture despite the hefty ticket price. And more often than not, speakers bear the burden of all of their conference-related expenses, flights, and accommodation from their own pockets. This isn’t right and shouldn’t be acceptable in our industry.
  • How to make meaningful connections at in-person conferences,” by Grace Ling (Figma Config)
    This is an excellent Twitter post about how to make meaningful connections at in-person conferences — a few concise, valuable, and practical tips.

How to Display Twitter Followers Count as Text in WordPress

Do you want to display your Twitter followers count as text in WordPress?

By showing that many people follow you on social media, you can encourage visitors to trust your website. Even better, by displaying this information as text, you have the freedom to use it anywhere on your website, including inside your posts and pages.

In this article, we will show how to display your Twitter followers count as text in WordPress.

How to display Twitter followers count as text in WordPress

Why Display Twitter Followers Count as Text in WordPress?

You may have noticed that many popular blogs, influencers, and brands proudly show how many people follow them on social media.

If visitors see lots of people following you on social media, then they are more likely to trust your business and see you as an expert in your blogging niche.

Many of the best social media plugins allow you to show the total follower count in embedded feeds, buttons, banners, and more.

However, sometimes you may want to show the number as plain text. This gives you the freedom to add the follower count to your blog posts, footer, or anywhere else on your WordPress blog or website.

With that in mind, let’s see how you can display your Twitter follower count as text in WordPress.

Step 1: Get a Twitter API Key and Secret

To get your follower count, you will need to access the Twitter API by creating an API Key and Secret.

To get this information, head over to the Twitter Developers Portal and then click on ‘Sign up for Free Account.’

Signing up for a Twitter Developers account

You can now type in some information about how you plan to use the Twitter API. It’s a good idea to provide as much detail as possible, as Twitter will review this information and may delete your account if they don’t understand how you are using their API.

After that, read the terms and conditions. If you are happy to continue, go ahead and click on the ‘Submit’ button.

Agreeing to the Twitter Developers terms

You will now see the Developer Portal. In the left-hand menu, click to expand the ‘Projects & Apps’ section. Then, select ‘Overview.’

You can now go ahead and click on ‘Add App.’

How to create a Twitter app

After that, just type in the name you want to use for your Twitter app. This is just for your reference, so you can use anything you want.

With that done, click on the ‘Next’ button.

Naming a Twitter application

Twitter will now show an API key and API Secret. This is the only time you will see this information, so make a note of it somewhere safe.

We recommend adding the key and secret to a password manager for extra security.

Getting a Twitter API key and secret

Step 2: Add Custom Code to Your WordPress Website

The easiest way to add the Twitter follower count to your site is by using PHP code.

For security reasons, WordPress doesn’t allow you to add PHP code directly to your pages and posts, but it does allow shortcodes. This means you can create a custom shortcode and then link it to your PHP code.

The easiest way to add custom shortcodes in WordPress is by using WPCode. This plugin allows you to create as many shortcodes as you want and then link them to different sections of PHP code.

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

Adding custom shortcode to your WordPress website

Here, you will see all the ready-made snippets you can add to your website. These include snippets that allow you to completely disable WordPress comments, upload files that WordPress doesn’t support by default, and more.

Since you are creating a new snippet, hover your mouse over ‘Add Your Custom Code.’ Then, just click on ‘Use snippet.’

Adding a custom code snippet to WordPress using WPCode

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, you need to open the ‘Code Type’ dropdown and select ‘PHP Snippet.’

Adding a PHP snippet to WordPress using custom code

In the code editor, simply paste the following PHP code:

function getTwitterFollowers($screenName = 'wpbeginner')
{
    // some variables
    $consumerKey = 'YOUR_CONSUMER_KEY';
    $consumerSecret = 'YOUR_CONSUMER_SECRET';
    $token = get_option('cfTwitterToken');
  
    // get follower count from cache
    $numberOfFollowers = get_transient('cfTwitterFollowers');
  
    // cache version does not exist or expired
    if (false === $numberOfFollowers) {
        // getting new auth bearer only if we don't have one
        if(!$token) {
            // preparing credentials
            $credentials = $consumerKey . ':' . $consumerSecret;
            $toSend = base64_encode($credentials);
  
            // http post arguments
            $args = array(
                'method' => 'POST',
                'httpversion' => '1.1',
                'blocking' => true,
                'headers' => array(
                    'Authorization' => 'Basic ' . $toSend,
                    'Content-Type' => 'application/x-www-form-urlencoded;charset=UTF-8'
                ),
                'body' => array( 'grant_type' => 'client_credentials' )
            );
  
            add_filter('https_ssl_verify', '__return_false');
            $response = wp_remote_post('https://api.twitter.com/oauth2/token', $args);
  
            $keys = json_decode(wp_remote_retrieve_body($response));
  
            if($keys) {
                // saving token to wp_options table
                update_option('cfTwitterToken', $keys->access_token);
                $token = $keys->access_token;
            }
        }
        // we have bearer token wether we obtained it from API or from options
        $args = array(
            'httpversion' => '1.1',
            'blocking' => true,
            'headers' => array(
                'Authorization' => "Bearer $token"
            )
        );
  
        add_filter('https_ssl_verify', '__return_false');
        $api_url = "https://api.twitter.com/1.1/users/show.json?screen_name=$screenName";
        $response = wp_remote_get($api_url, $args);
  
        if (!is_wp_error($response)) {
            $followers = json_decode(wp_remote_retrieve_body($response));
            $numberOfFollowers = $followers->followers_count;
        } else {
            // get old value and break
            $numberOfFollowers = get_option('cfNumberOfFollowers');
            // uncomment below to debug
            //die($response->get_error_message());
        }
  
        // cache for an hour
        set_transient('cfTwitterFollowers', $numberOfFollowers, 1*60*60);
        update_option('cfNumberOfFollowers', $numberOfFollowers);
    }
  
    return $numberOfFollowers;
}

echo getTwitterFollowers(); ?>

In the code above, make sure you replace the following placeholders with your own API key and API secret:

    $consumerKey = 'YOUR_CONSUMER_KEY';
    $consumerSecret = 'YOUR_CONSUMER_SECRET';

You will also need to replace ‘wpbeginner’ with the Twitter account that you want to use. This can be any Twitter account, including accounts that you don’t own:

function getTwitterFollowers($screenName = 'wpbeginner')

To get the Twitter username, simply open the Twitter profile in a new tab. You will find the username in the URL and in the profile header:

Getting a Twitter username

With that done, switch back to the WordPress dashboard. Here, simply click on the ‘Inactive’ toggle so that it changes to ‘Active.’

You can then go ahead and click on the ‘Save snippet’ button.

Displaying the Twitter follower count using WPCode

With that done, scroll to the ‘Insertion’ section.

WPCode can automatically add your code to different locations, such as after every post, front end only, or admin only. To get the shortcode, simply click on the ‘Shortcode’ button.

Adding a Twitter follower count to WordPress using a custom shortcode

You can now use the shortcode to add social proof to any page or post.

In the block editor, simply click on the ‘+’ button and type in ‘Shortcode.’ When it appears, select the Shortcode block to add it to the page or post.

How to add a shortcode block to WordPress

You can now add the shortcode to the block.

Just be aware that the shortcode simply shows the total follower count, so you will typically want to add some text explaining what the number means.

Adding a Twitter follower count to WordPress using a custom shortcode

For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

When you are happy with how the page is set up, you can make the follower count live by clicking on either the ‘Update’ or ‘Publish’ button.

Now if you visit your WordPress website, you will see the follower count live.

An example of a Twitter follower count, created using WPCode

We hope this tutorial helped you learn how to display your Twitter followers count as text in WordPress. You may also want to learn how to create a custom Instagram photo feed in WordPress or check out our expert picks for the best Twitter plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display Twitter Followers Count as Text in WordPress first appeared on WPBeginner.

Design Under Constraints: Challenges, Opportunities, And Practical Strategies

“If you don’t want to work within constraints, become an artist.” That is what one of my design lecturers told me when I was at university back when the web wasn’t even a thing.

That has turned out to be one of the most useful pieces of advice I ever received in my career and has led me to embrace and even enjoy working within constraints, which probably explains why I tend to specialize in highly regulated sectors with enormous amounts of stakeholders and legacy.

So, if you find working within constraints challenging, this is the post for you. In it, I hope to change your attitude towards constraints and provide practical ways of dealing with even the most frustrating barriers.

But let’s begin by looking at the kind of constraints you could find yourself facing.

Constraints On Every Side

The constraints we face come in all shapes and sizes, from technical constraints due to legacy technology or backwards compatibility to legal constraints relating to compliance requirements or accessibility.

Then there can be inadequate availability of images, video, and text or simply a lack of access to stakeholders.

However, the biggest two, without a doubt, are a lack of time and a lack of resources (either money or people). In fact, it is rare to encounter a project where somebody is not in a hurry, and you have enough resources to do the job properly!

It is easy to let all of these obstacles demoralize you, but I would encourage you to embrace, rather than resist, their constraints.

Why You Should Embrace Your Constraints

Constraints are not a set of necessary evils we have to endure. Instead, they are the core of what shapes the work we do.

  • Constraints provide a clear set of guidelines and limitations, which can help focus the design process and prevent scope creep.
  • Constraints help to build trust with clients or stakeholders, as they can see that the designer is able to work within their limitations and still deliver a high-quality product.
  • But most importantly of all, constraints can lead to more creative and innovative solutions, as designers are forced to think creatively within the given limitations.

I have done some of my best work over the years precisely because of the constraints placed upon me, not despite them.

Also, some constraints are a good idea. Ensuring a site is accessible just makes sense, as does limiting the time and money an organization is willing to invest.

Not that you should blindly accept every constraint placed upon you.

Know When To Push Back Against Constraints

Unsurprisingly, I would encourage you to challenge constraints that are based on incorrect assumptions or outdated information. However, you won’t come across those that frequently.

More common are constraints that make sense from “a certain point of view.” However, these kinds of constraints are not always right within the context of the project and its long-term objectives.

For example, attempting to deliver a project within a strict budget and on an aggressive schedule may reduce the cost to the organization. But it will substantially increase the risk of the project failing, and so ultimately, the money and time that were spent will be wasted.

Another common example is compliance constraints. These constraints exist to protect the organization from possible risk, but many larger organizations become so risk-averse that they undermine their competitiveness in the market. They swap one type of risk for another.

The key in these situations is to demonstrate the cost of any constraint placed upon you.

Demonstrating The Cost Of An Unhealthy Constraint

Often, those who impose constraints upon you do not see the problems these constraints create. This is usually because they are only thinking in terms of their own area of responsibility. For example, a compliance officer is only going to be thinking about compliance and not the broader user experience. Equally, the IT department is going to be more focused on security and privacy than conversion or usability.

Ultimately the decision of whether to enforce a constraint or not comes down to balancing multiple factors. Therefore, what you need to do is

Demonstrate the cost associated with a constraint so that senior management (who take a more holistic view) has all of the facts to make a final decision.

You can demonstrate the cost in one of three ways. You can either focus on the damage that a constraint causes, the cost of not taking an action the constraint prevents, or the lost opportunities imposed by the constraint.

Let’s look at each to help you see more clearly how this can work.

Highlight The Hidden Damage Of A Constraint

I once worked for a consumer electronics company. One of their biggest sellers was a kettle that included a water filter which prevented limescale build-up (I know, I work on the most exciting projects!)

The company insisted that when somebody added the kettle to their shopping cart, we should automatically add a set of water filters as well.

This is a well-known dark pattern that damages the user experience, but I also knew that it was increasing the average order value, a key metric the e-commerce team tracked.

To combat this constraint, I knew I had to demonstrate that it was causing damage that the e-commerce team and leadership were unaware of. So, I took the following steps:

  • I gathered evidence on social media of users complaining about this issue.
  • I contacted the customer support team to get some metrics about the number of complaints.
  • I contacted the returns team to find out how many people returned the filters.
  • I looked on review sites to see the number of negative reviews relating to filters.

Sure enough, I found substantial evidence that this was a major issue among consumers. But I didn’t stop there. I wanted to associate a financial cost with the decision, so I made some estimates:

  • I made my best guess at the cost of combating the negative reviews, referencing various sources I found online.
  • I researched the average cost of dealing with a complaint and combined it with the data from the customer services team to guess the overall cost of dealing with filter complaints.
  • I used a similar approach to work out an approximate cost of processing returned filters.

Now, let me be clear, these were nothing more than guesses on my part. My figures were not accurate, and people in the company were quick to challenge them. But associating a dollar value with the problem got their attention!

I agreed that my figures were probably wildly off and suggested we did some proper research to find out the real cost.

You don’t need hard data to demonstrate there is a problem. An educated guess is good enough to start a discussion.

Of course, not all constraints are actively causing damage. Some are merely preventing some better action from being taken. In these cases, you need a different approach.

Focus On The Cost Of Inaction

Over time, an organization establishes processes and procedures that have been proven to work for them. The bigger the organization, the more standard operating procedures they have, and the more constraints you encounter.

Well-established companies become so afraid of losing their position that they become extremely risk-averse, and so place considerable constraints on any project.

People succeed in organizations like this by doing what has been done before. This can be problematic for those of us who work in digital because most of what we are trying to do is new.

To combat this bias towards the status quo, we need to demonstrate the cost of inaction. Put another way, we need to show management that if they do not do things differently, it will threaten the market position the organization has established.

In most cases, the best approach is to focus on the competition. Do a bit of research and show that the competition is less risk-averse and gaining market share as a result. Keep mentioning how they are doing things differently and how that threatens your organization’s market position.

Another tactic is to demonstrate how customer expectations have changed and that if the company does not act, they will begin to lose market share.

This is particularly easy to do because users’ expectations regarding digital have skyrocketed in recent years.

“The last best experience that anyone has anywhere becomes the minimum expectation for the experiences they want everywhere.”
— Bridget van Kranlingen, Senior Vice President of IBM Global Markets

Put another way, users are comparing your organization’s subpar digital experience to the very best of what they are interacting with online, even when that comparison is not fair.

A bit of user research goes a long way in this regard. For example, consider running a system usability scale survey to compare your digital platforms to this industry benchmark. Alternatively, run a survey asking how important the digital experience is to customers.

While fear of losing market share is a big motivator to well-established businesses, younger, hungrier businesses tend to be more motivated by lost opportunities.

Demonstrate Lost Opportunities

Your management, stakeholders, and colleagues often do not realize what they are missing out on because of the constraints they place upon you. It, therefore, falls to you to demonstrate those opportunities.

Sometimes, you can make this case with analytics. For example, recently, I was working with a client who insisted on having a pricing page on their website, despite the fact the page showed no pricing! Instead, the page had a request pricing form.

They wanted to keep the page because they were afraid to lose the handful of leads that came via the page. However, I was able to convince them otherwise by pointing out that the page was actively alienating the majority of users who visited it, effectively losing them leads.

I did this by demonstrating the page had a higher bounce rate than any other page on the site, was the most common exit page, and had the lowest dwell time.

But analytics is not my favorite approach for demonstrating lost opportunities. Instead, I typically turn to prototyping.

Prototyping is a great way of demonstrating exactly what an organization will miss out on if they insist on unreasonable constraints, presuming, that is, that you create a prototype that is free from those constraints.

I use this approach all the time. Imagine, for example, that you have been told that a particular technology stack imposes a set of restrictive constraints on how an interface is designed. By prototyping what the interface could be if you were free from those constraints, you can make a powerful case for changing the technology stack.

Having a prototype gives you something to test against. You can use usability testing to provide hard evidence of how much it improves the user experience, findability, and even conversion.

Even more significantly, a prototype will excite internal stakeholders. If your prototype is compelling enough, they will want that solution, and that changes the conversation.

Instead of you having to justify why the IT stack needs to be changed, now the IT team has to justify why their IT stack cannot accommodate your solution. Stakeholders and management will want to know why they cannot have what they have fallen in love with.

Of course, people will not always fall in love with your prototype, and ultimately, many of your attempts to overcome constraints will fail despite your best efforts, and you need to accept that.

Conceding Defeat With Grace

Let’s be clear. It is your job to demonstrate to management or clients that a constraint placed upon you is unhealthy. They cannot be expected to know instinctively. They do not have your perspective on the project and so cannot see what you see.

This means that if they fail to remove the constraint you consider unhealthy, it is your failing to demonstrate the problem, not their fault.

Sure, you might consider them shortsighted or naive. But ultimately, you failed to make your case.

Also, it is important to note that you don’t always have the whole picture. A decision may be bad from a user experience perspective, for example, but it may be the right thing for the business. There will always be other factors at play that you are unaware of.

So when you fail to make your case, accept that with grace and do your best to work within the constraints given to you.

Ultimately your working relationship with management, colleagues, and clients is more important than your professional pride and getting your way.

Chris’ Corner: Signals

I wonder if reactivity is useful line to draw in JavaScript land. In the past, the great jQuery-and-friends era, we didn’t have it. If you needed to change something in the DOM with jQuery, you reached your grubby little paws in there and did it. You couldn’t just update some data and somewhere in a framework the gears turned and DOM updates were performed for you. Today, that’s something of an expected feature in JavaScript frameworks, big and small.

That reactivity line is still useful today. Sometimes you need reactivity, sometimes you don’t. That might help inform conversations about what technology is needed to build a website. Not that I’m eager to spark a debate about what is an “app” and what is a “site”, I do kinda think “reactive to state” is the kind of thing that makes people think “I’m building an app” and then pick other technology that is aligned with that.

I’m thinking about this because this concept of Signals has become hot-hot-hot in the JavaScript framework kingdoms. Last Fall, the Preact gang blogged Introducing Signals and dropped a… sub-library?… for implementing the concept. The big point is dealing with “application state”. As opposed to more “local” state I suppose, so less about which tab of a tabs component is active (local-level), and more about the current permissions level of the user (application-level).

Say three components on the page need to know about those current permission levels of the user. They could be nested anywhere on the page. So you keep the state at the “top” of that tree and percolate it down through the forest to the components that need it. That’s the thing: some people hate that. It can be messy, complicated, error prone, and I dunno typey. So Signals says: no problem, set that state up top and pew pew shoot out signals when that state changes and the components that care can listen. Seems like pub/sub to me but I’m no architecture genius.

CodePen is a React app for the most part, and we use Apollo which feels like it has answers for a lot of this. You can use all the native React state you want, useState and whatnot. Then you’ve got this Apollo Store/Cache which is kind of “at the top” an can be client-only if you want it to be, so you’re querying/mutating that state from wherever you need it. Plus there are reactive variables which seem pretty signal-y to me.

There is a little hot drama here though, as while Preact is basically “lightweight React”, they are the originators of the “Signals are good” side, while React itself seems more like uhmmmmm no. You can read some of the play out in React vs Signals: 10 Years Later in the post and comments. The spirit from React being: “we intentionally didn’t do it this way because thar be dragons.” Others are like “you don’t need it, yo, use this other thing instead.”

I pointed at Preact’s thing as a catalyst, but if you hopped over to that 10 years later post, you’ll see it’s largely about Solid, who Andrea Giammarchi says was first in Signals: the nitty-gritty. I appreciate the attempt here to make this really-pretty-mindbending concept clear:

signal is “a wrapped value” that automatically subscribes any callback accessing it while it’s executing. As a stretched metaphor, it’s like an object that automatically add listeners reaching itself and dispatches those listeners whenever the wrapped value changes.

If you’re hoping for the chillest possible way to start understanding this stuff, the Syntax fellas talked about it the other week. I found a podcast to be a nice way to let it wash over me, as spinning up an application complex enough to even care about Signals felt like too much effort. It was interesting to hear about how this debate won’t even pop up in, say, Svelte, because it just isn’t needed. Where other big frameworks are more like, well if that’s what the people want.

Perhaps notably, you don’t need a “big” framework, or one that requires any build step or bundling at all, in order to buy some reactivity. I just saw Strawberry the other day and Web Component style with super little code and built-in reactivity actually felt really nice.

Mostly I enjoy the whole drama of it all. “We don’t do this because we were around for The Past” vs. “Times have changed, old timer.” which is literally the same as when React itself came out.

The post Chris’ Corner: Signals appeared first on CodePen Blog.

Mainframe Development for the “No Mainframe” Generation

Powerful but Unknown

Few people will recognize a mainframe as a modern digital environment, but in fact, it is a widely used powerful platform. When shopping or doing your taxes, there is probably a mainframe involved at some point. As a developer, you are likely to "encounter" one during your career, even if you are not actually dealing with "green screens." However, without mainframe knowledge, how do you proceed? Someone once said: "All the people with relevant knowledge are dead or retired." Even though that is not entirely true, learning how to "handle" the mainframe could indeed pose difficulties.

Mainframe in a Laboratory

One of the software development departments at the Dutch IT company Ordina is involved in mainframe technology. Apart from mainframe development, it focuses on three points:

Practical Design Tips And Guidelines For Beginner Designers

As someone who has worked with beginner designers for decades, I have observed a certain common problem. They often get overwhelmed with design tasks such as creating presentations, a personal website, mocking up an app idea, or even making menus or cards. It’s not due to a lack of ability and skills but rather because of unfamiliarity with the rules and systems that graphic designers are trained to understand.

To fill this gap, I have compiled some simple principles that are quick and easy to learn yet can greatly enhance any design project. In this article, we’ll focus on the four key elements of good design. Here they are:

  1. Structure,
  2. Spacing,
  3. Rhythm,
  4. Contrast.

By learning these simple concepts, anyone should be able to create effective designs that not only look good but also cater to diverse audiences, including those with disabilities. Are you ready to learn the power of these fundamental design concepts? If yes, follow me along!

Structure

Structure helps people absorb information. You see the toolbar before you can discern any individual tool in it. You recognize a form before you can identify a specific field in it. The proper structure helps you access information faster. It’s the main menu, the selection screen, before you dive in.

Let’s review an example. Imagine you are making a registration page for a webinar. The webinar page should contain the following information:

  • The event title,
  • A short synopsis,
  • The price of admission,
  • The time and date of the event,
  • The name of the host,
  • A photo of the host,
  • A short bio for the host,
  • Some social links for the host,
  • A register button,
  • A call-out: “Join me live!”.

Ask yourself, if you had to group those things into several groups/buckets, what would those be? How would you name each group/bucket? Here are the groups I would make, and it might not be precisely how you would group the information, but that’s OK; the idea is to just give you a start!

Headline Host Logistics
Call-out Host name Event date
Title Host photo Time & duration
Synopsis Host bio Price
Social links Register button

Now that we have those buckets let’s continue: In what order do we want the audience to ingest them? My choice would be the headline first, then the logistics, with the big register button. I would keep the host information more as a detour, something optional to dive into if you would like to learn more.

Compare these two versions. Isn’t it easier to ingest the information in the one on the right?

As you can see, the structure of the information greatly influences your ability to absorb it. I will go one step further. I believe beauty is an artifact of well-organized information.

In short, don’t try to make something beautiful. Try to make something well-organized, and watch the beauty emerge!

“A well-designed, user-friendly information architecture ensures that users spend less time and effort searching for information and are successful in finding what they need. Key information-architecture tasks include identifying common features in content, forming groups of similar information objects, and linking documents to other documents on the same topic.”

— Anastasia Stefanuk, “The Importance of Information Architecture to UX Design
Spacing

Spacing in graphic design refers to the arrangement of elements within a layout. Proper spacing can make your designs more visually appealing and easier for viewers to comprehend. It helps direct attention, creates hierarchy, and improves legibility.

Let’s look at another example. On the left, all the gaps are the same. On the right, the spacing is influenced by the structure. The inner group elements are more tightly grouped, creating a visible “scaffolding” for the content.

In print, space is expensive because the paper is not free. This is why in the past, only “luxury magazines” could afford those beautiful margins and airy layouts. Nowadays, white space is virtually free. Luxury for everybody!

"White space is the area between design elements. It is also the space within individual design elements, including the space between typography glyphs (readable characters). Despite its name, white space does not need to be white. It can be any color, texture, pattern, or even a background image. White space is a great tool to balance design elements and better organize content to improve the visual communication experience.”

— Mads Soegaard, “The Power of White Space in Design

The Space Must Flow

Consistent spacing around elements gives visual harmony and unity to your work. It ensures a coherent look across all the components of your design. This is because irregular gaps draw the viewer’s attention away from the main focus, which is counterproductive. By maintaining even spacing between all objects, you allow the content to communicate without interference.

Here are some tips for creating a nice flowing space between and around elements.

Centering In A Box

Sometimes you need to put an image (like a logo, for example) inside a box. In this case, leave at least half its shortest dimension as a minimum margin. E.g., if the image is wide, use half its height as a minimum margin. If the image is tall, use half its width.

Vertically Centering Text

Most of the text mass sits between the baseline and the top of the lowercase letters — squint your eyes slightly, and you will see what I mean. When vertically centering text, a good rule of thumb is to center the lowercase letters’ height. In the designer speech, it is called the “x-height.” Some typefaces might need a tiny vertical adjustment, but we’re going for simple here.

“Why is it called ‘x’ height? Because the letter ‘x’ is the only letter in the alphabet that has all its terminals touch both the baseline and the meanline, with no extending points. Curved letters such as a, c, e, o, r, or s usually pass the font’s x-height slightly.”

— Sirine Matta, “What Are Cap Height and X Height in Typography?

Text In A Shape

When centering text inside a box (like a button or a label), you need to use the height of the lowercase letters to do the centering and make sure there is the same amount of space all around the text, not just above and below.

Centering Polygons

When centering a polygon, center the circle passing by each point instead of centering the box around the polygon. Once again, this will ensure the space around the shape is nice and uniform.

Nested Rounded Boxes

The rounded boxes are great. They don’t have sharp edges. They feel more human, more organic as if these digital shapes have been sanded down or eroded, like pebbles.

However, when putting a rounded box into another one, a mistake I have seen often is to use the same border-radius on the box outside and the box inside. If you do this, the band (represented here with a colored gradient) will not have a consistent width. Instead, you need to use proportional radius when doing such rounded box nesting.

Rhythm

Human eyes get bored quickly. To keep their interest, you need to give them something new to parse and explore at regular intervals. But you don’t want to make it too hard either, too “new” every time — just a gentle walk along an interesting variety of patterns.

Rhythm contributes to a smooth flow that engages and holds the viewer’s interest while communicating effectively. A visual rhythm also provides directional cues to guide readers through the content.

Well, if you think about it, your slide deck is the same thing, and so is your portfolio, your app onboarding flow, and so many other things. Create variety constrained by a simple set of rules. Start with just left and right, and maybe one day, try using thirds if you feel comfortable. It’s not hard, you’ll see!

“Rhythm in art and design refers to a relationship between elements that creates a sense of harmony. Rhythm can be seen in patterns, in relationships between colors and shapes, and in repetitions of lines and forms. Rhythms help to guide the viewer’s eye around a piece rather than allowing the eye to settle on a particular focal point.”

— “Rhythm,” part of the “Principles of Design” BBC series

Repetition Is Key To A Rhythm

Repetition is key to a rhythm. Reusing elements such as colors, shapes, and text styles can create a sense of unity and coherence within your designs, making them feel more organized and visually appealing. It also makes your choices more intentional.

For example, I call a book-end any element that can be repeated to signal the beginning and the end of something. Shapes and colors are a great way to express creativity and bring some life to your content! It helps to tell your audience that a topic has ended in a nice and subtle way.

The repetition of certain visual elements creates patterns that catch our eye, engage our brains, and hold our interest, which can make any design feel more dynamic, expressive, and aesthetically pleasing. Find the guitar riff of your content; find the chorus!

Here is a meta example. These are the elements I reused throughout this article to create a sense of unity between all the illustrations. I had to pick some colors, decide on a style for the arrows, and make many more design choices. A bigger version of this is usually called a design system.

Reading Rhythm

When you are feeding words into people’s retinas, you need to find the right compromise between the size of the text chunks and the effort required to move the eye to the next line. That sounds mechanical because it kind of is. Too long a line, and it is hard to locate the beginning of the next line. Too short a line, and your reading gets interrupted too often for an eye carriage return.

I usually find that between eight and twelve words per line are a good goal for the main text block. Just count the words in a couple of sentences — no need to be too strict. Also, keep in mind that it’s a good rule for English, but other languages might have different sweet spots. For a sidebar, a caption, or something narrower, you can aim for five to six words.

Try reading some text in the example. You will see how much easier it is for your eyes to follow when the lines are not too long!

Before going further, I’d like to quote Gary Provost, an American writer and writing instructor, whose words on rhythm are spot-on:

“This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety. Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences. And I use sentences of medium length. And sometimes, when I am certain the reader is rested, I will engage him with a sentence of considerable length, a sentence that burns with energy and builds with all the impetus of a crescendo, the roll of the drums, the crash of the cymbals–sounds that say listen to this, it is important.”

Gary Provost

Not So Justified

Justified text appears aligned on both sides. This is a very desirable attribute, but it’s very hard for it to happen naturally. Editing and design tools all do a pretty bad job of creating justified text that looks good. Instead, you will need to fine-tune letter spacing, word spacing, use good hyphenation, and sometimes even rewrite your text. Your job is to avoid text gaps that will hurt the pace of reading.

So, unless you spend the time to do the work manually, I suggest that you use left-aligned text instead. The price to pay for this shiny right edge is not worth it!

Contrast

Contrast refers to the use of differences (in color, size, shape, weight, direction, or texture) to attract attention, create hierarchy, enhance readability, and even evoke emotions like calm or energy. If a rhythm is the beat, contrast is the melody.

Mind The Low Contrast

To ensure your content is accessible to everybody, including people with visual impairments, text on a colored background should have enough contrast to be easily readable. There are plenty of apps or plugins that can calculate that for you (I’ve included a few references at the end of the article, check Further Reading). For now, all you really need to know is that a contrast ratio of 4.5 or higher is recommended.

Text Size Contrast

Text size can be used as a very convenient tool for structuring information. A well-structured text can significantly lower the effort required for the viewer to ingest the information. The contrast between each heading level should be high enough for the structure to be visible.

If possible, a consistent ratio between different header levels usually looks more elegant. In general, the weight of the text (bold, regular, light) decreases as the level increases.

Text Weight Contrast

Sometimes, the typeface you are using comes with many weights, like medium, semi-bold, light, and so on. In those cases, it’s usually recommended to skip one weight when pairing them to create enough contrast between them.

Avoid Unintentional Contrast

Combining text with an icon can help comprehension, improve visual appeal, or increase the importance of an element. However, always make sure the thickness of the text matches the thickness of the icon. That will make it feel as if it were part of the typeface. It does look more elegant, but it also saves your audience from even thinking about it, which is a recurring theme in graphic design. Good design is invisible!

“Although we can’t help but notice poor design, good design is much harder to detect. We’d go even further: good design is invisible. This raises a logical question: what, then, is good design? Is it when form follows function? Is it the perfect arrangement of design elements on a modernist grid? Is it 24-point headings and 8-point body text? Is it a solid set of principles that you work to every time on every job? The answer might surprise you — good design is all of this. And none of it.”

— Damien Stanyer, “Why is good design invisible?
Conclusion

That might have surprised you, but creating and iterating on designs isn’t about making things pretty. Your job as a designer is to lower the cognitive load for people to ingest the information, create a rhythm that keeps your viewer engaged, and make sure everybody can access the content.

“The most important advice I would give to emerging designers — even those that have already won awards — is that learning never stops. You can always improve your craft, whether you’ve won one award or twenty. Remember, you’re never going to be an expert in everything. I have worked on so many things, from book design to exhibition design, hospitality, tech, and everything in between — and I’ve taken something new from the experience every time. Now I’m the executive creative director at a global agency, and I still find myself learning something new every day.”

— Lisa Smith, “Learning Never Stops

Next time you are faced with the need to design something, I hope those tips will make you feel a little bit more confident and comfortable! And remember, everybody can be a designer, but every designer has a lot to learn and to keep learning. It’s a process that never stops.

Further Reading

I created a list of additional resources about the topics that I have tried to cover briefly so far. (And if you think this list is missing something of value, please do leave a comment at the end of the article. Thank you! 💖)

How to Add Equipment Rentals to Your WooCommerce Store

Do you want to add equipment rentals to your WooCommerce store?

By renting equipment to your customers, you can keep making money from the same product. You can also connect with a new audience who want to rent products rather than buy them.

In this article, we will show you how to add equipment rentals to your WooCommerce store.

How to add equipment rentals to your WooCommerce store

Why Add Equipment Rentals to Your WooCommerce Store?

By renting equipment to your customers, you can buy a product once and then turn it into an ongoing revenue stream.

If you already have a WooCommerce store selling digital products or physical items, then equipment rentals can be another way to make money.

For example, if you sell party hats and paper plates, then your existing customers might also be interested in larger party equipment rentals, such as a bouncy castle or audio speakers.

You might also be looking to start a completely new equipment rental business. By creating a WooCommerce store that’s optimized for SEO, you can help potential customers discover your business.

Even better, customers can browse your catalog and reserve equipment online. This convenient customer experience will keep people coming back to your equipment rental business rather than switching to a competitor.

With that in mind, let’s see how you can add equipment rentals to WordPress.

How to Add Equipment Rentals to Your WooCommerce Store

In this guide, we are going to assume you already have a WooCommerce store. If you don’t, then you can see our complete guide on WooCommerce made simple.

The easiest way to add equipment rentals to your store is by using Bookings for WooCommerce. This WooCommerce plugin allows you to turn any WooCommerce product into a bookable item that customers can rent for a certain number of days or hours.

An example of rentable equipment, added to the WooCommerce store

You can also create additional services, such as cleaning and delivery fees, and then add them to your equipment rentals.

How to Create a Bookable Product in WooCommerce

First, you will need to install and activate the Bookings for WooCommerce plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can turn any WooCommerce product into a bookable product. If you have already added the product to your online store, then simply go to Products » All Products.

Here, simply hover over the item that you want to turn into a bookable product, and click on the ‘Edit’ link when it appears.

Editing a rentable WooCommerce product

You can also add the equipment as a new product by going to Products » Add New. Here, you can type in the product’s name, upload a photo, add product categories and tags, type in a description, and more.

For more information on how to set up a WooCommerce product, please see our WooCommerce made simple guide.

Adding equipment and party supply rental products to WooCommerce

No matter whether you create a new product or edit an existing one, you can turn it into a bookable product in exactly the same way.

Simply scroll to the Product Data box and open the dropdown menu that shows ‘Simple product’ by default.

Adding a simple product to an online store using WooCommerce

You can now select ‘Booking Product.’ This gives you access to lots of new settings where you can configure the bookable product.

Set How Many Units Customers Can Rent

You can either offer a set number of units or let the customer choose how many units to rent, using the ‘Quantity’ dropdown.

Adding bookable products to WooCommerce

To let customers rent multiple units, select ‘Customer can choose.’

By default, customers can rent as many units as they want, but you can also add a limit. If a customer types in a higher number, then WooCommerce will show an error message.

Limiting the quantity of units that customers can rent

This is useful if you have limited stock or equipment that’s in high demand.

To set a limit, type a number into the ‘Max Booking Per User’ field.

Limiting how many units a customer can rent on a party rental or similar website

Another option is defining how many units the customer can book. For example, if you rent large or expensive equipment such as heavy farming machinery, then customers may only need to book a single unit.

By setting the quantity in advance, you can remove a step from the booking process and improve the customer experience.

An example of a rentable product on a WooCommerce website

Simply go ahead and open the ‘Quantity’ dropdown and then choose ‘Fixed Unit.’

Now, type in the number you want to use.

How to change the quantity of equipment or party rental equipment in WooCommerce

Require Admin Approval For Equipment Rentals (Optional)

Next, you can decide whether to approve all rental requests automatically or put them on hold until you can manually approve them.

If you have a smaller inventory, then requiring approval can help you avoid rental overlap. It can also help you spot any problems with rental requests before you take any payments.

If you enable admin approval, then you will get a notification every time someone submits a rental request.

A new booking notification, on a WordPress website

Click on this notification, and you will go to WooCommerce » Orders.

Here, you will see all the orders on your WordPress website, with any new bookings marked as ‘On hold.’

Requiring admin approval on a party equipment rental or similar website

You can now click on a new order to see all the information about that booking.

If you want to change the order status, then you need to open the ‘Status’ dropdown and choose an option from the list.

For example, if you are approving the booking, then you might select Pending Payment, Completed, or Processing, depending on your workflow.

Changing the order status on an equipment rental website using WooCommerce

With that done, click on ‘Update’ to save your changes.

As you can see, admin approval gives you more control over your equipment rentals. To require approval, check the box next to ‘Booking Confirmation.’

How to require admin approval on an equipment rental website

Offer Hourly or Daily Equipment Rentals in WooCommerce

By default, customers can rent your equipment for one or more days. However, sometimes you may want to rent equipment based on hours.

To make this change, just open the ‘Booking Unit’ dropdown and select ‘Hour(s).’

How to rent equipment based on hours

You can then choose the start and end time for the booking period, using the ‘Daily booking…’ dropdown menus.

In the following image, customers can only rent equipment between 9 AM and 5 PM.

How to change the duration of rentable equipment in WordPress

After making this change, WooCommerce will add a section where customers can choose a start and end time.

This is perfect for equipment that people only need for a very short period of time. For example, if you provide party equipment rental, then customers may only need the party supplies for a few hours.

How to rent equipment based on days and hours

Add Base and Additional Costs

When you are happy with the information you have entered so far, you need to click on the ‘Costs’ tab.

To start, just type in the Booking Unit Cost, which is the price of booking a single unit.

How to add a cost to a rentable product in WooCommerce

After that, you can add an optional additional cost by typing into the ‘Base Cost’ field.

This might be a booking fee, cleaning fee, or any other cost linked to renting the equipment.

How to add additional costs to a rentable product in WooCommerce

If you add a base cost, then customers will see it as part of the cost breakdown.

In the following image, the product is $50 to rent per day, with a base cost of $10.

An example of a cost breakdown on rentable equipment

Depending on the kind of equipment you rent, you may want to multiply the fee based on how many people plan to use the equipment. This can help you cover additional wear and tear when lots of people use the same product.

To multiply the price based on people, start by checking the boxes next to ‘Booking Unit Cost Per Person’ and ‘Base Cost Per People.’

Multiply the cost of party equipment based on the number of people

With that done, click on the ‘People’ tab.

Here, you need to check the box next to ‘Enable People Option.’

Multiply the price of rentable equipment based on the number of people

With that done, customers will see a new field where they can type in how many people plan to use the equipment.

WooCommerce will also show this information in its cost breakdown.

An example of the cost breakdown on rentable equipment

You may also want to set the minimum and maximum number of people who can use the equipment in a single booking. This can help to avoid customers misusing your equipment.

For example, you may not want an entire workforce to use the same product.

If you have large equipment that’s expensive to deliver or clean, then setting a minimum number of people can help to keep your profit margins healthy.

To set these limits, simply type numbers into the ‘Minimum No. of People’ and ‘Maximum No. of People’ fields.

Adding maximum and minimum limits for rentable equipment in WooCommerce

How to Publish Equipment Rentals to Your WooCommerce Store

Although there are some extra settings you may want to configure, this is all you need to add equipment rentals to your WooCommerce store.

With that being said, you can click on ‘Update’ or ‘Publish’ to make the product live on your WooCommerce website. Now, people can rent this equipment directly from the WooCommerce product page.

How to Set Up Services and Additional Costs for Your Equipment Rental Store

Sometimes, you may want to create additional costs and services for your equipment rental store. For example, you might offer to deliver the equipment for an extra fee.

With that in mind, let’s see how you can set up additional costs and services for your WooCommerce store.

How to Add Additional Costs in WooCommerce

Additional costs are fees that WooCommerce adds to one or more products automatically. This feature is useful if there are different costs associated with different pieces of equipment.

For example, you may need to refuel some products after use, while others might need fresh oil.

By adding these costs in the WordPress dashboard, you can easily apply them to different products. It also provides a single location where you can change the cost.

For example, if petrol gets more expensive, then you can update your Refueling cost once, and this change will be applied across your entire online marketplace or store.

An example of a rentable product with additional costs

As you can see in the image above, additional costs simply appear in the cost breakdown as ‘Additional Costs.’ If you want to give the shopper some more information about these charges, then we recommend creating a service instead.

To register an additional cost, you need to go to WP Swings » Bookings for WooCommerce. Here, simply click on ‘Configuration Settings,’ followed by ‘Additional Costs.’

The Bookings for WooCommerce WordPress plugin

To start, type in a name for the additional cost. This is just for your reference, so you can use anything you want.

After that, you need to type in the slug you want to use for the additional cost.

Adding a new booking cost to an equipment rental store

With that done, you can type in an optional description. This typically won’t appear on your website, but some WooCommerce themes show it.

Next, simply type the cost into the ‘Booking Cost’ field.

Adding booking costs to a party equipment rental or similar product

By default, the additional cost gets added to an order once.

However, you can multiply the additional cost based on the booking duration or how many people plan to use the equipment. To do this, click to activate the ‘Multiply by No. of People’ or ‘Multiply by Duration’ toggles.

Multiply a booking by duration and the number of people

When you are happy with the information you have entered, simply type in ‘Add New Booking Cost.’

To create more additional costs, simply repeat the same process described above.

An example of multiple booking costs on a party supply rental website

With that done, you can add this cost to any WooCommerce product.

Simply open the product for editing, and then scroll to the ‘Additional Costs’ box.

Adding extra costs to an equipment rental in WooCommerce

You can now type in the name of the additional cost.

When the right option shows up, give it a click and then select ‘Add.’

The 'Additional Costs' box in a WooCommerce product

You can click on ‘Update’ or ‘Publish’ to save your changes. Now, when someone rents this equipment, the additional cost will be applied automatically.

How to Create Additional Services in WooCommerce

You can also create additional services. Unlike additional costs, the name of the service will appear in the cost breakdown.

An example of rentable equipment, with additional services

This helps customers understand your extra fees, so we recommend using services for more expensive charges. It’s also a good idea to use services if you need to add multiple charges to an order so that customers can see a detailed cost breakdown.

You can also make services optional, so the customer can choose whether to add them to the order. This allows you to offer premium additional services such as next-day delivery.

To add services to your WooCommerce store, you need to go to WP Swings » Bookings for WooCommerce. Here, click on ‘Configuration Settings,’ followed by ‘Additional Services.’

Creating additional services for customers on an equipment hire or rentable website

You can now type a name for the service into the ‘Name’ field.

This will be shown to customers, so you will want to use something that helps shoppers understand the extra charge.

How to add an optional service to a party supply rental or similar website

After that, you have to type in a slug, an optional description, and how much the service will cost by following the same process described above.

Again, you can choose whether to multiply the fee based on the duration of the booking or the number of people who plan to use the equipment.

How to add a rentable product to WooCommerce

You can also make a service optional.

This means customers can check a box to add the service to their order.

Offering optional services along with your rentable equipment

This gives shoppers more control over how much it costs to rent equipment from your WooCommerce store.

To make a service optional, simply click to enable the ‘If Optional’ toggle.

Making a service optional on an online store

Another option is to make the service ‘hidden.’

Hidden services simply appear on the product page as ‘Service Cost.’

An example of an optional service, created using WooCommerce

To make a service hidden, click to activate the ‘If Hidden’ toggle.

Next, you may want to enable the ‘If has Quantity’ slider. This allows shoppers to add the same service to their order multiple times.

Adding multiple services to a WooCommerce product

After clicking to enable the ‘If has Quantity’ slider, you may want to set a minimum and maximum quantity.

Simply type a number into the ‘Minimum Quantity’ and ‘Maximum Quantity’ fields.

The Bookings for WooCommerce settings

When you are happy with the information you have entered, click on ‘Add New Booking Service.’

To add more services to your online store, simply follow the same process described above.

Multiple bookings services, added to a rentable equipment website

When it’s time to add a service, simply open the product for editing.

Then, just scroll to the ‘Additional Services’ box.

How to add an additional service to a WooCommerce product

You can now type in the name of the additional service you want to add.

When the right option shows up, simply select it and then click on the ‘Add’ button.

How to add services to party equipment or other rentals

With that done, click on ‘Update’ or ‘Publish’ to save your changes.

How to Manage Equipment Rentals on Your WooCommerce Store

After adding equipment to your website, you will need a way to manage your rental bookings.

Every time you get a new booking, you will see a notification in the WordPress toolbar.

A booking notification in the WordPress dashboard

Simply click on this notification to see all your bookings.

You can reach the same screen by going to WooCommerce » Orders.

How to manage rental orders in WooCommerce

To see more information about an order, go ahead and click on it. This takes you to a screen where you can see detailed information about the order and the customer, including their email address and phone number.

You can also change the order status, including canceling or refunding the rental request.

Changing the status of an order on an equipment rental or party supplies website

The Bookings for WooCommerce WordPress plugin also comes with a calendar that shows all your bookings at a glance.

To see this calendar, simply head over to WP Swings » Bookings For WooCommerce. Then, click on the ‘Bookings Calendar’ tab.

An example of a booking calendar for an equipment rental or party supplies rental website

We hope this tutorial helped you learn how to add equipment rentals to your WooCommerce store. You may also want to learn how to create an email newsletter or check out our expert picks for the best live chat software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Equipment Rentals to Your WooCommerce Store first appeared on WPBeginner.

How to Customize Colors on Your WordPress Website

Do you want to customize colors on your WordPress website?

Colors play a vital role in making your website aesthetically pleasing and establishing its brand identity. Luckily, WordPress makes it super easy to customize colors across your entire site.

In this article, we will show you how to easily customize colors on your WordPress website, including background, header, text, and link colors.

Customizing colors on WordPress website

What Is Color Theory?

Before you can start customizing colors on your WordPress website, it is important to understand color theory.

Color theory is the study of colors and how they work together. It helps designers create color combinations that complement each other.

When designing a website, you need to choose colors that look good together. This will make your website look more attractive to your visitors, which can improve user experience and increase engagement.

Different colors can create different emotions and feelings in people, and color theory can help you choose the right combination for your website.

For instance, red is often used to represent food and restaurants. On the other hand, blue is usually used on banking and financial websites.

That is because red can create feelings of warmth, energy, and passion, whereas blue signifies trust, security, and calmness.

Color theory

Apart from complementing colors, you can also use color contrast to draw attention to important areas of your WordPress blog.

This allows you to make your content more readable, establish a strong brand identity, and create a specific mood on the website.

What Are WordPress Themes, and Can You Change Theme Colors?

WordPress themes control how your website looks to the user. A typical WordPress theme is a set of pre-designed templates you install on your website to change its appearance and layout.

Themes make your website more attractive, easier to use, and increase engagement.

Themes

You can also create your own themes from scratch using plugins like SeedProd and the Thrive Theme Builder.

With WordPress, you can easily customize themes and change their background, font, button, and link colors.

However, keep in mind that some themes come with pre-defined color choices, while others offer more flexibility to choose your own.

That being said, let’s see how you can easily customize colors in WordPress.

How to Customize Colors in WordPress

You can customize colors in WordPress using many different methods, including the theme customizer, the full site editor, custom CSS, page builder plugins, and more.

Change Colors Using the Theme Customizer

It is super easy to change colors using the built-in WordPress theme customizer.

First, visit the Appearance » Customize page from the admin sidebar.

Note: If you cannot find the ‘Customize’ tab in your WordPress dashboard, then this means that you are using a block theme. Scroll down to the next section of this tutorial to find out how to change colors in a block theme.

For this tutorial, we will be using the default Twenty Twenty-One theme.

Remember that the theme customizer may look different depending on the theme you are currently using.

Click on the Color and dark mode panel in the theme customizer

For example, the Twenty Twenty-One theme comes with a ‘Colors and Dark Mode’ panel that allows users to select a background color and customize dark mode.

After opening the panel, simply click on the ‘Select Color’ option. This will open up the Color Picker, where you can choose your preferred background color.

Once you are done, don’t forget to click the ‘Publish’ button at the top to save your changes and make them live on your website.

Change the bacground color in the theme customizer

Change Colors in the Full Site Editor

If you are using a block-based theme, then you won’t have access to the theme customizer. However, you can use the full site editor (FSE) to change colors on your website.

First, head to the Appearance » Editor screen from the admin sidebar to launch the full site editor.

Now, you have to click on the ‘Styles’ icon in the top-right corner of the screen.

Click on the Styles icon and choose the Colors panel

This will open the ‘Styles’ column, where you need to click on the ‘Colors’ panel.

You can change the theme’s background, text, link, heading, and button colors from here.

Open Styles panel to save changes

Once you are done, click the ‘Save’ button to store your settings.

Change Colors Using Custom CSS

CSS is a language that you can use to change the visual appearance of your website, including its colors. You can save custom CSS in your theme settings to apply your customizations to your entire site.

However, the custom CSS code will no longer apply if you switch themes on your website or update your existing theme.

That’s why we recommend using the WPCode plugin, which is the best WordPress code snippets plugin on the market. It is the easiest way to add custom CSS code, and it will allow you to safely customize colors on your WordPress website.

First, you will need to install and activate the WPCode plugin. For more instructions, please see our beginner’s guide on how to install a WordPress plugin.

Note: There is also a free version of WPCode that you can use. However, we recommend upgrading to a paid plan to unlock the full potential of the plugin.

Once you have activated WPCode, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.

Simply click the ‘Use snippet’ button under the ‘Add Your Custom Code (New Snippet)’ heading.

Add new snippet

Once you are on the ‘Create Custom Snippet’ page, you can start by typing a name for your code.

After that, just select ‘CSS Snippet’ as the ‘Code Type’ from the dropdown menu.

Choose CSS Snippet as the code type

Next, you must add the custom CSS code in the ‘Code Preview’ box.

For this section, we are adding custom CSS code that changes the text color on the website:

p   { color:#990000;  }
Add CSS code

Once you have done that, scroll down to the ‘Insertion’ section.

Here, you can choose the ‘Auto Insert’ option if you want the code to be executed automatically upon activation.

You can also add a shortcode to specific WordPress pages or posts.

Choose an insertion method

Once you are done, simply scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Finally, you need to click the ‘Save Snippet’ button to apply the CSS code to your website.

Activate and save the CSS Snippet

Change Colors Using SeedProd

You can also customize colors using the SeedProd plugin.

It is the best WordPress page builder on the market that allows you to create themes from scratch without using any code.

First, you need to install and activate the SeedProd plugin. For more details, you can read our beginner’s guide on how to install a WordPress plugin.

Upon activation, head to the SeedProd » Theme Builder page from the WordPress admin sidebar.

From here, click on the ‘Theme Template Kits’ button at the top.

Note: If you want to create your own theme from scratch, then you will need to click on the ‘+ Add New Theme Template’ button instead.

Click the Theme Template Kit button to create a theme

This will take you to the ‘Theme Template Kit Chooser’ page. Here, you can choose from any of the pre-made theme templates offered by SeedProd.

For more details, see our tutorial on how to easily create a WordPress theme without any code.

Choose a theme template

After choosing a theme, you will be redirected to the ‘Theme Templates’ page.

Here, you need to toggle the ‘Enable SeedProd Theme’ switch to ‘Yes’ to activate the theme.

Now, you must click the ‘Edit Design’ link under any theme page to open up the drag-and-drop editor.

Toggle the switch to enable the theme and click on Edit Design link to open editor

Once you are there, click the gear icon at the bottom of the left column.

This will direct you to the ‘Global CSS’ settings.

Click the gear icon to open up the Global CSS page

From here, you can customize the colors of your website background, text, buttons, links, and more.

Once you are happy with your choices, click on the ‘Save’ button to store your settings.

Customize colors on the Global Settings page

How to Change the Background Color in WordPress

All WordPress themes come with a default background color. However, you can easily change it to personalize your website and improve its readability.

If you are using a block theme, then you will have to change the background color using the full site editor.

First, you must head to the Appearance » Editor screen from the admin sidebar.

Once the full site editor has launched, click on the ‘Styles’ icon in the top-right corner of the screen.

After that, simply click on the ‘Colors’ panel to open up additional settings

Click on the Styles icon and choose the Colors panel

In the ‘Colors’ panel, you can now manage the default color of different elements on your website.

Here, you need to click on the ‘Background’ option under the ‘Elements’ section.

Choose the Background option in the Colors panel

Once the ‘Background’ panel has expanded, you can choose your website background color from here.

All WordPress themes offer a number of default website colors that you can choose from.

However, if you want to use a custom color, then you need to click on the Custom Color tool.

This will open up the Color Picker, where you can select a color of your choice.

Choose a background color from the Color Picker

You can also use gradient colors for your website background.

For this, you will first need to switch to the ‘Gradient’ tab at the top.

Next, you can choose a default gradient from the theme or select your own gradient colors with the help of the Color Picker tool.

Create a gradient background color

Once you are done, don’t forget to click on the ‘Save’ button to store your settings.

You can also change your website’s background using the theme customizer, SeedProd, and custom CSS.

For more detailed instructions, you may want to see our guide on how to change the background color in WordPress.

How to Change the Header Color in WordPress

Many WordPress themes come with a built-in header at the top of the page. It usually contains important page links, social icons, CTAs, and more.

The WPBeginner Header

If you are using a block theme, then you can easily customize the WordPress header using the full site editor.

First, you need to visit the Appearance » Editor screen from the admin sidebar to launch the full site editor. Once there, select the ‘Header’ template at the top by double-clicking on it.

From here, simply scroll down to the ‘Color’ section and click on the ‘Background’ option.

Double click the Header block to open up its settings in the right column

This will open a popup where you can choose a default color for your header.

You can also select a custom color by opening the Color Picker tool.

Choose a header color

To customize your header using a color gradient, you need to switch to the ‘Gradient’ tab.

After that, you can choose a default gradient option or customize your own using the Color Picker.

Create a gradient header

Finally, click on the ‘Save’ button to store your settings.

If you want to change the header color using the theme customizer or additional CSS, then you may want to read our beginner’s guide on how to customize your WordPress header.

How to Change the Text Color in WordPress

Changing the text color can help improve the readability of your WordPress blog.

If you are using a block theme, then you will have to change the text color using the full site editor.

You can start by visiting the Appearance » Editor screen from the admin sidebar. This will launch the full site editor, where you must click the ‘Styles’ icon in the top-right corner.

Go to the Colors panel from the full site editor

Next, you need to click on the ‘Colors’ panel to access the additional settings.

Once you are there, go ahead and click on the ‘Text’ option under the ‘Elements’ section.

Click on the text option in the Colors panel

Once the text color settings have opened, you will be able to see a number of text colors under the ‘Default’ section.

Alternatively, you can also use a custom text color by clicking on the Custom Color tool and opening up the Color Picker.

Change text color using color picker

Once you have made your choice, simply click on the ‘Save’ button to store the changes.

Bonus Tip: You can use the WebAIM Contrast Checker tool to check if your background and text color work together. The tool can help you improve text readability on your website.

Check text and background color contrast

To customize text color using CSS, the theme customizer, or SeedProd, you may want to see our guide on how to change the text color in WordPress.

How to Change the Text Selection Color in WordPress

When a visitor selects text on your website, it will show a background color. The default color is blue.

Text selection color

However, sometimes the color may not blend well with your WordPress theme, and you might want to change it.

Adding CSS code to your theme files can easily change the text selection color. However, keep in mind that switching to another theme or updating your current theme will make the CSS code disappear.

That’s why we recommend using the WPCode plugin, which is the best WordPress code snippets plugin on the market.

First, you need to install and activate the WPCode plugin. For more instructions, please see our guide on how to install a WordPress plugin.

Upon activation, head over to the Code Snippets » + Add Snippets page from the admin sidebar.

Then, simply click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ heading.

Add new snippet

Once you are on the ‘Create Custom Snippet’ page, you can start by typing a name for your code snippet.

After that, you must choose ‘CSS Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

Choose CSS Snippet as code type for the text selection color snippet

Now, go ahead and copy and paste the following CSS code into the ‘Code Preview’ box.

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

You can change the text selection color by substituting the hex code next to the ‘background-color’ in the CSS snippet.

Copy and paste the text color selection code snippet

Once you have added the code, scroll down to the ‘Insertion’ section.

Here, you need to choose the ‘Auto Insert’ method to execute the code automatically upon activation.

Choose an insertion method

After that, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active’.

Finally, go ahead and click the ‘Save Snippet’ button to store your changes.

Activate and save the text selection color snippet

Now, you can visit your website to check the text selection color.

You can also change the text selection color using the theme customizer or a plugin. For more details, please see our tutorial on how to change the default text selection color in WordPress.

Text selection color preview

You can easily change the link color in WordPress using the full site editor or custom CSS.

If you are using a block theme, then head to the Appearance » Editor screen from the admin sidebar.

Once the full site editor has launched, you must click on the ‘Styles’ icon in the top-right corner.

Go to the Colors panel from the full site editor

Next, click on the ‘Colors’ panel in the right column to see additional settings.

Once you are there, simply click on the ‘Links’ panel.

Click on the Links panel

This will launch the link color settings, and you will see multiple default link colors displayed in the right column.

However, you can also use a custom link color by clicking on the Custom Color tool to open the Color Picker.

Use the color picker for link color

You can also change the hover link color using the FSE. This means the link color will change when someone hovers their mouse over it.

First, you will need to switch to the ‘Hover’ tab from the top.

Once there, you can choose a default or custom color to change the hover link color.

Change the hover link color

Finally, click on the ‘Save’ button to store your settings.

For more detailed instructions, you may want to see our guide on how to change the link color in WordPress.

How to Change the Admin Color Scheme in WordPress

You can also change the admin color scheme in WordPress if you want. This method can be helpful if you want the admin dashboard to match your website’s branding or use your favorite colors.

However, keep in mind that changing the color scheme of the WordPress dashboard will not affect the visible part of your website.

To change the admin color scheme, simply visit the Users » Profile page from the admin sidebar.

You will see multiple color schemes next to the ‘Admin Color Scheme’ option.

Choose the one you prefer and then click the ‘Update Profile’ button at the bottom of the page to save your changes.

Change the color scheme of the admin dashboard

For more detailed instructions, please see our beginner’s guide on how to change the admin color scheme in WordPress.

We hope this article helped you learn how to customize colors on your WordPress website. You may also want to see our ultimate WordPress SEO guide and our article on how to choose a perfect color scheme for your WordPress website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Customize Colors on Your WordPress Website first appeared on WPBeginner.

WooCommerce vs. BigCommerce

WooCommerce and BigCommerce are both extremely popular ecommerce platforms. There’s one key difference between them, though: WooCommerce is a WordPress plugin for existing WP sites. BigCommerce, on the other hand, is a full-fledged site creator that helps you build an ecommerce website from the ground up. 

If you’re not sure which one to pick for your ecommerce business, this comparison guide will give you the information you need to decide. 

Brand logos for WooCommerce vs. BigCommerce.

WooCommerce and BigCommerce Compared to the Best Ecommerce Platforms

While BigCommerce made our list of the best ecommerce platforms, WooCommerce did not. But our favorite ecommerce platform for most people is Shopify because it’s powerful, versatile, and easy to use. Try Shopify for free for three days and pay just $1 a month for the next three months.

  • Shopify – Best all-around ecommerce platform
  • Wix – Best for stores with fewer than 100 products
  • BigCommerce – Best for large inventories
  • Squarespace – Best for cornering a niche market
  • Hostinger – Best price for a full online store

Take a closer look at each of these favorites in our list of the best ecommerce platforms

WooCommerce vs. BigCommerce High-Level Comparison

While BigCommerce is an ecommerce website builder, WooCommerce is a WordPress plugin. Technically, WooCommerce is free. But you can’t use it unless you plan to set up a WordPress website—or have one already. Which, of course, costs some money when you factor in the domain name and web hosting required to get that WordPress site live and accessible to visitors. 

WooCommerce also sports a steeper learning curve than BigCommerce, but it’s ideal for businesses that already know, love, and use WordPress. 

On that note, BigCommerce is the better choice for beginners. Its tidy packages include website templates, prebuilt online storefronts, included payment processors, and 24/7 support. It also allows you to integrate sales channels like Amazon, Walmart, eBay, and Facebook with ease. You can do the same (and, honestly, more) with WordPress and WooCommerce, but it can be a lot more work to integrate other channels that way. You’ll be able to manage every channel from within your BigCommerce dashboard, which is wonderfully convenient. 

Products and Services Offered By WooCommerce and BigCommerce

WooCommerce is an open-source ecommerce platform offered as a WordPress plugin. You can either add the WooCommerce plugin to an existing WordPress site or build a new WordPress website through WooCommerce. 

A screenshot that shows a WooCommerce landing page with a purple button and two website examples.
When you click WooCommerce’s Start a new Store button, you’ll be funneled through WordPress to set up a new website with WooCommerce already plugged in.

WooCommerce offers unmatched flexibility. You can sell unlimited products, choose from the templates offered or build your own web store, and tap into hundreds of WooCommerce extensions and integrations for payments, marketing, fulfillment, and more, including QuickBooks, Stripe, USPS, UPS, MailChimp, and Klarna. Or, connect via Zapier to integrate with over 5,000 other apps. WooCommerce is perfect for those who need lots of customization options.

Unlike WooCommerce, BigCommerce is an all-in-one ecommerce website builder. Hosting is included with your BigCommerce plan, plus you’ll get point-of-sale and payment processing software. Connect your BigCommerce site to major marketplaces like Amazon and Facebook and choose from over 800 third-party integrations. It’s a unified solution if you don’t want to wrangle a bunch of WordPress plugins and connections.

An image of a loudspeaker next to text that advertises selling on Instagram, Facebook, and Pinterest.
BigCommerce easily brings your products to the most popular social media sites.

BigCommerce is the better option of the two for beginners and smaller businesses who don’t want to spend a lot of time managing the health of their web store. But it can also handle enterprise storefronts, too, on its higher-octane (and higher priced) packages. You can read our detailed BigCommerce review to learn even more about what this ecommerce platform can handle. 

Company Health and Stability of WooCommerce and BigCommerce

Both WooCommerce and BigCommerce enjoy loyal followings, and that isn’t likely to change. 

The privately held WordPress parent company, Automattic, acquired WooCommerce in 2015. WordPress was founded in 2003 by Matt Mullenweg and Mike Little. Mullenweg then founded Automattic in 2005. So, WooCommerce will be staying put as one of WordPress’ preferred ecommerce platforms for the foreseeable future.

Founded in 2009, BigCommerce is publicly traded under the ticker symbol, BIGC. Stock prices have been dropping steadily over the past five years, however, likely due to an increase in competition. But it’s still a highly rated SaaS product, and its community forum is bustling with activity. 

WooCommerce vs. BigCommerce Pricing Comparison

WooCommerce and BigCommerce approach pricing differently since the former is an extension of WordPress (a free platform in itself) and the latter is a standalone, all-in-one ecommerce site builder and solution.

Since it’s a bit tough to just compare their costs apples-to-apples, we’ll break down the nuances of pricing and associated costs in the sections below.

Pricing Structure of WooCommerce and BigCommerce

WooCommerce pricing is far from simple. If you don’t already have a WordPress site, you’ll pay between $25 and $70 per month for WooExpress. Or you can get and build a free WordPress site, then install the free WooCommerce plugin and pay for extensions or upgrades as needed. That’s generally what makes pricing so unpredictable—extensions run a wide gamut from several bucks to several hundred dollars per year.

BigCommerce has a more familiar and digestible pricing structure. Choose from one of three Essentials plans—priced at $29, $79, and $299 per month—with a clear breakdown of what you get with each plan. Or, you can go the enterprise route and speak with a sales rep for a fully custom package. 

Cost Comparison of WooCommerce and BigCommerce

WooCommerce is ideal for companies who want granular control over their ecommerce storefronts. These companies will appreciate being able to cherry-pick WooCommerce extensions and integrations to cobble together an effective solution at a reasonable total cost. That being said, some storefronts that want advanced features may not love how pricey ecommerce-focused WordPress extensions can get. 

BigCommerce is far better (and more predictable) for smaller businesses that need to control their costs while still getting everything they need for their customers’ online shopping experience. There are no surprise charges and few added fees. Plans clearly list the features you’re getting and higher-priced plans offer good scalability if you outgrow their entry-level package. You get what you pay for and that’s that.

Trials and Guarantees for WooCommerce and BigCommerce

Both WooCommerce and BigCommerce offer free or low-cost trials to help you decide if you like what you see. 

WooCommerce doesn’t offer a free trial because its basic plugin is already free to use on any WordPress site. Once you have WooCommerce integrated with your website, you can select extensions free for 30 days. These include tools like WooCommerce Bookings for appointment scheduling and features for utilizing gift cards and rewards programs on your web store. Be advised, though, that some of these plugins can run you as much as $250 per year, which adds up quickly if you use more than one. 

You can try out the BigCommerce platform freely on a 15-day trial period with no credit card required. After that, plans begin at $29 a month when paying annually ($39 when opting for month-to-month billing).

WooCommerce vs. BigCommerce Core Criteria Comparison

When we researched the best ecommerce platforms on the market for our top list, we analyzed each platform across six core criteria: 

  • Visual website builder: Is there an easy, code-free way to set up a new online store?
  • Inventory management: Can you categorize, tag, and stock as many items as you want? 
  • Shopping carts: Can customers easily add products to a cart and check out when they’re ready to purchase?
  • Payment gateways: Is there support for a secure payment portal and multiple payment options for customers?
  • Shipping tools: What shipping and order fulfillment options are available to you and can the platform unlock any discounts for shipping providers? 
  • SEO and marketing tools: How easy is it to promote your online store from within your ecommerce platform’s dashboard?

Let’s see how well WooCommerce and BigCommerce stack up on these same criteria. 

Visual Website Builder – BigCommerce Wins

A screenshot of the Ben & Jerry’s Gift Shop home page with colorful branded shirts, ice cream scoops, and cups.
Ben & Jerry’s used BigCommerce to build its online gift shop.

Unless your company is large enough to employ a team of developers who can build and manage your ecommerce storefront, you’ll want a no-code website builder. It’s fine if the builder also comes with coding capabilities, but these shouldn’t be the focus. 

BigCommerce won on this criteria point because its drag-and-drop website builder is so easy to use. It’s built right into the BigCommerce package—which can’t be said for WooCommerce. 

WooCommerce does have a drag-and-drop web builder for WordPress, but once you pick a WordPress theme, you’re locked in. The WooCommerce web builder won’t carry the storefront you’ve designed onto a new theme if you change your mind, leaving you to start over from scratch if you want to refresh the look and feel of your online store. 

Inventory Management Tools – Tie

A screenshot showing eight different Ben & Jerry’s products, including t-shirts, a onesie, an ice cream scoop, and a pint lock.
Ben & Jerry’s inventory and product options on its BigCommerce storefront.

Inventory management is one of the most important tools you’ll need in an ecommerce platform. You should be able to track as many items as you want and easily organize your stock. Low-stock alerts are a must-have feature, as well. 

Both WooCommerce and BigCommerce offer powerful, synchronized inventory management tools. With WooCommerce, you can pick exactly the inventory management extension you need for your business from many options. That gives you full control over unlocking advanced features you think will help your operation in the long run Or, install the free Stock Manager plugin to start for basic management and upgrade as needed. 

The plus side to BigCommerce’s inventory management is that it’s included with everything else in any plan you choose. You won’t need to shop around for a good fit—unless you want to go with a plugin that enhances the inventory management process and improves upon what BigCommerce’s native tool can do. 

WooCommerce and BigCommerce alike help you manage unlimited inventory across multiple sales channels, locations, and storefronts. 

Shopping Carts – BigCommerce Wins

A screenshot of BigCommerce’s shopping cart features landing page showing a person shopping on their phone.
BigCommerce helps you make shopping easy for your customers.

These days, customers take shopping carts for granted. They expect high-quality carts are easy to find on any page and seamlessly take them through the checkout process. 

Both BigCommerce and WooCommerce come with excellent shopping cart capabilities. WooCommerce, again, relies on extensions for this feature, meaning you’ll have to wade through a lot of different choices to find an extension or plugin that fits your needs and requirements. The big problem is variability in extension quality. You may waste time on testing out some less-than-perfect solutions. 

BigCommerce’s native shopping cart feature is fantastic, offering full capability for mobile shopping, abandoned cart recovery, and more. Plus, you can sell more products with one-click buying through integrations with Apple Pay, Amazon Pay, and PayPal One Touch. There’s not much to improve on here, so BigCommerce comes out ahead by delivering a built-in solution as good as just about any WordPress shopping cart plugin you can find.

Payment Gateways – BigCommerce Wins

A screenshot showing the beginning of an alphabetized list of payment gateways on BigCommerce.
BigCommerce offers an impressive suite of integrated payment gateways.

Payment gateways make it easy for customers to make secure purchases on your ecommerce storefront. And, when you offer site visitors more ways for them to pay (such as PayPal, Klarna, Apple Pay, and others), you’re likely to convert more curious browsers and shoppers into real customers. 

That’s why BigCommerce won this criteria point. It offers 50 payment gateway integrations that support purchases in more than a hundred countries. That breadth of payment options baked right into the platform closes a lot of gaps that could otherwise prevent international shoppers or those with intense payment preferences from converting. 

I think you’ll know what I’m going to say about WooCommerce here. It forces you to comb through a vast array of extensions to find payment gateways that support the preferences of your customers and work with the rest of your online store. This can be time-consuming, clunky, and expensive if you’re not careful. But more than that, it requires serious attention in terms of making sure these WordPress extensions are always updated to prevent security vulnerabilities from affecting your site and your customers’ sensitive data.  

Shipping Tools – BigCommerce Wins

A screenshot showing an example of BigCommerce shipping choices at checkout.
BigCommerce’s shipping tools are built right into the platform, but you can add integrations as needed.

Fast, reliable shipping allows you to make your customers happy, easily handle returns, and keep track of what’s left in your inventory on the fly. 

As with most essential features in BigCommerce, shipping is built right in. All plans also include real-time rates for major fulfillment providers like UPS, FedEx, and even international providers like Royal Mail. Select plans also help you with label printing and other aspects of the fulfillment process.

WooCommerce offers more freedom in terms of integrating with shipping providers, but these WooCommerce extensions in particular tend to be mighty expensive. You’ll pay $99 per year to implement each of the extensions for USPS, UPS, and FedEx. That same rate applies individually to international or alternative shipping providers, like Canada Post or Fulfillment by Amazon. 

So, just to match BigCommerce’s built-in fulfillment solutions, you’re looking at a minimum spend of $594 per year on WooCommerce extensions just for shipping.

SEO and Marketing Tools – WooCommerce Wins

Screenshot of image editing in WordPress with an image of two shirts and one hat and another image of one shirt.
Since WooCommerce is powered by WordPress, an SEO powerhouse, it comes well stocked with SEO and marketing tools.

Any ecommerce platform worth its salt needs SEO and marketing tools to help you promote your site and bring in searchers. How else will your customers find you? 

WooCommerce has a key advantage here. Its website platform, WordPress, consistently ranks as the top blogging platform in the world. With WordPress’s SEO and blogging tools, you’re already halfway to having everything you need to shout your WooCommerce storefront to the world without paying a dime. Then, you can enhance accordingly through free or paid extensions for tools like MailChimp, Trustpilot Reviews, Etsy, Facebook, Google Customer Reviews, and many more. 

Comparing WooCommerce and BigCommerce’s available marketing extensions and plugins to one another, WooCommerce clearly came out on top. It offers 112 marketing extensions compared to the 60 you can tap into on BigCommerce. You’ll likely get more capability on a BigCommerce Enterprise plan. But, when considering packages that are reasonable for a small or midsize business, the number of options available to you on WooCommerce gives it the edge

Final Verdict – BigCommerce Wins

BigCommerce is our winning ecommerce platform because it has so many essential and advanced features baked into the platform without the need to cobble together extensions to achieve a solution. With BigCommerce, setting up a new storefront from the ground up has never been easier. WooCommerce falls short on too many of our criteria points to come out as the winner, but it’s still an excellent choice (and, often, the preferable one to BigCommerce) for sellers who need granular control of their storefront’s features and functionality.

Types of Blogs Starter Guide: Learn the Basics

We recommend starting a blog using WordPress with Hostinger as it’s easy to tailor to your needs. Get started today for $2.59 per month.

Not all blogs set out to accomplish the same things. And around a third of bloggers don’t make any money. That’s why you must consider what type of blog to start carefully. Choosing a blog niche that has an audience and fits your goals is the crucial first step to success. In this post, you’ll learn what you need to know about different blog types and which kinds of blogs are most popular and most profitable according to data.

The 3 Best Blogging Platforms for Creating Different Types of Blogs

We used our wealth of experience creating websites and prior research to identify the top blogging platforms for creating any type of blog. Our top three picks are versatile enough to start you on the right foot, no matter what your goals for your blog are:

Brand logos for WordPress, Wix, and Squarespace.

What Types of Blogs Are There?

Blog creators have a wide array of goals and objectives for their content, but there are four main categories of blogs in general. Let’s discuss each of those in a quick overview:

1. Personal blogs – These are journal-like blogs in which writers document their thoughts, opinions, tastes, or slices of daily life. It’s the way blogging started out on the early internet. Sometimes, bloggers keep their personal blogs private or only share them with friends and family, but nowadays more and more people use them as a sounding board, a place to share advice and experiences, or a way of building a community around a topic or shared interest. 

On Rising Shining, a mom documents her family life and experiences as a working mother:

Example of a personal blog with a post that says Hello, February!
Create a personal blog if you want to share your own stories and experiences.

Personal blogs don’t have to be non-money making ventures. You can utilize affiliate marketing to monetize your soapbox or tie some blog posts to your online store or personal business when it feels appropriate. 

2. Business blogging – Companies deploy blogs on their websites for a variety of reasons, from showcasing their industry expertise and raising awareness about their brand to generating leads for their sales funnel and building customer loyalty through content that promotes their brand values or growth.

Nike’s blog, for example, engages the sporting and fitness community with inspiring stories and tips that are relevant to their many product lines:

Business blog with two posts.
Use a business blog to build a community around your product or service and attract more business.

Business blogs are usually a section of a larger company website, but sometimes they’re standalone sites that focus on a specific product, service, subset of their customer base, or industry-related topic. Their content isn’t always fixated on driving sales, but it always serves to help the company’s sustainability and connection with customers new and old.

3. Personal brand blogging – On a similar note, these blogs are for industry professionals or solopreneurs rather than entire companies. 

Pros use a blog to raise their profile as thought leaders or influencers, which can in turn support their company at large. Or, they use the same approach  to sell their own services as a consultant or digital products like ebooks and online courses.

Entrepreneur Tim Ferriss’s blog is a good example of using a blog to promote your personal brand:

Business & Entrepreneurship blog with 5 posts.
Set up a blog for your personal brand to show how you got to where you are today.

Personal brand blogging is becoming more and more prominent as side hustles become a more common aspect of people’s careers and work. It’s also a great way to capitalize on social media traction and bring followers to your entrepreneurial ventures. 

4. Niche blogs – Niche bloggers focus primarily or exclusively on one subject. That can be anything from broad interests like books and travel to hyperspecific subject matter such as how to use AI for content creation or testing out fitness gadgets. 

People often niche down in order to stand out from the crowd of other blogs and attract a loyal, dedicated audience that they can monetize in one way or another.

Expert Vagabond is one of the top travel blogs with advice, tips, and guides on various locations around the world:

Landing page for a personal blog with a picture of a man on a mountain.
Hone in on a particular niche or subject matter to attract readers that share the same passions.

Niche blogs can be a subset of any of the three previous blog types. You can focus on a niche for blogging about your personal feelings, attracting a specific type of customer to your business, or strongly associate your personal brand with the niche topic. 

In this era, finding a niche is necessary. There is so much content already out there on the internet about just about any broad topic, so niching down is important for gaining some traction and attracting an audience in the first place.

Since this is an important qualification to consider when starting a blog, we’ll talk about some of the most popular niches in a little bit. 

Why Start A Blog?

We’ve written extensively on how to start a blog successfully. If you want a good overview of the steps to take in order to get a blog off the ground, read our guide on how to start a blog

That takes care of the “how”, but what about the “why?” There are more reasons to start a blog than simply trying it out as a new hobby:

  • Make blogging your career – Quit the daily grind and work for yourself or support your income with a new revenue stream. There are multiple ways to monetize a blog, from selling advertising space to promoting products or affiliates.
  • Promote your business or cause Use your blog posts to convince visitors that your service or product is worthwhile and a solution to their problems. Or, get them on your team in terms of trying to enact positive change.
  • Become an influencer or thought leader A blog is a place to start growing a following as you continue to raise your profile and establish your expertise on a topic. Your blog can be a living record of your authority that can demonstrate your bonafides better than a resume.
  • It’s easier than you think Nowadays, blogging platforms provide useful tools, add-ons, and templates out of the box, making it easy for anybody to start their own blog and just focus on the act of writing and sharing one’s thoughts with the world.

The 13 Most Popular Blog Subjects

It’s important to look at the most popular blog niches when choosing what type of blog to create. You’ll not only gain inspiration if you don’t know where to start but also learn what types of blogs have the best potential for gaining a large readership.

According to a recent RankIQ study, here are the types of blogs that get the most traffic:

1. Food Some food bloggers share recipes and step-by-step cooking tutorials with video. Many focus on a specific cuisine or diet. You’ll also find some blogs that do restaurant and dish reviews, though those are usually quite localized in scope.

2. Lifestyle/moms – So-called mommy bloggers are incredibly popular and dad blogs have grown in recent years, too. You’ll find parenting tips and personal insights aplenty, along with product recommendations and project ideas for the kids.

3. Travel – Travel bloggers create country or city guides, even whole itineraries for other people’s trips to new places. There are lots of niches within this topic based on certain types of travel, such as solo adventures, luxury travel, or digital nomadism.

4. Arts and crafts – Arts and crafts bloggers create step-by-step guides for crafts projects, tutorials for getting started on a new hobby, and tips for sourcing materials. They can often be seasonal or based on a theme such as Halloween or Christmas crafts. You’ll find lists of ideas for inspiration and resources for readers to utilize to further their crafting ability.

5. Outdoors – Outdoors bloggers cover a range of sub-niches. You’ll see blogs focused just on specific nature activities like fishing, camping, hiking, and survival. They love to create gear reviews and offer accounts of their own outdoors experiences. Plus, you’ll see a lot of excellent photography incorporated into the blog content.

6. Beauty and fashion – Beauty and fashion bloggers are one of the biggest subsets of influencers on the internet. They set trends, review many products, and create tutorials on makeup, beauty routines, outfit coordination, and even finding unique looks. 

7. Personal finance – This evergreen subject matter often covers topics like saving money, getting out of debt, building credit, preparing for retirement, and making smart investments. You’ll find expert advice and recommendations for credit cards, bank accounts, and financial services.

8. Homeschooling – Like parenting blogs, you see a lot of personal insights and stories here. Homeschool bloggers also share a bunch of resources for others to use such as curriculum ideas, study subject templates, and workbooks. 

9. Pets – Many pet bloggers focus on one type of pet and it can even get more niche by zooming in on particular breeds. They create blogs with lots of advice and tips for pet care, health, and entertainment. You’ll often find product recommendations for toys, food, supplements, and subscription services.

10. Gardening – Some gardening bloggers share landscaping and home design guides and inspiration. Others are all about plant and flower care, garden maintenance, and small-scale subsistence farming. 

11. Decorating – Decorating bloggers cover interior design trends and how to implement them in your own home. You’ll find room or theme-specific guides, tips for remodeling and renovation, and help with matching aesthetics to readers’ personalities. They create lots of shopping guides and product recommendation lists.

12. Health and fitness – Many health and fitness bloggers create nutrition guides and share healthy recipes as a subset of food blogging. But these blogs tend to go beyond food and cover exercise tutorials, workout routines, and tips for maintaining a healthy lifestyle overall. You’ll also find a ton of motivation and inspirational stories.

13. Tech – Tech bloggers review electronics, software, and the like, plus give their thoughts on emerging technology and trends. Here you’ll find lots of guides walking readers through how to use products or get the most out of them. In many cases, tech blogs are directed at businesses and industry professionals, but they can just as easily speak to end users and consumers.

The 4 Highest-Paying Blog Niches

Finding a profitable blog niche is likely high on your agenda. RankIQ also published a study that revealed the highest-paying blog niches based on the median monthly income for bloggers in each category.

The topics may not surprise you, but the monthly revenue might:

  • Food blogs averaged $9,169 in monthly income, and are the niche with the highest percentage of blogs that get over 50,000 monthly visitors
  • Personal finance blogs weren’t far behind with a monthly median of $9,100
  • Lifestyle and mommy blogging is the most popular topic for new blogs and averaged $5,174 in monthly revenue
  • Travel blogging is the fourth-most lucrative niche at a monthly median of $5,000

Now, just because these four blog niches are able to deliver lofty, four-digit monthly income numbers doesn’t mean you should go chasing them. 

You should choose a niche in which you can become the go-to expert for your audience, like gluten-free cooking or personal finance budgeting for students. It’s too difficult to compete with all the other blogs out there as a generalist without unique expertise on a subject.

Though some blog categories tend to make more money than others, remember that you can make money in any blog niche as long as your approach is strategic.

Digital products may be popular in the niche you choose. Online courses, in particular, are high-ticket items when it comes to monetizing a blog. You can charge hundreds of dollars for a high-value course. 

Search an online course provider such as Udemy to see how many people actually sign up for courses in your category.

For example, hundreds of students have paid for gluten-free baking classes:

Screenshot of a class titled "The Gluten Free Sourdough Masterclass."
Online course networks show you how many students have previously purchased a course.

Set up a course on anything from plant care to drawing. Artist/blogger Nancy Hillis, for example, offers a range of courses and an advanced masterclass:

Online course showing three steps that include Start, Experiment, and Evolve.
Online courses are extremely lucrative for bloggers.

Or, you can find related products or services you’d be able to promote and earn a commission from by tapping into an affiliate marketplace

For example, a quick search on ShareASale for the keyword “gluten free” shows a bunch of relevant merchants whose affiliate programs your nutrition or health blog could join.

Affiliate marketplace screenshot showing two products.
Use affiliate marketplaces as part of your research when validating your blog idea.

Another way to monetize any blog niche effectively is through premium memberships. Just be sure to offer enough value that users would be willing to pay to be a part of the community. 

For example, you might be effective enough at presenting yourself as an expert in your niche that people are willing to pay for extra content or a newsletter. Or, you might grow a thriving discussion board that users would pay to gain access to.

Furthermore, when thinking about what type of blog to start, consider putting a business-to-business (B2B) angle on your blog. For example, you might focus on executive travel over consumer travel, or start a blog aimed at catering companies rather than home cooks.

Software, products, and services aimed at businesses tend to offer higher commissions, and therefore offer a higher potential income for you. Getting two businesses to make a purchase might make you the same amount of affiliate income as getting 100 consumers to purchase. 

Whatever you choose, ensure your narrower niche will be profitable through research. Look into monetization opportunities of all kinds. This kind of research establishes whether there’s a paying audience in your chosen niche that you can tailor your content to and make money from.

The 6 Proven Types of Blog Content

The majority of blog content falls into well-established formats. These are already popular and familiar to readers, so they’re most likely to perform well and show up high in search results. 

You don’t need to reinvent the wheel, so stick to these popular types of blog content, at least while you’re starting out:

  • “How to” guides are comprehensive tutorials or explainers on a given topic that help readers accomplish a specific goal.
  • List posts deliver power rankings or sets of tips, ideas, examples, or methods relevant to a set topic.
  • Reviews can entail detailed assessments of a product, service, or experience.
  • Resource libraries are specific list posts that deliver a helpful collection of links, vendors, or materials for readers to use themselves.
  • Industry news and trends are timely, up-to-date stories and reporting that is relevant to your blog niche and the audience you’re targeting.
  • Case studies or personal accounts can cover first-hand knowledge, inspirational or aspirational stories, or deep dives into professional endeavors related to your industry.

Among these options, you must find the types of blog content that resonate best with your audience. Do this by looking at your competitors’ top posts or the blogs that inspired you to make one of your own. See what their audiences already engage with and take that as guidance for the content types to start with.

After you’ve published some, monitor the data related to your posts as you grow. Find your own top-performing pages by analyzing metrics such as the number of views and time spent on the page and take note of any post types that are more successful than others. 

Semrush page showing top pages and results.
Semrush helps you find your top-performing pages so you can create data-driven content.

This removes guesswork to show you precisely what types of blog content your audience wants to see and gives you a roadmap for future content creation.

Final Thoughts About Types of Blogs

You may want to start a blog to leave the nine-to-five and become an influential online figure. Or, you may just want to create a digital soapbox that occasionally earns you a bit of extra cash. 

Either way, you must think carefully about the type of blog you want to start. To ensure you choose the right type of blog, you need a solid understanding of what types of blogs perform well and make the most profit. And you have to put in the research to establish whether there’s a paying audience for what you intend to do and consider the best monetization strategies.

We recommend using WordPress with Hostinger when you’re ready to set up your blog site. Then, figure out what topics you will blog about and what types of blog content you will create.

How To Format a Blog Post in 6 Simple Steps

We recommend WordPress with Hostinger for most people because it’s easy to set up and it’s easy for beginners to use. Get started with Hostinger today for just $2.99 per month.

Formatting a blog post is easy enough to do. But when you’re trying to piece together a lot of information from across the internet and other sources, it can feel a lot more complicated than it is. In this guide, we’re breaking down the best way to format any blog post in six simple steps, so you can confidently write posts that are optimized for search and easy for your visitors to read through. 

How to Format a Blog Post in 6 Simple Steps

The 3 Best Blogging Platforms for Formatting a Blog Post

When you’re formatting a blog post, it helps a lot if you’re already using a good blogging platform. It’s even better if that platform has an easy-to-use interface, drafting features, and access to plugins for checking SEO-approved formatting, like Yoast. 

Here are our favorite blogging platforms from the many options available to you: 

To find out the pros and cons of each platform in detail and more information about blogging, read our full post reviewing the best blogging platforms and blog sites.

Format a Blog Post in 6 Easy Steps

We’ve broken down the process of properly formatting a blog post into six simple steps. Follow our guide and your posts will be formatted well for SEO and general readability every time. 

  1. Get Started with Hostinger 
  2. Do SEO Keyword Research 
  3. Write Your Title 
  4. Write Your Headings 
  5. Finalize Your Outline 
  6. Add Images 

For this tutorial, we’ll be using WordPress as our blogging platform, as it’s the most popular choice on the market (and likely to be what you’re already using). Best of all, Hostinger gives you an easy path to taking care of web hosting on the cheap while also getting you up and running on WordPress if you haven’t set up your blog already.  You can get started with Hostinger today for just $2.99 per month.

Step 1: Get Started with Hostinger 

Before you actually format a blog post, it’s a good idea to get signed up with a blogging platform so you have somewhere to post your content and you can access some of the tools in this guide. 

Since we’ve oriented this guide around using WordPress, let’s show you how to get that set up through our favorite WordPress hosting provider, Hostinger.

Head over to Hostinger’s home page, go to Hosting in the top menu, then click WordPress Hosting

Menu with arrow demonstrating Hostinger offers optimized solutions for WordPress.
Hostinger with Word Press offers a range of feature rich and affordable plans to new users.

Scroll down until you find the list of plans, then choose the best one for you. I would recommend starting on the WordPress Starter plan because you get a free domain and a lot of really versatile features, plus you can always upgrade in the future. 

Three pricing plans from WordPress.
By choosing the WordPress Starter plan, you can benefit from a free domain name.

Once you’ve determined your plan, click Add to cart

You’ll then need to select your hosting term period. The longer your plan’s commitment, the lower the monthly rate will be. Just keep in mind that you’ll have to pay the total upfront. That means if you opt for a three-year commitment at $2.99, you’ll pay $107.64 for your hosting plan at checkout. 

Four plans for hosting with various time periods for renewal.
By signing up for a longer plan, you can a discount on most of Hostinger’s plans.

For new bloggers, 12 months is a good place to start. That way, you’re not committed to two more years if you abandon this blogging project after one year, but you have enough time to both get value from the hosting plan price and determine success. Fortunately, at the time of this writing, Hostinger’s monthly rate for WordPress hosting stays the same whether you choose a one, two, or three-year contract. 

From there, you just need to create your account by filling in your details, then enter your payment information to finish checkout. 

Once you’ve completed the purchase, you can then go to your dashboard to view your new account. This will come with a free domain that we’ll choose later and WordPress integrated automatically into your new site. 

Step 2: Do SEO Keyword Research 

SEO consideration should be a big part of your blog content planning in general. 

If you want your post to rank on Google, you’ll need to include SEO keywords in your title, intro, headings, and within your text, so doing some research before you start writing your post will really help you identify what types of headings you’ll need to use and how you’ll structure your post. 

SEO research can be a little bit complicated, so we’re not going to break it down in depth in this post (you can read our detailed SEO guide if you need help), but there are lots of free tools that can help you identify words in your niche that are high in search volume but low in traffic. 

I’d recommend using either Ubersuggest or Semrush’s free version if you can’t afford a paid subscription to an SEO tool. There’s also a tool called Yoast SEO that is extremely useful for editing and placing SEO keywords. It’s a plugin that you can add to WordPress, and when you upload your blog post as a draft, it can scan the post and let you know how and where your SEO can be improved. 

Yoast SEO tool being shown to improve the chances of ranking on Google.
The Yoast SEO tool can help you plan your SEO in posts and identify areas for improvement to boost your chances of getting ranked on Google.

This includes things like telling you if you have used your keyword enough times (or too much) in the content, if your headings are using the right words, and how to structure certain aspects of your language to improve visibility in search results. 

This is one of the reasons I suggest you get signed up with Hostinger with WordPress before you format your blog post, because you’ll get access to Yoast at no extra charge as part of your Hostinger WordPress hosting plan. 

Step 3: Write Your Title 

The first thing your readers will see will be your blog post title. 

Now, this may be a little controversial. Although I’m including this as the third step in this guide, you can honestly write your headline at any point, including as the last step. Sometimes, it helps to get a clear view of your blog post as a whole before settling on a headline.

Whenever you choose to tackle this step, your headline should be fewer than 60 characters long and needs to be relevant to the post while hinting at the value the reader will get from reading. A good way to do this is to use rhetorical questions or to use a headline with numbers that teases a list in the post. For example: 

  • Is Natural Deodorant a Scam? 
  • The 5 Fastest Ways to Cook a Potato

Rhetorical questions pique curiosity and cause readers to open and read the blog post to find the answer. With lists, people like numbers because they are comforting and definitive and lists are easy to read. 

Studies have found that odd numbers in headlines also get better results and click-through rates, so if you can create a list with an odd number, you’ll boost your chances of writing a great headline. 

Example WordPress blog post from Quick Sprout showing the benefit of having numbers in a title.
Titles that have numbers, lists, or questions can help you attract readers for your blog post.

Step 4: Write Your Headings 

The key markers for your post that will help readers navigate the content and plan which sections will be valuable to them are headings and subheadings. 

A good example of headings in this very post is each numbered step. You can clearly see what each section is going to be about, which makes it easy for you to follow the guide and also come back to a specific section if needed. 

Your headings should ideally use your SEO keywords, and you want them to be concise and to the point. 

A lot of the time, it also will make sense to create a table of contents if your post is long, and you can use your headings to structure it (and link to the relevant sections in the post). 

That can help guide your thinking about the post’s overall structure and potential headings. What would make sense if you saw it in a table of contents? What is going to clearly tell the reader what each section is about? 

Blog post with arrows to the headings that are simple and easy to follow.
Headings on blog posts should be simple and easy to follow, and should be clear enough to add to a contents table.

For main headings, keep them high level. You don’t want to create a heading for every single little thing. Instead, you want your main headings (usually formatted as H2 headings in word processors like Google Docs and blog post editors in platforms like WordPress) to feel like chapter titles. 

Then, for smaller breakdowns within a section, you can use H3 headings, known as subheadings. This just makes it easier for posts to be scanned by your audience and helps them move through the post easily, especially if you’re covering a lot of unique aspects of a topic, tips, or other items. 

Step 5: Finalize Your Outline 

Once you have your headings planned, you can start fleshing out your outline. Before your first heading, you should write an intro to the post. This should be short, between one or two paragraphs. The first sentence needs to grab the reader’s attention like your title does and introduce them to the rest of the post. 

After each heading, write your main body content for each section. Try to keep this digestible and easy to scan—between 3 or 4 paragraphs is a good rule. Break up large stretches of text with things like bullet points or images (more on this in a bit) when you can. Don’t go overboard with this but remember that it can be tough for people to just read a wall of text, so breaking things up visually with subheadings, bullet points, visual elements, or numbered lists can help.

Arrow pointing to the benefit of adding bullet points to a blog post.
Adding bullet points to a blog post can help break up text and make it easier for readers to follow the text.

At the end of your blog post, you should write a short conclusion, summarizing the post and giving the reader a call-to-action or a parting thought that closes the post with a flourish. Some posts won’t include this and you don’t have to either, but it’s a good opportunity to include relevant links to your other blog posts or to invite readers to do something. 

For example, if you’re writing a blog post about the pros and cons of hiring your moving vehicle rental company, you might end the post with a quick summary and then an invitation to book a van. 

Your heading for this can just be something like “Conclusion” or “Summary”, but that can look a little unprofessional and simplistic. In this post, for example, you can see that we use the heading “Final Thoughts.” It sounds better and still lets the reader know that the post is coming to a conclusion. 

Step 6: Add Images 

When you’re formatting a blog post, you may want to add images or screenshots that support what you’re writing about. 

These can be a little messy, because it’s not always easy to make images look good in WordPress. You’ll want to be mindful of the theme you’re using and how blog posts display on your WordPress site, so you can get a good feel for the right width and proportions for images to use.

You can get creative with the images you use, but make sure they’re relevant to the written content. You should have one main image for your blog post that appears above or just under your title called a featured image, which can also be used alongside your headline for blog category pages, on web pages, or within your blogroll. 

The other images in your post should also be relevant and valuable to the content, but can also be used to break up long stretches of text. You’ll notice at Quick Sprout when we use images, they’re usually graphs, charts, or screenshots that help you understand the content of the blog post. We don’t use random stock images because they’re just that: generic. They usually don’t add much value compared to custom illustrations, screenshots, and original photos. 

Blog post with screenshot to demonstrate the value images add to a post.
Adding relevant images like screenshots or graphs can help add value to blog posts and break up text.

For example, if you are doing a step-by-step guide and you’re giving instructions on how to sign up for a piece of software, you could include screenshots for each key step in the process with annotations to help users follow along and complete the steps. 

You can also embed videos where it makes sense, but be aware that these can really slow down your site’s loading speed. Just try not to go overboard and weigh your site down to the point where it takes more than three seconds to load. 

Final Thoughts About Formatting a Blog Post

If you use the steps we’ve outlined in this guide, every post you write should be easy for readers to scan and optimized for search. Of course, remember that every post is different and it’s perfectly fine to get creative. As long as you keep the focus on making it simple for readers to move through your post and find valuable content quickly, everything else will fall into place.

How to Send Email to All Registered Users in WordPress

Do you want to send an email to all registered users in WordPress?

Sometimes you may need to send a mass email to everyone who has an account on your website. This may include customers, members, subscribers, and even other WordPress users.

In this article, we will show you how to send an email to all registered users in WordPress.

How to send email to all registered users in WordPress

Why and When You Need to Send Email to All Registered Users in WordPress?

If you allow user registration on your WordPress site, then there are a few different reasons why you may need to email all registered users. For example, you might want to let your site’s Authors and Editors know about a new plugin you’ve added to help them write great posts.

If you run an online store, then you may be launching a giveaway or contest in WordPress, exclusively for people who have the ‘Customer’ role.

Depending on how you’ve set up user registration, you may not add all users to your email list automatically. This can make it difficult to contact everyone who uses your site.

Thankfully, there are other ways to bulk message everyone who has an account with your WordPress website.

Before contacting your users, you’ll want to make sure you’re not breaking any laws. That said, we recommend reading our ultimate guide to WordPress and GDPR compliance.

Now, let’s see how you can easily email all registered users on your website.

How to Make Sure Your Emails Are Delivered Safely

Before we start, you want to make sure that users will receive the emails you send.

Sometimes, your WordPress hosting server may not be properly configured or email providers such as Gmail might use filters and tools that wrongly flag your emails as spam.

You can follow our tutorial on how to fix WordPress not sending email issue for more details.

With that in mind, we recommend using an SMTP service provider to improve your email deliverability and make sure all registered users receive their messages safely.

WP Mail SMTP is the best WordPress SMTP plugin on the market. It allows you to connect your WordPress site with a mailer service. This means your emails always end up in the user’s inbox, and not in the spam folder.

We recommend buying the paid version called WP Mail SMTP Pro as it allows you to send emails in WordPress using Gmail SMTP, SendLayer, Sendinblue, and more. You can also see the open and click-through rates for your emails, so you can monitor the success of your different email campaigns.

Upon activation, you need to visit the Settings » WP Mail SMTP page.

Here, enter your license into the ‘License Key’ field.

Entering your license key into the WP Mail SMTP WordPress plugin

You can find this information by logging into your WP Mail SMTP account.

After entering the license key, click on the ‘Verify Key’ button. Now you’ve activated WP Mail SMTP, go ahead and click ‘Launch Setup Wizard.’

Launching the WP Mail SMTP setup wizard on your WordPress website

On the next screen, select ‘Let’s Get Started.’

WP Mail SMTP will now ask you to choose the mailer that you want to use with your WordPress website.

How to connect an SMTP email provider to WordPress

We recommend using SendLayer, SendinBlue, or SMTP.com as they’re reasonably priced and can scale to support your growing business.

After choosing your SMTP mailer, click on the ‘Save and Continue’ button.

Configuring your SMTP service provider

WP Mail SMTP will now show you how to configure this mailer.

If you need help, then see our ultimate guide on how to set up WP Mail SMTP with any host.

How to configure your email service provider in WordPress

If you want to use third-party mailers, then you can follow our guide to send WordPress emails via Gmail SMTP. We also have a similar guide for the Sendinblue SMTP setup.

Sending Email to All Registered Users in WordPress

The best way to email all your registered users, is by using Send Users Email. This simple plugin lets you send bulk messages based on the user’s role.

Before you get started with this plugin, you may want to check your user roles. You can then make any changes so that your users are properly organized by role.

For more details, see our beginner’s guide to WordPress user roles and permissions.

When you’re happy with how your roles are set up, the next step is installing and activating the Send Users Email plugin. For more details, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Email to users » Email Roles in your WordPress dashboard.

Sending a bulk email to all users with an assigned user role

Here, you can choose which users will receive the email based on their role on your WordPress blog.

For example, in the following image, we’re messaging everyone who has the ‘Subscriber’ role.

Sending an email to all subscribers on your WordPress website

You can now type the email that you want to send to all registered users. The Send Users Email plugin also has a few placeholder tags that you can use to add user information to the message.

For example, you can address the user by name using the {{user_first_name}} placeholder. When Send Users Email creates each email, it will replace the placeholder with the recipient’s first name.

By using a combination of plain text and placeholders, you can send a personalized email to all registered users.

How to email all registered users in WordPress

When you’re happy with the information you’ve entered, click on the ‘Send Message’ button.

WordPress will now email everyone who has the selected user role.

How to Email Specific Registered Users in WordPress

The the Send Users Email plugin also lets you send an email to a small group of registered users, or even to a specific user. For example, you may want to send a follow-up email to a particular Subscriber, after sending a bulk email.

To message individual users, simply go to Email to users » Email Users. This shows a list of all your registered users.

Sending emails to a specific user

To message a user, simply check the box next to their username.

After selecting all the people you want to email, you can go ahead and create your message.

Messaging a specific person using a WordPress plugin

When you’re happy with the message, simply scroll to the bottom of the screen and then click on Send Message.

We hope this article helped you learn how to send an email to all registered users in WordPress. You may also want to see our guide on how to create an email newsletter and our expert pick of the best email marketing services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Send Email to All Registered Users in WordPress first appeared on WPBeginner.

Ecommerce Blogging Starter Guide: Learn the Basics

If you want to get into ecommerce blogging, WordPress with Hostinger offers the best combination of blog builder and web hosting for the job. Best of all, you can host your WordPress blog with Hostinger for only $2.99.

Ecommerce sites should provide the necessary tools that make transactions quick and easy for customers and store owners alike. But most ecommerce sellers forget about the one part of their website that works for them 24/7: their blog.

Blogging for ecommerce can deliver plentiful benefits, from marketing your products to new clientele to building a devoted fan base of lifelong customers. Let’s dive into how to get started blogging for ecommerce and what you can gain by doing so.

The Best Platforms for Ecommerce Blogging

Ecommerce blogging should come as a part of your overall web store platform. Many ecommerce site builders also sport some degree of blogging functionality, but these three are the best providers that deliver well on both blogging and ecommerce features:

If you want to get a feel for blogging platforms in general, check out our full reviews of the three brands above, plus others. 

Brand logos for ecommerce blogging guide.

What is Ecommerce Blogging?

Have you ever read an article about a new product and just had to buy it? What about tips and tricks for using a product or service? That’s what ecommerce blogging is all about—generating organic interest in your brand and its products or services through written content.

It’s a way of marketing your online store through content that educates, entertains, and informs customers about what you do. You can use it to grow your customer base by targeting new markets and building relationships with potential customers, plus keep engaging loyal buyers with new content that keeps them aware of, engaged with, and purchasing from you.

When blogging for ecommerce, you want to strike a balance between educating people about your  products and services so that customers know what to expect when they buy from you and getting them interested in what they can do, achieve, or enjoy by purchasing your products.

On a technical level, there are specific steps you must take to get started with ecommerce blogging, including customer research, topic development, and content creation. We’ll get into those details in a moment.

Why is Ecommerce Blogging Important?

As an ecommerce seller, you’re probably spending a lot on paid ads already. And while paid ads are great for encouraging short-term gains in sales, ecommerce blogging helps you build a more steady audience of long-term customers.

It’s also a way to build trust with potential customers by showing them that you’re an expert in your field and that you understand their needs, pains, feelings, and passions. You can use your blog to educate customers about your products and services, as well as answer their questions before they even ask them.

Most importantly, though, ecommerce blogging leads to more traffic to your online store, which translates to more conversions and sales. Companies with blogs see 55% more traffic than those without, and there are several reasons for this.

  • Ecommerce blogging gives retailers the opportunity to cover topics their customers are already searching for.
  • When potential customers read a company blog, they might associate its products with a solution to their problem.
  • Companies with blogs do more than just engage online shoppers—they keep readers on their sites for prolonged periods of time.
  • When a retailer becomes a source of information, its content is shared across the internet, which leads to more traffic from farther-flung sources.
  • Users are more likely to look for a product if they already understand where it fits into their lives and how it solves their problems.

As a search engine, it’s Google’s job to provide its users with the information they’re looking for. Many people aren’t looking for products specifically. They often type a question or a phrase into Google related to what they’re experiencing at the moment, whether it’s a need for something or a problem they want solved. When companies write about topics related to their products, it gives them a better chance of appearing in searches and ranking higher in results.

A blog can really speed up the ecommerce conversion process by quickly dispensing with an introduction to the business and its products and by drilling deeper into topics that are directly or indirectly related to the web store’s product line.

How Ecommerce Blogging Works

Ecommerce blogging is similar to most types of blogging, but it also has some key differences. 

Since an ecommerce storefront is selling products or services, blog content needs to be focused on the products and services being sold to a specific degree. You don’t want it to be too salesy or pushy, but you also can’t just write about anything without tying it back to your business or offerings.

Here are the main steps that go into starting the ecommerce blogging process:

  1. Customer research: To know what topics to include in your blog, you need to understand who your customers are and what they’re looking for. Everything from purchase data to customer inquiries and search intent can be used to guide your content strategy.
  2. Keyword research: Although topics should speak to your target customers and their main concerns, keyword research is still important for honing the SEO of your blog posts. This research is used to identify search terms that are related to your products, as well as low-competition terms that you can use in your blog titles and content to rank high in results.
  3. Topic development: After developing an idea of the types of topics that will be interesting to your audience, it’s time to start brainstorming ideas. Tie topics to types of posts you want to write, like examples of ways to use your product, instructional guides (like this one!) to help your clientele achieve something, or even opinionated articles offering your brand’s insights and thoughts about modern trends, just to name a few examples.
  4. Content creation: This is when you get to work in earnest. Putting together your blog post  includes writing (or finding someone to write) the post, formatting it correctly, and adding engaging visuals such as images and videos or other elements like call-to-action buttons or even embedded product listings.
  5. Promotion: Once you have a blog post ready to go, you need to make sure that it’s seen by those who are interested in what you have to say. Promotion includes things like email marketing, social media posting and sharing, search engine optimization (SEO), and paid promotion.

Beyond these basic steps, ecommerce blogging also requires some ongoing maintenance, such as monitoring analytics and updating older posts as they become stale or outdated in their information.

Benefits of Ecommerce Blogging

Creating an ecommerce blog comes with many benefits, some of which we touched on earlier. Let’s take a look at these advantages in-depth.

Blogging gives your brand a personality

The fastest and most effective way to show buyers who you are and what you offer is to tell your story. An ecommerce blog allows you to do this in an engaging way, while also providing helpful information and perspectives related to your products or services.

By consistently producing remarkable blog content, your brand becomes recognizable and trustworthy. It’s a way to share with customers who you are as well as what values your business holds dear. When readers recognize themselves in your brand thoughts and values, they’re more likely to become a customer and ardent supporter of your business. Blogging is a non-intrusive method that helps build an unforgettable personality for your company while reinforcing its online reputation.

You can pay less for more

Paid search, Facebook Ads, and other types of pay-per-click (PPC) advertising can be expensive. And you only get results as long as you’re paying for the campaign. By investing in ecommerce blogging instead, you can save money while reaching more people.

Blog posts work around the clock, whether you’re spending money on additional marketing or not. Since they sit in search engine results pages (SERPs), high-ranking blogs can garner traffic without requiring any further financial input than the initial outlay to create posts.

Your SEO rankings will improve

Google loves unique, informative content. And when your blog is regularly updated with relevant and keyword-rich posts, your chances of ranking higher in search results increase significantly. Not just your individual blog posts’ pages either, but also your root domain where your online storefront lives. That’s because you’ll be showing search engine algorithms that you’re keeping up with the latest trends and providing value to your customers.

Higher rankings mean better sales numbers

For most online shoppers, the buyer’s journey starts with a search engine. 68% of buyers search for a product on Google before making a decision on what to buy. When you rank higher in the SERPs with informative, keyword-rich blog content, you make it easier for customers to find your business and its offerings. This means more visits to your store and a better chance of turning visitors into buyers.

Readers see your products beyond a photo or landing page

It’s tough to communicate the value of your products when you’re limited to product photos and descriptions. But blog posts give readers the chance to see beyond a simple image or landing page, allowing them to understand the value of the items within your store, including unique ways to use them and benefits they might not have thought about themselves.

With blog posts, you can communicate information in a way that cannot be captured by photos or product pages alone. You can discuss problems, answer questions and offer solutions—effectively highlighting why shoppers should choose your products without the need for salesy language or intrusive marketing messaging.

Strategies for Crafting a Successful Ecommerce Blog

Ecommerce companies big and small can use their blogs to drive more sales and build brand awareness. But, for your blog to succeed, it must be well-executed. Here are some strategies to help you get started on the right foot with ecommerce blogging.

Create a detailed content calendar

One of the most important aspects when crafting an ecommerce blog is consistency. If you post regularly for a few weeks then don’t post anything for another week or two (or month), you’re going to lose some of your audience and some of your search ranking gains. 

You need a regimented schedule for posting that you stick to. A content calendar typically includes:

  • The topics you will cover
  • When the posts should go live
  • Who is responsible for producing content

By creating a content calendar, you can ensure that your blog remains up-to-date and relevant at all times. This increases the chances of attracting customers through search engine results pages and other channels.

Don’t worry about trying to post all the time as much as being consistent. It’s better if you always publish something new on Tuesdays and Thursdays for weeks on end than to post something on five in one week then only once in the next. Be mindful of the workload your writers and content managers will be taking on and set up a calendar that allows them to produce excellent content on schedule, week in and week out.

Turn common content types into templates

Some posts will require original content with unique ways of presenting information or thoughts. But, for a lot of your content, you can turn their formats into templates that make writing similar types of posts easier and faster. 

For example, blog posts like “X Best (Keyword) for (Activity)” and “X Tips for (Topic)” can have formats with subheadings that you can use as a replicable outline for each post that uses that technique. This way, you can quickly write posts that meet your formatting and quality standards without having to start from scratch with each one.

Embrace a flexible business model

While it may seem like larger corporations always have the advantage, they are also burdened with certain weaknesses. Within their corporate bureaucracies, agility and change aren’t exactly common.

As a result, shifting focus for these companies can be an expensive endeavor riddled with red tape and paperwork. This process is far simpler for smaller businesses who don’t need to contend with all those barriers.

When it comes to blogging as a smaller ecommerce seller, you can quickly change direction and update your content strategy to match the latest trends or preferences of your customer base. This gives you a significant opportunity to dominate search results, capitalize on current events and trends, and grow your online presence to compete with the big players in your space.

Leverage user-generated content (UGC)

With the rise of Instagram and TikTok, plus the growth of influencer marketing, customers are more excited and enticed by transparent and authentic communication from a brand and its customers than ever. 70% of consumers factor in user-generated content in their buying decision because they trust their peers and the social accounts they follow and interact with daily.

User-generated content is a great way to showcase your products or services in real-world scenarios, proving the worth of what you offer and boosting sales from an authentic source. You can highlight or report user-generated content on your blog by creating roundups, testimonials, reviews, and feature stories—all ways of demonstrating the successful use of your products or services or the positive feelings surrounding your brand.

Let engagement data dictate your content strategy

It isn’t 2010 anymore. Keyword research alone should not be the basis of your content marketing strategy. Instead, focus on what your customers and audience are already engaged with based on their current conversations, activities, interests, and needs.

Customer data like this comes from several different places:

The questions your prospective buyers have, the comments your customers leave, the reviews they’ve written, and the conversations they’re participating in on social media are all indicators of what they are interested in. And that should be the focus of your ecommerce blog strategy.

How to Find the Right Tools for Ecommerce Blogging

Depending on your budget, your tech stack could be expansive or it could consist of a few basic tools. Before you start building your blogging strategy, you need the right set of tools to back up your efforts.

Researching and selecting the right types of software can be overwhelming—especially if you’re not familiar with all the options available in the market today. Still, there are a few essential tools you need to get started:

  • Web traffic analytics: You probably already use Google Analytics, but if you’re starting to build your blog, you’ll use it even more to learn more about your audience, where they come from, and what they do on your pages.
  • Keyword research tools: You may already have a keyword research tool like Moz, SEMrush, or Ahrefs. These tools allow you to track keywords and identify the right topics for your blog.
  • Content Management System (CMS): You need a CMS to create, manage, and publish content on your blog. WordPress is a popular option that has flexible features and designs.
  • Technical SEO Tool: Tools like Screaming Frog (which is free) can help you identify technical issues on your website that may prevent Google from finding and indexing your blog posts.
  • Email Marketing Platform: You need an email platform to capture leads and nurture them with your blog content. Options include MailChimp, ConvertKit, and AWeber.

As you grow your blog, you’ll probably want to add other tools to your tech stack. These include heat mapping tools, usability testing tools, social media management software, and social listening software. Don’t be afraid to experiment with different tools until you find the ones that work best for your business needs.

Final Thoughts About Ecommerce Blogging

Blogging is an essential tool for any ecommerce business. It can give you a competitive edge, help you connect with your customers, and increase sales. You may even be able to make money from your blog in addition to your ecommerce sales.

The key to success is to create a blogging strategy that aligns with your business goals, uses the right tools, and focuses on creating content that resonates with your customers. Then, using that data to find out what makes or breaks an ecommerce purchase, you can develop content your audience will actually want to read (and convert from).