Presentation Purpose
To present three visual design variations for the new IPPC.int website Core Activities & Countries layer
- Information problems & proposed solutions
- Use of web standards to solve the problems
- The designs
1. Identified Problems
- Complex information hierarchy
- Unclear introductory information, lack of visual contrast
- No context for presented information
1.1 Proposed Solutions
- Consistent visual hierarchy between Navigation / Content / Related Content
- Limit number & depth of sections through better information architecture & reusable page templates
- Use of breadcrumbs navigation throughout site
- Better title tags
2. Content, Presentation, Behavior
2.1 Content (HTML)
- Text & relevant images & diagrams in HTML markup only
- Easier to update & to debug (use validator)
- Semantic structure = better search engine indexing of site information (improved information context)
2.2 Presentation (CSS)
- All layout & presentation in externally referenced CSS file
- No presentational code mixed with markup
- Faster-loading pages (cached stylesheet only needs to be downloaded once)
2.3 Behavior (JavaScript)
- Manipulate Document Object Model (DOM) & use the browser's own capabilities instead of server resources
eg. Re-ordering table items
2.4 Accessibility
- Medium-specific stylesheets eg: print.css
- Semantic content accessible to screen readers & to older browsers as logical HTML-only list (lowband)
- Fluid layout with max-width = content flows & collapses = content more accessible in both smaller & larger screens
3. Designs
- Implemented directly in HTML content wireframe
(No polish or IE testing yet!) - http://hypertexthero.com/ippc/coreactivities/
- Main page elements:
Assignment 2: Design Implementation
- Implement feedback into chosen design
- Web graphic production, HTML & CSS template creation of new Core Activities & Countries design
- Browser testing and debugging
- Work with Paola for integration of new code into current system
- Deadline: 27 July 2009