Difference between revisions of "Eclipse.org Website Redesign 2014"

From Eclipsepedia

Jump to: navigation, search
(Getting Started Page)
Line 6: Line 6:
 
# In Q2 2014 we would then implement the design.
 
# In Q2 2014 we would then implement the design.
  
== Areas of focus ==
+
== Deliverables ==
 
* Provide a new "skin" for all of eclipse.org
 
* Provide a new "skin" for all of eclipse.org
** Since eclipse.org uses the Phoenix framework, providing a new Skin allows projects to test the new skin on their content, and to migrate from Nova at their own pace
+
** a new Phoenix Skin to allow projects to test the new skin on their content, and to migrate from Nova at their own pace
** A new skin would ideally include: Phoenix skin, a basic Drupal skin/theme and a barebones HTML header & footer to adapt the look to subsites, such as Bugzilla, Forums, Mailing lists
+
** a basic Drupal skin/theme for later use on other Eclipse sites based on Drupal, such as Marketplace
* Header & Footer
+
** a barebones HTML header & footer to adapt the look to subsites, such as Bugzilla, Forums and Mailing lists
* Home page
+
* A new Home page
* First level Landing Pages (/downloads, /membership, etc)
+
* A Getting Started page to replace the Users landing page
* Content page (two and three-column layouts)
+
* Integrate all First Level Landing Pages maintained by Eclipse Foundation staff into the new skin.
 +
** remove/replace/alter graphic and text elements that are visibly out of place or do not work with the color scheme
 +
** no redesign: simply integrate the content and layout into the new skin
 +
* A template for a two-column content page. Example: http://www.eclipse.org/donate/
 +
* A template for a three-column content page.  Example: http://www.eclipse.org/org/
 +
 
  
 
== Out of scope ==
 
== Out of scope ==
Line 48: Line 53:
  
 
==== Other header thoughts ====
 
==== Other header thoughts ====
* Login integration would be nice
+
* Login integration should be planned.  Provide space for a "Login" button (which will become a Logout button) and an area to display the name of the currently logged-in user.
* Breadcrumbs, or at the least, map each page to a "parent"
+
* Provide a location for a simple breadcrumb.
  
 
=== Home Page ===
 
=== Home Page ===
Line 97: Line 102:
 
== Technologies used ==
 
== Technologies used ==
 
* Creating a new Phoenix "skin" is desirable to ease migration for EMO content pages as well as project pages
 
* Creating a new Phoenix "skin" is desirable to ease migration for EMO content pages as well as project pages
* Bootstrap?
+
* Bootstrap/other widespread/communly used technologies can be used on the home page.  For content pages and project pages, the provided skin should "just work" to ease the migration pain on projects.  This means current DOM elements should be supported as much as possible.
  
 
== Other sites ==
 
== Other sites ==

Revision as of 17:46, 4 February 2014

This document is a work in progress. We will use it to capture notes as we progress.

Contents

What Are We Doing?

It is time to re-design the www.eclipse.org web site. It has been many year (5+ years) since the last time we changed the web site look and feel so it is getting old. The goal of this project is to

  1. Create a set of mockups and wireframes that show the new design. This will be completed by end of March, 2014.
  2. In Q2 2014 we would then implement the design.

Deliverables

  • Provide a new "skin" for all of eclipse.org
    • a new Phoenix Skin to allow projects to test the new skin on their content, and to migrate from Nova at their own pace
    • a basic Drupal skin/theme for later use on other Eclipse sites based on Drupal, such as Marketplace
    • a barebones HTML header & footer to adapt the look to subsites, such as Bugzilla, Forums and Mailing lists
  • A new Home page
  • A Getting Started page to replace the Users landing page
  • Integrate all First Level Landing Pages maintained by Eclipse Foundation staff into the new skin.
    • remove/replace/alter graphic and text elements that are visibly out of place or do not work with the color scheme
    • no redesign: simply integrate the content and layout into the new skin
  • A template for a two-column content page. Example: http://www.eclipse.org/donate/
  • A template for a three-column content page. Example: http://www.eclipse.org/org/


