What is the BEST Web site Width?

[deathshadow60]

There is only one thing that it makes sense to define using px. That is the width of borders where you want them to be as thin as possible and so define them as 1px. For your page to work properly for as many visitors as possible you shouldn't use px for anything else at all.

I agree to an extent -- but there will always be a few visual elements that NEED to be in PX -- like the text behind a highly graphical logo or menu items that could break the layout otherwise; thankfully on the latter the ability to accomplish a LOT of that desired styling with CSS3 should mean even then the days of such nonsense are numbered.

Combined with vector formats becoming practical we are within eyesight of the day when the pixel pushing photoshop jockey will be out of work... since their pixel-perfect exact-width/exact-height nonsense will have no place... We'll all be going "man, look at that mid-2000 era design" the way we laugh at 1990's style stuff now.

Or at least, that's the dream...

[cheesedude]

I do it all the time -- this is REALLY true when people declare fonts in PX; there are usually plenty of other "valuable resources" to get the exact same information from.

Yeah, but you are a little more hot-headed than the average person. And that pixel-em issue is another thing I don't like. I can't stand working with fonts in ems (and certainly not measurements like widths). Hate it. I like the control of pixels.

I've been looking at galleries of work of local web designers and almost all of them are using pixels for fonts. I know this pixel-em issue has been debated to death around here, so I am not going to bring it up. I'll look for some old threads about the debate and read up again on why ems should be used when any visitor could easily zoom the page.

By the way, what is a good page width in ems?

[Gorgoyle9]

Yeah, but you are a little more hot-headed than the average person. And that pixel-em issue is another thing I don't like. I can't stand working with fonts in ems (and certainly not measurements like widths). Hate it. I like the control of pixels.

I've been looking at galleries of work of local web designers and almost all of them are using pixels for fonts. I know this pixel-em issue has been debated to death around here, so I am not going to bring it up. I'll look for some old threads about the debate and read up again on why ems should be used when any visitor could easily zoom the page.

By the way, what is a good page width in ems?

Font size in "Em"s is Typographic measure. Why is "Em" in web design? Cause typography need more influence in webdesign like embedding fonts on your webpage, renting those fonts and charging some fee for that service (look: web ink) and to web designers start think of fonts like graphic designers-typographers.

Actually no special reason for implementation of "Em" measurement than just to synchronize a bit Web design and Typography.

Microsoft, Adobe and some Typography publishers already got fonts defined in Points, Pixels, "Em"s and other measurements. So making designs with fonts sizes in Pixels are nothing wrong and disturbing.

[felgall]

I like the control of pixels.

You mean no control whatever since you have no idea of how big a pixel is - it could be 1000px = 1inch or 1px = 100 miles - because pixels have no fixed size.

An ideal column width in em is around 30 - 35 em as that's about the length most people are comfortable reading.

[TechnoBear]

...why ems should be used when any visitor could easily zoom the page.

That assumes firstly that your visitor knows how to zoom the page, and secondly that they're happy to deal with any resulting horizontal scrolling. Many older folk are self-taught when it comes to computer skills, and you would be amazed how many of them are unaware of features like zoom, setting browser text default size, etc.

[RyanRobinson]

Fixed layouts? I always go for 960px as designs can easily be divided into even valued columns and boxes which helps for consistent alignment. It is also accepted that layouts look good in resolutions such as 1024x768.

More info here: http://960.gs/

I have never done a liquid layouts before so I can't comment on it but I may use it in the future.

[deathshadow60]

That assumes firstly that your visitor knows how to zoom the page, and secondly that they're happy to deal with any resulting horizontal scrolling

Assuming you did a dumbass design that forces horizontal scrolling from doing something STUPID like making it a fixed width... If you have a fluid or semi-fluid design, there should be no horizontal scrolling unless some idiotic image that was too large for the page in the first blasted place forces it.

Though I often forget that some browsers (everything except Opera) still get down on their knees in front of the proverbial donkey when it comes to resizing content.

[sdt76]

While I agree that 100% is a great way to go, the problem is that there are times when it gets taken to far. In terms of readily there is nothing worse than trying to read an article that is 800px wide.

I am however a big fan of the whole 'responsive design' that is happening right now.

