Sustainability and “Future Friendly” websites


Current trends in web development stress features like cross-browser compatibility, standards-based development, and common code. To take it a step further, some groups have defined a meta-level defining how to take the web into the future, often referred to as “future-proofing” a website.

Sustainability, by definition is about use of a resource in the future, and making efforts to ensure that future use is as good as today. So, a “future proof website”, or a “future friendly website” will be a sustainable website, in terms of long-term operation.

In the following, I highlight a few of these “position paper” sites that discuss sustainability of the web, without using the term:

Future Friendly: http://futurefriend.ly/thinking.html

This site is overtly about the philosophy of future-proofing, and also illustrates the close connection between future-proofing and sustainable web design.

Compare the mission statement of this site:

…We want to make things that are future friendly. By anticipating what’s next, we can react to today’s concerns but also build long-term value for people and businesses….

…to the standard Brundtland Commission definition of sustainability:

(sustainable design)…”meets the needs of the present without compromising the ability of future generations to meet their own needs…

The site prescribes a mix of standards-based coding, coupled with effective workflow. It’s an attempt to get sloppy old-school designer designing for “the future” (read standards that are new today). It doesn’t so much future-proof as move more designers to consensus about what the future of the web should be.

Move the Web Forward: http://movethewebforward.org/

This about making yourself future-proof. It provides lists of blogs and tutorials, as wells as lifestyle suggestions that will make you a cutting-edge developer. The implicit goal is to have more websites built to modern standards and specifications, which will in turn make the web more sustainable.

Now I must point out that this site is *heavy* – in terms of energy efficiency, “Move the Web Forward” is not sustainable at all. Is a good message worth a big carbon fooprint?

Among other features of sustainable web design, this site links to articles with titles like “Mobile First” and “Content First”.  It then considers the likely future of the web – an ever-expanding sea of mobile devices, with a refreshing analysis of the coming role of sensor data as web content. This is just starting, as mobile web frameworks like Phonegap enable “hooks” into device sensors. Like the first example, the goal is to get everyone to a common consensus, design and development strategy, so the future is more homogenized and standards-based.

“Boilerplate” Websites

This site, along with the 20 or so “boilerplates” in common use today collectively address standardization issues related to the move to HTML5 by providing a default file/folder structure, markup, JavaScript, and additional files (e.g. .htaccess) that give a good starting point for a sustainable website. Future-proofing comes from using default pages and libraries which have been put together for maximum flexibility and standards-based code.

The problem with boilerplate projects is that some web designers and developers confuse them with templates. A boilerplate, used as a starting point, is valuable. However, many lazy or naive developers just chuck all the files from a big boilerplate into their site, without bothering to look at what they do.

For example, altering the .htaccess file to manage caching of static assets is a great way to reduce the number of downloads that are needed to use a site. But the defaults in the HTML5 boilerplate site are just that – they’re not optimal for most projects. But there must be thousands of websites running with that default .htaccess file, which could be much more “future proof”, as well as energy efficient, if the boilerplate was used correctly.

In fact, many of the files in HTML5 boilerplate aren’t needed in most projects. If they are used without thought (as if they are a sort of “easy” button for web design) they may do more harm than good.

Progressive enhancement

This article highlights the role of Progressive Enhancement, often unjustly neglected in favor of the newer Responsive Design, plays in future-proof websites. Future-proofing results from the correct design strategy to support both old and new devices.

Progressive Enhancement satisfies several features of sustainability. By starting with a “primitive” website that would work 10 years ago, it “past proofs” as well as “future proofs” the site. This increases access to the site, and maximum access is a goal of all sustainability frameworks. Since it will help those on “old” mobiles, it follows the shift from desktop to mobile, “future proofing” the side for a mobile future.

Progressive Enhancement also leads to design and code efficiency. Instead of starting with bloatware libraries, the designer considers the simplest possible version of the website’s content, and works out from there. This can be converted to a pure Sustainable Virtual Design strategy by paying attention to efficiency during the build-out, and walking back if the design becomes a carbon-burning energy hog.

The article correctly points out that some things are difficult to future-proof, in the sense that we can “fire and forget”. In particular, Search Engine Optimization, or SEO cannot be designed now for effective future use. The SEO landscape changes rapidly, with new rules by search engines constantly shifting the ground on which the marketer stands. So, SEO, the equivalent of game trails through the web ecosystem, must be constantly adjusted. Sustainability means constant work, rather than creating for now and the future.

The design process as sustainability

Many “future-proof” website articles are actually about doing professional web design. The article above starts with the assertion that futures websites MUST be:

  1. Simple
  2. Portable
  3. Fast
  4. Human
  5. Useful and/or interesting

In fact, this is true for websites now – do we need simplicity less? Unless you belive in DEVO’s DeEvolutionOfMankind, and expect IQ to drop until people only know to push the shiny button, we don’t have to be simpler tomorrow than today. And it is worth remembering that simplicity is not always the best solution. A multi-layered road map may be very complex but very helpful. Removing everything except a few lines would not help the road map. Ditto for websites.

However, simplicity and the other goals are just good design. The way to achieve these goals is with a professional design process, considering the site audience, user experience (UX), and usability and accessibility testing on the completed site. The “human” aspect, sometimes called “emotional design“, is also important today, not just in the future.

In other words, these articles are really about “today-proofing” your website – bringing your design process sup to the standards used to create highly effective and engaging experiences. A bit of a misnomer here.

Be ready for crowd surge and hacks

http://blog.b2netsolutions.com/web-hosting-guides/why-you-need-to-future-proof-your-website/

This site considers another feature of the future – changing access to your website. A site that becomes popular may suddenly have to scale from a single server to a cloud service.

In addition, the site reminds us that popular sites attract a new collection of “users” – hackers and griefers who want to damage or destroy the site.

What’s needed to convert “future proof” into sustainability

While these sites describe sustainable web design, their definition is not complete. For true sustainable virtual design, a “future proof” website should be optimized for a low carbon footprint, and the design team should be a band of hybrid designer-developers using iterative techniques. Let’s hope that these other considerations become part of “future friendly” websites in that touted future.

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s