Making WordPress.org

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#53 closed enhancement (fixed)

Making WordPress.org Header Responsive

Reported by: cyberchimps's profile cyberchimps Owned by:
Milestone: Priority: low
Component: General Keywords: needs-ui needs-refresh
Cc:

Description

I spoke with Matt about assisting in making WordPress.org responsive, and would love to open the discussion here about getting this started. My team and I interested in taking this on, and working with anyone else who would like to help.

Matt has ultimate authority over the design / UI, but we can help come up with design mockups until we find something he approves then figure out the best ways to code it. As Matt put it when I spoke to him the overall idea is to "MP6" WordPress.org.

I spent some time with Otto getting an overall idea of what would be required, and from what I gathered we'll need to work on a responsive header, footer, and content pages for the static portions of the site, as well as an updated WordPress theme, and update the BBpress, and buddypress themes as well.

We should probably break this up into multiple parts, and take on the easier items first such as a global stylesheet we can reference throughout the various components.

Anyhow, I'm going to open this up for discussion and then start working on some UI ideas which I will share here before so we can come up with a few different directions before we present anything to the powers that be.

--Trent

Attachments (11)

style.css (2.4 KB) - added by georgestephanis 11 years ago.
script.js (163 bytes) - added by georgestephanis 11 years ago.
wp4-style.diff (12.8 KB) - added by cyberchimps 11 years ago.
Responsive Menu - Mobile first
header.txt (3.6 KB) - added by cyberchimps 11 years ago.
Header html with additions
wp.js (332 bytes) - added by cyberchimps 11 years ago.
Hides/Shows responsive menu
wp4-style2.diff (31.5 KB) - added by cyberchimps 11 years ago.
Style changes to button and work with the js file attached
wp4-style3.diff (31.7 KB) - added by cyberchimps 11 years ago.
Fixes disappearing menu when closed at mobile level and then screen size changed to more than 768px
wp4.css (29.6 KB) - added by cyberchimps 11 years ago.
wp4.css doesn't include any of Otto42 tweaks pre 11-12-13
wp4-style4.diff (31.8 KB) - added by cyberchimps 11 years ago.
Includes all css to make the header and menu responsive
index.html (17.6 KB) - added by cyberchimps 11 years ago.
Test index file that cyberchimps has been using to test the style
wp-responsive-menu-2.mov (6.0 MB) - added by cyberchimps 11 years ago.
Quick video showing responsive menu in action

Change History (59)

#1 @samuelsidler
11 years ago

  • Cc iandunn added

We'll want to do this in pieces. Header and footer are the easiest to do first and they're both global.

CSS is mostly here: http://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/style/

The CSS that's not present there we can work on open sourcing. Keep in mind @iandunn is working on redoing the footer with a new design (see #31). He should make that design responsive.

#2 @iandunn
11 years ago

I'll hopefully have time to finish up #31 today, so the responsive bits will probably be a second iteration, since we'll need a mockup first.

#3 @georgestephanis
11 years ago

Certainly not finished, but here's a first pass at responsifying the header.

I'll probably need to update the base styling of the footer's columns to make them simpler to break down into fewer columns for smaller screen widths. For the moment, I just tweaked it to allow it to shrink. Doesn't look too pretty.

I'll try to put up a screencast of how it looks tonight or tomorrow.

#4 @nacin
11 years ago

#154 was marked as a duplicate.

#5 @cyberchimps
11 years ago

We're currently working on a few ideas in the mock stage right now.

We were thinking of a total redesign and got a little carried away with the idea, but realized we should probably start with making the existing design responsive first, then work on formalizing a new design.

Header idea 1:

http://imgur.com/poO3kJt.png

http://imgur.com/3GomsyE.png

#6 @samuelsidler
11 years ago

Great start Trent!

My gut feeling is that we need to change "Download WordPress" to "Get WordPress", because on mobile devices it doesn't make sense to "Download WordPress". But there'd be a whole bunch of logic involved (like listing mobile apps on the "Get" page) and it's unrelated to your mockup.

Here are some comments related to your mockup:

  • Because it doesn't make sense to download WP on a mobile device, it seems like the download button should be one of the links hidden away (for now at least). But I could probably be swayed a different direction.
  • The hamburger icon feels weird when it's "opened" and sitting next to the Showcase link.
  • Speaking of the hamburger icon, I'm only used to seeing it when the menu it opens is one of those "swipe out from the left"-type. But I don't browse many mobile sites normally. Is it convention to use it for all menus now?

