Designing a Low-Energy Portfolio Website

I started making my own portfolio website on Adobe’s portfolio feature, thankful that I would not have to spend more money on a domain and server account, as well as the already coded templates—simple and easy. However, I know very little about the ways of the web, the way that you are supposed to optimize images to decrease the file sizes, and the way the servers have to send information back and forth constantly in order to load content onto a site. So, I embraced my large images, ability to put as much content as I would want on the site, and the amazing animation features that work throughout the site that would be difficult for me to learn myself.

##The Issue With Online Template Websites

This is also the case for all online website makers: Squarespace, WordPress, CargoCollectiv, Wix, Weebly, GoDaddy, etc. They make it too easy to be unsustainable. You get unlimited, automatic animation effects that takes power to sustain. It’s easy to upload as many pictures and content as you would like. Templates are set up so we don’t have to worry about designing it ourselves. Best of all, it looks like all the rest of the websites on the web, and it is quick (heck you could have a working website in an hour). But is this really the best option? Learning to code and design on the web makes you aware and appreciate what is on the web; it can be pretty difficult to code, and it allows you to decide what is really important to put on a website. However, automatically going to the easiest options means we are unknowingly uploading images that are 4MB large, and putting content on a site that does not need to be there, and even creating a site that did not need to exist in the first place. Where is all of this information stored? On a server who knows where with hundreds or thousands or tens of thousands of other websites and their loads of data and content. And what powers those servers? The same thing that powers our electricity: natural gas and coal.

This is also the case for all online website makers: Squarespace, WordPress, CargoCollectiv, Wix, Weebly, GoDaddy, etc. They make it too easy to be unsustainable. You get unlimited, automatic animation effects that takes power to sustain. It’s easy to upload as many pictures and content as you would like. Templates are set up so we don’t have to worry about designing it ourselves. Best of all, it looks like all the rest of the websites on the web, and it is quick (heck you could have a working website in an hour). But is this really the best option?

Learning to code and design on the web makes you aware and appreciate what is on the web; it can be pretty difficult to code, and it allows you to decide what is really important to put on a website. However, automatically going to the easiest options means we are unknowingly uploading images that are 4MB large, and putting content on a site that does not need to be there, and even creating a site that did not need to exist in the first place. Where is all of this information stored? On a server who knows where with hundreds or thousands or tens of thousands of other websites and their loads of data and content. And what powers those servers? The same thing that powers our electricity: natural gas and coal.

Other than the fact that these programs can be environmentally unsustainable, they also inhibit the ability to make more custom, creative, and interesting websites. Starting a website from scratch means that I can decide if the content is left, right, or center justified. I don’t have to conform to the basic notion of what a website should look like and do. I can control where the captions will go, where the images will go, what will become a button.

The most irritating thing that I found about those websites was that there was a particular design choice that I wanted to change, and I could not change it. Yes, of course this takes time and knowledge, but it is important to understand the efforts that go into building a website, and it will help you to analyze what is and isn’t important.

Having an online portfolio as an artist nowadays is a given. But think of all of those artists that have their own websites that are jammed packed with large images and content just like mine; it ends up consuming a lot of energy and space on internet servers. If every artist were to carefully consider their footprint on the web, we might end up saving a lot of energy in the end.

##Online Portfolio Considerations

My goal was to create a more sustainable, less energy consuming website, and in order to ensure it would in fact be more sustainable, I had to code it myself.  Content needed to go down. For starters, I had to think more philosophically about the point of the portfolio website. What do I absolutely need to include? What can I take out? Who are my viewers, what are they looking for, and what do they need to see? The people looking at my website are people that I am specifically applying to for an internship (or job in the future). They want to see my work and my abilities. They are people not trying to find someone to commission work which is why I got rid of a contact page and about me page. I can explain the “about me” section in my cover letter to them or in an interview with them. It was not necessary, so I replaced it with a small list of my skills—the necessary barebones. And down the line if I feel that I need it, I will add it in.

  Additionally, I wanted to create a single scroll page because this would eliminate the need to click from page to page within a site, saving the servers from having to send information back and forth, over and over again. It would take one load to view the entirety of my site.  The element that takes the most energy to load are the pictures on the site. In my previous portfolio, I did not understand that it mattered what the file size of the images were, so I optimized my images to get them all below (except for a few and the GIF files) 100KB.  The time it took to load my site decreased significantly. I also paired down the number of images to my most successful pieces. Although I am very proud of my drawings that I created, because they do not serve much in reference to building a graphic design portfolio, I removed them from the site.

##Design Choices   Before I began coding, I thought about the fact that when I code I often fiddle around change stuff, and keep trying different scenarios of code through trial and error. This process in of itself uses energy and time that did not need to be wasted. I instead planned my code visually first on paper, then wrote down the code I would need to write in the HTML and CSS. When I opened visual studio code, all I had to do was copy it in. I also thought of ways I could use the least lines of code. All the elements were treated as a body instead of individually. I left many of the elements in the places HTML naturally places them, and used simple coding to make it visually unique. I did not link any fonts to the code, sticking to the default Sans-Serif font, and I used only two colors.

  I actually found it challenging to find examples of low-energy sites, and if they were supposedly low-energy there was no indication or explanation of them being low-energy. A real inspiration was Kris De Decker’s unattainable (at this stage) solar powered website, and a few single-scroll online portfolio’s that I found.

• https://www.dbworks.pro/
• http://ovefelt.se/
• http://www.tvrdek.cz/en

##Visible Changes

When I inspected both of my sites, I could actually see the impact that my new site had on decreasing energy. To experience my new coded portfolio site, it took one load of 141ms (which is a really low amount). In order to load my previous website, it took 700-900ms per page click, and there are seven different pages to load to view all of the content. Though this project may seem minutely impactful in the grand scheme of sustainability, if everyone were take this approach, it would make a large-scale difference. Of course, visual aesthetics might be more important to someone, and that does not have to be disregarded—just being mindful and designing with this understanding is what counts.

##In Conclusion

I personally know very little about coding, and have only been coding for two months, but I successfully created my own website. This is to say anyone else can do it too. I even paired down content and other web design elements. It surprisingly is not too hard to make a site look similar or the same to that of Squarespace’s templates with limited knowledge of coding, however, I decided to make it look different and paired back for the sake of having a smaller footprint. That is to say, I took a more extreme approach and made design decisions that arguably isn’t actually necessary. That is left open to consider. But it is important to take the extreme approach to see how far you can take it, and ease up if necessary.