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

Revision as of 14:17, 27 February 2014

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

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
    • Getting Started
      • Download Eclipse
      • Documentation
      • Newsletter
      • Projects
      • Events
    • Working Groups
      • Automotive
      • LocationTech
      • Long-Term Support
      • Machine-to-Machine
      • PolarSys
    • Explore
      • Eclipse Marketplace
      • Bugzilla
      • Eclipse Forums
      • Planet Eclipse
      • Eclipse Wiki
    • Legal
      • Privacy Policy
      • Terms of Use
      • Copyright Agent
      • Legal
      • Contact Us

• 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

• Top Area:
  • Title 'Eclipse Is...'
  • Small text 'An amazing open source community of Tools, Projects and Collaborative Working Groups. Discover what we have to offer and join us'
  • Three Icons for each of the three areas

• First Area
  • Announcements block
  • Community News block
  • Advertisements

• Second Area
  • Title: Community of Projects
  • Text: Eclipse has over 250 different open source projects. Many know our Java IDE but we also have modeling tools, runtimes, reporting tools and much more. Discover our projects, contribute and maybe even start a new project at Eclipse.
  • Links: 1) Discover, 2) Download, 3) Contribute

• Third Area
  • Title: Tools and IDEs
  • Text: Eclipse is famous for our Java IDE but our C/C++ IDE, PHP IDE are pretty cool too. We also have a ton tools for software developers. Check them out.
  • Links:

• Fourth Area
  • Collaborative Working groups
  • Text: Eclipse Working Groups allow for organizations to collaborate in the development of new innovations and solutions. Based on a set of best practices the Eclipse Foundation is a great place to host new collaborations based on open source principles. Check out how you can start your own working group.
  • List existing working group logos to link to their pages.

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

Project Page

• Top of Page
  • Title: Community of Open Source Projects
  • Eclipse is a community of over 250 different open source projects that are focused on software development. We have projects for IDE's and tools, modeling, runtimes, reporting, and much more.
  • Two buttons/graphics: 1) Discover and 2) Participate & Contribute
• Discover Section
  • Text: Find an Eclipse open source project.
  • Search Button
  • Link: List of Projects
• Participate & Contribute
  • Get involved in Eclipse projects to help contribute to their success. We welcome users and adopters to be part of the community.
  • Links: How to Contribute
  • Links: Start a New Project
  • Links: Running a Project
  • Links: Project Activity News

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

• Title: Eclipse Foundation
  • Link: About Us
  • Link: Contact Us
  • Link: Governance
  • Link: Logo and Artwork
  • Link: Board of Directors

• Title: Legal
  • Link: Privacy Policy
  • Link: Terms of Use
  • Link: Copyright Agent
  • Link: Eclipse Public License
  • Link: Legal Resources

• Title: Useful Links
  • Link: Report a Bug
  • Link: Documentation
  • Link: How to Contribute
  • Link: Mailing Lists
  • Link: Forums
  • Link: Marketplace

• Title: Other
  • Link: IDE and Tools
  • Link: Community of Projects
  • Link: Working Groups

• Add social media icons

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