changing the (inter) face of pnnl presented by cameron bates (pnnl) anita lebold (pnnl)
Post on 19-Jan-2016
220 Views
Preview:
TRANSCRIPT
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
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
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
top related