# Presentation: 081197

## Changing the (Inter) Face of PNNL

- Presented By
- Cameron Bates (PNNL)
- Anita Lebold (PNNL)

## What We Will Be Covering

- Where we started and why a large-scale redesign was necessary
- Our planning, design, and development process
- Our ongoing Lab-branding effort and how it relates to the site’s forward-compatibility
- Site architecture, CSS/XHTML structure, back-end features, etc.
- Rolling out standards and templates to the rest of the Laboratory

## Where We Started

- Outdated design – not significantly updated since 1999
- Labor-intensive
- Singular topic – did not show the Lab’s breadth of expertise
- Did not make good use of our available data sources

**Notes:**
A hrs spent each month to manually update the homepage, updates didn’t happen as frequently as we would like

## Planning, Design, and Development

- Analyzed our current site from a marketing and branding perspective
- Identified the most popular content
- Solicited user feedback
- Assessed other websites (government, universities, and private companies)
- Determined that the new site needed to:
- Be a better vehicle for organizational messages
- Have a centralized visual strategy to unify the organization

## The Napkin Sketch

**Notes:**
Our paper prototype (version 1.0)

## Basic Design Decisions

- XHTML/CSS design
- 3-column flexible layout (with 2- and 1-column variations)
- Cater to a 1024x768 base resolution (with considerations built in for 800x600 users)
- Fixed width layout for more control over design
- Flexibility built in for colors and logos
- Use existing data sources to automatically update the homepage (press release database)

**Notes:**
Content structure drove the design – not the other way around.

## Branding Considerations

- Establish a transitional framework
- Decided to keep teal color
- Used the Lab “logo”
- Tried to avoid developing any new elements that could be misinterpreted as a new brand

**Notes:**
Anita to discuss this slide and give a little background on the branding effort

## Site Architecture, CSS, Back-end

- Features prominent Lab links:
- Research, Publications, Jobs, Newsroom, Contacts
- XHTML is standards- and semantics-based
- The order of information in the documents is designed to enhance searchability
- CSS is designed to gracefully degrade in older browsers
- Advanced styles use an interesting negative margin technique (_[link](http://blog.html.it/layoutgala/)__)_
- CSS support for display on handhelds, printing
- News release system integration
- ERICA publications database integration
- Scientific missions marked up as HTML

## Cross-browser Compatibility

## Slide 10

## Defining Standards and Distributing Templates

- Template package
- 3-, 2-, 1-column XHTML files
- include files for navigation, footer
- documentation
- Links to centralized CSS and images
- What is covered: banners, layout options, how to use CSS classes, etc.
- In the process of defining a process for acquiring the templates, keeping track of websites using the templates
- Our current strategy is to target our top-level content that Marketing & Communications own, trickling down to the rest of the Lab’s public websites over time

## Slide 12

## Final Product

**Notes:**
When putting this slide together I was still amazed how close we stuck to our original sketch, thus proving the importance and efficiency of the prototyping design phase of the project

## Take a Tour

- _[www.pnl.gov](http://www.pnl.gov/)_

**Notes:**
Tour the top level pages, RCF and AT, Newsroom

Turn styles on and off

Show blackberry emulator?

## We would love to talk to you

- Cameron Bates
- _[Cameron.bates@pnl.gov](mailto:Cameron.bates@pnl.gov)_
- (509) 375-6904
- _[www.pnl.gov](http://www.pnl.gov/)_
- Anita Lebold
- _[anita.lebold@pnl.gov](mailto:anita.lebold@pnl.gov)_
- (509) 372-4952