WordPress.org global footer link changes

[devinreams]

Currently:

• Privacy
• License/GPLv2
• WordPress.com
• WordPress.TV Videos
• WordCamp Events
• BuddyPress Social Layer
• bbPress Forums
• WP Jobs
• Matt

Missing? (just a brain dump)

• learn
• global / i18n
• contribute (make)
• handbook
• codex
• support forums
• plugins
• themes
• showcase
• blog
• planet
• ideas
• gravatar
• profiles
• core trac / svn
• search

[samuelsidler]

Also included currently: Facebook, Twitter, Code is Poetry.

And upcoming: developer.wordpress.org, which we'd probably link to instead of the codex and handbook (there are actually three kinds of handbooks coming, but I assume you meant the developer ones).

[devinreams]

OK, first-draft "4 column" (mega footer) grouping:

About WordPress

• Plugins
• Themes
• Showcase
• License (GPLv2)
• Blog
• Privacy
• Profiles
• Hosting
• Search

Resources

• /forums/
• developer.wordpress.org
• make.wordpress.org
• jobs.wordpress.net
• planet.wordpress.org
• /ideas/
• learn.wordpress.org
• WordPress.TV Videos

Code Is Poetry

• bbPress
• BuddyPress
• Gravatar
• WordCamp
• Matt

Facebook
Twitter

[samuelsidler]

Not a bad first take. We should assume that everything in the footer now has to remain in the footer, so things like wordpress.com, need to stay there.

I'd also put Code is Poetry on the very bottom of the page, centered, as the image that it currently is (but if we have a background color, we'd want to adjust the background there, of course).

I'd be okay with other things centered above the Code is Poetry image, like the license and privacy links, but possibly also a copyright statement, which doesn't exist right now. I'm not sure if we need it but "Copyright (c) 2003-2013 WordPress Contributors" would be a welcome addition (in my mind).

[samuelsidler]

Here's what I'm thinking: Five sections but really only four.

Section 1:

• About
• Blog
• Hosting
• Jobs

Section 2:

• Support
• Developer
• Get Involved / Make
• Learn (Workshops)

Section 3:

• Showcase
• Plugins
• Themes
• Ideas

Section 4:

• WordCamp
• WordPress.TV
• BuddyPress
• bbPress

Section 5:

• Ma.tt
• Facebook icon (instead of "Like", link to page)
• Twitter icon (instead of "Follow", link to page)

Underneath that, we'd have the Privacy link and License/GPL link centered. And beneath that, we'd put the Code is Poetry image centered.

Some day, we'll want to do a ton more IA work and combine header menu items and such, but for what we have now, I think this can work.

[samuelsidler]

And I just realized I forgot wordpress.com. ;) That should go in Section 5, below Ma.tt.

[Otto42]

WRT the FB/Twitter icons, we have them that way currently in order to help increase the numbers. When we first added the Like there, the number was around 100k or so, so having the functional button definitely helped a lot. Might want to consider that in a redesign of the footer, since it's likely we still want those to be functional instead of just links, for at least a while longer (I want that number to hit 1M :-) ).

[samuelsidler]

Ah, that's interesting to know. I wonder if we can clean up the visual appearance of the Like/Follow buttons then. Currently, they're pretty bad. I've asked Mel to take a stab at a footer design.

[Otto42]

The way those are implemented is that they are essentially iframes from FB and Twitter. This is how they know who you are when you click them.

Unfortunately, being inside iframes means that we cannot control their styles very much. We have the ability to customize them to the extent their systems allow.

If you visit ​https://developers.facebook.com/docs/reference/plugins/like/ and put in ​http://facebook.com/wordpress as the URL to like, then you can fiddle around with the controls and see what kind of adjustments you can make, but that's about the limit of possible customization there.

[melchoyce]

Here's my take on the footer: ​http://meta.trac.wordpress.org/attachment/ticket/31/wp-footer.png

