Add Responsive device icons on the Theme Preview

[fahimmurshed]

Please add Responsive device icons on the Theme Preview.
It'll be good to check the theme responsive at the same time.

Currently, it has no theme responsive check options.

[fahimmurshed]

Please ignore .diff file.

[Otto42]

Broken attachment removed.

[joyously]

The theme preview doesn't need responsive icons. The user can simply change their browser window. If the user was on a phone, clicking the desktop icon would not work well, so it's best not to give the wrong impression by putting icons there.

[Otto42]

Well, the Customizer has similar buttons.

[fahimmurshed]

Replying to Otto42:

Well, the Customizer has similar buttons.

That's why I propose to add that on the Theme Preview page. This is just a request :)

Thanks a lot, Otto and Joyously.

[joyously]

Yes, but the Customizer is in the admin, and is less likely to be used by mobile, since there is a mobile app.

[fahimmurshed]

@joyously,

Thanks for getting back to this ticket. I am sorry for that, you didn't get my point.

I can't explain more but I'll try.

See, when a user checks a theme of how it is on the wp.org theme repo, or before install/download. He tries to check how its responsive/mobile/tab view.

So, I strongly with my proposal to add that options on the Theme Preview page.

I hope, you understand with my point.

[dufresnesteven]

The user can simply change their browser window

I don't know that this is necessarily simple for everyone.

Less technical users are familiar with the 'layout' icon paradigm; its used by most of the website builders (WIX, squarespace... etc.).

What others are doing:

Wix

• Theme preview on Desktop
  • Has 3 (mobile, tablet, desktop) icons
• Theme preview on Mobile
  • Previews the mobile view only

SquareSpace

• Theme preview on Desktop
  • Has 3 (mobile, tablet, desktop) icons
• Theme preview on Mobile
  • Has 3 (mobile, tablet, desktop) icons

Shopify

• Theme preview on Desktop
  • Has 2 (mobile, desktop) icons
• Theme preview on Mobile
  • Previews the mobile view only

It appears like other website builders all support this feature.

[fahimmurshed]

Squarespace template preview

Wix template preview

Shopify preview

[mapk]

This looks like a reasonable request to me. I don't see any problems adding responsive support to the theme preview. Testing a patch is a good next step.

[melchoyce]

+1, this seems reasonable, and we can copy the Customizer's design.

[dufresnesteven]

In attachment:5063.diff​, I have added responsive buttons to preview the theme in different viewports.

Most of the code was copied from the customizer as suggested above.

See it in action:
​https://d.pr/i/Oxllgw

[dufresnesteven]

In 12033:

wporg-themes: Add responsive viewports to theme preview.

Props fahimmurshed, otto42, mapk, melchoyce.
Closes #5063.

[dufresnesteven]

In 12034:

wporg-themes: Fix loader in safari.

See #5063.

[fahimmurshed]

Thank you so much @dufresnesteven

[dufresnesteven]

In 12036:

wporg-themes: Hide viewport controls for mobile devices.

See: #5063.