10 Principles of Sustainable Web Design Part V – Design Rollback


Principle #7 Apply web strategies that enable rollback

They’re Green because: These strategies all reduce your web’s energy footprint.

Your Competitive Edge: Your site will work for more users over a larger range of devices.

Modern web design uses several strategies that make it easier to do rollback in your workflow. Each of these strategies creates a baseline website, which is then enhanced for different users or devices. The baseline site is ultra-efficient by WPO standards.If problems rear their head in the enhanced versions, there is a pre-built path for rolling back the design and creating a more sustainable set of enhancements.

Here, I’ve listed several strategies, and re-written them in sustainability language. The first strategies are device-centric, and work by starting by defining a basic display, and work up to more complex layouts.

Strategy Baseline Site Enhancement Sustainable?
Mobile First A mobile-specific interface. The desktop site is built from the mobile interface. Mobiles typically use 1/10 the energy of a desktop, and the mobile hardware takes fewer resources to manufacture and recycle.
Responsive Design A generic layout containing all the site’s information, usually optimal for mobiles. CSS media queries adjust the layout based on screen size or device. The user’s computer only renders the assets and markup it can support.

15_mobile-first

The second set of strategies are people-centric. They define universal interfaces supporting all users, and add enhancements for those with the ability to handle a more elaborate design.

Strategy Baseline Enhancement Sustainable?
Progressive Enhancement HTML-only website, server generates dynamic pages Server-side dynamic is converted to client-side via Ajax By pushing more work onto the server (and less into Ajax and JavaScript) we burn server bits, which are typically greener than those on the client (see Principle #10).
Inclusive Design The site supports all users on all devices via good information design and user experience Optional Your site’s visitors spend less time and energy accessing the site’s content, lowering the site’s footprint outside the Internet.
Accessible Design The site’s widgets support text-readers via ARIA or similar technologies Visual or rich-media equivalents of text information are added, and non-information graphics are assigned ARIA roles The site works for all users, and text readers are more efficient at reading the site to their users.
Polyfills The site supports a simple interface on all devices JavaScript libraries provide functions to old browsers that allow more elaborate page rendering Polyfills increase the download footprint, but provide a better user experience for the “browser-challenged”

16_progressive_enhancement

More on sustainable design strategies

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