Because of the shape/size of the twitter buttons, I broke it up into six columns and stuck the privacy/license info into the fifth column. On their own line, centered, it looked kind of awkward and unbalanced. The colors/style ties in with the current wporg aesthetic more than mp6. I tried a dark grey version and a blue version of the footer, but the rest of the page doesn't really have the size or space necessary to counter balance such a huge block of color/darkness.

Here's a preview of the footer on an internal page as well: ​http://f.cl.ly/items/3j301r431z2O020S1c0q/wp-footer-showcase.png

[samuelsidler]

Mel: Looks great! And I just got sign off from Matt for that design. We can move forward with it. The one comment he had was that the grid looked a little off. I can see it too, but I think it might be an illusion due to the varying width of each column of text.

Ian: Do you have time to work on this? I imagine there's a lot of places the footer will need to be implemented.

[Otto42]

The footer, like the header, is (mostly) global. Change is in pretty much one place only. Shouldn't be difficult to implement. Mostly CSS stuffs.

[iandunn]

Yup, I'll add it to my list.

[melchoyce]

Yeah, that's a common problem with these kinds of footers. Here's the grid I build it on: ​http://cl.ly/image/1Y3a351A2D2T

[georgestephanis]

Big +1 for columns. Now adding extra links won't get all squishy and look ugly. Plus, columns are easy to play with when it goes responsive! (eventually, don't quote me on it, but I hope to have a responsive css addition done in the next week or two, will open a separate ticket)

[samuelsidler]

I forgot to mention that the mockups contain "Developer" in one of the columns, but that site doesn't yet exist. When you're implementing it, you can remove that item and we'll add it when developer.wordpress.org exists.

[iandunn]

No worries, that's what I assumed the intent was.

[iandunn]

Patches and updated binaries uploaded.

Notes:

• I moved the "core" styles (.aligncenter, .alignleft, etc) from the blog-wp4.css in [60] to the global wp4.css, since .aligncenter was needed globally.
• Like Otto said, we can't style the Twitter/FB buttons because they're in iframes
• Let me know if anyone has suggestions for better link title attributes
• The current environment doesn't really let us test these changes on the all of the various sites, so it'll need to be tested after deployment on: codex.wordpress.org, *.trac.wordpress.org, phpdoc.wordpress.org, and planet.wordpress.org.

[Otto42]

Hey, I'll check this out in the morning. Looks pretty good though.

[Otto42]

Notes:

• I see that your diff moves the standard alignment classes into wp4.css. Is this safe? The problem with the wp4.css is that it is used across the whole site, including the make blogs and everything else. The reason I only added those classes to the blog-wp4.css is that only the news site was missing them. I presumed that the make sites would have those already, since they're inheriting them from the P2 theme.

• When developing, handling the static caching server is a PITA. So it's best to not use the s.wp and best to not update the number for cachebusting, because it causes increases when we have to deploy, since we have to stage the CSS first, then do the cachebust separately.

• Any place we're referencing url(​http://s.wordpress.org) for anything in a CSS file willalso need to be updated to use the "no-static" trick. If you examine header.php, you'll see that if the site is being accessed via https, it adds the "no-static" class to the html element. You can use this to refer to the correct URL and avoid the SSL problem. Examine the uses of .no-static in the wp4.css to see how this is done. This is part of the ssl-all-the-things initiative, to allow everything to work properly over https.

[Otto42]

Note: I see you're already modifying the no-static classes in the diff properly, just added that there to be sure, since there may be more url() refs that got missed somewhere.

[iandunn]

Replying to Otto42:

I see that your diff moves the standard alignment classes into wp4.css. Is this safe? The problem with the wp4.css is that it is used across the whole site, including the make blogs and everything else. The reason I only added those classes to the blog-wp4.css is that only the news site was missing them. I presumed that the make sites would have those already, since they're inheriting them from the P2 theme.