Yes, this is my concern too. I run a desktop that is 2560X1440 on a 27 inch monitor. With a completely 100% width article, unless the text size is giant, I have to start actually turning my head to read the text, like I'm at a tennis match. From everything I have learned in design, the best sentence length for readability and information retention is about 10-15 words per line. Anything beyond that gets to be a bit much and retention will go down. Imagine reading a book where every line has 30-50 words! Do you want to read that? Do you think it gets easier if it's on a monitor? No, it actually gets worse.

[dresden_phoenix]

0K, that 100% answer was cute. Heck I thought of beginning my response with "100%"

But in truth, 100% , while the most efficient use of screen real estate is not the best size. Remember your target is human eyes.

For starter, some "breathing" room is always a good design principle. So you want a margin you push content away, at least a little bit, from the chrome.

If you have a monitor that an incredible 3000px wide, for example you still don't want to make a 2400px wide site. After a particular length a line can become uncomfortable to read, in the print world this is usually about 40-60 characters wide. The web is NOT print, still it is a good GUIDELINE to set a MAX-WIDTH around 30-50em. ADD to that a SUBORDINATE SIDEBAR WIDTHS. And you have a good guide for MAX SIZE.

MIN size, is of course, whatever fits. Which brings us back to 100% ( TOTAL).

These are, of course mere guide lines it is best to consider your audience.

[felgall]

Yes, this is my concern too. I run a desktop that is 2560X1440 on a 27 inch monitor.

Who cares how big your screen resolution is. You can't set the browser viewport size that big and can set it as much smaller as you like. If you are running Windows 7 and press window-leftarror or window-rightarrow then your viewport will be 1278 pixels. If you want it narrower or wider than that then grab the edge of the browser and drag to the width that suits you. That's why setting theactual page width to a % is appropriate - whether it be 100% or 90% or whatever - because the person who owns the browser can then choose what width their browser should be set at to suit them.

[Markloriefitness]

Although my experience is limited, most of your targeted users are probably widescreen. Width that being said, I would say to stick to percentages. I have seen some websites that choose a css layout based on resolution, but I am not entirely sure how to set something like that up, all I know is that is passes parameters with the css, and the css is generated server side. It is a serious thing to consider though, any designer wants to be sure that the important stuff is seen.

[Branden S]

I would say that 100% is the best since it fills the page and adjusts to the users screen.

I always use width 100%!

[lonerunner]

I wouldn't use 100% width since many people have different monitors and resolutions. For forums its ok to have 100% width, but for websites i think best solution is to use 960 grid system.

[Stevie D]

I wouldn't use 100% width since many people have different monitors and resolutions. For forums its ok to have 100% width, but for websites i think best solution is to use 960 grid system.

Have you read any of the posts above that explain at great length why a 960px with is a really bad idea?

[deathshadow60]

Have you read any of the posts above that explain at great length why a 960px with is a really bad idea?

Waste of time even arguing it, people will just keep sleazing out crappy fixed width websites because they have their heart set on doing things in their designs that have no business even being on websites in the first place... Which is WHY some people actually seem to think grids and 960 idiocy is actually useful... I often wonder if it's like my "visual programming" mental block; where dynamic layout is a conceptual hurdle some people just can't grasp -- they NEED the fixed sizes because the idea of having things adjust, or adjust between a constrained range is outside their comprehension.

Depressing given that such sites are typically accessibility train wreck, but it's like the people who defend using PX metric fonts on their content. They're gonna keep making absolute garbage no matter what we tell them because it's "too hard".

Laughable considering I think dynamic/elastic hybrids as semi-fluid are WAY simpler to work with since it auto-adjusts to whatever you plug into it, instead of having to micromanage every last little stupid element width.

[lonerunner]

Waste of time even arguing it, people will just keep sleazing out crappy fixed width websites because they have their heart set on doing things in their designs that have no business even being on websites in the first place... Which is WHY some people actually seem to think grids and 960 idiocy is actually useful... I often wonder if it's like my "visual programming" mental block; where dynamic layout is a conceptual hurdle some people just can't grasp -- they NEED the fixed sizes because the idea of having things adjust, or adjust between a constrained range is outside their comprehension.

Depressing given that such sites are typically accessibility train wreck, but it's like the people who defend using PX metric fonts on their content. They're gonna keep making absolute garbage no matter what we tell them because it's "too hard".

