The third round of designs for the new http://www.mozilla.org site have just been posted. It’s taken us a few weeks to complete this round because we made design changes based on feedback from the community and we coded the pages.
What we’re doing with the liquid layout was just not visible with a static image, so we wanted to have a coded page that people could try out. We encountered some technical challenges getting things just right, so we have posted three different coded pages for review.
Please take a look at these and let us know what you think. We are very interested in getting people to view these templates on a range of devices, including phones and netbooks. Any and all feedback is welcome. We’d also love to receive patches if you have ideas for how else we should be approaching the liquid layout.
davidwboswell 
I’ve tried to look at the design thinking of your quote: “This site is an entry point for the entire community and a place for official project information”. And please forgive me, but it’s easier to focus on things you don’t like than the things that you do like. 🙂
I think it looks like the site of a charity organization or political campaign. That is nice, but it feels more like a presentation of the Mozilla Foundation than a starting point. The layout looks kind of boastful to me, actually. For me, Mozilla is a benevolent manufacturer of web software with a twist — Mozilla wants the web to be better, open, for the people, by the people. I think the sofware manufacturing part in this design is too subtle — or maybe it is the texts that focus too much on “the twist”?
I’m not American, nor is English my mother tongue, but to me the wording (“Our Projects” and “Our Community” rather than “Projects” and “Community” or such) seems like it is *your* project rather than the community’s project.
Furthermore, as an entry point, the links to where the visitor should eventually end up are too subtle. The navigation menu is kind of obscured up there in the right hand corner. Actually, the lizard head in the page header, I think, is too obscured as well.
And in 1280×1024 resolution, I think the whole site is too big. By zooming out twice in FF3, it looks much better to me.
Last but not least: the colors are great and the brush strokes are really nice. The “Looking for” part is great as well. And the page footer is perfect!
Nuss, thanks for the detailed feedback. Here are some responses to your points:
You’re absolutely right that there’s a balance here between the software and the twist. I personally think the focus should be on the twist — Mitchell has said before that the software is not an end in itself, but rather a means to achieve our principles of openness, innovation and participation. That having been said, it’s still important to get the balance right and not obscure anything that is important.
As for the use of “Our Community” instead of “Community” we certainly wanted to indicate that everything is the community’s. Perhaps this is just something that is getting lost in translation from English? The good news here is that we do want to make an effort to localize at least some of this content after we go live with the new design and that could address this issue.
For the resolution, we are still working on the liquid layout and there are certainly issues with small and large devices to sort out. fantasai has suggested making use of the media queries feature so we can address issues specific to small and large devices. That will be something we’ll need to work on and we’re happy to have your help.
Glad you like the colors, brush strokes and footer 🙂
Kudos to all who realize that the software and communications tools of any kind are not ends in themselves!
The latest designs have too many loud/bold items competing for my attention; I feel like I’m being screamed at by “We believe”, the star, the lizard head, and the black banner, all at once. There’s not enough white space within and among the various pieces of content, which I think exacerbates this problem (the pages feel cramped). Ironically, if I full-content zoom down the page a couple of levels and then increase the font size a couple of levels, the page feels much less busy, much less cramped (better spacing/more whitespace), and much quieter. (The current mozilla.org page, even with the ridiculous three sets of feeds, feels so much more soothing and easy on my eyes.)
My other concerns, which pale in comparison now, are that the black header still takes up too much vertical space on the page and does nothing with it, that “Other Languages” overlaps the “Document History”/”Edit” links, and that the hover effect on “mozilla.org” in the black header is gratuitous and silly.
I agree with Smokey. The page looks cluttered, almost unplanned, and some colors are a touch to the loud side. At the same time the main claims text looks too light and washed out. The typography could be a bit more balanced too. At the moment one feels overwhelmed rather than guided.
I’m sorry that I haven’t gotten involved sooner to provide some feedback from the perspective of one who visits Mozilla’s sites frequently and I’m hoping that I’m not too late, but I am more concerned with the layout of the content itself than the aesthetics.
It’s no big trade secret that the best content on a web site is seen first at the top of a web page but below the header. People scroll through the noise directly to it. As a long time Internet user, this is what I do, and as a web developer, this is how I create my pages.
I like that the mission statement is seen first, it should be, but as for the actionable content, all that I see are items that will take visitors away from Mozilla.org to other sites from the Our Projects block and the feeds one in the right hand column.
If the goal of Mozilla.org is to just be a portal then ok, but I’m sure that it isn’t.
Mozilla.org has its own content and interactive sections that should be (but are not) prominently displayed and accessible. They are up in the navigation section which is more of an afterthought to most visitors of web sites. They follow the links and choices put in front of them at the end of an item’s section.
So my suggestion would be to move those items (which are Mozilla.org’s primary offerings) from the navigation section down to where people focus their attention to first and the most. In this case, under the mission statement would be most appropriate and add a little meat to them to entice and engage people especially under Getting Involved since that section involves interaction and recruitment and all of the other sections are informational more than anything.
The Getting Involved section should be the site’s primary focus. People can read anything anywhere. They want to interact and participate and Mozilla wants and needs new talent, contributors, volunteers, developers, testers, and business partnerships. Leave the marketing of Mozilla’s products up to MoCo, MoMe, and others. The Getting Involved section/page is the one exception where Mozilla.org can afford to be a portal.
One of my favorite things about Mozilla is its open invitation for anyone to participate, contribute, and be heard, so I’m sincerely grateful for the opportunity to have done so here.
I love it. The latest design outlined above is wonderful. I especially enjoy the large typography “We Believe”, I think that’s really important to see immediately.
Bravo.
-Matt
The new templates give a better impression of the new design than the images did.
One thing that I really noticed with the template version: It’s full of things. There’s so much different things on the page, that are colorful and shiny and cry for my attention. I feel a bit overwhelmed as the visitor. I don’t know where to look first.
Also, I noticed that while the text in the middle (Mozilla mission) is grey and doesn’t really stick out (I don’t notice it at all at a first glance) the elements on the side (top, right, bottom, header, community news and projects) are all very coloured. They come to my attention first.
Regarding the Mozilla mission part: I read “We believe” and then the box “Do you agree?”, without having looked at the grey text (the real message) at all. “We believe” and “that the internet should be public, open, and accessible.” do not really feel connected.
As a last observation, I think that the big dark bar at the top really covers a lot of space without contributing much value to the page.
On the technical side of things, I think that the cssresize version is the way to go. The other versions also had slight layout issues in Firefox 3.5beta4 (projects bar).
I’d suggest to smoothen the forward and back actions of the project bar a bit more, though. A fading effect would be nice.
Finally you asked for mobile browsers. I had a look at the three versions with my Nokia 5800. It’s a Symbian system and the browser is based on KHTML I think.
The first version (liveresize) was very slow and had a few small layout issues.
The second version (fixedmargins) looked very good, although you needed to scroll a lot. Except a small layout issue in the footer, it looked exactly as intended.
Now the third version (cssresize). Unfortunately, this version was totally unusable as everything overlapped and you could not really see much of the page except for the community news. Some elements were even paced totally off the screen.
Looking very arstechnica in colour and layout.
The background branding doesn’t shine through the big black banner doesn’t look finished, too much real estate eaten up. Might be a nice idea to have the product links above the page fold.
Looking again, I really feel like I’m visiting arstechnica.
It looks like there are two things that have come up in a few of these comments — the header is still too big and the design is too bright/distracting.
For the header and for bringing more things above the fold, there’s still some tweaking we can do here. We can save a few pixels by moving the dino head up (the dino head is lower in the coded versions than the design mockup). We can also bring some more information above the fold by reducing the text in the blurbs below “We believe” (to address another comment about needing important links below the header, I think these blurbs need to end with a Read more link).
For the brightness of the design itself, we wanted something bold and I think it’s good that the design catches people’s attention. Again it’s a matter of balance though. Is important information getting lost? I think that’s speculative right now — we should do some stats analysis of the site after the new design goes live to make sure there aren’t pages and sections of the site that are getting overlooked.
For the most part, I think this looks good. However, as many people pointed out on the previous iterations of this redesign, the red star has some strong negative connotations that you should avoid.
http://en.wikipedia.org/wiki/Red_star
Thanks for flagging the negative association with the red star — this can always be changed if it is giving people the wrong impression.
The star is being included because there is a strong community identification with the old hack artwork and we wanted to have some elements that referenced that.
Personally I think this version of the design handles this reference better than the second round which had a much too strong unintended Soviet look.
I’ll be interested in seeing if other people comment on this being an issue.
@davidwboswell: I’ve actually used Mozilla since about Milestone 6, and I remember the old artwork quite well. Personally, I think the lizard and the color scheme both evoke the old artwork very well.
The USSR broke up before I was born, but I know plenty of people who grew up during the Cold War, not too long after the times of “are you now or have you ever been”. Having personally explained on multiple occasions how Open Source doesn’t relate to communism, I’d just like to avoid having any more fuel thrown on that fire.
I wonder if one way to respond to some of the earlier comments about being like a portal, or too much ‘twist’ and not enough action (like software) would be to focus a bit on the idea that we *build* things. We have certain beliefs — that’s nice and clear in the proposal. We also build things to instaniate those beliefs. We build software, we build communities, we build shared assets, we build paricipatory processes.
mitchell
Mitchell, the information you mention is certainly important and I see a lot of that being covered in the new Our Causes section. The content there will focus on what we do to promote our values and how we do it. There is some draft text for those pages at:
https://wiki.mozilla.org/Mozilla.org/Causes
We can work to surface more of that on the home page, but if anything I think we need to reduce content there instead of adding more to deal with the comments about it feeling cluttered. Yet another balancing act 🙂
By printing “We believe” in such big letters… are you trying to convey a religious message?
Not, of course, but it does look a bit odd.
@Laurens: That was my first take on it as well.
For the “We Believe” text we certainly aren’t trying to convey any sort of religious message, but there are certain principles that we believe in very strongly.
If there are suggestions for how to talk about these principles in a way that doesn’t confuse the issue, please free feel to send us your ideas.
There is probably no need to change the phrasing (unless you explicitly want to stick with this style of highlighting the first words, which is imo a bit old-fashioned :)), just that it looks a bit odd if “We believe” jumps out so much. At first glance, right now you might be mistaken for being on a church website, ‘we believe’, ‘community’, ‘get involved’, heh :).
Either way, just giving my feedback for you designer types to work with.
I said earlier, that “We believe” and “that the internet should be public, open and accessible.” do not feel connected. IMO, this is because “We believe” is very huge compared to the rest of the statement. Also, “We believe” is coloured in red while the rest of the statement is grey. This strengthens the impression of the visitor, that “We believe” somehow stands on its own.
Think about it: With the current proposal we’re telling everyone that we very strongly believe. Why not tell everybody, in what we believe so strongly.
I’d suggest making both parts of the statement roughly the same size, “We believe” maybe a bit larger, but not that much. Also, why not use a shade of red for both. Again, “We believe” could be a bit darker to emphasize on that part. On the other hand, I’d emphasize on the real message, e.g. I’d emphasize “internet”, “public”, “open” and “accessible”, not “We believe”.
Quoting Patrick: “I’d emphasize on the real message, e.g. I’d emphasize “internet”, “public”, “open” and “accessible”, not “We believe”.”
This, probably. They are the important words that you really want people to notice.
I appreciate the feedback about how that first sentence is coming across. I’m certainly happy to try to make the “We believe” text a bit smaller and make the rest of that sentence red to see how that works.
Maybe get rid of “We Believe that…” and just say “The Internet should be Public, Open, and Accessible.”
Saying “we believe” is redundant – its already implied by the very fact that the statement is written on the web page.
The whole page seems to have a bit of a political activist feel to it – the dino, red star, “We Believe”. Feels like zealots waiving flags. At least that’s what I get. And I don’t know if I want to “get involved” with that.
I would rather get to know the community itself – have some bios maybe, quotes from members about what they love and why they belong. Give it some sort of international flavour – I think that would be critical. Show people that there are other people just like them, that live down the steet from them, who have gotten involved. Link to the various international Mozilla groups right up front. Products seem to be more of a side-show, something for Mozilla.com, though I certainly wouldn’t get rid of them all together they aren’t the focus, getting involved and feeling drawn in to the community is.
Thanks for the feedback. We certainly don’t want to turn anyone off who is coming to the site to find out more about the community, so we can explore toning things down.
On the other hand, we don’t want to tone things down too much and lose the personality of the community. The fact is that people are attracted to the community and choose to volunteer their time because they are passionate about Mozilla and believe in Mozilla’s mission.
This site is for those within the community as well as for people currently not involved with the community and it needs to reflect their needs and views too.