#7 @cyberchimps
11 years ago

@Samuel I was just working with what is on .org currently we can change out the wording / content. Perhaps "Learn more" instead of "download"?

The hamburger icon is being used more regularly now for responsive menus on most of the sites I visit.

Anyhow, here's a second concept that is more MP6 influenced.

Similar concept is on Mashable.com for their responsive menu to get a better idea of what this might look like in action. Could use some javascript maybe to allow swiping of the menu to close it as well as pressing the hamburger icon.

Personally I prefer this direction, but it is pretty similar to how MP6 / wp-admin, although that may not be a bad thing.

Thoughts?

http://i.imgur.com/yXQi9bX.png

http://i.imgur.com/FzRMNjn.png

Last edited 11 years ago by cyberchimps (previous) (diff)

#8 @matt
11 years ago

That's definitely better than what we have now.

I'm fine with getting something like this live (since it's better than the experience currently) and then using a second iteration to drive mobile users away from downloading to getting the mobile apps. (The download page does link to the mobile apps.)

Would be cool to see some other pages: forums threads, plugin page, blog post.

And remember we're calling them Samo icons, not hamburger icons. :)

#9 follow-up: @georgestephanis
11 years ago

So are we okay with doing markup changes? Or just styling/script on the existing markup? I thought I had heard the latter, but wanted to be sure.

#10 in reply to: ↑ 9 @samuelsidler
11 years ago

Replying to cyberchimps:

@Samuel I was just working with what is on .org currently we can change out the wording / content. Perhaps "Learn more" instead of "download"?

Sorry to throw things off. It was more a general comment that we'll want to consider in the future, but not for this work.

The hamburger icon is being used more regularly now for responsive menus on most of the sites I visit.

Indeed it is. I just hadn't see the Samo icon (Did I do it right, Jay-Z?) used that much, but I should pay better attention.

Personally I prefer this direction, but it is pretty similar to how MP6 / wp-admin, although that may not be a bad thing.

Thoughts?

I also prefer this direction. Unless there's objections in the next couple of days, let's move forward with it for the header. As you work on it, keep in mind that the markup shouldn't need to change to implement this design, so the download link might need to be in the roll out menu.

You'll need to consider what happens (visually) when a nav item is selected.

Replying to georgestephanis:

So are we okay with doing markup changes? Or just styling/script on the existing markup? I thought I had heard the latter, but wanted to be sure.

Just the latter for now. We can do minor markup changes if we need to, but shouldn't for these designs.

#11 follow-up: @cyberchimps
11 years ago

Samo icon it is. I used the one from https://github.com/melchoyce/dashicons to keep things consistent.

Will work on some mockups for full pages, just wanted to start with the header so we knew what layout to go for.

Can work on the other issues.

So what is the best way to go about coding this? I'm more then happy to have my team and I take a crack at this, just want to make sure we know exactly how we need to go about it. Or if you guys want to code it and need more precise mockups I can do that as well.

--Trent

Last edited 11 years ago by cyberchimps (previous) (diff)

#12 in reply to: ↑ 11 @samuelsidler
11 years ago

Replying to cyberchimps:

Samo icon it is. I used the one from https://github.com/melchoyce/dashicons to keep things consistent.

Perfect. When possible, dashicons are good to use.

So what is the best way to go about coding this? I'm more then happy to have my team and I take a crack at this, just want to make sure we know exactly how we need to go about it. Or if you guys want to code it and need more precise mockups I can do that as well.

The code is located here. The best thing to do is make patches against the code there. If you have questions about other parts of the source, just ask.

#13 @cyberchimps
11 years ago

Just FYI: We will be working on this most likely in batches over the next few weeks including new mockups for the areas mentioned above, and start submitting patches hopefully towards the end of next week or the following week.

Clearing up a few projects in our pipeline right now so we can put more resources into this.

--Trent

Last edited 11 years ago by cyberchimps (previous) (diff)

#14 @cyberchimps
11 years ago

We have the initial css to push. We have gone for a mobile first markup. However to get it working properly we needed to add some html to the #wporg-header. Also to get the dashicons working we needed to add those folders too and call them from the stylesheet. Finally when you boil down to the mobile level the mobile menu is visible as we have not added any js to show and hide it. Should we push the css only and list the other changes here or should we push the whole lot?

#15 @samuelsidler
11 years ago