Laughable considering I think dynamic/elastic hybrids as semi-fluid are WAY simpler to work with since it auto-adjusts to whatever you plug into it, instead of having to micromanage every last little stupid element width.

Can you please tell me how would you make websites like youtube or pornhub or similar with fluid width, or why all who make themes make them with fixed width. For example rockettheme is strongest theme provider for joomla and they make themes with fixed width. I have read posts above and i have really found one post where someone explain why fluid width is bad for big monitors and i have big monitor and its really hard to read text, constantly moving head left - right, than someone explained that windows 7 have option to split screen in two but not all users have windows 7. Most resolutions browsing internet are between 1280 and 1366 resolution so not a big difference if it would be fixed or fluid, if you make comercial themes you will just make it more complicated to user with fluid width because he will have to deal with different resolutions, and none of regular users dont want to deal with this, they want to be on every monitor, every resolution, every browser, every system, exactly as they see it. If you make some specific themes, or personal project and you want to deal with everything than it's ok to make fluid layouts. If you are making it for regular user who wish just to enter their text, and no much knowledge than fixed width is must. If you don't like 960 grid than try 978 grid.

[Stevie D]

Can you please tell me how would you make websites like youtube or similar with fluid width, or why all who make themes make them with fixed width. For example rockettheme is strongest theme provider for joomla and they make themes with fixed width.

A combination of laziness, incompetence and ignorance...

I have read posts above and i have really found one post where someone explain why fluid width is bad for big monitors and i have big monitor and its really hard to read text, constantly moving head left - right,

If you don't like having a full width of text, why do you run your browser maximised? Set the window to an appropriate size and you'll have no problem. I have my browser window set to a size that I find comfortable when it is filled with text. If you don't do that, that's your choice, but you shouldn't expect designers to make their design worse for other people just to accommodate your bad choices.

than someone explained that windows 7 have option to split screen in two but not all users have windows 7. Most resolutions browsing internet are between 1280 and 1366 resolution so not a big difference if it would be fixed or fluid, if you make comercial themes you will just make it more complicated to user with fluid width because he will have to deal with different resolutions, and none of regular users dont want to deal with this, they want to be on every monitor, every resolution, every browser, every system, exactly as they see it.

It really doesn't matter if it isn't exactly the same on every computer. No user is going to visit the site on two different machines and complain that it looks slightly different. What matters is that whatever set-up the user has, it looks well-designed.

If you don't like 960 grid than try 978 grid.

Yes, good move a 960px is too wide so we'll solve the problem by using a 978px width instead.

Huh??

[deathshadow60]

Can you please tell me how would you make websites like youtube or pornhub or similar with fluid width

Let's use the former as an example; speaking of websites that are broken and useless on my netbook and tablet and I have to dive for the zoom to use on my desktop! (Both too big AND too small, thanks fixed width with px fonts!)

Open up the center column fluid, add width detection to choose a proper width advert (Not that I see adverts, but If I recall they still have that massively and idiotically large one up top?) or chop off one side of the advert, maybe go a little smaller on it and center it. Swtch all the fonts to EM, make the side column widths in EM, add media queries to drop it to two column and eventually single columns. DONE.

NOT rocket science, and sure-as-shine-ola doesn't need any stupid 'grid' asshattery to build a layout.

or why all who make themes make them with fixed width

The same reason Eisenhower used to describe America's peacetime readiness: Ignorance, apathy, and just plain wishful thinking.

I have read posts above and i have really found one post where someone explain why fluid width is bad for big monitors and i have big monitor and its really hard to read text, constantly moving head left - right

First, if that's a problem as Stevie said why are you running the browser maximized? That said, there IS the legitimate concern that excessively long lines are difficult to read... but that's why on sites where that would be an issue you use a semi-fluid layout instead of fully fluid. You set a max width so it can't get so wide the long lines are hard to deal with, a min-width for when media queries don't work so the layout doesn't break shrinking too narrow, and media queries to change the layout for narrower screens; People are calling this "responsive" design now, but it's really what we should have (and I have been) doing all along.

Let's say you have a simple three column layout, using the double wrapping content first approach... and then stick an extra wrapper around both your outer columns.

