WordPress Admin Header Redesign: Light or Dark?

WARNING: Intense discussion of the open-source design of the WordPress website software lies ahead. I will literally discuss shades of grey. People uninterested in WordPress and its future should probably learn more about snuggies instead.

I updated my WordPress SVN Trunk installation today and noticed a huge change to the admin screens that had just been committed. The header and footer of the admin section had been switched from basically black to a very light grey color. This change was committed as a work in progress, so people would see it and work towards a final solution.

Fig 1. Old admin header color on top, current SVN version below.

Old WordPress header color and temporary new on in SVN

Overall I support this change and think it looks better, but the exact shade of grey in the background didn’t match the gradients in similar UI elements (the dashboard sections and screen options buttons) so I worked out a different light-grey graphic to use as a background that would match. Here is a screenshot of how it should look if this light grey is used in the final WP 3.0 release, I think it is pretty solid and shouldn’t make anyone cry.

Fig 2. WP-Admin with darker but still light-grey heading and footer. Pretty okay.

Screenshot of wp admin with light grey header and footer
Click to view full size

I remembered a conversation on the WP UI dev blog where another middle-grey option was proposed but didn’t get a lot of attention. I really liked the darker grey version in JohnONolan‘s original mockup so I worked out a full page screenshot using the darker shade of grey that I thought worked better and added them to the trac ticket about the header change.

Here’s the one I think would work the best, dark grey to match the active heading in the sidebar (in this case the “Dashboard” section heading).

Fig 3. Nice dark WordPress Admin screen, how it should be.

Screenshot of my proposed WP admin colorsClick to view full size

Here is one giant image with both of them so you can compare. Instead of images like this I like to open two versions in seperate tabs in my browser than jump back and forth to decide which I prefer.

Fig 4. Side-by-Side comparison of light and dark grey proposals for admin header and footer.

Side by side comparison of light and dark optionsClick to view full size.

I’m hoping the dark one can get implemented because it has a lot of nice features that the lighter version lacks:

  • It is not a big change from the old version, so people will be inherently less upset about it.
  • It brackets the whole UI nicely and preserves the high-contrast from the old design.
  • It avoids a page where 90% of the chrome matches each other pefectly. I think the dark grey is important to keeping the look neat, and having only one element in the page with that color (the active sidebar heading) make it look unbalanced.

Feedback welcome, what do you think? If you want to support/flame me the trac ticket about it is probably the best place, so that your input affects the final decision.

Mac OSX: Setting a keyboard shortcut for maximize/resize window (green jewel)

I’ve been dreaming for a long time of a system-wide keyboard shortcut to maximize/resize the current window in OSX (windows-style, where the window fills the screen or not, rather than going to the dock). In pretty much every application the ‘Window’ menu item has Minimize (shunt to dock) and “Zoom” which resizes the window and has the same effect as the green “+” jewel in the window header. The Minimize item has the easy-to-use keyboard shortcut CMD+, while the Zoom item has no shortcut and no hint at how to get one.

EDIT (Sep 27, 2010): Based on my realizations about Firefox and NetBeans detailed below I now think this method is pretty insufficient for me and probably lots of other people. I have since tried the 13$ SizeUp application recommended by Martin Reisch in the comments. It is excellent and elegant and solves both the problems I had and ones I didn’t realize I had until they were solved. I recommend it whole-heartedly for those among us with big screens and small patience for window management.

divvy logo EDIT (Jan 24, 2012): Another commercial solution to this problem that has appeared is Divvy. I haven’t tried it yet simply because I have SizeUp working and already paid for it, but from what I’ve heard Divvy takes it to the next level by adding a slick graphical interface in addition to keyboard shortcuts, as well as letting you create infinite different resizes, whereas SizeUp limits you to preset ones. Divvy has a demo so you can try it for free.

I looked around and found some totally whacked out solutions involving applescript or bash scripting but finally found an incredibly simple and obvious method using System Prefs. I recommend it for everyone who is sick of using the mouse to hit the tiny green jewel.

Detailed steps to set a Maximize keyboard shortcut in Mac OSX 10.6

  • Launch System Preferences from the Apple menu
  • Go to Keyboard settings
  • Go to Keyboard Shortcuts tab at the top of the window.
  • Go to Application Shortcuts in the sidebar of the window.
  • Click the small + button
  • In the popup thing make sure ‘All Applications’ is selected for Application:
  • In the Menu Title box type in exactly: Zoom
  • In Keyboard Shortcut type in the shortcut. I recommend Command-Shift-M
  • Click Add button.
  • Restart each app you want it to work in.

Screenshot of the system prefs window where you set the keyboard shortcut

Note on restarting apps: These shortcuts work on an app-by-app basis so it will only work in a given application after the app is restarted. Thus if you restart your computer it will immediately work in all apps.

Note on choosing a shortcut: I chose Command+Shift+M (Command is the ‘apple key’) because it matches the Command+M keyboard shortcut for Minimize/send-to-dock and will be easy for me to remember. You can set it to another combination if you want, but think carefully as you don’t want it to be something that any other applications use or you might have strange results.

EDIT: Well don’t I look stupid. It turns out this keyboard shortcut doesn’t work with Firefox, the application I spend most of my time in! I thought it wasn’t working cause it needed to be restarted but that didn’t fix it either. The problem is that Firefox has its own menu item called “Zoom”, under the View menu, which doesn’t do anything but holds the page zooming functions inside it. For whatever reason this means that the configuration described above activates that menu item and stops the Window > Zoom menu item from working. GAH! I might have to try the app mentioned in the comments to find true happiness.