1 / 15

Changing the (Inter) Face of PNNL

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

salena
Download Presentation

Changing the (Inter) Face of PNNL

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 2

  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 3

  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 4

  5. The Napkin Sketch 5

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

  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 7

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

  9. Cross-browser Compatibility 9

  10. 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 11

  12. 12

  13. Final Product 13

  14. Take a Tour www.pnl.gov 14

  15. We 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 15

More Related