<div id="pageWrapper">

	<div id="contentWrapper"><div id="content">
		Main Content Column
	<!-- #content, #contentWrapper --></div>

	<div id="sideBarWrapper">
	
		<div id="firstSideBar">
			First Side Bar
		<!-- #firstSideBar --></div>
		
		<div id="secondSideBar">
		<!-- #secondSideBar --></div>
		
	<!-- #sideBarWrapper --></div>

<!-- #pageWrapper --></div></div>

First start with a middle size two column layout.
screen.css - media="screen,projection,tv"

#pageWrapper {
	overflow:hidden; /* wrap floats */
	width:95%; /* haslayout wraps floats IE, make some body bg show */
	margin:0 auto; 
	/*
		min and max here are actually for browsers that
		don't know media queries!
	*/
	min-width:752px;
	max-width:68em;
}

* html #pageWrapper {
	/* 
		legacy IE knows not the min-width, so they get crappy stripe,
		OH WELL.
	*/
	width:752px;
}

#contentWrapper {
	width:100%;
	float:left;
}

#content {
	margin-right:20em;
}

#sideBarWrapper {
	float:left;
	width:20em;
	margin-left:-20em;
}

Two column layout, semi-fluid width when media queries aren't present.

Then you can make it three column when the screen is large.
bigScreen.css - media="screen and (min-width:68em)"

#pageWrapper {
	max-width:88em;
}

#content {
	margin:0 20em;
}

#sideBarWrapper {
	float:none;
	width:auto;
	margin:0;
}

#firstSideBar,
#secondSideBar {
	position:relative;
	float:left;
	width:20em;
	margin-left:-20em;
}

#secondSideBar {
	margin:0 -20em 0 0;
	left:-100%;
}

Turns it into a 3 column layout.

then for smallScreen.css - media="screen and (max-width:751px)"

#contentWrapper,
#firstSideBar,
#secondSideBar,
#sideBarWrapper {
	float:none;
	width:auto;
	margin:0;
}

Strips it down to a single column layout in source order.

NOT rocket science... and no stupid "grid" nonsense needed either. It often feels like 'grids' are based on this whacko mentality of running around and declaring widths on EVERYTHING... must go hand in hand with the "Not every ejaculation deserves a name" of people slapping endless classes and ID's on everything, like those "OOCSS" nutters. Basically completely missing the POINT of HTML, CSS, and the Internet as a whole!

That they're most always based in PX and as such can't expand to hold auto-enlarged dynamic fonts, making them strictly the province of the {expletive omitted} who declare everything, even content paragraphs, in px metric fonts... or just end up with a broken layout for large font/120dpi users like myself.

Most resolutions browsing internet are between 1280 and 1366 resolution so not a big difference if it would be fixed or fluid

Just because that's "most" doesn't mean it's everyone, NOR does it mean it's going to stay there. You're looking at a 30% mean when you have a 100% range to deal with. Basically fixed widths are simply a way to tell 70% of your visitors "we could give a flying purple fish about you!"

if you make comercial themes you will just make it more complicated to user with fluid width because he will have to deal with different resolutions, and none of regular users dont want to deal with this, they want to be on every monitor, every resolution, every browser, every system, exactly as they see it.

You've got your conclusion backwards from the reasoning. Users all HAVE all the things you listed -- different resolutions, different screen sizes -- and it's our job as developers to make sites that account for all that and deliver the best experience possible regardless of the device; that's what HTML was CREATED TO DO!!!

Which is why slapping in a fixed width with fixed fonts that sends large font users diving for the zoom and then breaks when they zoom past a certain point thanks to the fixed with, or is too large for things like netbooks or tablets with no real solution even offerred to them, such sites are steaming piles of failure.

... and the only reason such accessibility failures can even come close to having a following is simple -- people will put up with the most half assed BS on the planet if you have content people want anyways. Youtube is a great example of this in action; Their UI is inaccessible broken rubbish, but the content keeps people coming back anyways.

Part of why I say "content first" for design.

Still doesn't mean users won't complain about it, or that it looks far, far, far less than professional as a result.

Besides, when we're talking a place that has code like this:

<div id="masthead-expanded-container">
      <span id="masthead-expanded-menu-shade"></span>
      <div id="masthead-expanded-menu">
        <ul id="masthead-expanded-menu-list">
          <li class="masthead-expanded-menu-item first">
            <a href="/user/deathshadow60?feature=mhee">
