The *New* Spread Firefox (beta) is Here!

After many months of hard work by a variety of parties, the new Spread Firefox has finally arrived (in beta form…the full-on launch will follow before long). Although there’s still more to be done, we all feel like this is a big step forward for SFx and our open source marketing efforts.

The big change is that the new SFx is based around projects rather than blog posts, with the hope that this will inspire a lot of great ideas and collaboration among our worldwide community. Rhian has more details on how it all works.

Also, those of us in the Mozilla marketing department will soon be conducting the great majority of our business here…the goal being to be as open and transparent as possible. So, if you’re interested in what we’re working on - and even better, if you’re interested in helping out - stop by the new SFx regularly.

From a visual perspective, we tried to create an easily updatable, modular design that would support the projects concept as well as surface features like our events calendar, stats, user photos and more. The key challenge was structuring the site in a way that would expose as many different ways to get involved as possible. We worked primarily with Henry Brown, who did a nice job pulling all the disparate elements together without things getting too out of hand.

A mockup of the ‘non member’ state of the homepage is below (here’s the ‘returning member’ state)…both are slightly different from the live version, but we hope to get it all matched up soon. Lastly, if anyone knows how to get in touch with the two dudes featured at the top of the page, please let me know…we have some Firefox swag waiting for them!

The new Spread Firefox - for returning members

Filed under: Design, Mozilla, PlanetMozilla, Spread Firefox — John at 7:34 pm on Friday, November 16, 2007

6 Comments »

Comment by Gérard Talbot

November 16, 2007 @ 11:17 pm

Hello John Slater,

1- SFx people went to choose XHTML served as text/html. This is not a best choice; this is widely regarded as an inconsequent choice by web developers. I can live with that choice… but then, if one day, there is another redesign of SFx website, I hope that the process of deciding on the best possible DTD choice will be taken in that regard.

2- Right now, the newsfx.spreadfirefox.com
has 37 validation markup errors:

http://validator.w3.org/check?uri=http://newsfx.spreadfirefox.com/

Why?

3- The current stylesheet has hundreds of CSS declarations: hundreds in over 1600 lines of code! It has 320 CSS rules: in my opinion, that is insane! I wonder if a process of combining, relying on browser defaults, using inheritance will be done because that stylesheet certainly, definitely does not look like an optimized one. Using inheritance is what some MDC tutorials are also recommending.

4-
body {
font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
font-size: 84%;

font-size set to less than 100% for body element is formally and explicitly discouraged and not recommended by a wide majority of web authoring, accessibility and web standards groups, including W3C QA.
Verdana is also discouraged by several people for precise reasons.

Why redefine and redeclare margin:0 and padding:0? Why redeclare h1 to h6 and p margins and paddings if you’ve set all of these to 0 to begin with? Why undo what you first have done on purpose, intentionally?

Several rules and declarations are clearly going against accessibility.

a img,:link img,:visited img {border: none;}
is explicitly going against what J. Nielsen calls clickability, predictable clickability by user. “Users shouldn’t have to guess or scrub the page to find out where they can click.” “removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.” WDG Web authoring FAQ

There are over 22 (I stopped counting…) declarations with font-size using px unit, with a clear majority of them under 12px: again, all this is not recommendable, all this is formally and explicitly discouraged by accessibility and standards groups including W3C QA. It’s not just the px unit, it’s also the size.

Etc.

regards, Gérard

Comment by Fred

November 17, 2007 @ 4:54 am

How did you make this big screenshot? Is your screen that big or did you use some magic software?

Comment by Martijn

November 18, 2007 @ 9:15 am

Fred, the fireshot-extension provides functionality like that: http://screenshot-program.com/fireshot/

I found a little typo in the box that encourages to download Firefox: “If you don’t already have the fastes, ”
It misses the t at the end of fastest…

Comment by John

November 18, 2007 @ 10:39 pm

Fred/Martijn -
Actually, my screen isn’t that big and I didn’t use any magic software (including the extension referenced above…thanks for the tip though!) - the image included with this post is actually the final design mockup. I used it rather than a screenshot of the live site b/c the live beta site still has a few visual bugs that haven’t been fixed, and I wanted to show the page as it was intended.

-John

Pingback by The New Hub of Open Source Marketing | Giant Spatula > a Rolnitzky blog

November 19, 2007 @ 12:45 pm

[...] consider creating or contributing — Rhian has the skinny on what’s involved. John Slater has a great post about the redesign that’s worth a read. And readers of this blog may want to [...]

Comment by Axel Hecht

November 20, 2007 @ 4:01 am

My first impression when going to the new front page was “that’s a Japanese site”.

Maybe post-30 europeans are not in the target audience, but I thought it was too much unrelated content.

/me feels like “the youth of these days, just figure which sites they’re going to”. Ranting about music is soooo last generation, I guess.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>