For the website that i am proposing i will also propose ways in which this website can truly be green so that it doesn't contribute as much as something that was printed, like the fact a website uses electricity which is obviously produced using fossil fuels in most cases. Now i might not be able to implement them but its something that will be useful in the future and it shows that if it was to be made then they have been thought about.
Different methods for creating a green website
Reducing CO2 by tackling page bloat
At 1.4MB, today’s average page is 15 times larger than it was 10 years ago, primarily due to images (881kB) and script (224kB). Plain old HTML totals just 54kB—but when’s the last time you saw an HTML-only site? This average page also makes more than 100 HTTP requests. Whether they fetch a big object or a small one, these add up to more delay and more power wastage. The average site is also slow: Alexa’s top 2,000 retailer sites now take an average of more than seven seconds to load—much longer than users consider acceptable.
BUDGETING FOR A LEAN, MEAN, AND GREEN WEBSITE
No one intentionally sets out to build a 1.4MB page, but clients often demand eye-catching images, advanced social features, and plenty of design bells and whistles, and that’s pretty much all it takes to get to that size. The best way to prevent this kind of obesity is to set a page size budget: start with a target page size, and stick to it.
At MadPow, we’ve adopted the page size budget approach to help us chase better page-load performance, with the holy grail being a page that loads in two seconds or less. Of course, the more page weight we shave off, the smaller the site’s carbon footprint. To keep track of this, I multiply the page size by analytics on user visits to arrive at a rough total for site traffic, not forgetting to separate out the more-polluting mobile traffic and account for caching.
Sticking to the page budget means considering data-weight at each stage of design:
Content strategy: If you are retrofitting a site to reduce page weight, a quick fix might be to trade higher-weight content for lighter alternatives, like still pictures instead of video, or text instead of images—so long as the same user and business goals are served. Better yet, if you use a “content first” approach, you can bake the size considerations into your content planning, so as to make content choices that are appropriate for the audience and the data budget.
Interaction design: The experience definition phase of design is the perfect time to intercept the more data-hungry site features that threaten a page budget. The ubiquitous carousel is a prime offender—a typical one has three to six big images, plus the JavaScript needed to make it move, typically adding up to hundreds of kilobytes. The value of carousels is debatable anyway; if you need to make a metrics-driven case for reduction or replacement, take the Brad Frost Carousel Challenge. Other candidates for reappraisal include sharing buttons, embedded maps, auto-play video, Flash, ads, and syndicated third-party content services—all of which come with a hefty data overhead.
Consolidating all the small images on your site by using CSS sprites or web icon fonts will save data and HTTP requests; pure CSS icons will be the lightest-weight option, when browser support catches up. And since mobile data is so much more polluting than wired data, make sure responsive sites use a working responsive images solution. Good optimization could shave 72 percent off mobile image weight.
Code design: Front-end optimization is burgeoning with low-hanging fruit: shrinking scripts, compressing downloads, setting appropriate caching times, and combining files can all help reduce data overhead and HTTP requests. For a quick taste, point Google Page Speed at your site, and it will identify which techniques could be applied to help speed it up. For a deeper dive, I recommend reading “Web Performance 101,” or Lara Swanson’s recent ALA article.
Green hosting: Even before you start minimizing your site’s carbon footprint through design and optimization, you could consider moving to a green host. Many of these are powered by renewable energy—particularly in Iceland, where data centers have opened to take advantage of cheap geothermal power. Green hosting might not be for everyone yet (it can be more expensive, and Iceland might be far from your customers), but more local green hosts are starting to appear. Some cloud-based services are getting greener, too: Google, Apple, and Rackspace get some of their power from renewables, though according to Greenpeace, Amazon Web Services does not.
Offsetting the rest: Even after applying a lean design, optimizing, and moving to a green web host, your site will still have a carbon footprint. To account for that, you can buy an offset, which typically costs $19 per ton, depending on the project. Offsetting doesn’t actually take the CO2 out of the atmosphere, and it is a poor substitute for reducing emissions. However, many programs have additional benefits, such as funding education in the developing world or protecting fragile habitats.
(source)
These suggestions show methods that are quite technical and come when the website is actually being design and coded such as having a green web host, shrinking scripts, compressing downloads, setting appropriate caching times, and combining files can all help reduce data overhead and HTTP requests etc etc. But if this website was to be built then these things would be taken into account and applied.
Web visual research
I want my website to have a simple layout that is easy to navigate, maybe it a continuous scroll, but along with that different pages for the different sections of the website, such as the place for communication and collaboration, the 'social' area.
Easy simple layout with a simple grid system implemented, impact image and the headings above for the different sections
A simple continuous scroll website with small simple images and links to other pages off this one.
I like the layout of this one but maybe there is too many images being used
Stock images
The images i am looking for are ones that aren't the stereotypical sustainable images that are found on a lot of websites with children running around happy in a field, I'm looking for images that say wow, the world is an amazing place, this image will be the first image that is seen so will have to be striking, and although i don't want stereotypical images it will still have to show that the website is for sustainability.
This image might be a bit too sterotypical but i do think it would work well, maybe too much green going on.
I like this image, it isn't covered in green and isn't the stereotypical image but it is an amazing picture that has a 'wow' moment and shows that the world can be an amazing place.
No comments:
Post a Comment