Happy Friday everybody Here’s what’s new in MP6…

Happy Friday, everybody. Here’s what’s new in MP6 this week. It was a short week for most of us, so we’ll keep the post similarly short.

  • Mobile: You can swipe right and left to open and close the menubar now, in addition to tapping the “hamburger” button in the top left.
  • Mobile: Implemented a fix for dropdowns not displaying full width; props to deanjrobinson for his advice here.
  • Mobile: Better treatment for post revisions.
  • Mobile: Fixed multisite theme list.
  • Mobile: Align theme/plugin list checkboxes.
  • Mobile: Align theme/plugin list titles.
  • Mobile: Fixed frontend admin-bar.
  • Renamed toolbar.css to admin-bar.css for uniformity with core.
  • Added a changelog link to readme.txt.
  • Changed the minimum required WP version to 3.5, so 3.5 users will get update notifications for MP6.

This week’s iteration includes work by Joen Asmussen, Till Krüss, and myself.

If you missed it yesterday, be sure to check out our roundup of potential implementation recommendations for plugin authors who need to add a custom icon to the top-level menu. We appreciate any feedback you’ve got for us, so we can codify our recommendations for developers who’d like to add MP6-style icons to their plugins.

We’ll be back next Monday with office hours in #wordpress-ui on IRC, for anyone who would like to discuss their feedback with us. You’ll find us there 1800 UTC on June 3.

#icons, #mp6, #plugins, #svg

The MP6 team has been working on recommendations…

The MP6 team has been working on recommendations for plugin authors who add a top-level icon to the dashboard’s main menu. We’ve investigated a number of options, all of which have their own advantages and disadvantages. In this post, I’d like to share the options we’ve considered in the hopes of generating a larger discussion about what would be the best possible solution for WordPress and for plugin authors. An example of the two SVG methods is available at http://codepen.io/joen/pen/otdkK.


Method A: CSS-colored SVG icon

This method uses SVG (vector, infinitely scaleable) icons that are embedded inline in the HTML. Using this method, the icon is able to inherit the color of the admin and change depending on customizations chosen by the user (a high-contrast admin theme for vision-impaired users, for example).

Pros
  • Clean, retina, and infinitely zoomable.
  • Only a single icon file needs to be created, no need for 2x versions or separate hover/active states.
  • With colors being controlled by the admin CSS, they will always match the core set of icons, as well as any further customizations made by the user.
Cons
  • SVGs won’t render in IE8 and below. A number of possible solutions are discussed below.
  • For the CSS coloring to work, the SVG markup has to be cleaned up either manually or via an optimizer, adding some overhead to the creation.
  • The actual SVG markup has to be inline in the HTML. Hard to cache, requires core changes, potential security concerns.

Method B: CSS background-image SVG icon

This method also uses SVG icons for infinite scalability, but is applied via the CSS background-image property. Using this method, colors must be selected by the plugin author, and a separate file must be created for each color.

Pros
  • Clean, retina, and infinitely zoomable.
  • No security concerns (that we are aware of) with SVGs when used as background images.
  • No WordPress core changes are necessary.
  • SVG files can be used directly from Illustrator, no editing of the SVG necessary.
Cons
  • SVGs won’t render in IE8 and below. A number of possible solutions are discussed below.
  • Multiple files must be created for normal, hover, and active states.
  • With colors being controlled by the plugin author, they won’t match any customizations the user has made (a high-contrast admin theme for vision-impaired users, for example). Plugin authors must be mindful to use the colors recommended in the MP6 style guide (and creative plugin authors could use any colors, gradients, or styles they want).

Method C: PNG icons (the “no-build option”)

Alternatively, plugin authors could specify new MP6-style icons in the PNG format, using the same technique they use currently.

Pros
  • Universal browser support.
  • No WordPress core changes are necessary.
  • No security concerns with PNG.
