The Device Preview in the WordPress Customizer

When you're building a website (or someone is building one for you), you absolutely must consider how the site and content looks on mobile or tablets. And even if you have a responsive theme like we have here at Hexater you still want to look at the other viewport sizes to see how things look.

  • You might decide to shorten up some content or lengthen it.
  • The image you used only looks good on a desktop. Try something else!
  • On mobile, you might want to hide something that you see on the desktop. (display: none; to the rescue)
  • Maybe you need to tweak some CSS or notify the theme's developer something could be better.

Whatever the case, today more than 50% of your traffic is going to be on a mobile device so don't ignore it!

Luckily, WordPress has introduced some buttons to help you easily look at this in the customizer.

Find your way to the customizer by clicking the link on the admin bar.

Then, in the lower left you'll see 3 buttons:

Now you can click those buttons to see both the tablet size and mobile size.

And because this is in the customizer, you can update the content at the same time to see how things look immediately in the preview window.

Now, as a developer this isn't sufficient. It's great for the average person or user, but we need to go even further than this in seeing different viewport sizes and to be truly responsive with our development. Not to mention there can be differences between browsers.

So if you feel like you are ready to dive into a more developer-level approach or for other reasons want to fine tune your site even further check these out:

All these tools offer similar functionality allowing you to see different device sizes and even adjust by pixel. They help you improve the user experience and to ensure your visitors have an easy time accessing your content or getting to those actions you want them to.



Your email address will not be published. Required fields are marked *