Out of scope

The following are out of scope of this project. It is not to say they don't need to be updated but not with this project.

  • PMI Layout
  • Other forges, such as LTS, m2m, LocationTech and Polarsys
  • Marketplace and PlanetEclipse - we might update the header but not the overall look and feel.

Page elements

Header

Logo area

  • The Eclipse logo should always be shown, even when running a promotion banner. The logo should be clickable and always return "Home"
  • An area must be available for a promotion banner (such as: EclipseCon)
  • The Logo area could include a Download Eclipse button, which would link to /downloads

Nav bar

  • Items to be place on the Nav Bar, include:
    • Getting Started
    • Members
    • Projects
    • More
      • Forums
      • Marketplace
      • Bugzilla
      • PlanetEclipse
      • Working Groups
  • Items on existing nav bar that will be removed:
    • Home - the eclipse logo will always be linked to home
    • Downloads - a download button will be in the logo area
    • Users - most of Users content will go under Getting Started
    • Committers - most content will be accessible from Projects
    • Resources - page is not well used and seems out of date. Recommend to archive it.
    • About Us - content will be moved to the footer

Other header thoughts

  • Login integration should be planned. Provide space for a "Login" button (which will become a Logout button) and an area to display the name of the currently logged-in user.
  • Provide a location for a simple breadcrumb.

Home Page

  • Slide show at the top should focus on What is Eclipse: 1) IDE and Tools, 2) Projects and 3) Working Groups. Each of these three areas should then have a section on the home page.
  • Need to have on the home page: 1) announcements, 2) community news, 3) advertisement area

Getting Started Page

  • Model the page after the drupal.org get started page https://drupal.org/start We really like the graphic display of the 1,2,3,4 steps
  • Step 1 - Download Eclipse
    • Content: You can download the standard version of Eclipse that contains the basic bits for any Java developer to start coding in Java.
    • Button: Download Eclipse
    • Content: Eclipse also has pre-defined packages based on the type of development you want to do with Eclipse. Check out what packages we have to offer.
    • Button: Download Packages
  • Step 2 - Extend Eclipse
    • Eclipse Marketplace is a great source of plug-ins and products that you can add to your Eclipse installation. Browser the online catalog or even better start-up the Eclipse Marketplace Client from within Eclipse. Look under the Help menu.
    • Some of the more popular plugins for Eclipse include:
      • Subversive - SVN Team Provider
      • Subclipse
      • Eclipse Color Theme
      • Maven Integration for Eclipse (Juno and newer)
  • Step 3 - Documentation
    • Some popular getting started documents for someone new to Eclipse:
      • Getting Started with the Eclipse Workbench
      • Getting Started with Java development
      • All online Documentation
  • Step 4 - Getting Help
    • There are many online source of help in the Eclipse community. First thing to do is create an account so you can use them.
    • Our forums are great places to ask questions, especially the newcomer forum
    • Open bugs and feature requests at bugzilla
    • IRC channels are active for some projects
    • Project mailing list are good source of what is going on in the project

Content area

  • Provide 2-column layout
  • Provide 3-column layout
  • Provide one big free content area (home page and project pages who which to be creative)

Footer

  • Content from About Us
  • Existing legal content
  • Social media links

Technologies used

  • Creating a new Phoenix "skin" is desirable to ease migration for EMO content pages as well as project pages
  • Bootstrap/other widespread/communly used technologies can be used on the home page. For content pages and project pages, the provided skin should "just work" to ease the migration pain on projects. This means current DOM elements should be supported as much as possible.

Other sites

We've looked at numerous sites. Long pages seems to be quite standard. Some of the preferred sites seem to all have these elements in common:

  • long pages with section breaks
  • large fonts
  • large titles, narrow paragraphs of brief large text and a More... link
  • many icons / graphics