510417 - Implement new planet.mozilla.org theme to match new mozilla.org theme

Status: RESOLVED FIXED

(Websites :: planet.mozilla.org, defect)

Description

[Samuel Sidler (old account; do not CC)]

Attachment: Mockup v1

As we're finalizing the new mozilla.org theme (planning to go live in a week and a half), I'd like to create a new theme for planet.mozilla.org.

I've attached a rough mockup to work from and would like sign off before I start coding anything. Some of this (font sizes, feed stuff in the sidebar) are subject to minor change, but this is a rough mockup. I've tried to minimize the size of the header in this version, as opposed to mozilla.org. The links in the header will get replaced by those on www-stage.mozilla.org now (replacing "Blogs" with "mozilla.org").

Asa / Deb: Care to sign off before I start?

Comment 1

[Asa Dotzler [:asa]]

a=asa!!!

Comment 2

[Deb Richardson [:dria] (plz NEEDINFO)]

This is awesome.  a = dria.

Comment 3

[Samuel Sidler (old account; do not CC)]

Comment on attachment 394449 [details]
Mockup v1

We'll call both of those "r+" and I'll get started. Hoping to have something ready before we go live with the new mozilla.org

Comment 4

[Samuel Sidler (old account; do not CC)]

Taking this bug then... I should have something in a week or so, then I'll assign it to someone else to check-in, since I can't.

Comment 5

[Robert Accettura [:raccettura]]

Awesome!

I'd be glad to check-in when you're ready.

Comment 6

[Robert Accettura [:raccettura]]

Thinking we could lump bug 506105 into this.  Thoughts?

Comment 7

[Samuel Sidler (old account; do not CC)]

I'll be removing that release schedule info completely and instead making a link to wikimo/Releases.

Comment 8

[Asa Dotzler [:asa]]

sounds good to me.

Comment 9

[Samuel Sidler (old account; do not CC)]

Attachment: Footer Mockup v1

Here's what I'm thinking for the footer. Since Planet Mozilla doesn't have a full footer like mozilla.org does, it doesn't make sense to transpose the entire footer to Planet. I think this gets the spirit of the theme though.

Let me know if you have comments.

Comment 10

[Robert Accettura [:raccettura]]

That makes me wonder if we should revisit bug 376873... a disclaimer since it's not official content in any way.

Comment 11

[Samuel Sidler (old account; do not CC)]

Probably not going to get much further today, but in the interest of buses... changing the URL to my current WIP and all its problems.

If you want to fix bug 376873, let me know what text you want and where you want it. I can include that pretty easily.

Comment 12

[Robert Accettura [:raccettura]]

I doubt if we're fixing that bug we'll have wordage asap...

Can we perhaps come up with something design wise and just comment it out?

Looks great btw.

Comment 13

[David Boswell]

The whole design looks great.  For comment #9 about the footer, a scaled down footer makes sense, although are there some Planet related links we could put down there?  Maybe a list of other Planets in the community?

http://education.mozilla.org/planet/
http://planet.mozillamessaging.com/
others...

Comment 14

[Samuel Sidler (old account; do not CC)]

We currently put other planets (or one of them at least) in the top right on the page ("Planet Mozilla Interns"). I think it's better to have them at the top than in the footer.

Comment 15

[David Boswell]

Sure, putting them at the top of the page instead of the footer makes sense  -- either way it would be nice to have a full list of available community planets.

Comment 16

[Alex Faaborg [:faaborg] (Firefox UX)]

>there some Planet related links we could put
>down there?  Maybe a list of other Planets in the community?
>
>http://education.mozilla.org/planet/
>http://planet.mozillamessaging.com/
>others...

As kind of the inverse, I filed the meta bug 511001 to track getting all the various sub planets to link up to the higher level planets.  The general idea being that these sub planets are really great, but we should give users the ability to navigate up to the broader feeds of information as well, so that we don't create a bunch of unlinked isolated islands of information.

Comment 17

[Samuel Sidler (old account; do not CC)]

Alright, I've updated my staging site[1] with what I have so far. I consider this "complete". The quotes are because I haven't tested IE at all. But this works in the latest Firefox 3.5 and Safari 4 releases.

Before I start making this apply to the actual planet code base (create a theme for planet.mozilla.org to use) and cleaning up the CSS code, can I get sign off from a peer/owner?

[1] http://people.mozilla.org/~ss/planet-redesign/

Comment 18

[John Slater]

I'm not the project owner, obviously, but wanted to chime in and say that this looks awesome. Can't wait for it to go live!

Comment 19

[Robert Accettura [:raccettura]]

I love it!  A major improvement.  Should get some other planet folks feedback of course. ;-)

My only thought is that perhaps there needs to be some more thought given to headers in blog posts.  In particular the relationship between post title, blog name, and headers within a blog post. Reason being that post title and blog name blend slightly, though I'm totally cool with that... but if a blog post happens to contain a header tag (example: h3)... that's where I think it might be worth examining.  