It's not a big deal to me either way, but I figured it'd be better to have to them in a single, central/global place, rather than reproducing them on every site that doesn't have them from an existing theme. I can see us wanting to use them on static pages or new areas/sites in the future, so it just makes it easier. I tested all the sandboxable sites with the new CSS and didn't notice any conflicts. I'm happy to switch it back, though, if you think that'd be better.

When developing, handling the static caching server is a PITA. So it's best to not use the s.wp and best to not update the number for cachebusting, because it causes increases when we have to deploy, since we have to stage the CSS first, then do the cachebust separately.

Sounds good, I've reverted the cachebusting indices in 31-meta-wporg.2.diff.

Any place we're referencing url(​http://s.wordpress.org) for anything in a CSS file willalso need to be updated to use the "no-static" trick. If you examine header.php, you'll see that if the site is being accessed via https, it adds the "no-static" class to the html element. You can use this to refer to the correct URL and avoid the SSL problem. Examine the uses of .no-static in the wp4.css to see how this is done. This is part of the ssl-all-the-things initiative, to allow everything to work properly over https. [...] I see you're already modifying the no-static classes in the diff properly, just added that there to be sure, since there may be more url() refs that got missed somewhere.

Sounds good. I'm assuming we'll update all the existing URLs in ​#wp22811.

[Otto42]

Changes to the footer CSS and images:

[65], [66], [67], [68]

Re-open ticket if any brokenness is found on sub-sites.

@iandunn : The changes in your patch to translate/glotpress/css/style.css can't be applied because, well, that's an external to glotpress's trunk. If you want to make changes in translate/gp-templates/style.css instead, then that's local to our system.

[iandunn]

Replying to Otto42:

Changes to the footer CSS and images:
[65], [66], [67], [68]

I tested planet.wordpress.org and phpdoc.wordpress.org in various browsers/devices, and they look good. codex.wordpress.org and *.trac.wordpress.org haven't been updated yet, but I'll test when they are.

Replying to Otto42:

@iandunn : The changes in your patch to translate/glotpress/css/style.css can't be applied because, well, that's an external to glotpress's trunk. If you want to make changes in translate/gp-templates/style.css instead, then that's local to our system.

My bad, uploading a new patch now.

[SergeyBiryukov]

Replying to Otto42:

Re-open ticket if any brokenness is found on sub-sites.

1. On ​http://codex.wordpress.org/Main_Page, I see the old footer​ when logged out (with a weird scrollbar on the right in Firefox 23). However, I see the new footer​ when logged in. On the ​log in page, I see the new footer even when logged out.
2. There's no space between the last line ("Category: About WordPress") and the footer (both old and new).
3. On profiles, the new footer does not take the whole width​ (similarly to #96).

Created #119 for updating the Trac theme.

[Otto42]

Number 1 is a caching issue that will eventually resolve itself, most likely, or we can force clear the codex cache.

Number 2 is a global CSS issue in wp4.css, I expect. I actually don't think there needs to be a space here, personally. But opinions may differ.

Number 3 is that we need some CSS changes for the profiles site. @iandunn , the profiles site is in actually /home/buddypress if you want to take a look. You're probably faster at that CSS than me.

I'll look into applying the glotpress changes, which I think I missed here.

[Otto42]

In 75:

Fixes to footer colors. props iandunn. see #31

[Otto42]

Edit: huh, that's new. Fancy. :)

[iandunn]

It looks like #3 is because 31-meta-buddypress.diff was never committed. It's the markup that needs to change in this case, rather than the CSS.

[Otto42]

Ahh, missed that diff. Applied it now.

[SergeyBiryukov]

Replying to SergeyBiryukov:

2. There's no space between the last line ("Category: About WordPress") and the footer (both old and new).

Same issue on the forums: meta-31.forums.png​.

[coffee2code]

In 99:

Ensure a margin below #pagebody to separate it more from footer. Fixes #31.

[samuelsidler]

Please open new tickets for any other issues found with the footer.