Cons
  • Multiple files must be created for normal, hover, and active states.
  • Two sets of icons must be created in both 1x and 2x versions for retina displays (and more, when higher-than-2x displays appear).
  • With colors being controlled by the plugin author, they won’t match any customizations the user has made (a high-contrast admin theme for vision-impaired users, for example). Plugin authors must be mindful to use the colors recommended in the MP6 style guide (and creative plugin authors could use any colors, gradients, or styles they want).

SVG Browser Support

Internet Explorer 8 and below have no native support for SVG files. Icons in the SVG format will not display in IE8 and below as a result.

  • Modernizr’s .no-svg class could be used to specify PNG fallbacks.
  • A number of polyfills attempt to add SVG support to these browsers (we haven’t tried them).
  • We could adopt a Google Apps-style browser support policy for MP6, supporting the current and previous major release of each browser. This would drop IE8, but make room for the many new clients we’re supporting: mobile versions of Chrome, Safari, Firefox, and IE; and the Android and Blackberry browsers. We don’t know what IE8 usage is like among WP users, though.

Conclusions

Method A, inline SVG, is the best option from the designer’s viewpoint — plugin authors include a single icon and all styling is provided automatically. MP6 makes dashboard customizations like a high-contrast admin theme for visually impaired users much simpler than the current admin design — and method A makes styling plugin icons as easy as the core set of dashicons. However, the technical hurdles and possible security concerns could be significant and we need more input on whether this method is practical.

Method B would be the next-best option — it would provide the primary benefit of using SVG icons (infinite scalability) without requiring changes to core. It would be significantly more difficult (though not impossible) for plugin icons to reflect user customizations, but would still require less manual work than creating separate sets of 1x and 2x PNG (method C).

We’re interested in any thoughts that you may have, especially if you’ve worked with SVG before and can offer insight on how we could implement method A successfully. If you know of any reason why any of these absolutely won’t work, feel free to rain on our parade. 🙂

#icons, #mp6, #plugins, #svg

Howdy UI group This Friday brings you version…

Howdy, UI group. This Friday brings you version 1.3 of MP6, the WordPress birthday weekend edition. This iteration is largely focused on responsive and RTL improvements, as well as bug fixes. Here’s what’s new:

  • First pass at some basic CSS transitions on link hovers, etc.
  • First pass at MP6 styling on post format picker.
  • Mobile: Adjusted theme customizer margins.
  • Mobile: Changed tablet breakpoint from 768px to 782px to match core.
  • Mobile: Fixed word-wrap issue on custom post types .widefat table headers and footers.
  • Mobile: Menubar now scrolls independently of the main column, so menu links are always visible even if you’re at the bottom of a long page.
  • Mobile: Better performance when scrolling in the admin.
  • Mobile: It’s now easier to dismiss dropdowns on touch devices.*
  • RTL: Corrected positioning of post-format-options.
  • RTL: Fixed tagchecklist position.
  • RTL: First stab at mobile style conversion for RTL.
  • RTL: First stab at admin-bar positioning.

*There’s a known issue with the positioning of the New and Account dropdowns on mobile webkit browsers. We’ll have a fix in trunk as soon as we can (free WordPress blogs to anyone who has insight on a solution!)

This week includes contributions from Joen Asmussen, Michael Erlewine (mitcho), Till Krüss, Andy Peatling, and myself. As always our thanks go to everyone who’s contributed by reporting bugs, offering suggestions, and testing it on your sites. If you’ve reported an issue here that hasn’t been resolved yet, rest assured it’s on our list and we’ll get on it soon.

I’ll be out part of next week, so no IRC chat on Monday. We’ll continue to work on refining the responsive experience and RTL issues and stomping out whatever bugs you guys find.

#mp6

Hey UI gang Here to help you wind…

Hey, UI gang. Here to help you wind down the week is the latest update to MP6, version 1.2.

We’ve been focusing primarily on solving some of the trickiest responsive questions this week. Some we’ve found solutions to, and some we’re still discussing. We’ve also got a wild idea for the front-end of the site that we’ve got some mockups of to discuss.

