"Best" Content Width Going Into 2019?


(Bill Hall) #1

Hello- I’ve had to ignore my web site for a while and its awesome to get back into it.

But, this led me to question the content width of my web site @ 1070. Is this still a good width for the body content?

Did some quick research and found the following:
35%20PM

Any opinions on the best body content width?

Thanks!


(MRO) #2

I would say 1000+ is always a good bet…but what I worry about much more nowadays is all the Smart(or not so)Phones and tablets. I would figure that more people use handhelds than desktops generally…?

My 13.3-inch MacBook Pro has this: (2560 x 1600)


(Will Woodgate) #3

I approach this somewhat differently. I aim towards a maximum of 80 characters (including spaces and punctuation) per line. It’s an old-school rule from the print industry, but in somewhat of a rarity, it is a rule that is equally translatable across into responsive web design too.

Rules are there to be broken. But if I find the characters per-line measurement regularly exceeding 80, I’ll either adjust the theme settings to ‘squash’ the main content container narrower or interject the page design with a theme sidebar, columns or some floating content (like an image, pull quote or embedded video).

A width of 1070px might still be okay to use. But it depends what your characters per-line measurement is. That measurement itself is influenced by factors like font size, font weight, font family, letter spacing and CSS box model etc.


(Paul Russam) #4

I normally go for 1400px with a all my content within a container (BWD BluePrint) that has a 5% padding left/right for widths below 1400.
With regard to what Will said about fonts; I use Joe Workman’s FontPro to change the font size at 4 breakpoints where I aim for the 70/80 chars per line.
All other content (images, graphics etc) is sized by %, I very very rarely use px unless its something tiny.


(Bill Hall) #5

Hey Everyone- Thank you for your insights. The prospective clients that visit my sight are buyers within very large companies. Last I looked, most visitors during traditional work hours are visiting on a non mobile device with desktop taking up about 69% of viewers. But when I work on my site, I’m aggressively ensuring its very responsive and nice on mobile devices.

The main reason I ask is that at a width of 1070, it looks/feels very narrow on a larger display and I find mindself scrolling up and down which might be reduced with a slightly larger content width.

Guess I should dig down and look at the 80/20 rule of viewer display resolution and take it from there. Still wanted to get insights into what others are doing and so far, I’m glad I asked.

Thanks!

  • Bill

PS- As a 10+yr RW user, its great to see Will still active on this forum. Thanks for everyone’s time!


(Anugyan) #6

Hi Paul, I find this interesting as it is one aspect of presentation that for some reason I find challenging and sort of let it go. Do you use columns to break up text blocks? How do you keep it to 70-80. The posts above range up I00 chars and are bearable to read. I know its not a fixed thing. Whats the psychology behind it?


(Paul Russam) #7

To keep it in the 70/80 range I simply change the font size to suit the width(s). FontPro makes it easy but it’s still a case of trial and error until the particular font you’re using hits the sweet spot.

It’s not an absolute rule but aiming for 70ish is easy enough, I can’t remember where I heard about it but I know it’s just one of many good typography principles to follow.


(Paul Russam) #8

A quick G search came up with this http://webtypography.net/2.1.2

Piece on larger type http://mikeyanderson.com/optimal_characters_per_line


(Anugyan) #9

Could you post a link to one of your sites so I can see it visually?


(Paul Russam) #10

I haven’t counted (as I said it’s a guide, not a rule) but this one should be 80’ish at various widths https://www.hometurf.dma-ni.com
Obviously it’s going to be more/less per line as you change browser width but as I said above I use a FontPro to change the font size as 4 breakpoints to try and sorta maintain the ratio.


(Anugyan) #11

Okay, thanx for the link- I will take a look. What Iam aiming at is more to get a visual feel - thats how I understand the idea of it. Im not really a ‘rule’ type!