Blog

Five Sustainable Web Design Trends For 2015

Posted by in Content Strategy, Design, Sustainability, UX Design, Web Development tagged with


The folks over at The Next Web (TNW) just published their annual roundup of web design trends we can expect to see this coming year. Of the ten trends they published, at least four of them could be considered sustainable web design practices. In putting our own list together, I have included these and one other tactic we would like to see used more frequently on websites and in web applications in 2015.

First, Let’s Put This in Context

Not sure what sustainable web design is? Our friend Pete Markiewicz, in his Creative Bloq post Save the Planet Through Sustainable Web Design defines it as:

Sustainable web design meets the current needs of its users, without compromising the ability of those needs to be met in the future.

A spin on the original definition of sustainability coined by the U.N. in 1987, sustainability in internet terms means that a website or application should be useful and efficient for a long time without degrading itself or harming the environment. As Pete says, “A sustainable internet should be open to an expanding audience while not reducing future access to its services.” Not sure why this is important? Well, according to a report by Greenpeace, if the Internet were a country, it would be the sixth largest consumer of electricity on the planet behind Russia, Japan, China, India, and the US. Since less than 15% of that energy comes from renewable sources in the U.S. alone, one can easily see where the internet could potentially have a significant impact on global warming and climate change.

For Mightybytes and other web designers who subscribe to this philosophy, sustainable web design means providing meaningful, efficient web experiences to the widest audience possible for the longest time possible. Here are some of TNW’s forecasted trends that also fit within this philosophy.

Remove Large Header Background Images

In their number three example, TNW says that by removing large header background images your site can stand out among the many sites that commonly use them. While bucking trends is great, there is a more compelling reason to remove these images: they’re often bandwidth hogs. Improperly compressed images on blogs and websites have long been notorious for slowing down page load time, but ever since the introduction of retina images they have gotten even bigger, fatter, and more problematic for page speed. Optimizing images is one fix to this problem, but you can also remove them altogether. It reduces the number of HTTP requests on your website and can significantly bring down page weight, leading to faster downloads and better efficiency, which is especially crucial on mobile devices and in areas of low bandwidth.

BLLOON homepage screenshot

Blloon.com: An example of a website without a large background image.

Remove Non-Essential Design Elements in Favor of Simplicity

Number four on TNW’s list tops the list of any designer focused on sustainability: if it’s not absolutely critical to the purpose of your page, get rid of it. I’m looking at you, bandwidth-heavy home page carousels. In addition to having typically miserable click-through rates, these image slideshows can add huge overhead to the pages on which they are used. The same goes for any other image, graphic, icon, JavaScript widget, autoplaying video, or other content type that does not directly serve the page’s primary function. By deleting superfluous interface elements you not only optimize pages for faster download, but you also strip them of components that may distract users from finding what they need. Helping users find content quickly and efficiently is at the core of sustainable web design principles. One page, one purpose. Anything more is distracting and inefficient.

screenshot of dropbox simple homepage design

Dropbox does an amazing job of stripping down all non-essential elements on its homepage.

Very Large Typography

Okay, so number nine on TNW’s list doesn’t, at first blush, seem like a sustainable design choice, right? Less tends to be more when it comes to sustainable options on the web or otherwise, so it stands to reason that smaller fonts would be more efficient, doesn’t it? Well, not really. As most fonts are vector-based, how large you set them won’t affect page download efficiency (though you may see a slight increase in rendering time on slower devices). That said, strong visual hierarchy directs users to their destination more quickly and makes pages easier to skim. Similarly, a keyword-rich hierarchical document structure (as defined by H1, H2, H3 tags, etc. in HTML) helps search engines more effectively crawl pages, which ultimately helps people find content faster. So by all means, consider large fonts for page and post titles or other typographical elements high up in your page hierarchy.

screenshot of website with large typography

Strong visual hierarchy directs users to their destination more quickly and makes pages easier to skim.


