222695 - revisit information architecture of home page

Status: VERIFIED FIXED

(www.mozilla.org :: General, defect, P1)

Description

[Dawn Endico]

need to make home page content stretch. lets use opportunity to 
revisit  how home page content is structure so we can have it
be more connected


look at technology preview as an example of how we were able to
structure info

Comment 1

[bart decrem, not checking bugmail]

consider having a few developer links on homepage, including roadmap link.

Comment 2

[chris hofmann]

adding dependance bugs as we go.   bart to meet with dave_shea...

Comment 3

[bart decrem, not checking bugmail]

Attachment: Proposed layout of homepage

conceptual screenshot.

Comment 4

[bart decrem, not checking bugmail]

The screenshot I just added proposed a resolution to many of the issues on the
homepage.  The screenshot would also make it easier to solve bug 222201
(homepage needs to stretch).

Comments:
1.  "What is Mozilla?"
This is a new text field that summarizes what Mozilla is all about.  
Proposed text: "The Mozilla project maintains freedom and innovation on the Net
by developing the acclaimed, open source Mozilla 1.5 web browser suite and
related products and technologies".

Note:
- we use the words "Mozilla project" and "Mozilla 1.5" to help readers
differentiate between the project and the product
- need to add a link to mission statement.  add words "read more ..."
- "freedom and innovation" sounds like Microsoft, but what the heck, it's
accurate in our case, so let's reclaim this
- Net is shorter than Internet
- acclaimed is important for validation; open source is important because is a
core value
- "web browser suite": people know Mozilla as a web browser, so let's call it a
web browser suite

2.  Latest news
- new title
- different treatment of dates saves a lot of space, thus making this area much
tighter.

3.  Mozilla 1.5
- we propose to keep the hover highlight of this entire box.  the reason it's
there is because it showcases cool things that can be done with standards.  if
someone feels strongly that this is confusing to the user, then it's OK to lose
the hover color
- download area:
-- removed download platforms
-- made it clear that download is free
-- included the CD since that's the other way to get the software
-- downloads links point to Mozilla 1.x download page


4.  Stretching & the top half of the page:
- the Mozilla 1.5 box is fixed width and should move to the right, flush with
the right edge of the page
- the What is?/Latest News text stretches. 
- if user shrinks the page to be less than 800 pixels, the Mozilla 1.5 box
should get covered (it shouldn't move to the left)

5.  Technology Preview
- color for title was changed (we reserve blue for links)
- download platforms are gone

6.  Get Involved
- colors are placeholder - feel free to change
- if someone wants to come up with icons for Donate / Report Bugs / Test, that'd
be great, otherwise we can just 1/2/3 for now


7.  Bottom of page:
- links to Donate/Contact/About Mozilla Foundation/Site Map are removed because
not necessary. 
- copyright notice should be changed to say "Copyright (c) 1998-2003, Mozilla
Foundation"

Additional comments:
- This page should be easier to make stretch properly
- This page offers an improved, simpler information architecture that's more
streamlined and hopefully less confusing.  The sidebar is now simply an area to
advertise things we want to draw attention to
- The ad banners can dynamically rotate and be used to showcase other
products/features, including the newsletter, Dec1 support etc
- Removed a number of elements, including:
-- MozDev/Mozillazine links (don't fit with the rest of the content, which
focuses on internal resources),
-- links at bottom of page which were unnecessary
-- bugzilla product feature, which was a category with one product and redundant
with the ad box for bugzilla
- Propose to bring back screenshots by permanently dedicating one of the ad
boxes on the left to screenshots (post 10/27 launch)
- Chofmann had suggested creating links to documentation from the homepage.  We
could add this on the main body of the page below the Get Involved section, but
I'm not sure this is necessary.  End users and developers who are looking for
documentation can click on the Support and Developer sections respectively and
easily find the documentation there.  Documentation is not as critical as the
two other sections on the homepage (Product downloads and ways to get involved).

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: a simpler approach

This is a simpler approach that we were discussing.

Comment 6

[bart decrem, not checking bugmail]

Attachment: minors tweaks to dbaron's screen

Let's go with dbaron's "a simpler approach".  It's clean, simple, well
organized.  Here's a layout that includes a screenshot to go with that, and a
tighter version of the News items that leaves room for more stuff in the
sidebar.  

Lots of little things to tweak (such as the color scheme) and thing to add
(such as documentation), but let's get the page laid out to start.

Comment 7

[bart decrem, not checking bugmail]

Attachment: screenshot featured on homepage

this is a Mozilla 1.5 screenshot we can use for the homepage.  shows off tabs,
favorable mozilla story, mail.

Comment 8

[Brendan Eich [:brendan]]

Internet instead of Net?

/be

Comment 9

[bart decrem, not checking bugmail]

Agreed.  I believe I use the word Net in a couple of places on the About page.  We can change 
those instances as well, but at least on the homepage, we should write Internet. 

There's a ton of tweaks that need to be made to the homepage.  My preference would be that we 
build the new layout, get everyone comfortable with that, and then I'll submit a big list with a 
bunch of changes/additions.   I can do that tonight if dbaron revs the page sometime during the 
day.  I'm sure other people have tweaks as well.  

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: simpler approach, v. 2

Comment 11

[bart decrem, not checking bugmail]

Very nice!

Next I'll submit a list of proposed tweaks to the page.

Comment 12

[Brendan Eich [:brendan]]

Nice.

/be

Comment 13

[bart decrem, not checking bugmail]

Tweaks to http://bugzilla.mozilla.org/attachment.cgi?id=134015&action=view

1.  NAVBAR
1.1 "search mozilla" box
increase the contrast in the text entry field.  OK to punt this until later,
especially if this is complicated because needs be changed on every page on the
site.

2.   SIDEBAR
General issue: let's make sure that the vertical alignment in the various boxes
in the sidebar is consistent.  My preference would be that we tighten the
vertical spacing up quite a bit across the board in the sidebar.

2.1 "Get the Mozilla CD!"
Tighten up the vertical spacing between the lines of text in the copy "Save time
.... Order yours today".   OK to punt this until later, especially since, if we
change this, we have to make sure other instances are also fixed, including:
- /products/mozilla1.x/index.html
- /products/firebird/index.html
- /products/thunderbird/index.html
- /products/mozilla1.x/download/index.html
(I think that's a complete list)

2.2 "Latest News"
Feature only the headlines, per the screenshot at
http://bugzilla.mozilla.org/attachment.cgi?id=133910&action=view.  Or tighten up
the Latest News section in some other way.

2.3 New item:  "Get Involved"
- Reincorporate the Get Involved box that's on
http://website-beta.mozilla.org/index.html
- Lose the "We're all in this together" subheader
- Make sure vertical spacing is consistent (see comment above)

2.4 New item: "Featured Resources"
(or feel free to think of another header that means the same thing)
- Probably same layout as Get Involved box
- Content:
-- Get the <a href="http://newsletter.mozdev.org/">Mozilla Newsletter</a>
-- Telephone support for Mozilla is <a
href="http://support.decisionone.com/mozilla/mozilla_help_main.htm">now
available</a>

3.  BODY
3.1 "What is Mozilla?"
"freedom and innovation" > "choice and innovation" (not a big deal to me,
Mitchell requested this)

3.2 "Mozilla 1.5" box
3.2.1 Add a bullet that says:
"Includes web browser, email software, web editor, address book, IRC chat client"

3.2.2 Brendan requested that we remove the links to the various platforms so we
can make the page easier to maintain.  I propose that we replace the Order the
CD and Free Download lines with a single line that says in bold:
<a href="http://website-beta.mozilla.org/products/mozilla1.x/download/">Free
Download</a> or <a href="http://store.mozilla.org">Order the CD</a>

 
3.3 "Technology Preview" box
3.3.1 Replace download line for Firebird, Thunderbird, Camino with "Free
Download or Order the CD" line, same as for 1.5 but not in bold.  Free Download
links go to:
-- Firebird: /products/firebird/index.html
-- Thunderbird: /products/thunderbird/index.html
-- Camino: /products/camino/index.html

3.3.2 Thunderbird box
e-mail > email or change the three instances of email at the top of the page

3.4 "Other Available Products" box
"tracking software ..." > "tracking software."

3.5 New item: "Documentation"
Two suggestions for the icon: either the Address Book icon from the mail toolbar
in the Thunderbird default theme or the pen from  Bookmarks>Manage
Bookmarks>Rename in the default Firebird theme.  I guess we would only use an
icon for the first item in this list, but that may look kinda weird. Another
alternative would be to stick this whole thing in the sidebar and only keep the
headers, but the sidebar may be getting too crowded.  This is chofmann's item
(my preference is to not feature documentation on the homepage), so you may wish
to check with him on this.

Text:
"
<a href="/docs/end-user/index.html">End User Documentation</a>
Links to documentation for users of Mozilla and Mozilla-based browsers.

<a href="/docs/index.html">Developer Documentation</a>
Links to some of the more important documents for people developing for the
Mozilla project.

<a href="/docs/web-developer/index.html">Web Developer Documentation</a>
Links to documentation for web developers who are interested in the languages
used to write web pages for Mozilla and other browsers that support the same
standards.
"

3.6 Page footer
Nuke footer, except for copyright notice.  See bug 223587

Comment 14

[timeless]

tweaks: use relative paths, not absolute.

Comment 15

[bart decrem, not checking bugmail]

Copy edits for the 1.5 box:
"Built with your privacy and security in mind" > "Built from the ground up for
your privacy and security"

"Has tabbed browsing" > "Tabbed browsing - open muliple web pages in the same
window"

Comment 16

[timeless]

"muliple" => use a spellchecker

Comment 17

[bart decrem, not checking bugmail]

1.1 - done
2.1 - done
2.2 - don't do for now
2.3/2.4 - bd will send proposal for 1 box that has 3 bullets and work with dawn
on this.
3.1 - done
3.2.1 - done
3.2.2 - we won't do this.  we'll leave this as is.
3.3.1  - we won't do this.  see 3.2.2
3.3.2 - done
3.4 - done
3.5 - we'd like to punt on this and revisit with chofmann if necessary
3.6 - will simply remove About Foundation from the footer
comment 15
15.1 - will not do.  need further discussion about this
15.2 - done.

Comment 18

[Dawn Endico]

For section 2.4:

copy get involved box from website-beta/index2.html 

dont' use header
use smaller font so more text will fit

item 

-need help? telephone support is <link>now available</link>

-support mozilla! <link>make a donation</link>

-Get the scoop. Subscribe to the <link>mozilla newsletter</link>

Comment 19

[Dawn Endico]

checked in new content for comment 18.

if you still want the font size changed in the new box, i suggest
reassigning to dbaron for his css love.

i think the current font size looks good enough though and isn't a blocker
for rc1 or for going live.

Comment 20

[bart decrem, not checking bugmail]

agreed.  closing this bug for now.

Comment 21

[Daniel Wang]

v