Some people show up at their preferred coffee shop with a power brick for their laptop in one pocket and a USB hub for their other devices in the other. Others show up with just a laptop and a dream, casually sipping an Oat Milk Latte as the last 10% of their battery’s charge ticks down.
Whoever your audience is, more battery life means more time they can spend using your app or website. And many users do care about that. So today we’re going to look at some fast hacks for improving your web application or site’s energy efficiency.
Dark Mode
When applications, operating systems, and websites first began the trend of offering a “Dark Mode”, many people greatly overestimated the battery performance increase that it would provide. For devices that use an LED screen, like a laptop or certain phones and tablets, the benefits are actually pretty negligible. But users on OLED screens—which have become common on smartphones and tablets—will see a fairly noticeable boost in performance.
That’s because OLED screens work differently than LED screens. A black pixel on an OLED screen is dark because the pixel itself isn’t being lit. And darker pixels draw less of the system’s energy resources than brightly lit pixels, like whites and vibrant colors. So, themes that populate more of the screen’s real estate with dark pixels draw less power. Dark Mode is also a lot easier on the eyes and people who spend a lot of time working on computers generally tend to prefer these types of themes.
Color Contrast
Providing good, easy to read color contrast is something you should already be doing for accessibility reasons. In addition to helping you avoid some costly lawsuits, good color contrast can actually help with battery performance. Sort of. See, web sites and web applications that have good color contrast ratios are easier to read and interact with on lower brightness settings. And many users prefer those settings, both to preserve battery life and to reduce eyestrain.