*(data-ogsc) (data-ogsb) only partially works for Outlook.com

If you are building emails, I am sure that you’re well versed in designing for various clients. I am also fairly certain that you have run into issues when designing for “Dark Mode”. By using the following CSS you can target many email clients using dark mode.

@media (prefers-color-scheme: dark)
Similar to the way a block of styles inside an @media query works in Mobile Responsive view. The difference here is the CSS block, which targets all user interfaces that are in Dark Mode.

[data-ogsc] and/or [data-ogsb]
Used to target the application version of Outlook. While it may look like a minute market share, simply copy the @media (prefers-color-scheme: dark) styles you already used and add the proper [data-ogsc] and/or [data-ogsb] prefixes to each CSS rule.

With all of that said, there are always exceptions. (see right)

The Code

Enabling Dark Mode in the Email Client

Including this metadata in your <head> tag, to ensure that Dark Mode is enabled for all subscribers that use Dark Mode:

<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>

Support that metadata: add this CSS.

<style type=”text/css”>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>

Dark Mode for @media (prefers-color-scheme: dark)

For Apple Mail, iOS, Outlook.com, Outlook App (iOS), Outlook 2019 (MacOS): embed the following in your <style></style>.

Example:
@media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content*/
.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content*/
.light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
.darkmode { background-color: #f3f3f3 !important; }

/* Custom Dark Mode Font Colors */
h1, h2, p, span, a, b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
.link { color: #91ADD4 !important; }
}[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Duplicate Dark Mode Styles With [data-ogsc] and/or [data-ogsb]

For the Android Outlook app.

Example CSS:
/* Shows Dark Mode-Only Content*/
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content*/
[data-ogsc] .light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #91ADD4 !important; }[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Apply Styles to Your Body HTML

Ensure that your HTML tags have the necessary Dark Mode classes.

Example HTML:
<!– start HEADER_LOGO –>
<a href=”tacticalma.com” target=”_blank”>

<img class=”light-img” src=”tacticalma.com” width=”163″ height=”60″ alt=”TacticalMA” style=”color: #ffffff; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;” border=”0″ />

<!– The following Dark Mode image is hidden
with MSO conditional code and inline CSS.
Revealed once Dark Mode is triggered –>

<!–[if !mso]><! –><div class=”dark-img” style=”display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;” align=”center”>
<img src=”tacticalma.com” width=”163″ height=”60″ alt=”TacticalMA” style=”color: #ffffff; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;” border=”0″ />
</div><!–<![endif]–>

</a>
<!– end HEADER_LOGO –>[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Don’t know what HTML or CSS means? Pass these tips on to your developer or agency and save yourself a struggle.

A final note:
ALWAYS TEST YOUR MESSAGES BEFORE YOU SEND THEM

Free comprehensive SEO audit

Organic search is one of the the top contributors of quality, lead generating traffic. Make sure your website is optimized to it's fullest with our free audit.
to top

 

“This is amazing. It’s so obvious now that you’ve pointed it out. We’ve been struggling with this for months, and now it just makes sense.” These words are incredibly validating and also commonplace in our customer conversations. This year alone, Tactical MA has provided nearly 600 hours of process development consultation to our customers. At the end of the day, process development is no different from any other troubleshooting effort.

 

This is not a different camera angle; it’s the same picture side by side. The brain simply doesn’t accept this truth.

Consider This Troubleshooting Story:

We were recently integrating Gravity Forms on a WordPress site with Act-On Software through a standard JavaScript method. However, a very talented developer had become stuck when he did not get the expected results from the script deployment. He called me into his office as a sanity check and explained the situation,

“I pushed the data to Act-On successfully. I added one parameter to the query string. It failed, so I removed the parameter to the previous successful test, and it also failed.”

Stuck.

It’s important to understand that I have absolute confidence in this developers’ WordPress and JavaScript skills and regard them as one of the world’s top ten Act-On experts. This wasn’t a training issue.

So I had him walk through the process with me. Show me the code, push the code, load the form, submit the form, validate the result.

It became quickly evident the JavaScript wasn’t actually running on the page, which I pointed out, to his frustration. He responded, “I know, but there is nothing in the code that would break the script. It is built exactly right; you just watched me do it.”

So I asked him to show me the page source code. He glowered at me, explaining why he was certain everything was correct as he navigated to the page source code.

And there it was (or wasn’t) plain as day. The script he had written was not on the page. He refreshed the page, still no script. He quickly returned to WordPress and republished the GravityForm and WordPress page – still no script.

He explained that we must be looking in the wrong spot; the code had to be there. I smiled and had him change and push the copy of the Gravity Form response page.

And it was confirmed. The saved and published changes were not showing up on the public page.

Experienced WordPress developers and users can already see exactly what the problem here was. The CDN was caching the page, and the version we were seeing wasn’t updated. His mistake was believing his own brain. He had pushed the button to update the page and made the assumption the page had been updated.

I couldn’t have told you why it wasn’t working at the start, but I followed the golden rule of troubleshooting.

Don’t trust your brain; test every assumption.

Applying These Lessons

The way we apply this lesson to process development is direct and parallel.

  1. Define All Objectives
  2. Collect All Facts
  3. Document
  4. Review and Brainstorm

1. Define All Objectives

The first step is to collect and define all objectives. Suppose we are developing processes that impact the sales and marketing teams. We should interview the sales and marketing stakeholders to understand what, specifically, they are trying to accomplish. If we’re told, “IT always makes things difficult,” then we also interview IT. By understanding the objectives of all stakeholders in the process, we can establish clear rules and boundaries for our solution.

The process must accomplish X and cannot impact Y.

2. Collect All Facts

This is where refusing to trust the brain is critical. We interview stakeholders and participants, but we also review the technology. For example, clients will often tell us how lead assignment rules work in CRM, but this only tells us how this person thinks they work. When you explain a technical process to us, we will absolutely open that process in your website, marketing, or CRM to verify it for ourselves. Once we look at the technology, we find that approximately 60% of processes are explained to us inaccurately.

It is imperative that every fact be conclusively tested before being accepted.

3. Document

The third step of effective process development is to document everything in its current state. I’m not talking about taking notes in a notebook, I mean formal process documentation; flow charts with a granular step by step workflow. Take everything we will touch and articulate exactly how it works right now before any changes are made. (See Below) There can be no assumptions in this process. While documenting processes, we commonly encounter gaps in our discovery process, places where steps must occur, but we do not know how they occur. This documentation is extensively marked up and will serve as the data source for all additional discussion and development.

If it’s not documented, it doesn’t exist.

4. Review and Brainstorm

The final step of effective process development is to review the existing workflows and imagine something better. It’s the magical piece. As one of my team members often says,

Instead of doing the dumb thing, do the smart thing instead.

This is why I likened the practice to troubleshooting. Once you have identified the problem, it’s usually plenty easy to define a solution. The hardest part (solving the problem) becomes the easiest part.

Because we have already mapped out the process end to end and defined every single gap, contradiction, or redundant step in the process, producing an optimized process is very simple. Plug the gaps, resolve the contradictions, and eliminate redundancy. The remaining process is seemingly a work of genius.

Really, it’s just a strict adherence to fundamental troubleshooting.

Impact

We know that this type of thinking is not common, nor is it easy. We spend our lives trusting our perception, and learning to think radically different doesn’t happen overnight. That is where the impact of a third party comes in. We can facilitate change within an organization, and we become a powerful force for soliciting buy-in to new ideas.

By following this process, we have solved hundreds of “impossible” problems.

We have integrated systems that cannot be integrated, developed workflows that could not be made, and, most importantly, generated many thousands of leads and many millions in revenue for our customers.

The ability to look at the same data and reach different conclusions is the advantage of an outside consultant. We don’t have the same bias, pressure, or experience with your company, affording us objectivity in our evaluation. Because we get an incredibly detailed view of your process with zero context, our questions are detailed, often redundant, and frankly, we can ask the stupid questions that would be political suicide for an employee of the company. We don’t risk our jobs by challenging the CEO. We don’t make enemies by critiquing the status quo.

The way we stay impartial is by following simple guidelines, like the steps we’ve discussed here. The commitment to honest and analytical thinking often makes us invaluable to our customers.

If you’ve enjoyed this article – don’t forget to sign up for our Newsletter at the bottom of this page so we can share more with you in the future!

 

Free comprehensive SEO audit

Organic search is one of the the top contributors of quality, lead generating traffic. Make sure your website is optimized to it's fullest with our free audit.
to top

When we talk about driving website traffic, we mean attracting relevant visitors to our site, with the aim of capturing their information.

Ideally, the goal is to convert the visitor to a known lead before they leave. Generally, increased traffic is achieved through a combination of advertising and content creation. By applying personas -fictional people, created to illustrate the ideal customer for our business – to different parts of the demand and lead generation processes, we can optimize the process and connect with ideal clients, as we’ll discuss below.

Creating personas is a data-driven creative process that involves looking at both where your business is, and where you would like to take it. You look at the demographic information of your clientele and extrapolate what you know to create three-dimensional characters with goals, fears, priorities, and desires. Each company should have at least one fully fleshed-out persona for each vertical, allowing them to better imagine what their potential clients will respond to. We discuss the process more in-depth, HERE.

How Will Persona-Based Content Drive Traffic?

Getting in the mindset of our persona allows us to be specific about the questions they have. By focusing on the pain points of particular personas, we can develop content – both gated and otherwise – that answers their questions, addresses relevant concerns, and targets the right people. This will, in turn, increase the number of organic visitors through SEO and increase the percentage of interested visitors. We can leverage website content on social media to drive even more visitors from our social platforms.

5 Ways to Drive Traffic With Personas

1. Create Pillar Pages & Gated Content Based on Their Concerns

Pillar pages are pages on your website that are designed to provide a comprehensive overview of a topic relevant to an industry and audience. Other pages and blog articles with more specific focus can link to and from a pillar page, creating more traffic throughout your website. Gated-content (whether a white paper, a slide deck, or any other media) can serve a similar purpose, while simultaneously collecting contact information from those who want access. These days, people are learning to get specific in their search queries. By identifying and writing for a particular concern, we increase the chance that our page will stand out in their search.

2. Identify the Best Platforms for Advertisement

Understanding your audience means knowing where they spend their time, and what means of advertising they’re most likely to trust. Having identified this information while building your personas, you know where to reach your ideal customers, and what messaging to use. For example, we know that Youtube is the most-used social media platform in the USA and that people engage more with video content, but if we are targeting audiences over the age of 65, we might be better off using Facebook.

For more on social media, check out these resources:
https://ourworldindata.org/rise-of-social-media/
https://www.pewresearch.org/fact-tank/2019/04/10/share-of-u-s-adults-using-social-media-including-facebook-is-mostly-unchanged-since-2018/

3. Tailor Blog Content Toward Specific Pain-Points

When it comes down to it, people visit a business’s website for one of two reasons: to make a purchase or to answer a question. This makes the point of blog content to provide answers and context. The reasoning is similar to that of pillar pages, except where a pillar page is meant to be a one-size-fits-all overview, we can create a dozen blog articles, each delving into specialized topics for different audiences.

4. Educate At Their Expertise Level

There is no point in talking to our audience if they can’t understand us. That’s why we must understand where our audience is coming from. Are they new to the industry or old hands? Are they interested in the nitty-gritty details, or do they just need a password reset? Expertise-level will determine how you answer the questions your audience is asking; you can even provide different content for the same question, each focusing on a different persona.

5. Use A Headline to Its Fullest

Target your personas in the title. To connect with the right people you need to be putting out the right signs, whether that’s highlighting a specific pain point, or directly naming the people you’re talking to. For example, if you are targeting parents, you can put that right in the title. “3 Multitasking Tips for New Moms” as opposed to “Tips for Multitasking”. Even better if you tie-in pain points, “3 Multitasking Tips for Busy Moms.”

For more on headlines and titles:
https://www.washingtonpost.com/news/the-fix/wp/2014/03/19/americans-read-headlines-and-not-much-else/

Increasing traffic to your website is not an overnight process. Like anything else in business, it takes time and dedication to create a steady pipeline of site visitors. To this end, it is vital to keep your audience at the forefront of your mind and your processes. People won’t visit your website because you want them to, they will visit because they feel like you can help them.

Free comprehensive SEO audit

Organic search is one of the the top contributors of quality, lead generating traffic. Make sure your website is optimized to it's fullest with our free audit.
to top