homepage Welcome to WebmasterWorld Guest from 54.211.212.174
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / Webmaster General
Forum Library, Charter, Moderators: phranque

Webmaster General Forum

This 40 message thread spans 2 pages: 40 ( [1] 2 > >     
Maximum Fixed Width for a Website
imbckagn




msg:4144026
 7:23 pm on May 30, 2010 (gmt 0)

I'm looking for the maximum fixed width I can go on a websites and still be compatible across almost all resolutions/monitors. I usually stay around 900px but I was wondering how much further it can be pushed?

 

claus




msg:4144034
 7:37 pm on May 30, 2010 (gmt 0)

If you make it fixed, stick to lowest common denominator. Otherwise, make it fluid.

As for lowest threshold I'd say 800 because of all the netbooks that have entered the market the past few years.

phranque




msg:4144140
 1:25 am on May 31, 2010 (gmt 0)

if mobile browsers are part of the mix make sure you plan for the implications of those screen resolutions.

imbckagn




msg:4144402
 4:14 pm on May 31, 2010 (gmt 0)

Thanks for the feedback. I'm going to create a mobile version of the website as well.

badbadmonkey




msg:4147361
 2:23 pm on Jun 5, 2010 (gmt 0)

The problem is that as screen resolutions are going up (you can really assume 1280 px widths these days without cutting too many viewers off, especially if you're willing to take the attitude "to hell with anyone who hasn't upgraded their 15 year old POS 15" CRT monitor"), what is happening is that mobiles are coming along and turning themselves into mini-PCs with "proper" browsers and they don't bother with the mobile versions of sites... they have adequate resolutions that, especially zoomed out to something like 50%, people are used to managing.

I think the best solution is to either concentrate on a fixed smallish (1024) site when graphical accuracy is important, or be more flexible with scaling divs and good CSS. In this case think about maximum widths too, nobody wants to see text expanded out to fill a 30" monitor (like Wikipedia does).

tangor




msg:4147362
 2:28 pm on Jun 5, 2010 (gmt 0)

Also keep in mind that with the larger wide screen monitors users frequently only use half the screen for browsing and the other half for other applications, or even three windows open at the same time.

StoutFiles




msg:4147364
 2:39 pm on Jun 5, 2010 (gmt 0)

770px width is the "best" width you can use for maximum compatibility. However, it really depends on the site and whether that small of a width works for you.

pageoneresults




msg:4147376
 3:24 pm on Jun 5, 2010 (gmt 0)

I use a min-width and max-width to accommodate a wide variety of browser viewport sizes, not resolution but viewport size, that's the important metric.

I've been working more towards fully fluid sites but it has been a challenge compensating for the large viewport dimensions many are using these days.

Fluid is definitely the way to go. My main focus now is to make sure that the primary content area is fluid and then the navigation elements are usually fixed to a certain degree, they do allow for browser viewport resizing and content flows freely with the viewport size, that's what you want. Avoid the horizontal scrollbar for the majority of your audience, that's the short term goal.

I checked the top 5 screen resolutions over the past 30 days for 2 larger sites. This is what I have...

1. 1024x768 21.05%
2. 1280x800 16.13%
3. 1280x1024 14.84%
4. 1440x900 9.38%
5. 1680x1050 8.47%

1. 1024x768 22.44%
2. 1280x800 22.07%
3. 1440x900 9.41%
4. 1280x1024 8.90%
5. 1680x1050 4.39%

Trying to accommodate the 800x600 crowd at this point is a challenge. When you have left and right columns that occupy a minimum of 400 pixels total, that leaves you about 360 pixels to work with for primary content, that's based on the 755 pixel max-width.

Many designs today are not 800x600 friendly, nor are they fluid friendly in many instances. If I were to take an educated guess, most themes are targeting the 1024x768 crowd at this point and have been for quite some time.

I've seen a few sites that detect viewport sizes and serve a layout based on that. These are mostly fluid sites out of the box but they have some extra stuff going on that takes the browsing experience to a more targeted and refined level.

I've found out through my own personal experience that using max-width is important if you're not serving a 3 or 4 column layout that is conducive to larger viewport sizes.

rocknbil




msg:4147394
 4:42 pm on Jun 5, 2010 (gmt 0)

The big problem is wide lines present a legibility problem akin to 9px type. I go with min-width 600px, max-width 1020px, design so it fluidly adjusts between those two gracefully, which of course leaves IE6 in the cold. It's tragic it has such a long and painful death.

aristotle




msg:4147516
 10:20 pm on Jun 5, 2010 (gmt 0)

Does anyone know the pixel widths of the iPad and typical netbooks? I'm guessing about 800 px, but not sure how close that is?

StoutFiles




msg:4147520
 10:42 pm on Jun 5, 2010 (gmt 0)

Does anyone know the pixel widths of the iPad and typical netbooks? I'm guessing about 800 px, but not sure how close that is?


I believe it's 1024x768.

To sum this up, suggested px guidelines:
770px max-width for 800x600 resolution.
960px max-width for 1024x768 resolution.

This is to account for the scrollbar as well as IE applying their own padding to the outside. If you really want to test it though, adjust the resolution on your monitor and see how your site functions on lower resolutions.

aristotle




msg:4147659
 10:55 am on Jun 6, 2010 (gmt 0)

I believe it's 1024x768.


Thanks for that info Stoutfiles. I don't have an iPad, but have seen pictures of it that show it used in both portrait and landscape orientations. So in portrait orientation, apparently the width is 768 px.

Mark_A




msg:4148035
 8:58 am on Jun 7, 2010 (gmt 0)

I used to make 760px wide fixed width sites which seem to be ok for 800x600 and 1024x768 but they are a touch narrow for the wider screens of today.

But then flexible sites that expand all the way on a wide screen look pretty silly also.

Mark_A




msg:4148040
 9:19 am on Jun 7, 2010 (gmt 0)

I think these guys usually call it about right on width [news.bbc.co.uk...]

pageoneresults




msg:4148138
 2:10 pm on Jun 7, 2010 (gmt 0)

The BBC missed the mark on that one. They're targeting 1024 and didn't allow enough compensation for vertical scrollbar width, etc. I end up with a horizontal scrollbar when browsing at my normal viewport dimensions of 955x500.

OT, the BBC SHOULD look at removing this from their CSS. I understand these types of coordinates may be troublesome...

.offscreen{
position:absolute;
top:-500000px;
left:-500000px;

Mark_A




msg:4148173
 3:04 pm on Jun 7, 2010 (gmt 0)

The BBC missed the mark on that one. They're targeting 1024 and didn't allow enough compensation for vertical scrollbar width, etc. I end up with a horizontal scrollbar when browsing at my normal viewport dimensions of 955x500.


Oh, I thought they had it about right. I have a big screen at work but at home I still have 1024 x 768 and I often view it in a smaller window knowing that what is at far right I don't need, but sometimes I max the window and I don't get a horisontal scroll bar.

Mind you, that machine of mine is old, perhaps I am not seeing the same BBC site as you are.

pageoneresults




msg:4148194
 3:57 pm on Jun 7, 2010 (gmt 0)

Oh, I thought they had it about right. I have a big screen at work but at home I still have 1024 x 768 and I often view it in a smaller window knowing that what is at far right I don't need, but sometimes I max the window and I don't get a horisontal scroll bar.


I use the Web Developer Toolbar and have easy access to resize windows and enter specific dimensions. I viewed the BBC CSS and they are forcing a 974px width on the inner container, that may be just about 14px too many, I'm not 100% sure. Also, this is pushing the viewport envelope if you ask me. The 1024x768 audience is one of the top 2 display resolutions. Forcing anything wider than 955 may be asking for that horizontal scrollbar to appear as it does when I resize down to what has been shown to be a safe min-width dimension for 1024 - 955px.

Maybe the BBC designers know a little more about this than I do, I hope so since they are forcing that 974px width. That only leaves 50px of breathing room. Plus, that is assuming everyone has their browser maximized.

I think forcing anything above a 760px width is asking for trouble at this point in time. There are still quite a few folks browsing at less than 1024x768 if you consider actual viewport sizes and not the display resolutions. There should be more flexibility allowed in the layout to compensate for those varying viewport dimensions. That's where the min-width and max-width come into play and it's usually the primary content and right nav that are fluid so that horizontal scrollbar doesn't get invoked to frequently. Just make sure whatever you have that scrolls to the right of the viewport is not of major importance.

pageoneresults




msg:4148205
 4:08 pm on Jun 7, 2010 (gmt 0)

I should have done a little more verification first before dissing the BBC although forcing that 974px width I think may present some challenges.

I just took exact measurements from Firefox. At 1024 window width, there is exactly 1008px of white space inside the viewport. The only thing encroaching on that horizontal space is the vertical scrollbar at right which measures 16px in both FF and IE. That means you could PROBABLY max out at 1000px and still have 8px of breathing room.

I still think there SHOULD be fluidness when minimizing the browser and not a forced width that exceeds the average viewport dimension when targeting 1024x768 or less.

robdwoods




msg:4148215
 4:24 pm on Jun 7, 2010 (gmt 0)

I have to go with pageoneresults. Target 1024 px (with an actual usable with of 1000 px).

The width profile of your users is going to vary based on their level of technical sophistication (more advanced = wider screens).

Our mix looks like


1024x768 21.40%
1280x800 19.73%
1440x900 9.84%
1280x1024 9.53%
1680x1050 6.77%
1366x768 5.62%
1920x1200 3.29%
1920x1080 2.32%
1152x864 2.05%
1280x768 1.87%
1600x900 1.84%
800x600 1.48%

We have abandoned 800px wide designs. Basically, we are willing to have 1.48% of users horizontally scroll in order to better serve the vast majority that have 1024 or larger. With 20%+ we are not going to expand beyond 1024 for the foreseeable future.

JAB Creations




msg:4148689
 7:50 am on Jun 8, 2010 (gmt 0)

Here's a genius idea: completely fluid width without the static width hassles and simple resize the browser to test various resolutions. For Firefox there is the web developer toolbar with a resize menu.

- John

jkovar




msg:4148705
 8:24 am on Jun 8, 2010 (gmt 0)

From the polls I've seen on iPad themed sites, most people who use their iPad to browse the web do so in landscape orientation, meaning that iPad users are typically 1024x768 users. From what I understand the iPad always reports its' resolution as 768x1024 (portrait orientation) though.

I don't remember them off the top of my head, but there are CSS media type extensions that make it possible to load different stylesheets depending on whether the iPad is in portrait or landscape orientation.

Mark_A




msg:4148714
 8:37 am on Jun 8, 2010 (gmt 0)

So, when 800 x 600 was popular I used to make 760 width pages and that seemed to be fine. So I left about 40px spare for vertical scroll bars and the like.

But now with 1024 being the norm people are suggesting "an actual usable with of 1000 px", is 24px enough for vert scroll bars and the like?

I wish there was a way of having a flexible site but limiting its max width, limiting its min width is easy, but limiting max width could be cool.

yaix2




msg:4148716
 8:44 am on Jun 8, 2010 (gmt 0)

I use 960px width with a sidebar that is at least 160px, so that the actual content fits well onto a 800px display.

Even on my 1600+ px screen I usually use browser windows with 1024px, just to not forget about smaller devices, when I code a layout.

I wish there was a way of having a flexible site but limiting its max width,


CSS2 max-width:

johnnie




msg:4148736
 9:59 am on Jun 8, 2010 (gmt 0)

I use 960. It works very well for me. I'm sorry, but 800x600 has had its time.

optik




msg:4148747
 10:58 am on Jun 8, 2010 (gmt 0)

1024x768 - and above basically

eWhisper




msg:4148758
 11:37 am on Jun 8, 2010 (gmt 0)

Why not let your analytics system tell you what you should design for?

I have one site where 85%+ of the people (and 95% of the conversions) are on 1920 x 1200, 1920 x 1200 or 1600 x 900.

I have another one where 1280 width is 85+ % of the users.

And yet a third one where 800 x 600 and 960 x 600 is about half the traffic.

Those three sites should not try and use the same width in their design; the users have told me exactly what they are using to access the site.

Mark_A




msg:4148781
 12:42 pm on Jun 8, 2010 (gmt 0)

1. 1024x768 24.83%
2. 1280x800 15.59%
3. 1280x1024 15.19%
4. 1440x900 7.37%
5. 1366x768 5.91%
6. 1280x768 5.51%
7. 1680x1050 5.18%
8. 1920x1200 2.41%
9. 1152x864 2.04%
10. 1600x900 1.79%

It seems for our main site that 800x600 is not even in the top 10 but a full quarter are using 1024 x 768

But #*$!x visits used 96 screen resolutions - That is a lot of variety!

graeme_p




msg:4148871
 3:03 pm on Jun 8, 2010 (gmt 0)

@rocknbil, why address the readability problem with a max-width in pixels, when a max-width in em would be mosre consistent across different browser settings.

albo




msg:4148882
 3:12 pm on Jun 8, 2010 (gmt 0)

I've been surviving with an elastic layout - percentage cols within a wrapper (some of my sites have 77%, some 85%), with max-widths in ems.

I found per a suggestion (I forget where...) a call-out for separate iPhone styling, a la:

@media only screen and (max-device-width:480px) {

I use it for separating nav into screen-width bars, with on/off content between bars, a la Yahoo!

rocknbil




msg:4148976
 5:52 pm on Jun 8, 2010 (gmt 0)

why address the readability problem with a max-width in pixels, when a max-width in em would be mosre consistent across different browser settings.


Are you talking about max-width on the text itself? I was referring to the container. I'd never use em or percentages on a container min/max because fixed width elements inside the container, like images or other thingies demanding a fixed width, cause too much trouble with fluid width elements, like text or fluid width internal boxes.

This 40 message thread spans 2 pages: 40 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Webmaster General
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved