How Flat Design Makes Your Website More Sustainable

Posted by in Design tagged with ,

Sustainable Web Design Series No. 19

Flat design strips away unnecessary elements, such as gradients, beveled corners, and so on. In this post, we explore why this approach is also eco-friendly.

Flat design is everywhere. Companies like Microsoft, Google, and Apple have moved to flat design websites or flat design operating systems. Its clean approach strips away needless elements that distract users. Plus, it also puts content-first, which is better for users.

But flat design is something else, too. Itā€™s an eco-friendly approach to web design. Here’s how small changes to individual design elements can improve your site aesthetically and reduce asset size, allowing pages to load faster and reducing environmental impact.

Flat Design Buttons

screenshot comparing Google's new flat design to their old skueomorphic version
Googleā€™s flat design buttons (and updated logo) reflect a cleaner aesthetic and clearer calls to action.

When creating flat buttons, the idea is to use no imagery, gradients or drop shadows, just a flat color ā€” a square or rounded corner button ā€” and the button call to action. By not using a background image in your button you remove the HTTP request to the image ā€” and that uses less energy to create the button on screen. Flat buttons are created with code, and therefore use less energy than an image to render.

Flat Design is Content-First

Flat design can go a long way in helping your siteā€™s functionality and readability as well as being more energy efficient. Check out Microsoftā€™s old search page vs. the new, sleeker version.

screenshot of original Microsoft search page
Original search page
screenshot of new microsoft search page with flat design
New Search Page: cleaner, with no gradient background or search buttons

By removing gradient colors, and, in the case of the form search bar, the buttons altogether, the page focuses more on the search content (what the user is ultimately looking for) and creates a more readable page.

Background Colors in Flat Design

It used to be that using gradient imagery or large, full-screen background images in the background of a site was all the rage. But this approach can lead to heavy page load times. This increases server loads and uses more energy. By switching to flat colors, you can create a cleaner direction to content that helps visitors find your content (or products) faster.

screenshot of anthropologie website
Anthropologie uses a large background image AND another image within the content frame. This can lead to heavier load times for the site.
screenshot of warby parker website
Warby Parker uses a lot of white space to draw visitors to their products. Here, the focus is on the products with the navigation receding into the background. Because they use so much white space in the design, they can use larger header images to create a site aesthetic without increasing load time.

Using Sprite Icons

Using a sprite sheet for all your icons can reduce overall page size and help your site load time. It reduces the HTTP requests for multiple icons down to one file. To learn more about sprites check out the Smashing Magazineā€™s article CSS Sprites Revisited.

screenshot of a sprite image of icons
Example of a sprite sheet from Vanilla Forums.

By placing your flat icons into a sprite sheet you can create beautiful and seamless icons that help visitors quickly identify useful information as well as reduce page size.

screenshot comparing new and old tweet icon
A gradient Twitter icon (left) vs. a flat Twitter icon (right)

Not sure where to start with flat design?

Check out these great resources:

Green Your Website!

Download our free web sustainability checklist.

Get the Checklist
MightybytesĀ is a Chicago-based digital agency and Certified B Corporation. Connect with us on TwitterĀ or get in touch viaĀ our contact form.