Day: October 25, 2024

On September 25, 2024, Meta released the Llama 3.2 series of multimodal models. The models are lightweight yet extremely powerful for image-to-text and text-to-text tasks.

In this article, you will learn how to use the Llama 3.2 Vision Instruct model for general image analysis, graph analysis, and facial sentiment prediction. You will see how to use the Hugging Face Inference API to call the Llama 3.2 Vision Instruct model.

The results are comparable with the proprietary Claude 3.5 Sonnet model as explained in this article.

So, let's begin without ado.

We will call the Llama 3.2 Vision Instruct model using the Hugging Face Inference API. To access the API, you need to install the following library.

pip install huggingface_hub==0.24.7

The following script imports the required libraries into your Python application.

import os
import base64
from IPython.display import display, HTML
from IPython.display import Image
from huggingface_hub import InferenceClient
import requests
from PIL import Image
from io import BytesIO
import matplotlib.pyplot as plt

Let's first see how to analyze an image using the Llama 3.2 vision instruct model using the Hugging Face Inference API.

We will analyze the following image.

image_url = r"https://healthier.stanfordchildrens.org/wp-content/uploads/2021/04/Child-climbing-window-scaled.jpg"
Image(url=image_url, width=600, height=600)

Output:

To analyze an image using the Hugging Face Inference, you must first create an object of the InferenceClient class from the huggingface_hub module. You must pass your Hugging Face access token to the InferenceClient class constructor.

Next, call the chat_completion() method on the InferenceClient object (llama3_2_model_client in the following script) and pass it the Hugging Face model ID, the model temperature, and the list of messages.

In the following script, we pass one user message with the image we want to analyze and the text query.

The chat_completion() function returns the response based on the image and the query, which you can retrieve using the response.choices[0].message.content.

In the script below, we simply ask the Meta Llama 3.2 Vision Instruct model to describe the image in a single line.

hf_token = os.environ.get('HF_TOKEN')
llama3_2_model_client = InferenceClient(token=hf_token)

model_id = "meta-llama/Llama-3.2-11B-Vision-Instruct"
query = "Describe the image please in one line please!"

response =  llama3_2_model_client.chat_completion(
    model=model_id,
    temperature = 0,
    messages=[
        {
            "role": "user",
            "content": [
                {"type": "image_url", "image_url": {"url": image_url}},
                {"type": "text", "text": query},
                ],
        }
    ],
    max_tokens=1024,
)
print(response.choices[0].message.content)

Output:

A young child with blonde hair and blue striped pajamas is climbing on a wicker chair in front of a window.

The above output shows that the model describes the image precisely.

Now that you know how to analyze an image using the Meta Llama 3.2 Vision Instruct model and the Hugging Face Inference API, let's define a utility function analyze_image() that takes in the user query and the image_url and returns the response answering the query related to the image.

In the script below, we ask the model if he sees any potentially dangerous situation in the image and how to prevent it. The response shows that the model correctly analyzes the image and suggests potential prevention measures.

def analyze_image(query, image_url):


    response =  llama3_2_model_client.chat_completion(
        model=model_id,
        temperature = 0,
        messages=[
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image_url}},
                    {"type": "text", "text": query},
                    ],
            }
        ],
        max_tokens=1024,
    )
    return response.choices[0].message.content


query = "You are a baby sitter. Do you see any dangerous sitation in the image? If yes, how to prevent it?"
image_url = r"https://healthier.stanfordchildrens.org/wp-content/uploads/2021/04/Child-climbing-window-scaled.jpg"

response = analyze_image(query, image_url)
print(response)

Output:

Overall, the Meta Llama 3.2 Vision Instruct seems capable of general image analysis and performs at par with advanced proprietary models such as GPT-4o and Claude 3.5 Sonnet.

Let's see how well the llama 3.2 Vision Instruct performs for graph analysis tasks.

We will analyze the following bar plot, which displays Government gross debts as a percentage of GDPs for the European countries in 2023.

image_url = r"https://globaleurope.eu/wp-content/uploads/sites/24/2023/12/Folie2.jpg"
Image(url=image_url, width=600, height=600)

Output:

Let's just ask the model to summarize the plot.

query =  "You are an expert graph and visualization expert. Can you summarize the graph?"
response = analyze_image(query, image_url)
print(response)

Output:

The above output shows that the model provides detailed insights into different aspects of the information in the bar plot.

Let's ask a slightly tricky question. We will ask the model to convert the bar plot into a table.

query =  "You are an expert graph and visualization expert. Can you convert the graph to table such as Country -> Debt?"
response = analyze_image(query, image_url)
print(response)

Output:

The above output shows that the model's conversions were not precise. For example, the plot shows that Greece's GDP debt percentage is around 170%. However, the model shows it as 180%. In fact, the model shows the values in units of 10s.

On the other hand, the Claude 3.5 sonnet provided exact values.

Let's test the Llama 3.2 Vision Instruct model for the image sentiment prediction task. We will predict the facial sentiment expressed in the following image.

image_url = r"https://www.allprodad.com/wp-content/uploads/2021/03/05-12-21-happy-people.jpg"
Image(url=image_url, width=600, height=600)

Output:

Run the following script to print the facial sentiment.

query =  "You are helpful psychologist. Can you predict facial sentiment from the input image"
response = analyze_image(query, image_url)
print(response)

Output:

Based on the image, the individual appears to be smiling, which is a common indicator of happiness or positive sentiment. The person's facial expression suggests that they are feeling content or joyful.

The above output shows that the model correctly predicted the facial sentiment in the image.

Like the advanced vision models like GPT-4o and Claude 3.5 Sonnet, you can also analyze multiple images using the Llama 3.2 Vision Instruct model.

We will compare the following two images using the Llama 3.2 Vision Instruct model.

# URLs of the images
image_url1 = r"https://www.allprodad.com/wp-content/uploads/2021/03/05-12-21-happy-people.jpg"
image_url2 = r"https://www.shortform.com/blog/wp-content/uploads/2023/12/sad-woman-looking-down-eyes-slightly-closed-750x350.jpg"

# Fetch the images from the URLs
response1 = requests.get(image_url1)
response2 = requests.get(image_url2)

# Open the images using Pillow
img1 = Image.open(BytesIO(response1.content))
img2 = Image.open(BytesIO(response2.content))

# Create a figure to display the images side by side
fig, axes = plt.subplots(1, 2, figsize=(10, 5))

# Display the first image
axes[0].imshow(img1)
axes[0].axis('off')  # Hide axes

# Display the second image
axes[1].imshow(img2)
axes[1].axis('off')  # Hide axes

# Show the plot
plt.tight_layout()
plt.show()

Output:

To analyze multiple images, you must add the images to the content list of the user messages, as shown in the following script.

The script below defines the analyze_multiple_images() function that accepts a text query and two images and answers the query related to both images.

def analyze_multiple_images(query, image1_url, image2_url):


    response =  llama3_2_model_client.chat_completion(
        model=model_id,
        temperature = 0,
        messages=[
            {
                "role": "user",
                "content": [
                    {"type": "image_url", "image_url": {"url": image1_url}},
                    {"type": "image_url", "image_url": {"url": image2_url}},
                    {"type": "text", "text": query},
                    ],
            }
        ],
        max_tokens=1024,
    )
    return response.choices[0].message.content

query =  "You are helpful psychologist. Can you explain all the differences in the two images?"
response = analyze_multiple_images(query, image_url1, image_url2)
print(response)

