RT Cunningham


Web Page Width - How Wide should Your Layout be?

hueman - web page width When you’re working with a website, any website, it’s usually up to you how wide your web page width is going to be. It’s not up to website designers even though a lot of them think it is. If you’re using WordPress, as I am now, you can always use a theme that’s either exactly the width you want or fairly close to it. With some minimal CSS tweaking, you can have it exactly the way you want it.

The WordPress theme I’m using (today) is called Hueman. The main CSS file is a monster and I use a child theme with it, called Being Hueman. That’s where I make my changes.

Web Page Width Considerations

It’s easy for mobile devices with small screens. It’s not so easy for wide desktop screens. That’s only my opinion, of course. With mobile devices you can hide some parts of the page or move them lower. With desktop screens, you really shouldn’t hide anything. Yes, I once said the sidebar could be an unnecessary distraction. I still think it is, but I’ve learned that desktop PC and laptop users don’t like to click icons to make things appear.

Let’s focus on wide screens, screens wider than 1024 pixels. That leaves most tablets out of the picture. With wide screens, sidebars have to be added to the equation. Sidebars can be any width, but anything more than 320 pixels is too wide. Anything less than 280 pixels is too narrow. According to many sources, the best web page width is 960 pixels. That is, until you get to a screen that’s about 1280 pixels wide. Then the best page width is 1140 pixels. What about mine? My screen resolution is 1366 pixels wide. 1140 seems to work well enough. Don’t take my word for any of this. Do some research and you’ll probably come to the same conclusions.

According to the article titled “What’s the Perfect Width for your Online Content?”, the content area should be narrower than what most people think it should be. Even narrower in the opening paragraph. An image or an advertisement at about 300 pixels wide will do the trick. And it will still fit on mobile phone screens.

Web Page Width Hints

I’m not good at making charts. I’m good at making them for me, but not for anyone else. So… no charts.

When you’re considering your web page width, start with the full width. If you like 1140 pixels, go with it. If not, 960 pixels will work. 960 pixels is probably a good break-point for larger than 1024 pixel wide screens, like some tablets and smaller monitors.

You have to consider not only the main content width and sidebar width (or widths), but the space separating them as well. I believe those are called gutters. If your page doesn’t use the same background color as the rest of the page, you’ll need spaces on each side as well. Those are probably called something else. I like to call it padding no matter where the space is located.

All of the components, width-wise, have to add up to the full width. The web page width of the website you’re looking at (today) is 1140 pixels. It’s supposed to be 30 + 770 + 30 + 280 + 30. The padding and the sidebar is supposed to leave 770 remaining for the main content, but I haven’t done any measuring. On the lines with ads or images, including the padding for them, it should be around 450. It’s still a little wide, but only on wide-screen displays where it’s expected.

Share: Facebook | Twitter

By RT Cunningham
April 23, 2015
Web Development