FWIW planet currently sucks at this currently.  It's not a new issue.  I should be clear about that.  I wouldn't even call it a blocker.  Just a "that would be awesome to fix" kinda thing.

Thinking the best approach would be perhaps have a completely different set of font sizes for header tags in .entry.

I think planet has the ability to normalize header tags.. Perhaps Phil Ringnalda could chime in here.  That would obviously help.

That's really my only thought. Sorry for not bringing that up earlier.  I've thought it for some time, though I didn't even think about it in terms of this new theme until I was comparing it with the live version.

That said... sooner we can roll this the better.  It looks awesome.

Comment 20

[Robert Accettura [:raccettura]]

Attachment: Example of current planet (markup only)

A few examples of blog posts with header tags that I see on planet right now.

Comment 21

[Samuel Sidler (old account; do not CC)]

I'll see what I can do, but it might be better to fix that post-launch. It'll add a bunch of complication to my current stuff, I think. (Complication worth having, mind you, but I don't think it's worth blocking on.)

Comment 22

[Reed Loden [:reed]]

Look's great. mpa=reed

(In reply to comment #19)
> I think planet has the ability to normalize header tags.. Perhaps Phil
> Ringnalda could chime in here.  That would obviously help.

I'm not Phil, but yes, we can normalize header tags. We actually run everything on pmo through the minhead.py filter currently.

Comment 23

[Robert Accettura [:raccettura]]

Agreed.  Lets not block.  It's a nice to have, but not a requirement.  Especially considering we don't currently have it.

Fixing it would be awesome from a readability perspective, especially if we can normalize header tags.

Comment 24

[David Boswell]

It looks great.  Just a couple minor things (not worth blocking on, but still worth mentioning since I get to use the word 'snout' in a bug):

* Is part of the dino's snout cut off?  It looks like the image just stops right around the 'll' in mozilla.

* There's a bit of a gap to the right of 'Looking for' in the very top that's not on the original design.

Comment 25

[Asa Dotzler [:asa]]

(In reply to comment #17)
> Before I start making this apply to the actual planet code base (create a theme
> for planet.mozilla.org to use) and cleaning up the CSS code, can I get sign off
> from a peer/owner?
> 
> [1] http://people.mozilla.org/~ss/planet-redesign/

a=asa

Comment 26

[Samuel Sidler (old account; do not CC)]

(In reply to comment #24)
> * Is part of the dino's snout cut off?  It looks like the image just stops
> right around the 'll' in mozilla.

Fixed.

> * There's a bit of a gap to the right of 'Looking for' in the very top that's
> not on the original design.

Fixed.

Comment 27

[Deb Richardson [:dria] (plz NEEDINFO)]

Looks good to me.  This is great :)

Comment 28

[Samuel Sidler (old account; do not CC)]

(In reply to comment #17)
> The quotes are because I haven't tested IE at all.

Turns out this looks perfectly fine in IE8 and mostly fine (some spacing issues in the sidebar) using compatibility mode, which I assume is IE7-equivalent.

Do we care at all about IE6? How about old Safaris (3 or less) and Firefoxes (2 or less)?

Comment 29

[Samuel Sidler (old account; do not CC)]

faaborg noticed that the "planet mozilla" text is a bit too sharp. I wanted to fix that but I didn't bring Photoshop with me so I won't be able to. If someone else wants to take that on (including the shading), feel free, otherwise I'll fix it sometime in October.

Comment 30

[Samuel Sidler (old account; do not CC)]

Attachment: Graphics to live in /planet/theme/

Comment 31

[Samuel Sidler (old account; do not CC)]

Attachment: Patch v1

There's probably a bunch of clean-up work that can be done here, but ship early, ship often, right? We can always fix things later.

One thing I wanted to do but didn't was put images in the /img/ directory. I didn't do it because I'm not really sure if adding them to config.ini would work. So, here we are. Images will be in the root directory.

Tagging Robert for review, but anyone else can feel free to jump in, I'm sure. I don't know if this needs a *lot* of review, just a quick once-over should be fine. Again, we can iterate as we need to.

Comment 32

[Samuel Sidler (old account; do not CC)]

Oh, and in case it wasn't clear, the zip file needs to be extracted into the "theme" directory:

  http://svn.mozilla.org/projects/planet/branches/planet/theme/

Comment 33

[Reed Loden [:reed]]

Comment on attachment 398345 [details] [diff] [review]
Patch v1

Initial read-through looks good... let's get this live.

r=reed

Comment 34

[Reed Loden [:reed]]

r50826, thanks!

Comment 35

[u88484]

I know this should be a separate bug but I don't have time to file one right now.  The "Subscribe to Planet", "Other Planets", and "Subscriptions" column overlaps the text on the page on trunk.