Difference between revisions of "Website/What's New/2008 Refresh"

Revision as of 10:24, 19 January 2009

The 'Website Refresh' is a broad term encompassing design changes to the OOo website that were progressively introduced between October 2008 and January 2009. The list of changes that have been made to different areas of the OOo website are documented on this page.

New Header

Design Considerations

Following the launch of the OOo website redesign, concerns were raised about the contrast and accessibility of the header's functions. It had been designed not to draw attention to itself, combining Search, a link to the NLC language selection page, and the Log In form in an HTML/CSS tab interface.

The new header design seeks to address these concerns in the following ways: by improving the contrast, accessibility and visibility of the header's 3 main functions.

Other changes

• Header logo image is now controlled via CSS (was an <img> tag) and has a <title> tag.
• Positioner style is controlled via CSS (was wrapped with an <em> tag)
• More id tags assigned to header elements so they can be overwritten with JS if necessary
• Navigation tab states are more distinguishable
• The header is 15 pixels shorter

Homepage Styles

New Galaxy Icons

• Thanks to Stella Schulze for making some custom icons specifically for the homepage

Improved Mouseovers for Action Statements

• Arrow graphics indicate whether action statement is expandable or just a link

Improved Download Button

• The new download button is much bigger
• The download action statement can now be closed after it has been opened

News Style

• Simpler, vertically flexible and proportional-width (24%) style for news items (the gull in the rounded box is used on all other pages utilizing the campaign div).

General Styles

• a:hover and a:visited styles have been added
• Page background set to white to override custom browser defaults
• Minor margin/padding adjustments in CSS to lists, headings, paragraphs, etc
• All fonts default to sans-serif, letting the user choose the font they would like for the website (via the browser)

NavColumn

• Gradient background on NavColumn (left hand navigation) headers (e.g. Project Tools, Search, How do I...) and #navcol sections - fade down to white with a semi-transparent 2 gulls motif from the OOo logo at the bottom-right
• The clickable area has been expanded (links have 100% width within NavColumn)
• Mouseover effect for NavColumn links
• A 2px white margin from the left side of NavColumn has been removed

Download Page

• New graphics for download buttons - thanks to Stella for making these!
• New graphics for download / help us test OOo messages

Wiki

• The OOo wiki skin was updated to resemble the main OOo website styles more closely

Accessibility

Access Keys

• 1 - OOo Homepage (or the page that the header logo links to)
• 2 - Language Projects
• 3 - Register if logged out, My Pages if logged in
• 4 - Log In if logged out, Log Out if logged in
• 5 - Search
• 6 - News
• 7 - Download
• 8 - Support
• 9 - Projects
• 0 - About

Other

• alt attribute added to search field in NavColumn

Other Stylesheet Changes

• Minor rearrangements in [style.css to group related styles more logically
• Print stylesheet was updated - text from the header is no longer visible
• Navigation styles separated into #navigation (for positioning) and .navigation (tab list styles). This allows NL projects to override the default navigation with absolute positioning (e.g. <div id="#navigation2" class="navigation">...) while reusing the default navigation styles.
• Homepage styles were moved from inline CSS (<style type="text/css">...) to a stylesheet file (/branding/css/home.css)
• The IE6 stylesheet has been removed as the new header is compatible with IE6

Known Issues

• Caching - the OOo website appears to be displaying cached pages, even for authenticated users. This means that the header may display an incorrect login status - i.e. when you are logged in, it may incorrectly report that you are not logged in. Pressing CTRL + F5 (or forcing the browser to refresh the page) will get the header to display the current status, but this is an undesirable workaround to an issue that needs to be addressed. The problem seems to be minimized if you stay within a particular project/subdomain.
• Konqueror Display Bug - the borders for the header's username/password text fields show through, even though the log in form is not visible (i.e., 'Log In' has not been clicked). This appears to be a Konqueror bug.

What's Next?

Possible directions:

• Improving breadcrumbs and clarifying OOo website structure
  • Basic problem statement: The term 'categories' is problematic if one is trying to understand the site structure. If we look at the Categories page (called ProjectList), it has one breadcrumb: 'Projects' - if we click this, we get taken to the Categories page, not Projects as we might expect. But on the Categories page, we see that Projects are one of numerous categories! If we go to Community council (a category), we can see the breadcrumb says Categories > council. So if we go into a project, shouldn't we see Categories > Projects > User Experience, for example? No - we see Projects (links to Categories) > Website. Native Languages are a category (but they are also a project according to the Projects page), so which breadcrumb should be used there? Confused yet? I am! :)

• Going tableless (getting rid of the #main table)

• Applying minimalist principles of the redesign to other major pages in OOo

• Get rid of the My Pages tab in the navigation and replace it with something more useful if/when the header caching issue is fixed in order to avoid duplication