Changing the (Inter) Face of PNNL Presented By Cameron Bates (PNNL) Anita Lebold (PNNL)

2 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

3 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

4 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

5 The Napkin Sketch

6 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)

7 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

8 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)link CSS support for display on handhelds, printing News release system integration ERICA publications database integration Scientific missions marked up as HTML

9 Cross-browser Compatibility

10

11 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

12

13 Final Product

14 Take a Tour

15 We would love to talk to you Cameron Bates (509) Anita Lebold (509)