This post is probably suited as a profile feed more than anything, but I was wondering what you beautiful people are using as your default page width.

 

I am of the mobile first mindset, so build from that. However, I code on a 13inch MacBook so when I view sites on my desktop, it looks a little 'letterbox' (for lack of any other word).

 

1024px upwards is my standard, but I've been focusing on typography a lot lately and even considering behemoth fonts across the board so that the sites scale well on tv's too. I say this as recently I've been viewing some of my sites on an HDTV and the site doesn't make the most of the width available.

 

What's your preference (taking into account scrollbars, HDTV and the like...)

I like responsive web designs so I prefer 100% ;-)

I like responsive web designs so I prefer 100% ;-)

 

Likewise, but are you defining 100% in your markup?

If it is responsive website, I like to define 95% for the main container, with max-width as well, so it doesn't take all the space of bigger screens.

btw I like to use Stat Counter. It says the most used screen resolution width in the world in the last year is 1366px and then 1024px. So around 1000px is still the best solution.

So around 1000px is still the best solution.

 

For a max-width?

For a max-width?

 

For 'width', If you're building fixed width sites. I think but I'm just a developer :-)

Oh, right, well that's good then, because I tend to still use 960-980px for a fixed width, if the site is not responsive, and the same for a max-width, if it is responsive. Depends on the design, really.

 

Just a developer, eh :D

Strange - didn't see the updates to this thread in my discussions list...

 

I like to usually aim for 1024 (ish) to account for scrollbars etc.. but it's varied depending on the site. The largest I've set things to so far is 1200px width. The only reason I set pixels and not a percentage is based on the images supplied by the client (or for personal projects, me) and they don't scale well. That is, unless they are svg which is 1 in 10,000 chances of happening

Yes, I'd like to transform all images of the Internet to svg.

That is interesting that svg images have been mentioned as I was wondering how go go about making images adaptive. As I have done alot of research into frameworks there are a couple out there that go for bigger resolutions beyond the 960 grid systems which is obviously why they have been designed as monitor sizes are increasing.

I find this book very helpful - https://shop.smashingmagazine.com/responsive-design.html

Responsive design is explained very well.

We always design for a maximum of 990px wide. This is because we need to take into account the width of vertical scrollbars on a 1024px screen AND we would like to have a gap left and right of the website. So if the site has some background colour outside the main content, a border, some shading or something, then 990px is our maximum to ensure we can see this surrounding effect on a 1024px resolution with vertical scrollbars. We have designed like this for coming up to 10 years I think.

 

There are larger resolutions of course, I myself use a 27" iMac. BUT I would NEVER have my browser very wide on my 27" iMac. You just cant read very well with 100% width on a large screen. You need to have thinner columns for readability, so we would never use 100% width, so even a browser maximised on a large monitor shows it at 990px.

 

If you do want to have larger then I would make sure its responsive but with a max width so it does not become unreadable on massive monitors.

 

About the 960 grid... I have no idea why people go on about that. 990px or thereabouts is perfectly fine, so you are losing width using 960. The only reason 960 is a common size because it has the most number of divisible numbers resulting in whole numbers, but so what, the max size makes no difference when working on percentage widths. If you use fixed width columns then it looks better to have whole numbers as widths, but percentages are the same whichever you use.

Oh, also... width depends on the content... if you have one column of text then the wider it is the harder to read, but if you have 3 columns, so two sidebars, then you can extend wider and still keep the middle column readable as its not too wide. So you need to factor in things like this. I can see this site is designed at 1330px max width, but because its a single column site I think the text is quite wide when maxed out, I find it easier to read when my browser is reduced in size to approx. the 1024px size.

Since I wrote this post, I have created a mock page without using a grid (I always use my own grids for all my web and print work. It was a bit unusual at first, but it's coming along).

 

I haven't set the width correctly yet as I'm purely experimenting. The page I have fills the screen on my 13inch MacBook and also on my 37inch Widescreen and it looks absolutely fine - and arrogant as it sounds - great. The content itself is broken into three columns, so the text itself is readable and doesn't take up the full width of the screen.

 

The reason that words look better in thin columns is all about readability and ideally you don't want to surpass 60 words per line as a rule of thumb. 960 grids have been successful due to the calculations they use and in general, the history of this type of grid works wonders across the board. The 960 grid system wasn't exclusively for the web and was adapted for it. With all the changed in screen widths and the average users desktop getting bigger (yet more and more access via mobile), 960 doesn't cut it as much these days. Of course if you're designing fixed widths, it has it's uses but personally I only create responsive based websites these days.

 

Thanks for all your input guys. Great food for thought

I always go for 1000px on fixed sites.

 

Im a bit lazy with the mobile sites so i just media queries if i need to and change it around that way.

 

I also use a 13" macbook and made a mistake of using a 90% width on my container. It looked great on my screen with all my elements floating nicely.

 

Until i went into an interview and they has a 27" monitor.... HELLO WHITE SPACE!

 

Learn from mistakes i guess