WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#36457 closed defect (bug) (fixed)

Customizer Device Preview: Use px units for tablet preview size

Reported by: celloexpressions Owned by: jorbin
Milestone: 4.5.1 Priority: normal
Severity: normal Version: 4.5
Component: Customize Keywords: has-patch needs-testing has-screenshots fixed-major
Focuses: ui Cc:

Description

There is a lot of inconsistency with how different devices interpret in units. They were originally used to provide ambiguity in the size of the preview to avoid themes designing specifically to the customizer breakpoints, but browsers and devices can also change they way these units are represented and that can be a jarring experience for users. Additionally, the tablet preview can become too similar to the mobile preview in the information it provides with respect to previewing a variety of device sizes.

See https://wordpress.slack.com/archives/core/p1460233108004296. Note: this issue is difficult to explain with screenshots due to the variation across devices, but a few are posted on slack at the above link.

Attachments (1)

36457.diff (737 bytes) - added by celloexpressions 4 years ago.

Download all attachments as: .zip

Change History (15)

#1 @celloexpressions
4 years ago

Additional note that the 720px size loosely aligns with the size at which the preview toggle buttons are no longer available, so that users wouldn't be able to switch to tablet mode once there's no difference between that and the preview as they see it (with the customizer controls expanded).

#2 @mikeschroder
4 years ago

Personal opinion is that it seems too late for this in 4.5, but interested in hearing if others think it's important to make this change now.

Last edited 4 years ago by mikeschroder (previous) (diff)

#3 @chriscct7
4 years ago

I think this would be better to fix in the first 4.5 minor release.

It's a borderline between an enhancement "make sizes more consistent" and a bug "sizes can be wildly different". While it's a contained fix, I think it makes more sense to not worry about it.

#4 @jeremyfelt
4 years ago

  • Keywords needs-screenshots needs-testing added
  • Milestone changed from 4.5 to Future Release

As small as this change seems, I think we need a set of screenshots showing the difference it makes on various devices. We've had this implemented as is in RC for quite a bit now and should leave it.

I don't think it's too much to change in a minor release after testing.

#5 @celloexpressions
4 years ago

  • Milestone changed from Future Release to 4.5.1

Let's pick this up for 4.5.1. This is very difficult to document with screenshots since it depends on the device you're using, but the new px size proposed in the patch can be screenshoted to demonstrate how it would look with the change (now consistently the same for everyone).

#6 @swissspidy
4 years ago

Here's two screenshots of the tablet preview in Google Chrome.

Without the patch:

https://cldup.com/7E4DoKDsWk.png

With the patch:

https://cldup.com/T4i44MDcZJ.png

#7 @swissspidy
4 years ago

See comment:85:ticket:31195 for the original reason behind using inches.

#8 @swissspidy
4 years ago

  • Keywords has-screenshots added; needs-screenshots removed

Here's a screenshot of the current size in FIrefox:

https://cldup.com/4BZwvovfOi.png

...and with the patch applied:

https://cldup.com/1EP7Z6p1gw.png

Note that zoomed out a bit so the iframe better fits on the screen (just as in the Chrome screenshots before).

The current behaviour definitely needs to be fixed as it indeed looks too much like the mobile preview. Notice how the menu changes in the Twenty Twelve theme used in the screenshot.

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


4 years ago

#10 @ocean90
4 years ago

  • Version changed from trunk to 4.5

#11 @jorbin
4 years ago

  • Owner set to jorbin
  • Status changed from new to assigned

#12 @jorbin
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 37247:

Use px instead of in in device preview

Devices are not consistent in how they handle in units. in was an attempt to cleverly disguise the exact size of the 'tablet'. The PHP code standards mentions avoiding clever code ( https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/#clever-code ) but we should extend that idea to the css code as well.

Props celloexpressions
Fixes #36457

#13 @jorbin
4 years ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#14 @jorbin
4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 37248:

Use px instead of in in device preview

Merges [37247] to the 4.5 branch

Props celloexpressions
Fixes #36457

Note: See TracTickets for help on using tickets.