I am putting together a web site for our business. I notice that many (most) web sites take up a fairly narrow center section of my 19" monitor; rendering a lot of monitor real estate wasted.
I surmised that’s because most older monitors might be 15" or 17" or so, and a web site that was wider might look bad and require horizontal scroll bars.
Still, everyone I know has at least a 17" screen, and most wider than that. I wanted to show off our effort to a friend (which we’re just starting) and he has a 15" older laptop and it looked horrible, with both a horizontal and vertical scroll bar needed.
So my questions:
Why do so many web sites take up so little room? In other words why are they so narrow/small?
Is there a widget/plug-in/whatever that would automatically “resize” my website when loaded to smaller monitors? (I believe the site right now would fit on a 17" monitor w/o scroll bars, but I need to conform that)
Your data is too limited, and the resulting criterion is is foolish – most brand-new laptops and netbooks have smaller screens than 17". That’s why so many websites take up “so little” room. No widget is going to automatically shrink a too-large website; such efforts almost always look like crap. It’s much easier to expand a small one.
I agree that some do this unnecessarily, but the most important good reason for this is readability. If a line has too many words on it, it can be difficult to track your eye back to the left to start reading the next line. This becomes straining quickly, and reading speed is slower. You wouldn’t want newspaper articles stretching all the way across the sheet!
Ideal is apparently 10-12 words per line, which certainly fits my personal preference. Limiting the lateral extent of the content is one way – but not the only way – to control this. Many sites will limit the text width but fill the space to the right or left with navbars, relevant graphical content, etc.
Oh, and I’d like to echo Nametag on the screensize thing. You’ve got to be thinking about laptops and, as annoying as it may be, mobile devices. I do a lot of my computing on a 15.4" laptop screen (100% of the time when traveling). In fact, I’m in the process of replacing my laptop now, and I’m specifically not getting a 17" screen, even though they offer it.
One more reason to restrict the width: even people with big monitors tend not to maximize the browser window because they have multiple applications running.
On your othervquestion, There are several ways to make your design adapt to different monitor sizes, but - unless you have the design skills to pull it off - it’s probably best to stick with convention and a fixed width design.
I wouldn’t really mind it; in fact…“If a line has too many words on it, it can be difficult to track your eye back to the left to start reading the next line. This becomes straining quickly, and reading speed is slower. You wouldn’t want newspaper articles stretching all the way across the sheet!” **is **one line on my screen… and there’s room for a couple more words… even with the quote box.
I have two monitors hooked up to my desktop computer, and the main one is a 23" widescreen that is 1650 pixels wide. Unless i’m looking at large images online, or perhaps watching a NetFlix movie, my browser is usually sized to be a little over half the screen width, and that main reason for this is readability.
It’s usually not such a big deal on news sites, because most of those already size their text columns in such a way as to keep the lines to a reasonable width. But on forums like the SDMB, i find that keeping the window width down to about 1000 pixels or so (often less) makes the text much easier to read. I do the same with word processing documents too.
The idea of larger monitors, for me at least, is not that you will maximize every window to take up the whole monitor; it’s that you can have more windows open at once.
As has already been mentioned, the monitor size isn’t the only factor that determines what users will see on your website - ultimately, it’s the size of their browser window.
What’s wrong with expressing your site width in terms of percentages rather than pixels? I design most of the time that way (well, I might have, say, a left column of, say, 200px, but the right column isn’t set to a specific size, but rather set to the “remainder of available screen space”. I find this the only way to design sites in the variable screen-width world.
Thanks for the answers. it’s much appreciated. I sent an email to Dex to see if it’s ok to link to my site for feedback.
At some point I would be interested in feedback of a IMHO nature, but at this point I’m much more interested in the “how-do-I-do-this” kind of GQ queries.
IOW, at some point I need opinions/feedback of content, aesthetics etc. For the moment, however, I need feedback on structure, layout etc.
In my experience (and purely IMHO, of course), there are no good reasons to fix the width of your typical website. There are reasons (e.g., the design tool works that way, the amateur designer can’t figure out how to flow it right, the designer wants full control of the look to the pixel level…), but not good ones.
Pick an application you use regularly. Word, Photoshop, Excel, iTunes, Google Earth, InDesign, World of Warcraft. What do these have in common? They expand and contract to fit the window. Websites should naturally do the same, as the SDMB does.
I hear excuses all the time that people are doing it to make things better for the user. They don’t. I have a large screen, and I’m sick of websites that use 1/3 of the real estate and leave the rest blank. If I want to expand the window to fit the screen, the site should naturally flow to fit it. Ditto sites that don’t fit on the small screen on my other computer or my iPad.
When starting a site design, I always work in 800px by 600px. I feel if I can’t fit what is most needed within that space, the content needs some serious editing. In some cases, like blog-style sites, I might go up to around 1000px wide, and let the content just run as long vertically as it needs to, but I still try to keep the major elements of the site within the 800x600 range. It’s just good practice with all the different screen resolutions out there, not to mention the other points listed above.
Some reasons in addition to those already mentioned:
For web sites with content that changes regularly, it can be much easier to deal with content layout when the width is fixed. Images and video in particular - if the width of the content pane is already known, images can be pre-scaled to the correct size and text and captions can be formatted to fit with it in a predictable way.
Ads. Ad banners come in pre-set sizes that are determined by the ad network. It’s easier to get your ad blocks to line up with everything else if you use a fixed width.
Many designers do their initial layout with tools that use fixed sizes (photoshop, pencil and paper).
Some designers just don’t like fluid layouts for aesthetic reasons alone.
None of those things rule out fluid designs, but using a fixed width is a simple solution to several problems.
The web is in another paradigm shift back to fixed widths. It’s being driven by market forces where advertising is tied to the “new” Web 2.0 technologies. What used to be a techy free-for-all with elastic design, fluid design, static design, jello design, etc., is setting along fixed width. Advertisers want they bang for the buck up close and personal. At the same time the technologies driven by dynamic technology work best with fixed width designs.
Users have had the ability to use their own style sheets if they so choose and override a site’s code. Almost no users do that. There are constant scare tactics that Javascript is an open door to malware. While it does exist, again, almost no one disables Javascript (or even Flash) as a matter of course. The backlash against Jobs and his no Flash for iPad will fail just because it will. The recent court decision opening up application development for mobile devices with push this even more.
Fixed design width will gain more and more acceptance among designers because the coming web accessibility requirements for commercial and private sites will require fixed width for greater readability. Along with accessibility may up the ante toward greater usability awareness, a blend of accessibility and usability called universal design. It’s been around for years but now the day is coming.
Then there are the users. While younger generations readily accept mobile devices, older generations will remain with PCs and laptops. And for the foreseeable future older generations will have the monetary clout and accessibility requirements to drive the industry to suit older needs.