Trent, please attach a complete patch with all the changes you need. The CSS changes likely won't be controversial at all, but the changes to #wporg-header might be (not sure what changes you needed to make). We can land them separately if need be, but we'll figure that out in the review process.

I'd get those changes up in a patch now and attach a JS patch after that.

@cyberchimps
11 years ago

Responsive Menu - Mobile first

#16 @cyberchimps
11 years ago

Okay we have added the patch for the wp4.css. It adds in the required css from a mobile first perspective with 2 breaking points. One for the mobile menu and one for the change of position for the download button.

I am not sure where you want us to add the patch for the header as we have just been working from the html scraped from the home page. We are just suggesting 2 additions of html. One for the mobile button and one for the new location of the download button in mobile view. Attached is header.txt with 2 TODO's pointing out the changes.

It just needs some simple js to show and hide the menu on the button press and maybe a swipe action to get rid of the menu too

@cyberchimps
11 years ago

Header html with additions

#17 @Otto42
11 years ago

Just to spot check, the only header changes are the mobile-menu-button and the download-mobile sections, correct?

#18 @Otto42
11 years ago

Also, what JS would be needed to make the menu work?

CSS looks good, the header patch is relatively straightforward. I'll need to include dashicons somewhere (probably in /style/fonts) but that's not a major issue. Make home is using dashicons too, so that can be combined there and served through the static cache for speed.

@cyberchimps
11 years ago

Hides/Shows responsive menu

#19 @cyberchimps
11 years ago

Hi yes just those 2 additions to the header (mobile-menu-button and download-mobile sections)

I wasn't sure if it was overkill including the dashicons or whether you would be able to use them in other places? Looks like it's not too big a deal.

Attaching the js that we used on our tests. It uses a simple slideToggle however I'm wondering if it would look better sliding in from the left.

We could do this using jQuery UI but we weren't sure if you wanted to add that or not?

@cyberchimps
11 years ago

Style changes to button and work with the js file attached

@cyberchimps
11 years ago

Fixes disappearing menu when closed at mobile level and then screen size changed to more than 768px

#20 @Otto42
11 years ago

For such a small bit of JS, I don't think it's necessary to start including jQueryUI on all pages that have the header (which is a lot of them). We can probably inline it instead.

#21 @georgestephanis
11 years ago

I'd personally rather just have the JS toggle a class, and deal with the display / hiding (and any animations) entirely in CSS -- it'd help to add an ID to the parent UL, as thats far simpler than a lot of JS dom traversal.

<script>
var toggleMenu = function(){
    var m = document.getElementById('wporg-header-menu'),
        c = m.className;
    m.className = c.match( ' active' ) ? c.replace( ' active', '' ) : c + ' active';
}
</script>
<div id="el" onclick="toggleMenu();">Click</div>

or something.

Last edited 11 years ago by georgestephanis (previous) (diff)

#22 @Otto42
11 years ago

georgestephanis: Is this the sort of thing we should block this for, or can we implement this as-is right now and then iterate on it later?

Basically I need to know whether to go ahead and put this on my sandbox for testing, and then whether or not I can commit with what we have in this ticket at the moment.

Making the headers mobile is a priority, basically.

Last edited 11 years ago by Otto42 (previous) (diff)

#23 follow-up: @Otto42
11 years ago

@cyberchimps: Is wp-style3.diff good to go? I'll have to remove the font-face declaration (and rewrite it to get those elsewhere), but I notice some TODO stuff in there still.

#24 in reply to: ↑ 23 @cyberchimps
11 years ago

Replying to Otto42:

@cyberchimps: Is wp-style3.diff good to go? I'll have to remove the font-face declaration (and rewrite it to get those elsewhere), but I notice some TODO stuff in there still.

The css is ready

The first TODO is just pointing out that the mobile menu hides any children menu items as it keeps it simpler and shorter
The second TODO can be removed along with the .wrapper declaration below it. That was being used if the mobile menu moved the content right when displayed. At the moment it slides down over the content.

Agree with georgestephanis on js so the animation css will need to be added to display the menu

#25 @Otto42
11 years ago

Trying out the CSS now (have not made the HTML changes).

Two problems, both visible in this screenshot:
https://i.cloudup.com/axjRJoNJqV.png

The selection arrow appear to have a line below it, and the search bar has gone odd with the button on the right being pushed down.

Chrome. Windows 8.

Before shot using current wp4.css:
https://i.cloudup.com/tAUul7SX55.png

