[wp-trac] [WordPress Trac] #36795: Customize: Improve flow from menu locations to editing a menu

[WordPress Trac]

#36795: Customize: Improve flow from menu locations to editing a menu
-------------------------------------------------+-------------------------
 Reporter:  celloexpressions                     |       Owner:
     Type:  enhancement                          |  westonruter
 Priority:  normal                               |      Status:  reviewing
Component:  Customize                            |   Milestone:  4.6
 Severity:  normal                               |     Version:  4.3
 Keywords:  has-patch has-screenshots i18n-      |  Resolution:
  change commit                                  |     Focuses:  ui,
                                                 |  accessibility
-------------------------------------------------+-------------------------

Comment (by afercia):

 Adding some screenshots taken on Win 10 with latest Chrome, Firefox, IE
 11, and OS X with Chrome. As you can see alignments are different,
 especially on Firefox/Win 10. This is because of native fonts as noted in
 the related ticket, see #36753.

 Re: contrast issues expressed for example on Slack, see
 https://wordpress.slack.com/archives/design/p1470184543000460 I share the
 same concern but I'd see this as a general issue in the Customizer; for
 example, it applies also to the "widget areas" link a few line above. It
 should probably be addressed as a general Customizer UI issue, not
 specifically for these two links. I know the Customizer team is discussing
 contrast and UI hierarchy and there's also an ongoing discussion in the
 Design team about contrast, shades of grey, and links color. I'd suggest
 some collaboration between the two teams, trying to focus on the big
 picture and not on specific cases.

 The perceived smaller font size, especially on Windows, is again an effect
 of the switch to native fonts. My personal opinion is we're in 2016 and a
 13 pixels default font-size maybe is starting to be a bit too small.
 Currently, GitHub uses the same native fonts stack and if I'm not wrong
 the main sizes are 14 and 16 pixels (except buttons). I'd like to see some
 discussion about this in the next release cycles.

 What can be done to improve a bit these 2 links at this point of the
 release? I'd propose:
 - rather than increasing the font size, I'd increase the clickable area
 with some padding
 - try to improve a bit the alignments, even if it's very unlikely they can
 be perfect across different platforms/browsers because of the native fonts

 Win 10 chrome

 [[Image(https://cldup.com/an0nI3iad2.png)]]

 Win 10 firefox

 [[Image(https://cldup.com/k9LtEiUe0q.png)]]

 Win 10 ie11

 [[Image(https://cldup.com/I3w7dbZE5Y.png)]]

 OS X chrome

 [[Image(https://cldup.com/xWawbTvXvv.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36795#comment:25>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform