Which is way too wide for a browser set to fill half the width of an HD screen - which will probably end up being the most popular size in the future since an HD screen is wide enough to display two windows side by side and Windows 7 provide the Window-arrow key commands to easily resize windows to fill exactly half the screen.
Also with so many people using screens of around 400 pixels in their larger direction your page will be even less usable for that other popular size range.
Also from your anser you are getting screen size and browser viewport size mixed up. As screen sizes get bigger the likelihood of the browser being set to only fill part of the screen gets higher and higher. An HD screen is way too wide to display a web page without wasting lots of space or making the page unreadable so setting the browser to exactly half the width is the obvious option for people with an HD screen and Windows 7.
The correct answer for ideal page width was given right at the start of the thread as 100% - you ought to think about making your site friendlier to the 99% of your visitors who currently would have a horizontal scrollbar by switching to that width instead.
I guess there will always be something I haven’t thought of. When I switched from 750 to 980, I just assumed the majority will be viewing from a laptop or a desktop.
I guess now with ipads & mobile devices the rules change again, but thus far I’ve had no problems or complaints. I just don’t honestly think I am good enough a designer to make a site work with a 100% width without having text elements in particular look ridiculous on the wider screens.
Most people won’t complain, they’ll just go elsewhere.
I just don’t honestly think I am good enough a designer to make a site work with a 100% width without having text elements in particular look ridiculous on the wider screens.
The key is to set a max-width on the outer container. You don’t want a site that expands to infinity and beyond, and it’s perfectly reasonable to constrain it to, let’s say, 1200px or 100em.
Perfect mix of semi fluid with dynamic scaling. Of course, my smallscreen.css media=“only screen and (max-width:751px)” goes thus:
#pageWrapper {
width:100%;
min-width:128px;
}
and is usually moronically simple – simply stripping out columns and turning all leading/trailing plates into normal plates.
But yeah, fixed width? Miserable /FAIL/ at web design and as mentioned already, a cop-out by people trying to cover up either their lack of skill or inability to kick the PSD jockey square in the junk with their non-viable for web deployment “But I can do it in photoshop” idiocy.
Though I hate the TERM “responsive design” – since I’ve been doing it for ten years without needing any goofy blasted name on it. But people LOVE slapping new names on old concepts.
Here is some more tips for you:
for 1024x768 resolution, use a width less than 980 pixels
for 800x600 resolution, use a width less than 760 pixels
for printing, use a width less than 560 pixels
There are an infinite amount of possibilities, especially as more people are using handheld mobile devices. What are you going to do, media queries for every single type of mobile device out there and each window size and a bunch of different CSS tweaks to accommodate what someone may use?
A designer has to draw a line somewhere. But where is the best place for that line? Hmmm… I guess the best place is where the client or the web designer wants it to be. You can’t be all things to all people. Don’t even bother trying.
I highly doubt most people will leave a valuable resource because a webpage is too wide (or narrow) for them. And those using less than full-sized windows because of big monitors will just stretch the window to fit the page. Expecting the entire internet to restyle their sites because you use two windows side-by-side and only have a maximum of 958px per window is absurd.
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.
Part of why I’m in the habit on search pages of middle clicking on the first six results, and 90% of the time the first three are more of a pain in the ass to use from the effects of piss poor layout, “but I can do it in photoshop” asshattery, page loads that take longer than it takes for me to give up on the page, and miracle of miracles if it does load in a reasonable amount of time it’s either a crappy little stripe on my desktop, too wide on my netbook, with idiotically undersized fonts declared in PX… Close the tab, check the next one.
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.
If you want to set your page width based on the size of the text (an elastic layout) then define the width in em. If you want to define it based on the browser viewport size (a fluid layout) then define it in %. For the best of both define the width as a % and max-width in em.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
