224352 - (start1.6) The new mozilla 1.6 homepage

Status: RESOLVED FIXED

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

Description

[Daniel Wang]

This is for the real content :-)

Comment 1

[Neil Marshall]

Is this version going to follow the new web site beta design?

Comment 2

[Daniel Wang]

Attachment: Theme: Amazon

Theme idea. a bright colour theme

Comment 3

[Daniel Wang]

> Is this version going to follow the new web site beta design?
ideally yes, but right now I'm busy coming up with new design ideas :-p

The start page needs a real re-org. Right now it looks like a browser info
central rather than a "start" page. We need everything that a first-time user
would need. For example, a Google search box. Now when the user submit a form
query for the 1st time, s/he will be prompted about sending info over insecure
connection. So we need info on that too. Any idea on what else we need?

btw, http://www.mozilla.org/start/1.4/reviewers.html added

Comment 4

[Daniel Wang]

Attachment: Icon: browser migration

Graphics to label each paragraph.  Use the generic "e" to avoid "confusion"

Comment 5

[Daniel Wang]

Attachment: Theme: Gotham

Gotham theme

Comment 6

[Daniel Wang]

Attachment: Theme: Lulu

Vancouver theme. supposed to be brightly coloured *sigh*

Comment 7

[Daniel Wang]

Attachment: Theme: Taipei

Taipei theme

Comment 8

[Daniel Wang]

What we need to do:

We are lagging far behind in the steps of time. Now, browsers and mail/news
clients are not the only means to get connected, nor are they important. People
are now using sophiscated small devices such as cell phones and PDAs. Also,
security and privacy are more important than bells and whistles of browsers.
Modern day browsers, even MSIE, are mature enough in page rendering to not need
updating, so we must compete on other areas. Our start page must reflects users'
current concerns. Specifically:

1) We must have documentation on using Mozilla with firewall and anti-virus
programs. We must also have introduction on Internet security.
2) We must have an introduction on different modes of communication, such as
instant messaging and text messaging, web-based forums and newsgroups, p2p, etc.
3) Management is more important than ever. We must help users on synchronizing
their data across various devices and software, such as address books,
bookmarks, and mail.
4) We should also have something on parental control and content filtering.
5) The start page should be a portal to the Web. We should have a search box.
6) Internet experience is everything. We must provide documentation on Flash,
QuickTime, and Media Player. Ideally we should boundle 'em.

This calls for a new direction for documentation and potentially for marketing.
mozilla.org cannot act solely as a software developer or even a software vendor.
To succeed, mozilla.org must become a *service provider*. If that is not
possible, then we need to partner with other people. AOL (the ISP) is unreliable
due to IE licensing. I believe among the big ISPs Earthlink will be the happiest
to partner with us. Netscape is loosing its biggest customers - the browser
users, and it should be happy too serving as a content provider. We should also
have contact with anti-virus, firewall, and various other software vendors.

We must stress experience. We should seek partners who will best leverage our
market position. Thus, we should not choose partners solely because their
service is free or because they are open source (that rules out OOo). We need to
be willing to work with our competitors and their partners, including Microsoft.

Also, the start page will be the first thing software reviewers and reporters
see when they install Mozilla. The page must impress them. Specifically:

1) The design must be noval and sleek, and it should reflects our marketing
strategy.
2) The page must provide easy navigation to pages that help reporters understand
Mozilla, such as product comparison, what's new, and what's mozilla.org
(redundant for users, but neccessary)

We could also target web developers, since the start page is the free-est in
design on mo. Alt CSS is not new (csszengarden is better), but I've yet to see
*interative* alt CSS. We could have #id.iOver, #id.iOn, #id.iOff classes and
have JavaScript change the class based on mouse action. That should impress web
developers and reporters. Also, alt CSS should be "functional". Some of my
design concepts have little to do w/ Web and are therefore silly. Need to focus,
focus.

Suggestions and criticism welcome, dwx.

Comment 9

[Daniel Wang]

1.4/faq/troubleshooting.html -> 1.4/troubleshooting/index.html

Neil, I just went over troubleshooting.html and think that some entries (7 8 &
9) should be in a new, separate faq/add-on.html file. The file should also
answer common questions about Java (bug 114032). PluginDoc has the info, but its
navigation is not easy (download page separated from faq, and iconic links w/o
text labels to related documents). We need to duplicate some stuff on PluginDoc
and refer users to the site for more info.

Also, I think plugins.html and addons.html should be merged into one file. Do
you have time for any of these?

Comment 10

[Daniel Wang]

Attachment: 1.4.zip