Here’s what’s new this week:

  • A new position for the “hamburger” button that opens/closes the mobile menu. It’s now part of the adminbar, and stays put when scrolling the rest of the page. There’s a much more obvious active style, and we’ve greatly increased the reliability of the button (no more multiple taps to get it to open anymore!).
  • Increased the size of wpadminbar dropdown menus for mobile sizes so that links are easier to tap. (We still need to work on making these easier to close without activating a link).
  • Improvements to the media uploader for responsive. Still needs work, but is more functional now.
  • Fixed buglets appearing because of Jetpack’s 2x retinafying code interfering with MP6.
  • Better positioning of icons in the wpadminbar.
  • Improved responsive layout on the Akismet configuration page.
  • Added new icon glyphs to the Dashicons font.
  • Reworked the way Open Sans is declared in the plugin.
  • Fixes to checkboxes and radio buttons.

Once we decided that the adminbar was the best possible place to put the hamburger button for mobile, I started thinking about whether that same interaction might make sense on the desktop version of the dashboard. After all, we’ve already got a button that hides and shows the dashboard, it’s just always been at the bottom of the menu. What if we put it at the top, in the adminbar? The benefit would be that even desktop users would grow to understanding the meaning of the button, since its purpose, hiding or showing the menu, is the same whether you’re on desktop or mobile. If we took it that far, it could even go to the front end of your site; allowing access to any part of your blog’s dashboard within two clicks of your live site. This would be a bigger change than what we can do with just CSS in MP6, so it’s a topic we’re interested in your thoughts on, to see if it’s a good candidate for a potential core patch suggestion.

This week’s edition of MP6 includes contributions from Joen Asmussen, Mel Choyce, Ben Dunkle, Till Krüss, Andy Peatling, and myself. Many thanks, as always, to those of you who have shared your feedback and ideas with us so far. Keep them coming!

We’ll be in #wordpress-ui on Freenode May 20, 2013 at 18:00 UTC to discuss this week’s work; please meet us there if you’d like to chat about what’s new.

#mp6

Howdy gang On this fine Friday evening we…

Howdy gang. On this fine Friday evening we bring you version 1.1 of MP6. This was a short week for several of us, so this week’s edition consists of a few small updates:

  • More additions to the Dashicons icon font, including buttons in the visual editor (TinyMCE). Some plugins, including Jetpack, may still insert some PNG buttons that still need to be replaced.
  • CSS fixes for better layout positioning and cross-browser consistency.
  • More consistent results for custom checkbox and radio inputs.
  • Removing the PNG “stalk” on comment counts in lists.
  • Set textareas to overflow auto to prevent permanent scrollbars in IE.
  • Other small bugfixes.

This week’s iteration includes contributions from Joen Asmussen, Mel Choyce, Ben Dunkle, and myself.

Because this was a short week for us, don’t fret if an issue you reported hasn’t yet been fixed. Rest assured it’s on our radar.

Thanks again to everyone who’s contributed your feedback so far — keep commenting below to share your ideas, suggestions, or just bug reports, we appreciate them all.

#mp6

MP6 1.0

