Designing for User Preference: A Brief History

The Genesis of Responsive Design

In the beginning, someone created the internet and it was good. Netscape Navigator [probably] said let there be light, and the world awoke from the darkness of black MS-DOS interfaces. Early web developers were fruitful in multiplying bright, square web pages for big, square screens, and life was simple.

But, temptation lurked for people to think different[ly]. The garden of ease was corrupted by Apples and BlackBerrys, which forced websites to fit onto tiny phone screens, as well as their full-size monitor ancestors. Designers couldn’t just create a website; they had to multiply their work, designing each page for mobile, tablet, and desktop. And after some time, even the Apple watch.

Over the years, web developers adapted to device screen variance and we called it responsive design. And as device usage has become more nuanced, we’ve evolved further to adaptive design standards.

The Dark Evolution of Responsive/Adaptive Design

As designers grew more comfortable building in flexible grids, users grew uncomfortable with all sorts of new things. Pages loaded too slowly. Cookies invaded privacy. Text was too small for Boomers. Etcetera.

Most notable for designers, though, a growing cohort of the modern world has begun rejecting the eye-straining glow of the default white screen. Popular media apps like Spotify, Netflix and Discord have elevated primarily dark design themes into the daily mainstream, and fans have grown to appreciate the intimate feel and contrast to the usual brightness.

But the usage of dark design hasn’t been limited to a few favorite apps. Behind the scenes of the internet, most web developers and app engineers have been spending their days coding on dark screens for years. This movement stayed relatively under the mainstream radar until 2018 when, at the Android Dev Summit, Google made a plea to the developer community to build its apps to accommodate user preferences for dark themed UIs. Google’s dev team used a compelling case that darker design actually conserves power and extends the life of batteries in OLED devices.

Dark Mode By the Numbers

With this push from Google, followed by Apple, and an organically growing design trend with tech’s most popular media apps, dark/night mode has become an unavoidable user preference. And while these trendsetting streaming apps are known for heavy usage for hours at a time, users and designers are gravitating to the dark side for several reasons.

What percentage of users prefer to use dark mode?

So how many people are actually crossing over to the dark side? Scientifically speaking, a lot. The aversion to bright screens is growing so much that virtually all modern devices and browsers allow users to choose light mode, dark mode, or even a variety of other dark-toned themes. 

Unfortunately, none of these platforms or browsers openly share the percentage of users who use dark mode as their primary preference. Further, many browser users accomplish this aesthetic with plugins rather than browser settings. But there are some indicators that give us an idea of how much of your marketing audience might appreciate you going light on the white.

• A 2019 survey of 243 users within the Google development community showed that 83% of its respondents use dark mode on their operating system. This is likely a high skew, as developers and early adopters will naturally lean toward this preference, but it’s likely a sign of things to come (and they have).
• A similar poll of over 2,500 users on Android Authority yielded similar results with 82% of users preferring dark mode. Again, this sample is developer-heavy.
• Looking at a possibly more representative sample set, Email on Acid, a leading email platform, tracked dark mode preference activity on its emails and found that 12% of subscribers use dark mode.

Based on the data available, it’s safe to say at least 10% of users live primarily in dark mode on their devices or browsers. Developers and techies seem to skew much higher. This number appears to be growing, but even at 10% of the general population, most marketers would agree that a segment this size is substantial enough to ensure all brand touch points are fit for dark mode viewing.

So, how do you design for dark mode?

Designing for dark mode can either be an all-in brand aesthetic, or it can simply be a defensive best practice to ensure your message stays intact when viewed in dark. In any case, here are a few best practices and resources for your brand’s approach to avoid losing control to dark mode (see example).

Always test in light and dark

Whether you’re designing for an app, a website, or email, make sure you’ve seen how your product renders across all platforms and preferences. Many dev platforms or browsers have built-in tools to emulate these settings, and an email testing tool, like Litmus, can allow you to see how your email will render across the most popular email clients.

Ultimately, your control is limited, so make sure your design works in any preference scenario. Not only do preferences vary among people, they also can vary based on time of day. Especially for native app consideration – many users opt for the auto setting, which switches between dark and light based on the time of day.

Reevaluate some long-held design habits

• Don’t immediately default to pure black and white. Eyes actually prefer dark grays and soft whites.
• Allow your brand to use a lighter brand palette when forced upon dark backgrounds.
• Don’t hard-code your colors. Use different colors for dark/light.
• Always check your type for proper accessibility (Color contrast checker).
• Be cautious when using shadows – or avoid them.

If it makes sense for your brand, consider dark only

This consideration is especially interesting for immersive media experiences, like longform (or long-session) video. For extended usage, dark-themed interfaces tend to be mutually beneficial for screens and users in these situations.

DON’T create your own dark and light settings

For mobile apps, it may be tempting to seize back control of your design with your own settings, but don’t do it.  If every app did this, it would be chaos. Plus, it’ll confuse users and likely work against you.

For email design, remember these things:

There is an exceptional resource created by Litmus that provides dark mode best practices for email marketers. The uniquely difficult challenge for email is that each email client (e.g. Gmail, Outlook, iPhone Mail) handles dark mode a little bit differently. Unlike apps that are built natively for one operating system, or even browsers that have more consistent handling of specific media queries, email clients are frustratingly independent. Hopefully soon they’ll collaborate to develop a more unified standard, but for now here are some key email building concepts to keep in mind.

Basic background and text inversion

The most simple rule to consider is that your default background and text colors will usually be inverted. So unless you have a specific plan for using a different background color on text or images, let this simple rule be your friend. Plan for your white background to convert to dark gray, and your dark text to convert to a white shade.

When it comes to colors, plan for anything

This is where different email clients don’t seem to agree. Some email clients apply a dark-to-light/light-to-dark color inversion for colored elements like text and buttons, while some (namely Outlook) keep many dark elements dark. So, for example, a dark blue button that contrasts nicely against a light background will stay dark blue even if rendered in dark mode. So, make sure to test your layout in both scenarios.

Custom styling

Most email clients allow for styling tags that target a user’s light/dark preference and can adjust your design accordingly.

More dark mode design resources

Each platform and operating system has its own standards and resources for designing for dark mode. Depending on which destination you’re designing for, you’ll want to consult the developer documentation for the technical route to implementing design for dark mode users.

Apple

When building on iOS, iPadOS, macOS or tvOS, refer to:

Apple Developer guidelines on designing for dark mode
Apple guide to evaluating the interface style best for your app
Apple Developer docs for supporting dark mode

Google

Google has excellent design practices for material design as well as developer resources for building in dark theme on Android.

Web

Designing for dark mode on web browsers can be tricky, as each browser has different support, but CSS Tricks has a nice dark mode guide that’s inclusive of all major browsers.

React Native

React Native has traversed several cross-platform challenges for native environments, and it’s got solutions for dark mode as well. Here is the React Native Developer Documentation for exposing a user’s color scheme preference. The getColorScheme method as part of the Appearance module will help identify a user’s preference, if available.

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

Email

As referenced above, Litmus has an excellent guide to designing and coding emails for dark mode.

TL;DR? Here’s why you should start planning your brand’s dark mode design strategy:

• Millions of users are growing to prefer dark mode on their devices (double-digit % growth each year since 2020).
• All major browsers and platforms allow users to consume apps, websites and emails in dark mode.
• Your brand (or you?) might actually look better in dark.