.zip of current 1.4 start page. anyone wanna update this for 1.(6|7)?

Comment 11

[Dave Miller [:justdave]]

> AOL (the ISP) is unreliable due to IE licensing. I believe among the big
> ISPs Earthlink will be the happiest to partner with us. Netscape is
> loosing its biggest customers - the browser users, and it should be
> happy too serving as a content provider.

Just to point out, Netscape (the company) no longer exists (even as a division
within AOL).  AOL shut it down shortly after they laid off all the Mozilla
developers.  All of the remaining folks within Netscape were moved to AOL
projects (even though they stayed at the Netscape, err, Mountain View campus). 
The @netscape.com domain for email was even shut down.  Netscape (the product)
still exists, but it's managed by AOL themselves now, and it's not real likely
they'll do a whole lot with it due to the above-mentioned IE licensing.

Comment 12

[bart decrem, not checking bugmail]

Sorry to be so ignorant, but can someone explain to me how the start page works?  

Is there just one static start page or are there more than one?  Or is there one
page with a dynamic box near the top to alert people who are running old
versions of the software?

Also, Firebird doesn't use the start page currently, AFAIK.  Maybe if we redo
that page, we should make different versions for Firebird and the Seamonkey suite.

 

Comment 13

[Daniel Wang]

Every Mozilla release has a start page. When you first run a profile, Mozilla
Navigator will visit the start page on start up. When you upgrade Mozilla and it
has been sometime since you last visited start page, Mozilla Navigator will also
visit the start page on start up. For Mozilla 1.0.x, the start page is
http://www.mozilla.org/start/1.0/ . For Mozilla 1.4.1, the start page is
/start/1.4/ . For all other releases the start page is /start. start/ has nag JS
to alert users running old builds to upgrade. start/1.0 has nag JS for people
running 1.0 beta, alpha, and RCs.