My Channel
            </a>
          </li>
          <li class="masthead-expanded-menu-item">
            <a href="/my_videos?feature=mhee">
Video Manager
            </a>
          </li>
          <li class="masthead-expanded-menu-item">
            <a href="/my_subscriptions?feature=mhee">Subscriptions</a>
          </li>
          <li class="masthead-expanded-menu-item">
            <a href="/inbox?feature=mhee&amp;folder=messages">Inbox</a>
          </li>
          <li class="masthead-expanded-menu-item">
            <a href="/account?feature=mhee">
Settings
            </a>
          </li>
            <li class="masthead-expanded-menu-item">
              <a href="#" onclick="yt.www.masthead.accountswitch.toggle(); return false;">
Switch account
              </a>
            </li>
          <li class="masthead-expanded-menu-item">
            <a class="end" href="#" onclick="document.logoutForm.submit(); return false;">
Sign out</a>
            </a>
          </li>
        </ul>
      </div>
      <div id="masthead-expanded-lists-container">
        <div id="masthead-expanded-loading-message">Loading...</div>
      </div>
      <div class="clear"></div>

It's pretty obvious that no matter how good their content and concept is, the people they have writing their code don't know enough HTML or CSS to be opening their mouths on the subject!

If you don't know what's wrong with the above, you may want to take some time learning about inheritance and the "cascading" part of CSS.

So excuse me if I don't consider YT a site to mimic the behavior of, they have GREAT user generated content that we all want; but their website is outdated bloated half assed garbage from the idiotic markup to the bloated CSS to the total accessibility failings of the fixed width and px metric fonts.

[dannywright]

It depends on your design , but i will recommend build design such as giving width 100%.

[Black Max]

[r937]

in all seriousness, there oughta be a warning level for posts which clearly show that the poster hasn't read the thread

the price of freedom is eternal vigilance

[StevenHu]

Hello,

What do you suggest as being the best Width for a Web site?
That is do you think that the best Width should be set based on Percentages or Pixels?

I prefer percentages because of the explosion of mobile. Our site, which was based on pixels (960px-width), was fine back then. But now we're are getting around 10% of our visitors from mobile (100k). We have a lot of work to do to make it easy for those visitors.

Consider the amazing examples on this following page; as you view the pages on the desktop, drag the side of the browser narrower and see what happens. Then visit a couple on your smartphone and tablet.

http://inspirationfeed.com/inspirati...ebsite-design/

[ibuyforums]

Stevie D - wouldn't happen to be on Google Webmasters would you?

A little levity here. Of course, the reason why so many people used fixed width website sizes is obviously because they are all stupid. Even the smart people are stupid and lazy. The fact that advertising might be difficult and complicated to sell means nothing to some web designers. The fact that maintenance of the site and being able to easily create sell cards and decks means nothing to the developer because all that matters is technology. Oh, those idiots in the business group....

[Stevie D]

Of course, the reason why so many people used fixed width website sizes is obviously because they are all stupid. Even the smart people are stupid and lazy. The fact that advertising might be difficult and complicated to sell means nothing to some web designers. The fact that maintenance of the site and being able to easily create sell cards and decks means nothing to the developer because all that matters is technology. Oh, those idiots in the business group....

It isn't about the technology or purity of coding principles or anything like that ... it's about making a site that works for everyone, a site that everyone can use easily. I'm sure the "idiots" in the business group – if you actually sat them down with a few "real" users and showed them the barriers that their pretty site puts up by being too wide, ifthey saw for themselves how it frustrates users and makes it less likely that they will complete a transaction or return in the future – would understand that usability should trump aesthetics in any sensible decision.

[kohoutek]

[...] usability should trump aesthetics in any sensible decision.

That's very true. But, I think it's actually a myth that a truly usable design can't be aesthetic. If designers warmed up to the notion that aesthetics didn't need to suffer (at all), we'd be one step further today.

It may take a while to adjust from thinking with pixels to thinking of a website in terms of a flexible canvas, but it's definitely possible, just requires a different state of mind. That's the second step, though. The first step would be not to work with visuals at all in the first stages of designing a site. That may be leaving the comfort zone for quite a few, not just designers but clients as well.

I know it was quite hard for me to adjust and I'm nowhere near complete, but it's an exciting challenge and well worth pursuing.

Usable + accessible != aesthetically boring.