What does your website look like on different-sized screens? This is an easy way to spot problems on your website. Thankfully, there is an easy way to find out…
Keep in mind, there is no one way people view your website. Sure, we have “common sizes” people use but everybody has different-sized devices – from visitors with super large desktop screens, to people with different sizes of phones, to people with a “common screen size” that is zoomed way in (or way out).
It is so important to look at your website on different screen sizes. When testing out a website on different screen sizes, I’ve often found that CTAs or critical content are below the fold for most visitors. Or images and videos get clipped in awkward ways. These kinds of problems can cause people to bounce away from the website without engaging or converting. That costs us the traffic we worked so hard to get to our website.
The easiest way to test your website on different screen sizes is with Chrome DevTools.
- Start by loading a page as normal. Once loaded, either right click and select “Inspect” from the menu. Or, press F12.
- Once DevTools is opened, hit Crtl + Shift + M. This will resize the screen to a mobile view.
- Above the mobile view, you will see a dropdown arrow. Click this and change to “Responsive” instead of one of the preset options.
- After choosing Responsive, you can define a new width and height.
Pro tip: Make sure you configure tracking in GA4 to measure the screen sizes your visitors actually use. That way, you can review the enter the dimensions in DevTools that people are actually using to view your website.