On different devices
One of the more obvious ways to test how your site looks on different devices is by looking at it on different devices. (Sorry, was that obnoxious?)
While device sizes are changing almost every day, peeking at your website on a desktop, laptop, tablet + smartphone will give you a really good idea of how it works across various screens. Because I do so much site testing, I have a few sizes of each device type, but that’s not necessary for the average site review.
If you don’t have more than one device to review with, partner up with a fellow business owner. Take turns reviewing each other’s site + pass along some usability notes. Then it’s a win-win!
The WordPress customizer
A few releases ago, WordPress introduced the functionality to preview your theme on different screen sizes right in the dashboard — how easy is that?
Log into your dashboard, then head to Appearance > Customize.
At the very bottom left of your screen you’ll see 3 icons — a desktop, a tablet (aka a rectangle) + a smartphone. Click on the icon to preview your site at that screen size. It’s not perfect, but it keeps you from needing to buy yet another thing for your business. (Your accountant will thank me.)
Resizing your browser window
This tip only works if you have a responsive theme (and not if you are using a separate mobile theme.)
Open your site in your favorite browser on your desktop or laptop. then with your mouse/cursor, click and drag the right side of the window over towards the left to shrink it down.
The smallest most browsers will let you go is 400px wide, which is similar to older + smaller iPhones.
As you resize the browser window, stop along the way to review what tablet users see, then landscape smartphones + end with portrait smartphones.
This technique allows you to review essentially every screen size possible as you will be decreasing the browser window by one pixel at a time.