Changing the (Inter) Face of PNNLChanging the (Inter) Face of PNNLChanging the (Inter) Face of PNNLChanging the (Inter) Face of PNNL

Presented ByCameron Bates (PNNL)

Anita Lebold (PNNL)

2

What We Will Be CoveringWhat We Will Be CoveringWhat We Will Be CoveringWhat We Will Be Covering

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

3

Where We StartedWhere We StartedWhere We StartedWhere We Started

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

4

Planning, Design, and DevelopmentPlanning, Design, and DevelopmentPlanning, Design, and DevelopmentPlanning, Design, and Development

Analyzed our current site from a marketing and branding perspectiveIdentified the most popular contentSolicited user feedbackAssessed 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 SketchThe Napkin SketchThe Napkin SketchThe Napkin Sketch

6

Basic Design DecisionsBasic Design DecisionsBasic Design DecisionsBasic Design Decisions

XHTML/CSS design3-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 designFlexibility built in for colors and logos Use existing data sources to automatically update the homepage (press release database)

7

Branding ConsiderationsBranding ConsiderationsBranding ConsiderationsBranding 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-endSite Architecture, CSS, Back-endSite Architecture, CSS, Back-endSite Architecture, CSS, Back-end

Features prominent Lab links: Research, Publications, Jobs, Newsroom, Contacts

XHTML is standards- and semantics-basedThe order of information in the documents is designed to enhance searchabilityCSS is designed to gracefully degrade in older browsersAdvanced styles use an interesting negative margin technique (link)CSS support for display on handhelds, printingNews release system integrationERICA publications database integrationScientific missions marked up as HTML

9

Cross-browser CompatibilityCross-browser CompatibilityCross-browser CompatibilityCross-browser Compatibility

10

11

Defining Standards and Distributing Defining Standards and Distributing TemplatesTemplates

Defining Standards and Distributing Defining Standards and Distributing TemplatesTemplates

Template package 3-, 2-, 1-column XHTML files include files for navigation, footer documentation

Links to centralized CSS and imagesWhat 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 templatesOur 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 ProductFinal ProductFinal ProductFinal Product

14

Take a TourTake a TourTake a TourTake a Tour

www.pnl.gov

15

We would love to talk to youWe would love to talk to youWe would love to talk to youWe would love to talk to you

Cameron Bates Cameron.bates@pnl.gov (509) 375-6904 www.pnl.gov

Anita Lebold anita.lebold@pnl.gov (509) 372-4952