Here we are in the tenth week of the MP6 experiment, and with it comes our tenth release, 1.0. And while the version number is simply the one that comes after 0.9, it’s also beginning to look nearly complete. We’ve worked our way through our primary to-do list, concentrating now on responsive issues and core issues for which we’ll be submitting patches. Here’s what’s new this week.

  • Restyled toolbar submenus with a dark background that matches menubar submenus.
  • Made all the various delete/trash links the same color red, and removed inconsistent backgrounds/borders.
  • Improved the alignment of notices within thickbox containers.
  • Added right padding to top level adminmenu links to leave room for the current arrow indicator.
  • Improved the appearance of the file upload input.
  • Improved the appearance of the comment moderation confirmation screen.
  • Removed the blue hover state from disabled page navigation links.
  • Removed the wayward borders within the .widefat table.
  • Fixed a z-index issue causing toggle arrows to overlap expanded widgets on the widget management page.
  • Submenu and current item arrows in the .folded and .auto-fold states are now the same size.
  • Corrected the alignment of the New link in toolbar.
  • The annoying bug where the W menu opens by default on every page load has been fixed.
  • General coding standards improvements throughout.
  • Updated the Dashicons icon font.
  • Mobile: Improved theme updates table styling.
  • Mobile: Fixed toolbar quicklinks line height.
  • Mobile: Improved plugins list styling.
  • Mobile: Menu management page improvements.
  • Mobile: Allow the HTML editor buttons to wrap to two lines on small screens.
  • Mobile: Improved styling of the link manager on small screens.
  • Mobile: Adjusted height of select elements to match button height.
  • Mobile: Bigger touch targets in the file editor’s file list; larger textarea for the editor.
  • Mobile: Improved styling for post format options on small screens.
  • Mobile: Fixed TinyMCE split buttons and list boxes.
  • RTL: Added RTL tests to /branches/.
  • RTL: Fixed meta/post box widget positioning.
  • RTL: Fixed Plugin/theme editor submit button position.
  • RTL: Fixed dashboard comment widget avatar position.

Whew! This week’s iteration includes contributions from Joen Asmussen, Mel Choyce, Ben Dunkle, Michael Erlewine (mitcho), Till Krüss, and myself.

We’ll be in #wordpress-ui to discuss your feedback on Monday, May 6 at 18:00 UTC. Thanks again as always to everyone who’s contributed your feedback so far. As always, please keep it coming — we’re interested in any suggestions, bug reports, ideas, or patches you may have. If you’ve reported an issue that we haven’t addressed yet, it won’t hurt to mention it again (with a screenshot if possible) at this point.

#mp6

MP6 0.9

Thank goodness it’s Friday, because we get to bring you this week’s edition of MP6, the secret plugin that’s a little less of a secret every day. This week’s edition is primarily focused on improvements to the responsive design and 6PM (that’s MP6 in RTL). Here’s the details:

  • We’ve styled reset links as text links instead of buttons so they’re reduced in visual weight.
  • Long links in the menubar now wrap to two lines instead of being truncated. (ref)
  • Fixed unreadable inactive widget titles. (ref)
  • Fixed checkboxes collapsing to 0 width in the media manager. (ref)
  • Fixed radio buttons and bottom margin in edit image popup
  • Mobile: The menubar now opens on the left for consistency with the standard desktop layout.
  • Mobile: Labels and inputs on settings pages are now full-width, with no floats, for a cleaner mobile layout.
  • Mobile: Reduced the size of avatars in the Recent Comments list so there’s more room for text.
  • Mobile: Larger radio buttons that are easier to select by touch.
  • Mobile: Set text inputs to 16px to prevent iOS auto-zooming when entering text.
  • Mobile: Better styling of Undo actions in the Recent Comments list.
  • Mobile: Icons in the toolbar are now better aligned.
  • RTL: Fixed positioning of menubar.
  • RTL: Fixed screen meta positioning.
  • RTL: Fixed main content well and screen options positioning.
  • RTL: Made improvements to menubar text and icons.

This week’s iteration includes contributions from Michael Erlewine (mitcho), Till Krüss, and myself.

We’ll be in #wordpress-ui to discuss your feedback on Monday, April 29th, at 18:00 UTC. Thanks again as always to everyone who’s contributed by sharing your feedback, patches, and suggestions — please keep them coming! If you’ve reported an issue that hasn’t been fixed yet, don’t fret — we’re compiling items as we get them and keeping track of what’s still outstanding.

#mp6

Greetings Savvy WordPress Enthusiasts Time for another update…

Greetings, Savvy WordPress Enthusiasts. Time for another update to the plugin that gives WordPress that new car smell again, MP6.

This week, we worked on getting MP6 into the hands of a few million new potential testers. We’ve already gotten some interesting feedback from WordPress.com users, and hopefully our experience getting WordPress.com’s various moving bits working alongside MP6 will help pave the way for plugin authors when the new design has started making its way into core.

