Examples

Examples of good design

We have collected several examples of existing websites related to climate change that incorporate best design practices. We're not endorsing the views of these sites over those of other sites; we are just providing them as examples of good design.

This page contains several good examples of navigation, including a general navigation bar, grouping by specific subject area, and grouping by audience identification. (from NRCS)

This example has several good accessibility features: tabs across the top organize the site and allow the user to easily locate information, and the user is given the option of downloading information in multiple formats. (from Environmental Sci & Tech journal)

This site's best practices for clarity include tailoring information to different

audiences, including by age, occupation and geographic location.It also takes advantage of social networking tools. (from EPA)

This site's design includes several elements that make its layout understandable and visually appealing, and also make it interactive.
(from NASA Climate Change)

This site's About Us page is an excellent example of transparency: the authors' intentions are clearly stated, they discuss how their visuals were created, and they mention the affiliations of site contributors. (from RealClimate)

"Bad to good": an animated look at incorporating best practices

In addition to good design examples, we want to provide you a look at some of the steps your group can take to improve your existing website design. This presentation focuses on a series of "screenshots" from a fake website that will take you through some of the steps for improving your site. We start with some simpler design features, and move through progressively more complex things to do.

Best Website Practices: A Tutorial

Here are the still "screenshots":

Version 1: the original "bad site"

This site is intentionally poorly designed, containing a mix of design features that leave much to be desired.

Version 2: focus on design & color

Changed sidebar and main text window background colors.

Made all header text the same color, and all lines & text box borders the same color.

Removed "blinky" border from left sidebar.

Changed "Save the seals" text from grey to black.

Version 3: focus on arrangement & navigation

Created tabs for major categories, and moved most links to a dedicated page.