[wp-trac] [WordPress Trac] #31195: Add a user-friendly way to preview site responsiveness in the Customizer

[WordPress Trac]

#31195: Add a user-friendly way to preview site responsiveness in the Customizer
--------------------------+------------------------------------------------
 Reporter:                |       Owner:
  celloexpressions        |      Status:  new
     Type:  feature       |   Milestone:  4.5
  request                 |     Version:
 Priority:  normal        |  Resolution:
Component:  Customize     |     Focuses:  ui, accessibility, administration
 Severity:  normal        |
 Keywords:  needs-patch   |
--------------------------+------------------------------------------------
Changes (by celloexpressions):

 * keywords:  has-patch => needs-patch


Comment:

 The version I've been working on (in the [https://wordpress.org/plugins
 /customizer-ui-experiments Customizer UI Experiments feature-plugin]) uses
 buttons, as well as screen reader text for the icons. Should we also use
 a11y.speak() here?

 I've just refreshed the plugin to use clearer focus styles within the
 circular box-shadow language. Can anyone with opinions here test that out
 and offer suggestions as to whether we should stick with that direction or
 try the underlines as suggested by @folletto above? I think the circles
 work nicely and are a good option in terms of accessibility.

 @westonruter and I also discussed how best to allow themes to hook into
 preview changes, his suggestions on slack can be implemented once we
 finalize the UI and move into patches
 (https://wordpress.slack.com/archives/core-customize/p1449868495000210).

 In terms of doing a larger scrollable preview on smaller devices, it's
 definitely worth exploring, but I'm not sure whether it makes more sense
 to land a basic version first and then explore that as an extension, or
 make it part of the initial proposal. Anyone have specific thoughts on how
 we might define how that works - maybe defaulting to "tablet" mode if the
 device is within certain range limits and then forcing it larger when the
 desktop icon is clicked?

 If we're ready to move forward, I can convert the plugin to a patch
 (device-preview component only). Related, I can add anyone who wants to
 play with the code to that plugin's committer list. Also, I saw some
 mockups from @melchoyce that moved these around; I'm thinking that the
 bottom of the controls is the best spot for now and they should be easy to
 move if other design changes facilitate that later on.

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