The above script attempts to find all the differences between the two input images.

Output:

The output shows that Llama 3.2 Vision Instruct can find most of the differences between the two images, and its findings are very close to those of the Claude 3.5 sonnet model.

Meta Llama 3.2 Vision Instruct is a lightweight yet extremely powerful model for text-to-text and image-to-text tasks. It is open-source, and you can use it for free using the Hugging Face Inference API.

In this article, you saw how to use the Llama 3.2 Vision Instruct model for image analysis tasks such as graph analysis, sentiment prediction, etc. I suggest you try the Llama 3.2 Vision Instruct model for your image-to-text and text-to-text tasks and share your feedback.

The 2023 We❤️NYC campaign was intended to encourage New Yorkers, still pessimistic in a post-pandemic world, to show love for their city.

And boy, did it ever.

Last year, Maryam Banikarim royally pissed off the Olsen twins and the Jonas Brothers with her We❤️NYC campaign. But that same campaign earned twice the impressions of a Super Bowl ad … in 48 hours.

I caught up with Banikarim to get her top marketing lessons, and it was immediately clear that she’s the embodiment of “do what you love” — and it all stems from asking herself, "What if I did that?"

So we talked about purpose-driven work, how to use curiosity to power your marketing campaigns, and the best way to stay on top of new tech.

“What if I did that?”

1. Good campaigns have tension. That’s what gets people talking.

I can see Banikarim’s eyes sparkle through my computer monitor as she tells me how she ruffled the feathers of two sets of celebrity siblings. She’s relishing the memory of it.

Her agency worked on the city-wide ad campaign, which was funded by members of the Partnership for New York City to encourage civic action and community engagement. It capitalized on something New Yorkers care very, very deeply about: New York.

Once “We❤️NYC” began appearing on bus stop signs, at Barclays Center, and across Times Square, “everybody thought we were trying to get rid of the I❤️NYmark,” she says. They weren’t, but “communication isn’t what I say, it’s what you hear.”

So once somebody (incorrectly, angrily) posted that the new campaign was trying to oust Milton Glaser’s iconic I❤️NY, it became a reality of sorts. A reality that was picked up by talk shows, Mary-Kate and Ashley, and the Jonas Brothers — “it was just a whole thing,” Banikarim says with a laugh.

There’s no putting the toothpaste back in the tube: We❤️NYC was now a putative threat to New Yorkers’ identity and their iconography. Tension built up; tweets rolled in. “Milton Glaser would be so mad.” “Can we please let Milton Glaser rest in the peace he deserves?” “Milton Glaser got it right the first time.”

Banikarim is delighted by this. “We couldn’t have bought that media,“ she says.

Your next campaign probably won’t pique the ire of the Olsen twins (though a girl can dream). But know what your target audience feels ownership over, and where to tease out the tension in your marketing campaign.

2. DIY — with curiosity.

“I always seem to have a side hustle these days,” she tells me. (One gets the sense that Banikarim has always had to have a side hustle.)

It’s just that Banikarim’s side hustles would make most primary hustles envious. Last weekend, she celebrated the third year of The Longest Table, a community-building event born out of a need for human connection back when everyone was masking up and sharing tips on finding Lysol wipes.

She saw a neighbor put a folding table outside so they could eat dinner with a few friends. She introduced herself and thought, “What if I did that?”

One also gets the sense that Banikarim doesn’t do rhetorical questions. She started with a few posts on Next Door and an eight-person outdoor potluck on her street in Chelsea. On October 6, 2024, over a thousand people showed up for dinner.

Together they cobbled together a Squarespace website, and “we use HubSpot to email people.” (We did not bribe, pay, or threaten her to say that.—ed.) Banikarim doesn’t complain about DIY marketing tech; on the contrary, she refuses to be outpaced by evolving technology.

“Marketing has always been for people who are curious,” Banikarim says. And “in order to constantly be learning, it’s really helpful to be touching the tools yourself and not just directing from up high.”

3. Move sideways, move quickly. And take small bets.

Moving sideways means that sometimes you take a job that feels like a lateral move, or even a step backward. That’s not unusual now, but Banikarim jokes that she was a millennial before her time, because she’s had so many jobs for somebody in her 50s.

“But I was always looking for purpose in the job.” Like millennials, she’s “looking for impact.”

Your marketing career “doesn't have to always be moving up. You can move sideways. You can move off, you can move in.”

Of course, millennials don’t need Banikarim to tell them that it’s okay to have a non-linear career. But are you moping about it or are you learning from it? (No judgment; glass houses and all that.)

“I think there‘s a lot of lip service given to this idea that if you fail, it’s ‘okay,’” she tells me. And then she says what so many of us feel in those moments: “but it's not really okay.”

When I ask her what the biggest waste of money is across the marketing landscape, she says that it isn’t a tool. It’s that “we all have to be better at finding things that we can test and learn from” — and we have to stop thinking that if those tests don’t work, then they’re a mistake or a waste of time.

Her advice: Move quickly. Take the small bets. See where you get signal — and then go big.

A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was time to update that and do the subject justice.

Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container, creating a distinct break between one. Like many things in CSS, there are a number of ways to go about this and we’re going to go over many of them right now!

Update (Oct. 25, 2024): Added an example that uses CSS Anchor Positioning.

Using Background Gradient

One simple way we can create the appearance of a changing background is to use gradients. Half of the background is set to one color and the other half another color. Rather than fade from one color to another, a zero-space color stop is set in the middle.

.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
}

This works with a single container element. However, that also means that it will take working with floats or possibly some other layout method if content needs to fill both sides of the container.

Using Absolute Positioning

Another route might be to set up two containers inside of a parent container, position them absolutely, split them up in halves using percentages, then apply the backgrounds. The benefit here is that now we have two separate containers that can hold their own content.

Absolute positioning is sometimes a perfect solution, and sometimes untenable. The parent container here will need to have a set height, and setting heights is often bad news for content (content changes!). Not to mention absolute positioned elements are out of the document flow. So it would be hard to get this to work while, say, pushing down other content below it.

Using (fake) Tables

Yeah, yeah, tables are so old school (not to mention fraught with accessibility issues and layout inflexibility). Well, using the display: table-cell; property can actually be a handy way to create this layout without writing table markup in HTML. In short, we turn our semantic parent container into a table, then the child containers into cells inside the table — all in CSS!

You could even change the display properties at breakpoints pretty easily here, making the sides stack on smaller screens. display: table; (and friends) is supported as far back as IE 8 and even old Android, so it’s pretty safe!

Using Floats

We can use our good friend the float to arrange the containers beside each other. The benefit here is that it avoids absolute positioning (which as we noted, can be messy).

In this example, we’re explicitly setting heights to get them to be even. But you don’t really get that ability with floats by default. You could use the background gradient trick we already covered so they just look even. Or look at fancy negative margin tricks and the like.

Also, remember you may need to clear the floats on the parent element to keep the document flow happy.

Using Inline-Block

If clearing elements after floats seems like a burden, then using display: inline-block is another option. The trick here is to make sure that the elements for the individual sides have no breaks or whitespace in between them in the HTML. Otherwise, that space will be rendered as a literal space and the second half will break and fall.

Again there is nothing about inline-block that helps us equalize the heights of the sides, so you’ll have to be explicit about that.

There are also other potential ways to deal with that spacing problem described above.

Using Flexbox

Flexbox is a pretty fantastic way to do this, just note that it’s limited to IE 10 and up and you may need to get fancy with the prefixes and values to get the best support.

Using this method, we turn our parent container into a flexible box with the child containers taking up an equal share of the space. No need to set widths or heights! Flexbox just knows what to do, because the defaults are set up perfectly for this. For instance, flex-direction: row; and align-items: stretch; is what we’re after, but those are the defaults so we don’t have to set them. To make sure they are even though, setting flex: 1; on the sides is a good plan. That forces them to take up equal shares of the space.

In this demo we’re making the side flex containers as well, just for fun, to handle the vertical and horizontal centering.

Using Grid Layout

For those living on the bleeding edge, the CSS Grid Layout technique is like the Flexbox and Table methods merged into one. In other words, a container is defined, then split into columns and cells which can be filled flexibly with child elements.

CSS Anchor Positioning

This started rolling out in 2024 and we’re still waiting for full browser support. But we can use CSS Anchor Positioning to “attach” one element to another — even if those two elements are completely unrelated in the markup.

The idea is that we have one element that’s registered as an “anchor” and another element that’s the “target” of that anchor. It’s like the target element is pinned to the anchor. And we get to control where we pin it!

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
}

This sets up an .anchor and establishes a relationship with a .target element. From here, we can tell the target which side of the anchor it should pin to.

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
  left: anchor(right);
}

Isn’t it cool how many ways there are to do things in CSS?

Left Half and Right Half Layout – Many Different Ways originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

We’re keenly aware of the impact recent events have had on the WordPress community and ecosystem, and we’re deeply grateful to the many partners and customers who have stood by WP Engine and trust us to serve you in the face of unprecedented and unwarranted attacks and attempts to disrupt our platform. WP Engine’s top…

The post Ensuring Stability and Security: Recent Timeline appeared first on WP Engine.

You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.

It is indeed a lot of work. But I’m here to tell you it’s now a lot simpler with modern CSS!

Default HTML color scheme(s)

We all know the “naked” HTML theme even if we rarely see it as we’ve already applied a CSS reset or our favorite boilerplate CSS before we even open localhost. But here’s a news flash: HTML doesn’t only have the standard black-on-white theme, there is also a native white-on-black version.

If you want to create a dark mode interface, this is a great base to work with and saves you from having to account for annoying details, like dark inputs, buttons, and other interactive elements.

Switching color schemes automatically based on OS preference

Without any @media queries — or any other CSS at all — if all we did was declare color-scheme: light dark on the root element, the page will apply either the light or dark color scheme automatically by looking at the visitor’s operating system (OS) preferences. Most OSes have a built-in accessibility setting for your preferred color scheme — “light”, “dark”, or even “auto” — and browsers respect that setting.

html {
  color-scheme: light dark;
}

We can even accomplish this without CSS directly in the HTML document in a <meta> tag:

<meta name="color-scheme" content="light dark">

Whether you go with CSS or the HTML route, it doesn’t matter — they both work the same way: telling the browser to make both light and dark schemes available and apply the one that matches the visitor’s preferences. We don’t even need to litter our styles with prefers-color-scheme instances simply to swap colors because the logic is built right in!

You can apply light or dark values to the color-scheme property. At the same time, I’d say that setting color-scheme: light is redundant, as this is the default color scheme with or without declaring it.

You can, of course, control the <meta> tag or the CSS property with JavaScript.

There’s also the possibility of applying the color-scheme property on specific elements instead of the entire page in one fell swoop. Then again, that means you are required to explicitly declare an element’s color and background-color properties; otherwise the element is transparent and inherits its text color from its parent element.

What values should you give it? Try:

Default text and background color variables

The “black” colors of these native themes aren’t always completely black but are often off-black, making the contrast a little easier on the eyes. It’s worth noting, too, that there’s variation in the blackness of “black” between browsers.

What is very useful is that this default not-pure-black and maybe-not-pure-white background-color and text color are available as <system-color> variables. They also flip their color values automatically with color-scheme!

They are: Canvas and CanvasText.

These two variables can be used anywhere in your CSS to call up the current default background color (Canvas) or text color (CanvasText) based on the current color scheme. If you’re familiar with the currentColor value in CSS, it seems to function similarly. CanvasText, meanwhile, remains the default text color in that it can’t be changed the way currentColor changes when you assign something to color.

In the following examples, the only change is the color-scheme property:

Not bad! There are many, many more of these system variables. They are case-insensitive, often written in camelCase or PascalCase for readability. MDN lists 19 <system-color> variables and I’m dropping them in below for reference.

Cool, right? There are many of them! There are, unfortunately, also discrepancies as far as how these color keywords are used and rendered between different OSes and browsers. Even though “evergreen” browsers arguably support all of them, they don’t all actually match what they’re supposed to, and fail to flip with the CSS color-scheme property as they should.

Egor Kloos (also known as dutchcelt) is keeping an eye on the current status of system colors, including which ones exist and the browsers that support them, something he does as part of a classless CSS framework cleverly called system.css.

Declaring colors for both modes together

OK good, so now you have a page that auto-magically flips dark and light colors according to system preferences. Whether you choose to use these system colors or not is up to you. I just like to point out that “dark” doesn’t always have to mean pure “black” just as “light” doesn’t have to mean pure “white.” There are lots more colors to pair together!

But what’s the best or simplest way to declare colors so they work in both light and dark mode?

In my subjective reverse-best order:

Third place: Declare color opacity

