[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:  celloexpressions  |       Owner:
     Type:  feature request   |      Status:  new
 Priority:  normal            |   Milestone:  Future Release
Component:  Customize         |     Version:
 Severity:  normal            |  Resolution:
 Keywords:  has-patch         |     Focuses:  ui, administration
------------------------------+---------------------------------

Comment (by folletto):

 > Wee need design and accessibility review on the plugin version.

 I did a test run. My feedback would be:

 1. Remove `border-radius` and `box-shadow`
 2. Either user the WP Admin color scheme accent color (active button
 color) on the active one -or- make the grey of the inactive icons lighter.

 This because the round circle looks a bit off (not used anywhere else),
 clashes with the top border, and adds visual noise. Using just color in
 that way I think it's also doable in terms of accessibility because it's
 something discoverable. If however we want a shape marker also, let's use
 a highlight line, like this (still accent color, 3px):

 [[Image(https://core.trac.wordpress.org/raw-attachment/ticket/31195
 /underline-highlight-accent.png)]]

 ---

 While I just did UX / design review, not browser testing, I however
 noticed that the collapse/responsive bar disappears on certain screen
 sizes... wider/taller than I would have expected make it disappear. Not a
 big issue, but 1024x800 (a small desktop screen, but still desktop)
 disappears. If we can update this, we should make the responsive buttons
 disappear at decreasing width (i.e. don't show tablet size if it's smaller
 than a tablet).

 In terms of vizrec I defer to Ryan's post above. :)

 Ok splitting the collapse icon in a separate ticket. :)

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