This is the tracking bug for the 1.6 (or 1.7) start page. I'm not sure how we
are going to do this. I think the FAQ and troubleshooting guide should be moved
to product/1.x/ . That means we cannot have custom style for the start page and
that we also need to redo some user doc for more consistant look. The start page
should be a site on its own (meaning it should be a collection of pages that are
consistent and related). Following up on comment 8, we should have:


     __ ^^ >        Welcome to the World of Mozilla!
  ,-`  o>   \>          _      __  _   . .  _ 
 :,,,,,   '  \>        | |_  _  /  / . | |  _|        [              ](Go)
  (^^^^^_/    \>       | | ||_|/_ /_ | | | |_|        ~Search Web Faster~
         \      \>
                                                   |
 [ ][ ] Migrating from Other Internet Software     | Community Sites
 [ ][ ] ~~~ ~~ ~~ ~~~ ~~~~ ~~~ ~ ~~  ~~ ~  ~       | Extension & Plug-ins
      ~~ ~~ ~~ ~~~ ~~~ ~~~~ ~~~~ ~~~               | Frequently Asked Qs
                                                   | Troubleshooting
 @\@/@  Spam Management with Junk Mail Control     | User Support
 @@X@@  ~ ~ ~~ ~~ ~ ~~~~ ~~~ ~ ~~ ~ ~~~~ ~~        |
 @/@\@  ~~ ~~~ ~~ ~ ~~ ~~ ~~ ~ ~~~ ~~~~ ~ ~~~~

 Manage Mail More Efficiently
  ~~ ~~ ~~ ~ ~~~~ ~~~ ~ ~~ ~ ~~~~ ~~ ~~~ ~ ~~~ ~~~ ~ ~~~ ~~ ~~~ ~ ~~~~
  ~~ ~~ ~~
 Using Mozilla with Firewalls and Anti-Virus
  ~~ ~~~ ~~ ~ ~~ ~~ ~~~ ~ ~~ ~ ~~ ~~~~ ~~ ~~ ~ ~~~ ~ ~~~ ~~ ~~~ ~ ~~~~
  ~ ~ ~~~

1. a Google search box
2. articles to help people get started:
  a Migrating from Other Internet Software (done)
  b Spam Management with Mozilla Junk Mail Control (done)
  c Ten Mail Management Tips Using Mail View and Custom Labels (planned)
  d Using Mozilla with Firewalls and Anti-Virus (helpwanted)
  e Mozilla and PDAs (helpwanted)
3. Community sites linking to mozillaZine, regional sites, and personal
  sites.
4. Link to MozillaLink newsletter
5. Demos, easter eggs, you know, fun stuff

MSIE's home page is pretty good, but it has some problems: the home page is
cluttered with marketing information for new users and upgrades, and articles
such as print preview are laughable. We need to avoid these kind of problems.
The home page should target at users already with Mozilla installed. Its content
should be driven by actual questions asked in newsgroups (as it is now) for
maximum relevancy (relevency?). The home page should NOT ask people to upgrade.
There should be no trivial information (e.g. marketing functions that should
have been in the software a long time ago). And above all, the page needs to be
helpful.

We need to talk about press-centric design vs user-centric design in
marketing-public mailing list. If we go too far in the press-centric direction,
our sites look silly. If we go the other way, reporters and reviewers may get
the wrong idea about Mozilla. We need proper balance and direct people to the
proper pages.

Comment 14

[Daniel Wang]

*** Bug 225295 has been marked as a duplicate of this bug. ***

Comment 15

[u115577]

These sites are good references...
http://office.microsoft.com/
http://www.opera.com/startup/
http://livepage.apple.com/
http://hp.netscape.com/

Comment 16

[Daniel Wang]

Interesting... Asa checked in start/1.5/

Asa, tell me when you are done with the page so I can start updating it

Comment 17

[u115577]

> Asa checked in start/1.5/

Japanese translation now available at
http://jt.mozilla.gr.jp/start/1.5/

Comment 18

[Asa Dotzler [:asa]]

Daniel, I'm done. Sorry if I stepped on toes or got in the way. We didn't have
anything at all for 1.5 users so I did a quick and dirty update. Feel free to
make it better. 

Comment 19

[bart decrem, not checking bugmail]

Attachment: streamlined start page

Great progress.  

Here's a more streamlined version of the 1.5 start page Asa created.  One of
the nice touches that's missing from it is the links to translations.

Chris Hofmann and I created this a week ago but it got lost in the shuffle.

Comment 20

[bart decrem, not checking bugmail]

with "great progress" I meant to compliment Asa, not myself obviously :)

Comment 21

[Neil Marshall]

You shouldn't use font tags.

Comment 22

[Daniel Wang]

Attachment: streamlined start page (png)

Bart's streamlined start page. Can I get a r for this?

Comment 23

[fantasai]

Can you post the HTML code?

Comment 24

[bart decrem, not checking bugmail]

daniel, that looks really nice!

Comment 25

[Daniel Wang]

new design: http://www.geocities.com/stolenclover/backstage/
can I get two r ?

Comment 26

[fantasai]

I would like to get the <style> element simplified down to this:

.toc dt {
        /* I would like to move this rule into default.css, if you don't mind.*/
	padding: .5em 1em;
	font-size: 1.25em;
}
.toc img {
	float: left;
	border: 0;
	margin: 0 1em 0 0;
	}

.toc dd ul {
	display: table;
	padding: 0;
}

.toc ul {
	list-style: none;
}

The images should not have a separate <dt> -- the <dt> should be, e.g.

  <dt><img alt="" height="79" width="79" src="start.png">Getting Started</dt>

Note that I have take out the alt text. That's because it's worse than useless
to repeat the actual text of the <dt> as the image alternate.

> type="none" style="padding:0;"

Please separate this out into the <style> element. I suggest wrapping the
preceding paragraph and the <ul> in a <div class="get-involved">. That will
allow you to apply other styles -- such as boxing it -- if you so choose.

I would move the FAQ link up a bit; telephone support is usually the last
resort, so it should be last on the list.

I suggest adding some explanatory text for the links in the Cool Extensions
section. I know what plug-ins are, but I don't quite understand what is meant by
Mozilla for Other Languages, or Themes, or Add-Ons. (The first one could be
clarified by switching "for" to "in", though.)
ex:
Themes - Style Mozilla with your favorite theme.

The title attributes are not particularly helpful. For one thing, most people
won't be hovering over the links for explanations. More importantly, some of the
titles are redundant, and can be taken out; some of them would be better as
plain text explanations after the link.


Otherwise, it seems much better. :)

Comment 27

[u115577]

As always, Japanese translation of Mozilla 1.6 start page is available at
http://jt.mozilla.gr.jp/start/1.6/

> http://www.geocities.com/stolenclover/backstage/
Yeah, It's cool!

Comment 28

[Daniel Wang]

fantasai, how does it look now?

Comment 29

[fantasai]

Nice. I especially like the explanatory text you wrote for the extensions links.
:) I would, however, leave them at the same font size as everything else.

Other notes:

  The horizontal rules don't extend across the page anymore 'coz the table
  shrink-wraps them. Try adding "width: 100%" to the "display: table" rule,
  or pulling the hr out of the UL. (The latter would be more structurally
  accurate.)

  Put the #contribute paragraph in <p> tags.

  Move the FAQ link to the top of the "Need Help?" list.

Comment 30

[Daniel Wang]

k, I fixed the <hr> width.

I moved FAQ to top of "Need Help?". Telephone support is now the second. I don't
want to move it down any further because the last I heard we are not getting
enough phone traffic. I also changed "User support community" to "Community Peer
Support" so that there's no ambiguity that it is user-help-user.

Asa removed the "junk mail tutorial" link in the 1.6 start page. I don't know
the rationale for that, and I haven't downloaded 1.6 to check if junk mail Help
content made it to 1.6, but I removed it anyway. I substitutes in link to the
Release Notes.

I also removed link to "what's new" (reviewers.html) since Release Notes has
that info. The substitute is link to yet-to-be-written "Feature tour". I'm
actually wary of this "tour" since the site has many pages with this info, and
none of them doing us any good. I'd prefer to limit the # of duplicate contents
(which is currently a big problem)

I'm keeping the smaller explanatory text because I find it more aethestically
pleasing :-)

Comment 31

[fantasai]

> k, I fixed the <hr> width.

No, it's not good. Narrow your window and you'll see why. I think you need to
take it out of the ul.

> Telephone support is now the second.

That's fine.

> I don't know the rationale for that... but I removed it anyway.

Why don't you ask him? 

> I substitutes in link to the Release Notes.

Yes, release notes are good to add. :)

> I also removed link to "what's new" (reviewers.html) since Release Notes
> has that info. The substitute is link to yet-to-be-written "Feature tour".

You can't check in a link to a page that doesn't exist!

I say leave the "what's new" in. Release notes are kinda intimidating, and it's
more positive (and probably more interesting to the user) to just get the
"what's new and cool" rather than the "what's new and bad".

Comment 32

[Daniel Wang]

Attachment: HTML

preview at http://www.geocities.com/stolenclover/backstage/

slight image renaming: 
start.png -> ../images/toc-mozilla-streamlined.png
help.png -> ../images/toc-help.png
extension.png -> ../images/toc-extension.png

can I get two r+ ?

Comment 33

[fantasai]

a) Use relative urls throughout
b) Either use the "display: table" rule or take it out. (I suggest keeping it;
   it makes lines start on the right side of the float even when they wrap below
   the float. But do take out the width: 100%)
c) I don't think the release notes need an explanation -- certainly not one that
   long.
d) Don't use an "images" directory.
   http://www.mozilla.org/README-style.html#location

Comment 34

[Daniel Wang]

Attachment: HTML v2

> a) Use relative urls throughout
where didn't I do that?

HTML simplified. I can't have display:table and width: 100% together because
that creates weird horizontal scrollbars.

> d) Don't use an "images" directory.
I'm using the root images/ directory. I'm expecting the images to be re-used.

Comment 35

[fantasai]

> > a) Use relative urls throughout
> where didn't I do that?

e.g. href="/get-involved.html" --> href="../../get-involved.html"

> I can't have display:table and width: 100% together

That why I said to take out the width rule. :)

Also: 
  - remove the commas around "open source"
  - the note about the Release Notes can be shortened to "including known
    issues" or somesuch; the "Latest info. about" doesn't really add anything
    useful
  - Check to make sure that last link under #contribute goes where you think
    it's going.

Comment 36

[Daniel Wang]

Attachment: patch

Comment 37

[fantasai]

r=fantasai

Comment 38

[Andrew Schultz]

Is it just me, or are the things list under the new "tech-savvy" link things
that anyone could work on (donate, send talkback data, test software (a bit
tech), tech evang and marketing) and the things listed on the "anyone" page are
for more techie people (documentation, report bugs, QA, fix bugs(!), improve
perf, write code, tech evang).  Are these backwards?

And why do we have two of these (differently structured and somewhat
overlapping) pages in the first place?  And why is one under /about/ and one
not?  I'm very confused.

Comment 39

[Asa Dotzler [:asa]]

These images are pretty bad. We should replace them or pull them. 

Comment 40

[Daniel Wang]

>Is it just me, or are the things list under the new "tech-savvy" link things
>that anyone could work on [snip] and the things listed on the "anyone" page are
>for more techie people [snip].  Are these backwards?

this is embarrassing. sorry, wasn't paying attention. fixed

> And why do we have two of these [snip] pages in the first place?

bug 226063

Comment 41

[bart decrem, not checking bugmail]

let's please remove these images.  they are really unprofessional.  

Comment 42

[Daniel Wang]

the comments could have come when comment 22 was made. oh, well, images removed.
Please open a new bug for design changes.