You could keep all the same background colors in dark and light modes, but declare them with an opacity (i.e. rgb(128 0 0 / 0.5) or #80000080). Then they’ll have the Canvas color shine through.

It’s unusable in this way for text colors, and you may end up with somewhat muted colors. But it is a nice easy way to get some theming done fast. I did this for the code blocks on this old light and dark mode demo.

Second place: Use color-mix()

Like this:

color-mix(in oklab, Canvas 75%, RebeccaPurple);

Similar (but also different) to using opacity to mute a color is mixing colors in CSS. We can even mix the system color variables! For example, one of the colors can be either Canvas or CanvasText so that the background color always mixes with Canvas and the text color always mixes with CanvasText.

We now have the CSS color-mix() function to help us with this. The first argument in the function defines the color space where the color mixing happens. For example, we can tell the function that we are working in the OKLAB color space, which is a rectangular color space like sRGB making it ideal to mix with sRGB color values for predictable results. You can certainly mix colors from different color spaces — the OKLAB/sRGB combination happens to work for me in this instance.

The second and third arguments are the colors you want to mix, and in what proportion. Proportions are optional but expressed in percentages. Without declaring a proportion, the mix is an even 50%-50% split. If you add percentages for both colors and they don’t match up to 100%, it does a little math for you to prevent breakages.

The color-mix() approach is useful if you’re happy to keep the same hues and color saturations regardless of whether the mode is light or dark.

In this example, as you change the value of the hue slider, you’ll see color changes in the themed boxes, following the theme color but mixed with Canvas and CanvasText:

You may have noticed that I used OKLCH and HSL color spaces in that last example. You may also have noticed that the HSL-based theme color and the themed paragraph were a lot more “flashy” as you moved the hue slider.

I’ve declared colors using a polar color space, like HSL, for years, loving that you can easily take a hue and go up or down the saturation and lightness scales based on need. But, I concede that it’s problematic if you’re working with multiple hues while trying to achieve consistent perceived lightness and saturation across them all. It can be difficult to provide ample contrast across a spectrum of colors with HSL.

The OKLCH color space is also polar just like HSL, with the same benefits. You can pick your hue and use the chroma value (which is a bit like saturation in HSL) and the lightness scales accurately in the same way. Both OKLCH and OKLAB are designed to better match what our eyes perceive in terms of brightness and color compared to transitioning between colors in the sRGB space.

While these color spaces may not explicitly answer the age-old question, Is my blue the same as your blue? the colors are much more consistent and require less finicking when you decide to base your whole website’s palette on a different theme color. With these color spaces, the contrasts between the computed colors remain much the same.

First place (winner!): Use light-dark()

Like this:

light-dark(lavender, saddlebrown);

With the previous color-mix() example, if you choose a pale lavender in light mode, its dark mode counterpart is very dark lavender.

The light-dark() function, conversely, provides complete control. You might want that element to be pale lavender in light mode and a deep burnt sienna brown in dark mode. Why not? You can still use color-mix() within light-dark() if you like — declare the colors however you like, and gain much more fine-grained control over your colors.

Feel free to experiment in the following editable demo:

Using color-scheme: light dark; — or the corresponding meta tag in HTML on your page —is a prerequisite for the light-dark() function because it allows the function to respect a person’s system preference, or whichever single light or dark value you have set on color-scheme.

Another consideration is that light-dark() is newly available across browsers, with just over 80% coverage across all users at the time I’m writing this. So, you might consider including a fallback in your CSS for browsers that lack support for the function.

What makes using color-scheme and light-dark() better than using @media queries?

@media queries have been excellent tools, but using them to query prefers-color-scheme only ever follows the preference set within the person’s operating system. This is fine until you (rightfully) want to offer the visitor more choices, decoupled from whether they prefer the UI on their device to be dark or light.

We’re already capable of doing that, of course. We’ve become used to a lot of jiggery-pokery with extra CSS classes, using duplicated styles, or employing custom properties to make it happen.

The joy of using color-scheme is threefold:

• It gives you the basic monochrome dark mode for free!
• It can natively do the mode switching based on OS mode preference.
• You can use JavaScript to toggle between light and dark mode, and the colors declared in the light-dark() functions will follow it.

Light, dark, and auto mode controls

Essentially, all we are doing is setting one of three options for whether the color-scheme is light, dark, or updates auto-matically.

I advise offering all three as discrete options, as it removes some complications for you! Any new visitor to the site will likely be in auto mode because accepting the visitor’s OS setting is the least jarring default state. You then give that person the choice to stay with that or swap it out for a different color scheme. This way, there’s no need to sniff out what mode someone prefers to, for example, display the correct icon on a toggle and make it perform the correct action. There is also no need to keep an event listener on prefers-color-scheme in case of changes — your color-scheme: light dark declaration in CSS handles that for you.

Adjusting color-scheme in pure CSS

Yes, this is totally possible! But the approach comes with a few caveats:

• You can’t use <button> — only radio inputs, or <options> in a <select> element.
• It only works on a per page basis, not per website, which means changes are lost on reload or refresh.
• The browser needs to support the :has() pseudo-selector. Most modern browsers do, but some folks using older devices might miss out on the experience.

Using the :has() pseudo-selector

This approach is almost alarmingly simple and is fantastic for a simple one-pager! Most of the heavy lifting is done with this:

/* default, or 'auto' */
html {
  color-scheme: light dark;
}

html:has([value="light"]:checked {
  color-scheme: light;
}

html:has([value="dark"]:checked {
  color-scheme: dark;
}

The second and third rulesets above look for an attribute called value on any element that has “light” or “dark” assigned to it, then change the color-scheme to match only if that element is :checked.

This approach is not very efficient if you have a huge page full of elements. In those cases, it’s better to be more specific. In the following two examples, the CSS selectors check for value only within an element containing id="mode-switcher".

html:has(#mode-switcher [value="light"]:checked) { color-scheme: light }
/* Did you know you don't need the ";" for a one-liner? Now you do! */

Using a <select> element:

Using <input type="radio">:

We could theoretically use checkboxes for this, but since checkboxes are not supposed to be used for mutually exclusive options, I won’t provide an example here. What happens in the case of more than one option being checked? The last matching CSS declaration wins (which is dark in the examples above).

Adjusting color-scheme in HTML with JavaScript

I subscribe to Jeremy Keith’s maxim when it comes to reaching for JavaScript:

JavaScript should only do what only JavaScript can do.

This is exactly that kind of situation.

If you want to allow visitors to change the color scheme using buttons, or you would like the option to be saved the next time the visitor comes to the site, then we do need at least some JavaScript. Rather than using the :has() pseudo-selector in CSS, we have a few alternative approaches for changing the color-scheme when we add JavaScript to the mix.

Using <meta> tags

If you have set your color-scheme within a meta tag in the <head> of your HTML:

<meta name="color-scheme" content="light dark">

…you might start by making a useful constant like so:

const colorScheme = document.querySelector('meta[name="color-scheme"]');

And then you can manipulate that, assigning it light or dark as you see fit:

colorScheme.setAttribute("content", "light"); // to light mode
colorScheme.setAttribute("content", "dark"); // to dark mode
colorScheme.setAttribute("content", "light dark"); // to auto mode

This is a very similar approach to using <meta> tags but is different if you are setting the color-scheme property in CSS:

html { color-scheme: light dark; }

Instead of setting a colorScheme constant as we just did in the last example with the <meta> tag, you might select the <html> element instead:

const html = document.querySelector('html');

Now your manipulations look like this:

html.style.setProperty("color-scheme", "light"); // to light mode
html.style.setProperty("color-scheme", "dark"); // to dark mode
html.style.setProperty("color-scheme", "light dark"); // to auto mode

I like to turn those manipulations into functions so that I can reuse them:

function switchAuto() {
  html.style.setProperty("color-scheme", "light dark");
}
function switchLight() {
  html.style.setProperty("color-scheme", "light");
}
function switchDark() {
  html.style.setProperty("color-scheme", "dark");
}

Alternatively, you might like to stay as DRY as possible and do something like this:

function switchMode(mode) {
  html.style.setProperty("color-scheme", mode === "auto" ? "light dark" : mode);
}

The following demo shows how this JavaScript-based approach can be used with buttons, radio buttons, and a <select> element. Please note that not all of the controls are hooked up to update the UI — the demo would end up too complicated since there’s no world where all three types of controls would be used in the same UI!

I opted to use onchange and onclick in the HTML elements mainly because I find them readable and neat. There’s nothing wrong with instead attaching a change event listener to your controls, especially if you need to trigger other actions when the options change. Using onclick on a button doesn’t only work for clicks, the button is still keyboard-focusable and can be triggered with Spacebar and Enter too, as usual.

Remembering the selection for repeat visits

The biggest caveat to everything we’ve covered so far is that this only works once. In other words, once the visitor has left the site, we’re doing nothing to remember their color scheme preference. It would be a better user experience to store that preference and respect it anytime the visitor returns.

The Web Storage API is our go-to for this. And there are two available ways for us to store someone’s color scheme preference for future visits.

localStorage

Local storage saves values directly on the visitor’s device. This makes it a nice way to keep things off your server, as the stored data never expires, allowing us to call it anytime. That said, we’re prone to losing that data whenever the visitor clears cookies and cache and they’ll have to make a new selection that is freshly stored in localStorage.

You pick a key name and give it a value with .setItem():

localStorage.setItem("mode", "dark");

The key and value are saved by the browser, and can be called up again for future visits:

const mode = localStorage.getItem("mode");

You can then use the value stored in this key to apply the person’s preferred color scheme.

sessionStorage

Session storage is thrown away as soon as a visitor browses away to another site or closes the current window/tab. However, the data we capture in sessionStorage persists while the visitor navigates between pages or views on the same domain.

It looks a lot like localStorage:

sessionStorage.setItem("mode", "dark");
const mode = sessionStorage.getItem("mode");

Which storage method should I use?

Personally, I started with sessionStorage because I wanted my site to be as simple as possible, and to avoid anything that would trigger the need for a GDPR-compliant cookie banner if we were holding onto the person’s preference after their session ends. If most of your traffic comes from new visitors, then I suggest using sessionStorage to prevent having to do extra work on the GDPR side of things.

That said, if your traffic is mostly made up of people who return to the site again and again, then localStorage is likely a better approach. The convenience benefits your visitors, making it worth the GDPR work.

The following example shows the localStorage approach. Open it up in a new window or tab, pick a theme other than what’s set in your operating system’s preferences, close the window or tab, then re-open the demo in a new window or tab. Does the demo respect the color scheme you selected? It should!

Choose the “Auto” option to go back to normal.

If you want to look more closely at what is going on, you can open up the developer tools in your browser (F12 for Windows, CTRL+ click and select “Inspect” for macOS). From there, go into the “Application” tab and locate https://cdpn.io in the list of items stored in localStorage. You should see the saved key (mode) and the value (dark or light). Then start clicking on the color scheme options again and watch the mode update in real-time.

Accessibility

Congratulations! If you have got this far, you are considering or already providing versions of your website that are more comfortable for different people to use.

For example:

• People with strong floaters in their eyes may prefer to use dark mode.
• People with astigmatism may be able to focus more easily in light mode.

So, providing both versions leaves fewer people straining their eyes to access the content.

Contrast levels

I want to include a small addendum to this provision of a light and dark mode. An easy temptation is to go full monochrome black-on-white or white-on-black. It’s striking and punchy! I get it. But that’s just it — striking and punchy can also trigger migraines for some people who do a lot better with lower contrasts.

Providing high contrast is great for the people who need it. Some visual impairments do make it impossible to focus and get a sharp image, and a high contrast level can help people to better make out the word shapes through a blur. Minimum contrast levels are important and should be exceeded.

Thankfully, alongside other media queries, we can also query prefers-contrast which accepts values for no-preference, more, less, or custom.

In the following example (which uses :has() and color-mix()), a <select> element is displayed to offer contrast settings. When “Low” is selected, a filter of contrast(75%) is placed across the page. When “High” is selected, CanvasText and Canvas are used unmixed for text color and background color:

Adding a quick high and low contrast theme gives your visitors even more choice for their reading comfort. Look at that — now you have three contrast levels in both dark and light modes — six color schemes to choose from!

ARIA-pressed

ARIA stands for Accessible Rich Internet Applications and is designed for adding a bit of extra info where needed to screen readers and other assistive tech.

The words “where needed” do heavy lifting here. It has been said that, like apostrophes, no ARIA is better than bad ARIA. So, best practice is to avoid putting it everywhere. For the most part (with only a few exceptions) native HTML elements are good to go out of the box, especially if you put useful text in your buttons!

The little bit of ARIA I use in this demo is for adding the aria-pressed attribute to the buttons, as unlike a radio group or select element, it’s otherwise unclear to anyone which button is the “active” one, and ARIA helps nicely with this use case. Now a screen reader will announce both its accessible name and whether it is in a pressed or unpressed state along with a button.

Following is an example code snippet with all the ARIA code bolded — yes, suddenly there’s lots more! You may find more elegant (or DRY-er) ways to do this, but showing it this way first makes it more clear to demonstrate what’s happening.

Our buttons have ids, which we have used to target them with some more handy consts at the top. Each time we switch mode, we make the button’s aria-pressed value for the selected mode true, and the other two false:

const html = document.querySelector("html");
const mode = localStorage.getItem("mode");
const lightSwitch = document.querySelector('#lightSwitch');
const darkSwitch = document.querySelector('#darkSwitch');
const autoSwitch = document.querySelector('#autoSwitch');

if (mode === "light") switchLight();
if (mode === "dark") switchDark();

function switchAuto() {
  html.style.setProperty("color-scheme", "light dark");
  localStorage.removeItem("mode");
  lightSwitch.setAttribute("aria-pressed","false");
  darkSwitch.setAttribute("aria-pressed","false");
  autoSwitch.setAttribute("aria-pressed","true");
}

function switchLight() {
  html.style.setProperty("color-scheme", "light");
  localStorage.setItem("mode", "light");
  lightSwitch.setAttribute("aria-pressed","true");
  darkSwitch.setAttribute("aria-pressed","false");
  autoSwitch.setAttribute("aria-pressed","false");
}

function switchDark() {
  html.style.setProperty("color-scheme", "dark");
  localStorage.setItem("mode", "dark");
  lightSwitch.setAttribute("aria-pressed","false");
  darkSwitch.setAttribute("aria-pressed","true");
  autoSwitch.setAttribute("aria-pressed","false");
}

On load, the buttons have a default setting, which is when the “Auto” mode button is active. Should there be any other mode in the localStorage, we pick it up immediately and run either switchLight() or switchDark(), both of which contain the aria-pressed changes relevant to that mode.

<button id="autoSwitch" aria-pressed="true" type="button" onclick="switchAuto()">Auto</button>
<button id="lightSwitch" aria-pressed="false" type="button" onclick="switchLight()">Light</button>
<button id="darkSwitch" aria-pressed="false" type="button" onclick="switchDark()">Dark</button>

The last benefit of aria-pressed is that we can also target it for styling purposes:

button[aria-pressed="true"] {
  background-color: transparent;
  border-width: 2px;
}

Finally, we have a nice little button switcher, with its state clearly shown and announced, that remembers your choice when you come back to it. Done!

Outroduction

Or whatever the opposite of an introduction is…

…don’t let yourself get dragged into the old dark vs light mode argument. Both are good. Both are great! And both modes are now easy to create at once. At the start of your next project, work or hobby, do not give in to fear and pick a side — give both a try, and give in to choice.

Come to the light-dark() Side originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Everyone on your team should understand the difference between a goal and an objective. I know it sounds simple, but terminology confusion is one of the biggest causes of misalignment in business strategy.

Whether you use the OKR model, the KPI framework, the Golden Circle, or another methodology, the difference between goals and objectives must be made abundantly clear. Without this shared knowledge, teams could risk wasting time on irrelevant activities, at best, or working against a common purpose, at worst.

In this post I'll explain the difference between goals and objectives and discuss some of the most effective goal-setting frameworks used by marketing professionals today.

I’ll also discuss measurement tactics to track your progress. By the end of this post, you can wave goodbye to ambiguity when it comes to your long-term and short-term marketing plans.

Table of Contents

• Goals vs. Objectives
• Strategy vs. Objective
• Types of Goals and Objectives
• How to Measure Goals
• How to Measure Objectives
• Examples of Goals and Objectives

Goals are undoubtedly critical to your business‘s success. Ultimately, your company’s goals should align with your vision and mission in order for employees to best guide their own actions and decisions.

For instance, let's say this year your leadership team has outlined four broad goals for your company:

1. Create a more inclusive workplace culture.
2. Grow international brand awareness.
3. Increase customer retention by 40%.
4. Help staff achieve a professional goal.

Great … now what?

Here's where objectives come into play — objectives are essentially the measurable actions you can take to achieve your overall goals.

Pro tip: I suggest using the popular SMART criteria. This helps set impactful objectives by ensuring they are specific, measurable, attainable, relevant, and time-bound.

Featured Resource: Free SMART Goal Template

Download this Template for Free

“Create a more inclusive workplace culture” is an admirable and important goal to have, but it's vague and too broad to measure. Does “more inclusive” mean one diversity and inclusion panel discussion, or does it mean a 10% increase in women in leadership positions?

Ultimately, your objectives will help your employees understand exactly what you expect from them.

In another example, let's say you inform your marketing department that your overall goal is to “grow international brand awareness.”

Now, when your social media marketing manager is crafting her quarterly video campaign, she'll think to herself, “Hmm, how can I increase international brand awareness?”

She can cater her objectives to fit company goals, as well as her own personal vision. Perhaps she decides, "To demonstrate my success at increasing international brand awareness, my objectives for my video marketing campaign will be:

1. 10% of all form submissions come from outside the U.S.
2. An increase in engagement from Spanish-speaking Facebook fans by 5%."

Your social media marketing manager can then use her unique objectives to measure whether or not she's contributing to the larger company goal of increasing international brand awareness.

As you can see, objectives can be uniquely tailored to fit each departments' needs, and allow for a large amount of autonomy.

By instilling clear and firm company goals, you can feel confident that your employees are all working in the same direction, but taking largely different steps (e.g. objectives) to end up at the same finish line.

There's one more term differentiation to know: objectives versus strategy.

Referencing our example above, let's say your social media marketing manager decides one of her objectives will be “an increase in engagement from Spanish-speaking Facebook fans by 5%.”

This is aligned with your company's goal to increase international brand awareness.

A strategy, then, tells your employee or team how she can accomplish her objectives. For instance, your social media marketing manager might decide to focus her paid efforts on Spanish-speaking countries, using Facebook's location targeting features.

Alternatively, maybe she decides to cultivate partnerships with international companies and posts videos in Spanish on Facebook specifically highlighting the work of those international organizations.

Both of these options are examples of strategies.

Her strategy might change over time. She might decide her paid efforts aren't working, and try something else.

Ultimately, however, her objective (increase engagement from Spanish-speaking Facebook fans by 5%) should remain the same.

Types of Goals and Objectives

Through my experience as a content marketer, I’ve learned that there isn’t a one-size-fits-all approach to communicating goals and objectives.

There are many things businesses want to measure, especially from a marketing perspective, so it’s important to have several types to choose from when setting the course for the year ahead.

Types of Goals

Time-Based Goals

The first type of goal that businesses use to set a strategic direction is the time-based goal. This goal type provides a high-level explanation for what teams or individuals should be striving toward within a certain timeframe.

Time-based goals can be short-term or long-term depending on the needs of your organization. They help teams and individuals plan and execute urgent tasks.

Some goals are time-sensitive and the primary outcome of achieving these types of goals is that they’re completed on time. Depending on the needs of an organization, one can track these goals in a variety of ways such as note-taking software, and visualize them using timeline maker software.

Example of a time-based goal: “Increase revenue by 10% to qualify for the best-in-class awards ceremony in August.”

As the award’s ceremony has a fixed date and the action stated in the goal is a requirement of the ceremony, this goal should be time-bound to increase the likelihood of reaching it.

Suitable for: I’d recommend this goal type for time-sensitive situations where there is an end date by which the goal must be attained (this can be in three months or ten years). A time-based goal helps keep stakeholders accountable and on track.

Outcome-Oriented Goals

Outcome-oriented goals are independent of a specific timeframe and typically outline what the business is aiming to achieve at some point in the future. The objectives for outcome-oriented goals provide more context around when this goal should be completed and how to measure the success of the goal.

For big picture changes, leadership transitions, and other types of major business milestones, outcome-oriented goals are used to communicate a new vision and era within a company.

Objectives for this type of goal communicate actionable changes for employees, and therefore, pair well with process-oriented goals which we talk about next.

Example of an outcome-oriented goal: “Reduce average customer acquisition cost (CAC) from $29 to $22.”

Suitable for: I’d recommend this goal type for scenarios where getting a particular result really matters. It suits goals that prioritize success, allowing for flexibility in the methods (and sometimes time) needed to achieve the required result.

Process-Oriented Goals

If a business is aiming to set the direction for new workflows, a process-oriented goal is the best choice. A process-oriented goal does not explain what outcome is being achieved. Instead, this goal type is prescriptive and explains what the team is responsible for doing in order to achieve an outcome.

Breaking it down further, there are also process-oriented objectives that can provide the tactical guidance employees need to do their day-to-day work.

Process-oriented goals may be short-term or even temporary because once they’ve been achieved, the new and improved processes can be put into action on a regular basis.

Example of a process-oriented goal: “Roll out a department-wise suggestion portal, ‘Your Voice, Your Impact,’ encouraging employees to propose operational micro-improvements that can be implemented in under a month. The top idea in each department every quarter receives a reward.”

Suitable for: I’d recommend this goal type when novel processes or workflows are to be implemented, or during transition periods where change management is underway in a company.

Types of Objectives

Strategic Objectives

These are high-level objectives with a longer outlook that provide guidance for a business to achieve an overarching goal.

Strategic objectives are sometimes confused with goals as both have a long-term perspective. However, a key difference is that strategic objectives convert a goal from “a vague ambition we want to attain” into something more tangible. Think of it as a two-tier pyramid with a goal at the top and strategic objectives at the bottom.

Example of a strategic objective: For a goal to boost an organization’s social involvement within the local community, a strategic objective could be to “build 70 affordable housing units in disadvantaged neighborhoods over the next three years.”

Suitable for: I’d recommend this objective type to give shape to a goal.

Operational Objectives

Operational objectives transform a larger goal into bite-sized actionable steps that can usually be ticked off on a daily, weekly, or monthly basis. They can be visualized as the nuts and bolts of a machine, ​​ensuring that each part runs smoothly to achieve the big-picture goal.

The SMART framework, mentioned earlier in the article, is a handy acronym to develop good operational objectives.

Example of an operational objective: For a goal to grow a museum’s YouTube channel subscribers by 35% in one year, an operational objective could be to “publish two new videos every week.”

Suitable for: I’d recommend this objective type for situations where short-term activities or SOPs have to be spelled out. It helps ensure that all stakeholders are on the same page on the near-term work that needs to be completed, by what time, and by whom, to achieve the larger goal.

Financial Objectives

The importance of finance for an organization cannot be understated. It’s akin to a breeze for a kite, letting the business stay aloft.

Financial objectives are money-related targets that an organization defines to help solidify its monetary well-being.

These objectives can cover areas such as revenue, profitability, cash flow, investment, liquidity, costs, debt and risk management, return on investment (ROI), taxes, shares and dividends, sales, accounting, and budgeting.

Example of a financial objective: For a goal to boost a company’s creditworthiness, a financial objective could be to “increase quarterly loan payments by $50,000 to clear off debt faster.”

Suitable for: I’d recommend this objective type when a business has to set any finance-related targets.

How to Measure Goals

Measurement is a key component of any SMART goal, but how exactly do you measure one? I’ve got you. There are a few ways to determine if your actions yielded the desired outcome of your goals. Let’s take a look at them below.

1. Ask a closed-ended question.

First, the simplest way to measure a goal is by asking whether or not you met it. If your goal was written clearly, this should be fairly simple. Process-oriented goals are the easiest to measure in this way because they’re usually yes or no answers.

Example: If my goal was to hold a quarterly alignment meeting between my department and another, I’d answer either:

• “Yes, the two teams had a quarterly alignment meeting.”
• “No, the quarterly alignment meeting didn’t happen.”

For goals that weren’t met, I’d be sure to note the reason why so that I can revisit the goal at the next planning session and determine if it’s worth trying again in the future.

2. Use a points system.

Multi-faceted goals can be difficult to measure, but if you have a guideline to follow when writing the goal, you can use that same guideline to measure it.

Example: If my goal was to launch a new website by Q3, I’d split this goal into two measurable parts:

• The action
• The deadline

If the team launches the website on time, the goal can be measured by awarding it two points — one for the action, and one for completing the action on time. If the website was launched late, the goal can be measured by awarding it only one point for completing the action and none for the deadline.

Pro tip: The points system should be specific to your organization and align with a larger measurement system that is connected to performance or revenue. Don’t forget to communicate the points system before you begin planning goals so that everyone is aware of how the goals will be measured.

3. Follow a rubric.

Qualitative goals and goals without strict deadlines are difficult to measure because there are fewer numbers involved. In this case, a rubric system can be useful to measure these types of goals. A rubric provides an opportunity to evaluate the context surrounding the goal and adjust the way it is measured.

Example: Imagine that a team was working toward a process-oriented goal that, unfortunately, didn’t make the process easier. Instead, the team has reported longer workflows and more bottlenecks than they had before. In this case, a rubric can help determine what you expected the outcome of this goal to be and document what actually happened in order to report this goal as unsuccessful.

How to Measure Objectives

Because objectives are more specific than goals, they’re more straightforward to measure. To measure objectives, you can use one of the following concepts.

1. Measure attainment.

Most objectives will feature quantitative data like units, numbers, and figures. This means you can measure the progress you’ve made toward the outcome you expected to achieve.

Example: Let’s say your team wanted to generate 500 leads from a marketing campaign, and they managed to get 475. The attainment of that original 500-lead goal is 95%.

(475/500*100) = 95% Goal Attainment

As with any measurement, your organization can determine what is below average, average, and exceptional attainment which may differ by team or department.

2. Measure qualitative data with surveys.

For objectives that aim to change behavior or are affected by people in another way, quantitative measurements may not tell the full story of whether or not you met your objective. Surveys, focus groups, and other behavior measurements can provide the data you need to measure success.

Example: In HR functions, the team may want to improve employee satisfaction within the sales team. There isn’t a sole quantitative metric that can be used to measure this objective. Surveys like the eNPS can be a great way to measure a shift in culture that leads to changes in the company culture.

3. Measure past performance versus current performance.

There are certain objectives that hold valuable insight but are tough to measure. What’s the solution? Get creative and define your own metrics which you can then use to compare previous performance with current results.

Example: Let’s consider brand awareness. Can you name a company that doesn’t want to improve it? Neither can I. This is one of the most common objectives to measure on marketing teams, but it’s also one of the most difficult to calculate.

Everyone tracks it differently, so how do you know for sure if you’re measuring it correctly? How do you know if someone is aware of your brand now compared to a month ago without asking every single person in your target audience?

One way to measure it is by comparing how many direct searches or branded search terms you’re receiving now compared to a point in time in the past. Sure, it’s not perfect, but it is constant — that means you’ll have a fixed number to compare against.

As long as your stakeholders agree on what metrics and numbers to compare, you’ll find that measuring these types of objectives isn’t so hard after all.

Pro tip: I’d be mindful of biases that can crop in when measuring goals and objectives — things like selection bias, survey bias, and confirmation bias, among others. This can skew results and present a much different image than ground reality.

Examples of Goals and Objectives

Scenario 1: A Milestone Goal

Goal: Open a new company HQ in Phoenix, AZ by Q4.

Objective: Obtain all licensing and permit documents by Q2.

In order to open a new HQ, you’ll need to do a lot of planning before Q4 to achieve the goal. Objectives will help keep you on track so that every step of the way is accounted for.

How to Measure a Milestone Goal

To measure the goal and objective in this example, I’d use either the “closed-ended question” framework or the “points” framework.

Did you open the new HQ? If so, you’ve met the goal according to the “closed-ended question” measurement. Did you open the new HQ on time? If not, award yourself one point for completing the activity and zero points for completing it late.

By the end of Q4, each objective will have been built upon one another to reach the overall goal of opening the new HQ.

Scenario 2: A Growth Goal

Goal: Increase company market share by 10%.

Objective: Grow customer base by 22% month-over-month for the next 12 months.

We see that the goal and the objective are dependent on one another, and one way to grow market share is to acquire new customers.

How to Measure a Growth Goal

Because this goal is high-level and slightly vague, you may try to measure it by itself using the “closed-ended question” framework, but I’d suggest you don’t — here’s why.

A goal like this can be affected by several other factors that aren’t outlined in your objectives. Those factors may even be outside of your organization’s control.

When Popeye’s launched its chicken sandwich campaign, it didn’t expect to gain market share in the chicken sandwich category so quickly. Due to factors outside of its control, the company met its goal, but that success probably had little to do with the objectives the company originally set to achieve that goal.

While it’s not a bad thing that the company achieved its goal, it’s important that your objectives explain why that goal was achieved.

Measuring the objective in this example using the attainment framework will not only give your stakeholders an idea of how closely you met the goal due to activities within your control, it’ll highlight any factors that affected your goal but weren’t included as objectives.

This will inform your team on what to include during the next goal-planning session.

Scenario 3: A Quantitative Goal

Goal: Reduce donut cost by 18% in the next five years.

Objective: Switch to a lower-cost sugar provider in the next six months.

The goal in this example is outcome-based and time-based while the objective is process-oriented. The goal and objective are closely related to one another, but the two will need to be assessed differently in order to measure success.

How to Measure a Quantitative Goal

Use the attainment framework to measure the goal and the past vs. present metric for the objective. As each objective focuses on lowering the cost of the materials that make up the product referenced in the goal, the closer you’ll be to achieving the goal.

Therefore, you’ll want to make sure to compare the new vendor’s price of sugar, in this case, to the previous vendor’s price. At the five-year mark, measure attainment to the goal of 18% to determine if you met or exceeded the goal.

Set effective goals and objectives for your team this quarter.

Goals and objectives are often used interchangeably, but they serve different purposes in business. Using the same language to describe the direction and progress within your organization will keep everyone on the same page and working toward the same outcome.

Although these two terms have specific definitions, I’ve learned to not get too caught up in the semantics — remember the most important part of goal-setting is getting the work done and showing results.

If you’re not sure where to start, I’ve got you covered. Download the free marketing goal-setting template below to get your team moving in the right direction.

Editor's note: This post was originally published in April 2019 and has been updated for comprehensiveness.

Before Anna and I started contentki, we went to a cafe, pulled out a notepad, and began brainstorming all the services we could offer given our skills and experience.

We came up with content writing, SEO optimization, and content strategy. From there we dived even deeper into each category adding SEO blog writing, thought leadership, landing page copy, and social media to our list.

I’m glad we took the time to break this down early on, as it gave us a clear sense of who we were right from the start, rather than figuring out our services on the go.

The rough sketch in our notebook was what’s professionally known as a concept map. It’s a tool you can use not only when starting a business but also to ideate and thoroughly research new concepts before bringing them to market.

Table of Contents

• What is a concept map?
• Types of Concept Maps
• How to Create a Concept Map
• Creating My Own Concept Map

What is a concept map?

A concept map is a visual representation, often in the form of a diagram, that shows the relationship between various ideas or concepts. It’s a great tool for structuring and organizing knowledge. It typically includes two elements:

• Nodes. These represent concepts and come in the shape of circles, ovals, or boxes.
• Arrows. These connect ideas. They might include a connecting word or verb to explain the relationship between concepts, for example, “leads to” or “is part of.”

A concept map helps break complex topics/ideas into more digestible components.

Types of Concept Maps

Before I discuss the types of concept maps, here is a list of the best mind-mapping software you can check out to help you create your own concept map.

Spider Maps

I’m sure it won’t surprise you to hear that these concept maps resemble a spider web. The main concept is in the middle, with related subtopics branching outward. This structure lets you explore multiple aspects of the central idea.

How to create it:

• Put your main idea in the middle of the diagram.
• Draw lines coming out from the center to represent a key subtopic linked to the main idea.
• Add sub-branches from each subtopic to dive even deeper into the topic.
• Use labels or short words to better show the relationship between concepts.

When to use it: Use it to analyze a broad topic in detail.

Flowcharts

A flowchart represents a linear or sequential process or workflow. It uses symbols and arrows to show how information flows, often including decisions or actions.

How to create it:

• Define the process or task you want to illustrate.
• Draw arrows to show the flow of steps. Use boxes or other shapes to represent each step or action.
• Use a diamond shape for decision points, and demonstrate different branches based on yes/no or any other criteria of your choice.
• Continue until you conclude.

When to use it: I find flowcharts are great for explaining processes, like the onboarding of new employees.

System Maps

Instead of focusing on the main idea, system maps highlight the relationships and interactions between different concepts. They lack a hierarchical structure and emphasize how various parts work together.

How to create it:

• Define the key system components.
• Arrange them based on how they are interrelated instead of in a hierarchical order.
• Draw lines between components to show how they are linked. I think it’s helpful to add words like “influences” and “depends on” to better explain the type of relationship.
• Expand each part of the system by spotting feedback loops, inputs, and outputs.

When to use it: Use system maps to understand and analyze complex systems, such as supply chains or organizational networks.

Hierarchy Maps

A hierarchy map illustrates how elements are interconnected in a hierarchical structure, showing their relative status. This means that ideas have a higher status while others, a lower status. The main concept or the highest ranking element is at the top, while the lower-ranking ones are positioned beneath it.

How to create it:

• Put the main concept or the highest-ranking one at the top of the map.
• Define the major subtopics that fall under the main idea and place them directly below. Connect them by lines.
• Branch downward to show lower-ranking concepts while keeping a clear hierarchical structure.

When to use it: I think it’s useful for showing information with multiple authority levels or importance, for example, government structures or Maslow’s Hierarchy of Needs.

How to Create a Concept Map

Before you start working on your concept map, I suggest downloading HubSpot's concept map template — it will make the process a whole lot easier.

1. Define your main topic.

Begin by choosing the main idea or topic that you want to analyze. It should be broad enough to allow a few subtopics to branch out.

Put the primary concept either at the top or middle of your map, depending on the type of map you’re using. It will act as the foundation from which all your other ideas will be developed.

2. Identify essential concepts.

Once you’ve figured out the main idea, start brainstorming additional topics you’d like to explore. Think of as many as you can, but instead of placing them directly on the map, list them first — this is known as the “parking lot” method.

After your list is ready, organize the concepts from the most general or broad to the most specific. I think it’s best to create a hierarchy with the most important/broad ideas at the top and the more detailed ones beneath them.

3. Move concepts from the parking lot to the map.

Now, you can move your concepts from the parking lot to the map.

Put the main idea in the center or at the top, with related subtopics branching out from it. Each additional topic should be linked to a specific category, eventually forming a hierarchy.

While arranging the concepts, I suggest using linking words to clarify the relationship between ideas. This will enhance the understanding of how each concept connects to the others.

4. Verify accuracy and coherence.

The more connecting ideas you have, the greater the chance of making a mistake. So, it’s best to review each connection to ensure it links to the correct concept.

Use cross-links to find ideas located in a different part of your map. This approach may help you connect them to additional concepts, creating a more comprehensive and interconnected structure that reveals even more insights.

5. Expand and revise.

Your concept map isn’t set in stone. As new ideas emerge, you can keep adding them to the map to create new connections.

I appreciate that the map is flexible, letting you rearrange, remove, or add new sections as you gain a deeper understanding of the topic.

The process doesn’t end with the first version; I suggest you regularly check if your map is complete and relevant. Make revisions when necessary.

Creating My Own Concept Map

Let’s get down to practice. I will now create a concept map for my own freelance business.

Step 1: Identify my primary topic.

Since I am a freelance content marketer, one of the areas that I deal with is SEO optimization, which will be my primary topic.

Step 2: Identify essential concepts.

I’ll break it down into a few subcategories: on-page SEO, technical SEO, and use of SEO tools. For the sake of this example, I’ll only mention three, but feel free to come up with as many as possible, like off-page SEO and local SEO.

Write them all down.

Step 3: Move concepts to the map.

Once I’ve listed the main concepts, it’s time for me to zero in on each of them and list relevant subcategories. For example, on-page SEO can be broken down into substeps like “keywords” and “content optimization.”

If I wanted to go even deeper, I could add “keyword research,” “long-tail keywords,” and other smaller concepts under the “keywords” subtopic.

I’ve done this with all three main topics and wrote two subcategories for each, along with ideas for further branching.

Notice how the map helps us understand that SEO is a multifaceted concept and that — while it’s most often an area handled by marketing — it overlaps with areas like technical website/app performance.

Step 4: Double-check for accuracy and coherence.

In this step, I review if I’ve assigned each idea to the correct category.

For example, I ensured that “user intent” is placed under “content optimization” rather than “website speed.” Bear in mind that some concepts like “keyword research” might fit in more than one category.

Step 5: Expand and revise.

I’ll treat this concept map as my first version. The more time I spend brainstorming ideas, the more subcategories I can add.

I could expand my map to include “URL structure,” “internal linking,” “indexing,” and “security” — all of which relate to SEO optimization.

Also, as mentioned earlier, it’s important to identify relationships between different categories. For example, I could create a link between “SEO tools” and “keywords,” as the data from the SEO tools I use will influence my keyword selection and inform my overall SEO strategy.

If you’re a content marketer like I am, here is a content mapping template to help you organize your work.

The best way to create a concept map is to use a ready-made template.

I love brainstorming, but sometimes I generate so many ideas that I get lost, and within five minutes, I’ve forgotten half of what I came up with.

A concept map is a great tool for organizing your thoughts and ideas. It helps with exploring a specific topic in detail, ensuring a deep understanding. You can start small, and expand on your map as you generate more ideas.