The point is, font choices matter when it comes to web sustainability. According to tests run by Meta Q, adding custom fonts using any of the three most common methods—@font-face, Google Fonts, and Typekit—can also add about a second of load time to any page. Considering that almost half of web consumers expect web pages to load in under two seconds and will abandon them when they don’t, that’s significant overhead for your page. Plus, custom typography also increases the number of HTTP requests on any page (versus system fonts, which are native to the user’s machine but not nearly as sexy). The more fonts you load onto a page, the more calls to a server are needed. All of these choices use energy, so if you require custom typography, arguably the more sustainable choice would be to load a single custom font, regardless of point size, for use within an immediately apparent visual hierarchy on your page. To maintain sustainable font choices, these large fonts, like the rest of the interface, must also be responsive to the device on which they are displayed.

 

Performance and Speed

The last design ‘trend’ in TNW’s list is actually an entire industry unto itself that exists at the heart of sustainable web design: website performance and speed. We have identified performance optimization as one of the four core principles of sustainable web design. TNW attributes the rise of Responsive Web Design as a key driver in bringing the importance of optimizing websites to light as of late, but in truth this practice has been around as long as websites have. When creating web pages for 14.4 baud modems, designers, frankly, didn’t have a choice. Unfortunately, as high bandwidth has become more ubiquitous and web tools offer more options, designers and developers have likewise pursued these bells and whistles with creative fervor, sometimes of their own accord and sometimes when kowtowing to client requests.


Case in point: as I researched this post I reviewed the comments section of TNW’s article in detail. Upon reloading the page I was greeted by the following message:

screenshot of Disqus Bloat prompting user to reload page

Sure, fancy third-party webpage plug-ins are convenient and save time during implementation, but if they slow down your site and interrupt a good user experience what’s the point?

Just one example of many, comments plugins like Disqus and LiveFyre can increase page weight and significantly impact server requests. Oftentimes, these plugins load all of the scripts and styles needed to run every time a page loads regardless of whether that page has comments enabled or not. This is not very sustainable nor does it provide a good user experience.


The best design solutions typically arise from constraints. Performance optimization offers very well-defined constraints by which to build successful and sustainable websites, so ditch the bells and whistles in favor of more environmentally-friendly choices. We hope more designers, developers and website owners will embrace these constraints to devise unique and maybe even innovative web solutions in 2015.

More Use of CSS Sprites

Though not on TNW’s list of top web design trends for 2015, we want to include using CSS sprites to display icons and other graphic elements on a page. We hope their omission from TNW’s list is because a) they have been around since 2003, and b) their use is already standard practice for all web designers. We still run across web pages every day, however, where each individual icon is its own graphic, meaning it has to be downloaded separately every time the site loads. This is hell on server overhead, download time, and is a decidedly unsustainable approach.


For a great explanation of what CSS sprites are and why you should use them, check out this awesome post from CSS-Tricks titled CSS Sprites: What They Are, Why They’re Cool, and How to Use Them. Yeah, we know it’s from 2009, but as Niels Matthijs noted in his Smashing Magazine article CSS Sprites Revisited, “…the CSS sprite hasn’t truly found its way into the everyday toolkit of the common Web developer.” Often this is because they are time-consuming to implement. Because of the advantages they offer in decreasing server requests and optimizing file size, using CSS sprites is a more sustainable choice and one we hope to see implemented on all websites made in 2015.

Screenshot of CSS Sprites from Mightybytes site

Common icons from the Mightybytes site are compiled in one image that requires just a single server call yet are used all over the website.

Conclusion

We hope in 2015 to see all of the sustainable approaches above and more become standard practice for web designers. While Mightybytes is under no misconception that the handful of websites and software applications we create every year will save the planet, by embracing sustainable design principles we rest easier knowing we are part of the solution, not the problem. If the rest of the information and communications technology (ICT) community did likewise, we could collectively keep as much as eight billion tons of CO2 from going into the atmosphere by 2020, according to a report from the folks at Smart 2020’s Global e-Sustainability Initiative. That’s significant!

Tim Frick is the author of four books including, most recently, Designing for Sustainability: A Guide to Building Greener Digital Products and Services, from O'Reilly Media. He is @timfrick on Twitter. Mightybytes is a full-service creative firm for conscious companies and a certified B Corporation. Connect with us on Twitter or fill out our contact form.