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
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.
Remove Non-Essential Design Elements in Favor of Simplicity
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.
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:
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.
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!