Edit: Some minor margin and width/height adjustments fixed this. Looking at dashicons now.

Last edited 11 years ago by Otto42 (previous) (diff)

#26 follow-up: @Otto42
11 years ago

Looks pretty good in a narrow Chrome:

https://i.cloudup.com/rrKVnsspHh.png

Still need to add the Javascript. Any updates needed for this, or should we roll with the JS as given already and change it to the method suggested by @georgestephanis later?

#27 in reply to: ↑ 26 @cyberchimps
11 years ago

Replying to Otto42:

Looks pretty good in a narrow Chrome:

https://i.cloudup.com/rrKVnsspHh.png

Still need to add the Javascript. Any updates needed for this, or should we roll with the JS as given already and change it to the method suggested by @georgestephanis later?

Thanks for fixing the margins etc

I have all the css needed to get @georgestephanis js working (looks much better). It requires the #wporg-header first ul to have an ID of #wporg-header-menu

Where can we get the latest wp4.css? When we check out ​http://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/style/ it doesn't have any of the changes.

I'll attach our wp4.css file but it won't contain any of the tweaks you made to the margins etc.

Thanks

@cyberchimps
11 years ago

wp4.css doesn't include any of Otto42 tweaks pre 11-12-13

#28 @cyberchimps
11 years ago

Just to briefly list the changes made:

#head-search form

  • added margin left for screens sub 480px as the search bar was getting too close to the menu button (line: 247)

#wporg-header ul#wporg-header-menu

  • added id to ul element in the header and in main style(line: 287) and in min-width 768px styling(line:466)
  • it now positions the menu left -75% (line: 289)
  • added transition to the left position (line: 297 - 301)

#wporg-header ul#wporg-header-menu.active

  • when active class is added left position is 0 and animates into view (line: 304)

#29 @Otto42
11 years ago

Okay, I'll add those. Is there a different set of JS code I need to add along with this?

#30 follow-ups: @Otto42
11 years ago

Also, I think you posted the wrong wp4.css file, as that is extensively different than what you're saying the changes are.

The tweaks I made were minor and easily re-doable. Just post your latest diff from the current wp4.css, same as before. I'll take care of any issues. It's not a problem.

#31 in reply to: ↑ 30 @cyberchimps
11 years ago

Replying to Otto42:

Also, I think you posted the wrong wp4.css file, as that is extensively different than what you're saying the changes are.

The tweaks I made were minor and easily re-doable. Just post your latest diff from the current wp4.css, same as before. I'll take care of any issues. It's not a problem.

Sorry was just a little confused as the wp4.css that I'm checking out doesn't have any of the changes we've made so far. So the file included was all the changes made to help make the header responsive. Including the recent changes to get georgestephanis script working.

I have now checked out the style folder from the link http://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/style/ and created the diff file from all the changes made to get this working.

So all that needs doing to get the menu working at mobile level is to add the style changes, add georgestephanis script http://meta.trac.wordpress.org/ticket/53?replyto=30#comment:21 to the header and give the menu ul an ID of #wporg-header-menu

If I have got something wrong and you need a quick change you can skype me at hugosaner

@cyberchimps
11 years ago

Includes all css to make the header and menu responsive

@cyberchimps
11 years ago

Test index file that cyberchimps has been using to test the style

@cyberchimps
11 years ago

Quick video showing responsive menu in action

#32 @cyberchimps
11 years ago

Okay so you can see everything we have used to get this to work for us I have included the index.html file we've been testing with as well as a quick video of what it is doing for us. We have tested in Firefox, Chrome and Safari and it works well in these.

Any problems just give me a shout :)

#33 in reply to: ↑ 30 ; follow-up: @Otto42
11 years ago

Thanks, that diff is a lot easier for me to work with.

I have the code working now on my sandbox, and just need to take care of some of the dashicons adjustments. Now that dashicons is in core (trunk), we can use that directly.

#34 in reply to: ↑ 33 @cyberchimps
11 years ago

Replying to Otto42:

Thanks, that diff is a lot easier for me to work with.

I have the code working now on my sandbox, and just need to take care of some of the dashicons adjustments. Now that dashicons is in core (trunk), we can use that directly.

Great news, cannot wait to see it live :)

#35 @Otto42
11 years ago

This is going to take a little longer than expected. Trac and the codex need special attention to avoid horrible ugly header breakage, it seems. No worries though, working on it.

