Ippc.int Website Redesign

Assignment 2:
HTML/CSS Home & About design implementation

Simon Griffee

Presentation Purpose

To highlight features & benefits of the underlying code for the new IPPC.int website Home & About layer

1. Separation of website design elements using web standards
2. Accessible design

1. Content, Presentation, Behavior

1.1 Content (HTML)

• Text & relevant images & diagrams in HTML markup only
• Semantic structure - use the right HTML tags for content
• Easy to update & to debug (use validator)
• Better search engine indexing of site information

1.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), easier to update

Drop shadow: visual design element - In CSS.

Photograph/diagram: information-rich image - In HTML markup.

1.3 Behavior (JavaScript)

• Like CSS, best to keep JavaScript scripts off the page, in referenced files so it is easier to develop & maintain code
• Manipulate Document Object Model (DOM) & use user's browser's capabilities instead of server resources
  eg. Re-ordering table items
• Not always possible to keep markup completely free of scripts

1.4 Tips for less webdev headaches

• Define a DOCTYPE & use the W3C validators:
  • HTML Validator: http://validator.w3.org/
  • CSS Validator: http://jigsaw.w3.org/css-validator/
• Use a JavaScript framework such as JQuery: http://jquery.com/

2. Accessibility

• Separation of layers makes site content more accessible
• Logical content order
• Medium-specific stylesheets eg: print.css
• Accessible to screen readers & to older browsers as logical HTML-only list (turn off stylesheets to demonstrate)

2.1 Fluid layout

• Content flows & collapses
• Window & text resizing increase usability
• Content more accessible in both smaller & larger screens

2.2 Tips for better accessibility

• Remember the user! Put yourself in a site visitor's shoes when writing content & implementing features & designs
• Visit the site using a text-only browser such as Lynx

Next Phase: IPPC Official Information layer

• Proposal & visual mockups
• Deadline: 14 July 2009 (tentative)

Links

• Wireframes
• Mockups
• Presentations

Cheers!
Simon