In version 0.8, we have:

  • Prepared MP6 for a new opt-in test on WordPress.com.
  • Updated the Dashicons font with more consistent icon alignment.
  • Removed cursor: default from current items in the menu bar. (ref)
  • Updated color of widget titles so they’re readable on the new blue background. (ref)
  • Improved typography on Post Revisions page.
  • Fixed the alignment and sizing of checkboxes. (ref)
  • Removed CSS for old PNG icons.
  • Fixed display issues with the bulk editor.
  • Made improvements to Press This.
  • Improved the legibility of the Browse Happy outdated browser warnings.

This week’s iteration includes contributions from Joen Asmussen, Ben Dunkle, Till Krüss, and myself.

As usual, we’ll be in #wordpress-ui on Monday April 22 at 1800 UTC to discuss your feedback on this week’s edition. Thanks as always to those of you who have helped with feedback, patches, and suggestions so far.

#mp6

MP6 0.7

Hey gang. It’s still Friday in part of the world, which means the latest iteration of MP6 is now available. This week was mostly dedicated to refining what we’ve been working on so far, expanded testing and support for multi-site installations (particularly one really big multisite installation), and styling some of the new UI that’s landed in WordPress 3.6.

Here’s what’s new in 0.7:

  • The Post Revisions page is now supported by MP6.
  • Updated styling for Menu Management and Widgets pages
  • Customized radio buttons that match MP6 checkboxes.
  • Default notifications now use green instead of red for their border color.
  • Adjustments to sticky menu positioning.
  • Prevent Jetpack retina styles from overriding MP6.
  • Enqueue Open Sans instead of loading via a CSS @import.
  • Include missing wpmini-blue images.
  • Reverted page tabs to look like tabs; we’ll explore more options here.
  • Visual bugfixes.
  • New version of Dashicons with additional glyphs.

In addition, Mel put together a simple example page for Dashicons that lists all available icons and the corresponding CSS/HTML/glyph for each. We’ll continue to update this page with more information on using Dashicons. http://melchoyce.github.io/dashicons/

This week’s edition includes contributions from Joen Asmussen, Mel Choyce, Ben Dunkle, Till Krüss, and myself.

Like (almost) always, we’ll be in #wordpress-ui at Monday April 15 at 1800 UTC to discuss your feedback on this week’s edition. Thanks as always to those of you who have helped with feedback, patches, and suggestions so far.

#mp6

MP6 0.6

Happy Friday to you all! The latest iteration on MP6, version 0.6, is now available. This was a relatively light week for us. Our focus was on fixing bugs and refining the ideas we introduced last week. Here’s what’s new in 0.6:

  • Darkened the background gradient of secondary action buttons so that they are more easily distinguished from text inputs.
  • New dashicons for table sorting, Press This, close/dismiss buttons, and image editing functions.
  • A new function that adjusts the margin created for the toolbar on the front-end from 28px to 32px, to match the larger toolbar in MP6.
  • Larger font size for textareas and text input elements (matching 14px used elsewhere).
  • Allow zooming on mobile devices for wider accessibility.
  • Corrected the positioning of the flyout submenu’s arrow when those menus appear near the bottom of the browser viewport.
  • Visual bugfixes in the Plugins section.
  • Visual bugfixes for multisite installations.
  • A hint of MP6 style applied to WordPress.org, with more to come.
  • More small bugfixes; see the revision log for full details.

This week’s iteration included contributions by Joen Asmussen, Mel Choyce, Ben Dunkle, Till Krüss, Samuel Wood (otto), and myself.

What’s next? We’ve got some core issues on our plate (new classes for better alerts, refined installation screens) as well as lots still to do for mobile devices.

We’ll be meeting in #wordpress-ui at Monday, April 8, 2013 at 1800 UTC to go over this week’s edition and discuss your ideas for the next one. We’ll follow it up with our next release a week from today on April 12. Thanks to everyone who has helped so far by sharing your bug reports, patches, and ideas for improvement.

#mp6