#36 @Otto42
11 years ago

In 136:

Padding/margin fixes, z-index and hover fixes for trac. See #53

#37 @Otto42
11 years ago

  • Resolution set to fixed
  • Status changed from new to closed

Changes made in [135] and [136] along with associated other changes to dotorg header files and trac templates.

Additional changes I had to make (adding here for documentation reasons):

  • Had to add a z-index to the mobile menu to override trac for the dropdown. Need to double check that and see if that's right or there is a better way.
  • Had to add a background:none to the mobile menu hamburger link, so as to override a background rule on links in wp-trac.css.
  • Minor adjustments to padding and margins, some from typos, some from wp-trac conflicts

Minor problems that still exist, but which can wait until after turkey:

  • The download button in the narrow view is showing the wrong link text color on trac, due to something interfering from the wp-trac.css file. Need to add an override in wp4.css to handle that properly.
  • Spacing of the menus on mobile looks slightly off, but I need to test on devices first to see how much.
  • When shrinking left/right, there's about a 10 pixel space where the existing download button drops down instead of disappearing and showing the mobile button. So need to tighten up the sizing here a little bit.
  • Dashicons is now loading twice on make sites. This is not an issue, but unpleasant, and can be easily fixed with a custom plugin to prevent the second load on the problem sites.

Props to @cyberchimps for the design and stellar effort
Props to @georgestephanis for the JS adjustments and other contributions
Props to @nacin for handling the trac template commits for me

Hey, props all around! :D

Last edited 11 years ago by Otto42 (previous) (diff)

#38 @Otto42
11 years ago

Just noticed:

  • The WordPress.org logo does not center when resizing to narrow on make sites. This may be related to recent MP6 changes in 3.8.

#39 @azaozz
11 years ago

And the toolbar on make sites drops down at 600px width, leaving some empty space at the top. Also the "Log in" link is hidden there in responsive mode making it pretty useless for logged out users.

#40 @Otto42
11 years ago

Viewport meta tag is incorrect on some pages, making header not show up on phones.

Trac sites have extended menu bar on mobile.

Admin bar resizes oddly on mobile as ozz says (seems to be limited to make sites, suggesting core issue, will test this)

If anybody has css fixes for particular issues, please post them. I'll look at each of them and integrate them accordingly. If they're large fixes, a separate ticket may be warranted (CC Otto42 on those). Small ones can be added here.

#41 @Otto42
11 years ago

Added viewport rules to make more mobile devices display the header.

Fixed admin bar positioning for make in [137], and corrected subsequent stats smiley placement in [138].

Fixed possible headline h2 wrap on smaller chrome mobile browsers in [139]. May not be fixed everywhere as this is a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=189755

#42 @Otto42
11 years ago

Issue: Blog page has text cut off on right hand side, need to add styles for mobile on main page area.

#43 @samuelsidler
11 years ago

  • Summary changed from Making WordPress.org Responsive to Making WordPress.org Header Responsive

Since we're calling this "fixed" minus some smaller fixes, I've opened #235 to make the footer responsive. We'll probably want to open individual tickets for other parts of the site (starting with the homepage and news blog?).

#44 follow-ups: @Otto42
11 years ago

I've been using this to keep track (hah), but individual tickets for individual problems is okay too. Please cc me on all of the relevant ones.

#45 @Otto42
11 years ago

Removed extra dashicons declarations from make sites. This should speed them up slightly.

#46 in reply to: ↑ 44 @cyberchimps
11 years ago

Replying to Otto42:

I've been using this to keep track (hah), but individual tickets for individual problems is okay too. Please cc me on all of the relevant ones.

Hey Otto,

Sorry work has been a little hectic, but I should have some time to help make the rest of it responsive. Where have we got to? Has anyone started on the body or footer yet? Just send me a task and I'll get it done asap :)

#47 in reply to: ↑ 44 @cyberchimps
11 years ago

Replying to Otto42:

I've been using this to keep track (hah), but individual tickets for individual problems is okay too. Please cc me on all of the relevant ones.

Hey Otto,

Wasn't sure how to cc you in on changes so I thought I would add it here.

Please find responsive footer work here http://meta.trac.wordpress.org/ticket/235

Thanks

#48 @Otto42
11 years ago

[568] Bumped z-index on the menu to 10, because it was hiding underneath the top banner image on make-home. Seems to have fixed the problem, see no adverse effects elsewhere.

Note: See TracTickets for help on using tickets.