Skip to main content

How to Choose the Best Web Design Canvas Size for WordPress

October 16th, 2020

If you’re a web designer, I’m sure you’ve toyed with different canvas sizes to make your designs. What canvas size works best for WordPress websites?

The best web design canvas size is usually not 1920px wide.

The 1920px design trend

As a developer who builds out a ton of custom WordPress themes from provided designs, I’ve seen a growing trend of designs handed over on 1920px wide canvases utilizing almost the full canvas width for content containers. My best guess is this number is coming from 1920×1080 being a popular screen size. However, screen size does not equal browser width.

When 1920px designs are handed over and then things like module sizing and font sizing are matched in the browser, they almost always feel too large. This is because the user is rarely viewing them on a browser that is sized 1920px or higher.

When I get designs at these large sizes, they almost always need to go through an adjustment round in the browser: sizing down fonts, reducing the sizing of various modules, etc.

If you want to use a 1920px wide canvas to show how your smaller width content design scales out to large resolutions or shows fullscreen modules adapting at large resolutions, that’s one thing. Otherwise, I’d highly recommend sizing your canvas down a bit.

So what size should the web design canvas be then?

Personally, I think it works best if designs are made on screens that are 1440px or around that area, with the actual content container landing somewhere in between 1160-1320px.

Again, you’re welcome to still use a large canvas like 1920, just ensure your content containers are scaled down within it for the smoothest execution on the development side. Exceptions to the rule are understandably full width designs (instead of fixed width).

What about web design canvas sizes for mobile?

Mobile is another area where I frequently see the canvas width overshot to make things seem more feasible at the mobile level than they actually are. I’ll see mobile designs done on 1000px+ wide design canvases. At that level, two columns side by side work. At 375px, which is a common mobile phone width, they understandably are much more of a stretch.

I’d recommend making mobile canvases 375px-420px wide to get a realistic idea of what is doable at the mobile level. Using mobile canvas sizes that are as close as possible to a majority of actual device sizes will make it less likely you’re creating mobile designs that just aren’t feasible when you’re at those breakpoints on an actual device.

Keep font sizes realistic on mobile, as well. 11px font may be readable to some, but really you shouldn’t be dipping under 16px font on mobile. There are some implications if you decide to go against that advice. For example, on mobile iOS devices, it will zoom in on an input field if the text size is less than 16px font.

Uh oh, I have a full site design in 1920 sizing, am I in trouble?

Absolutely not. I’ve built out plenty of designs off of 1920px wide comps and it all worked out in the end. Just understand that it’s likely that your font sizing and such may need some tweaking once you see it in the browser. That’s totally okay and most developers should be able to work with you here within reason.

Have a completed design you need built in WordPress?

Reach out and I’m happy to talk project specifics and work with you through any implications of sizing choices made throughout any design. We’ll work together to ensure everything on the finished project is turning out great on all responsive breakpoints.

MORE: Designing for WordPress

Related Articles