Hi there. Could someone please tell me the actual amount of space (Pixels) on a web page in 800x600 resolution, including the scrollbar?

Cheers.

I think im wrong but

800*600=480,000 pixels.

Sorry, I phrased my question wrong. I meant, what is the horizontal width of the screen, it is not 800 as there is the vertical scrollbar to take up room.

OH most of the time its around 780.

Is there an exact figure?

Alright just measured it exactly 780 pixels wide. Used PS to measure it FYI.

Good info to know,dunno what use could come from knowing this,but anywayz........

The Dude :)

I don't know about an exact figure....... I typically make mine 750 pixels wide, and just have them fill size to the rest of the screen with a filler.... works well.

Here's a nice designer's tip (if using IE):

1.) Bookmark a random webpage.
2.) Right click on the link from the Favorites toolbar.
3.) Go to Properties > URL, erase what's there, and type in: javascript:resizeTo(800,580)

:D

Originally posted by progex
Here's a nice designer's tip (if using IE):

1.) Bookmark a random webpage.
2.) Right click on the link from the Favorites toolbar.
3.) Go to Properties > URL, erase what's there, and type in: javascript:resizeTo(800,580)

:D

Nice tip, works wonders. Thanks!

k, what is that supposed to do cuz i tried it and nothing's happening....?:confused:

It's 780 pixels, heh.

And this is useful information for people who design websites, incase you didn't know.

It sorta depends on how you stretch your screen. It's 740 for me. Of course, I never maximize my screen. I don't like it that way.

In addition, here's a nifty tool you can use as well:

http://www.wpdfd.com/restest.htm

:( Didn't know is was 780; my entire site is 800x600...

I design all my pages based on 772 width.

I try to always design my fixed-width sites at 760px wide. This way at 800x600 it will always fit when maximized, and even if slightly not maximized.

Disigning for a fixed width usually isn't a good thing. People (like me) who run at well above 1900 pixels wide will see too much wasted space on your site. There is no reason whatsoever your site can not dynamically resieze itself to take up the full width of the window size of the browser. Designing for a specific resolution is worse than designing for a specific browser.

I didn't say I design all my sites at a fixed-width. But the occasional time a client has a particular layout they want to use, or due to some graphics limitations they are done that way.

Originally posted by Acronym BOY
Disigning for a fixed width usually isn't a good thing. People (like me) who run at well above 1900 pixels wide will see too much wasted space on your site. There is no reason whatsoever your site can not dynamically resieze itself to take up the full width of the window size of the browser. Designing for a specific resolution is worse than designing for a specific browser.

This site is best viewed at 800x600 resolution and with Internet Explorer. :)

Seriously, what is your approach for designing for all screen resolutions? I've found that using percentages for pages/tables doesn't work out too well. Do you suggest a javascript that detects screen size and goes to the appropriate page? That way you'd need 4-5 variations of every page so that doesn't sound good either.

I don't have the download site, you'll need to use a SE to find it, but there's a nifty free program called "JR ruler" I use to measure elements on a screen.

Originally posted by chrisb
This site is best viewed at 800x600 resolution and with Internet Explorer. :)

Seriously, what is your approach for designing for all screen resolutions? I've found that using percentages for pages/tables doesn't work out too well. Do you suggest a javascript that detects screen size and goes to the appropriate page? That way you'd need 4-5 variations of every page so that doesn't sound good either.

CSS. You should NEVER use tables for layout. Ever. Almost as bad as frames.

Sites I have desinged can be viewed on computers running at as low as 640x480 (I use a really old laptop to double check that) and things such as PDA's and cell phones.

Accessibility is the goal.

However, it's almost impossible to design a site for all resolutions if you want to make it really image-heavy. I'm not saying it's impossible, but... damn near.

Originally posted by Acronym BOY


CSS. You should NEVER use tables for layout. Ever. Almost as bad as frames.

Sites I have desinged can be viewed on computers running at as low as 640x480 (I use a really old laptop to double check that) and things such as PDA's and cell phones.

Accessibility is the goal.


I think "compatibility" is the goal; but the very mechanics of how the web works and how different computers, monitors, etc. differ, makes standardization nearly impossible... but it can be made better than most sites do it. IE, I hate to have to scroll left and right on a page.

Got a URL for one of your sites that we can see?

Originally posted by chrisb
I think "compatibility" is the goal; but the very mechanics of how the web works and how different computers, monitors, etc. differ, makes standardization nearly impossible... but it can be made better than most sites do it. IE, I hate to have to scroll left and right on a page.

Got a URL for one of your sites that we can see?

It's under contruction, but head to www.acronymboy.com You won't be able to get to that by cell phone or PDA (yet) but i am working on a seperate PDA CSS right now, literally, and WAP. It has one inline large picture that I need to get rid of, but it's pretty much there.

I've said this before:

The zen of web design is understanding that HTML means that all clients will (should) be able to view your page, not that they will all be able to view your page as you view it or as you intended for them to view it.

This post explains a bit more:

http://www.webhostingtalk.com/showthread.php?s=&postid=683758#post683758

See, I understand the goal, and always try to verify my sites work with as many browsers as possible.. but with graphics you really can't make it work. Like on the URL you posted. The graphic on the main page is what, just a tad over 500 pixels? Ok.. well what if I don't like to maximize my browsers, or like to browse with multiple windows visible at the same time? Especially at 800x600, I have to horizontally scroll. I don't like to scroll.

Also, I like a lot of fluid designs, but layouts with a lot of text in a fluid design may not look very good. For instance again, in that URL you posted, at 1600x1200, almost all of your paragraphs are one long line. Visually, that doesn't look as good as say on 800x600 or even something inbetween. On say a 19 or 21" monitor, sites with text like that I have to practically scan my head back and forth to read a whole paragraph.

That's why I believe it truly depends on the site and the visual impact as well as aesthetics you are trying to accomplish that you need to decide if you want to go with a fixed width or a fluid design. Each have pros and cons and different instances in when they should be used :agree:

Ideally, I need to thumbnail that image, not insert a very large one like that, its not very 56k friendly.

Also, my paragraphs are sort of short, I can't help that aside form paddding the sides with useless white space, which isn't good either. That's just the nature of what I have posted I can't help that I was short on words that day. Formatting of the text should not be done so much by you (wrapping and things like that) but rather by one's browser.

For some great examples, see here:

http://glish.com/css/

And the holy grail of layout:

http://glish.com/css/7.asp

All dynamically resize.

Acronym Boy: Now, I don't do very much designing, and don't profess to be a designer. But there is use for fixed width sites, it all depends (and I append my statement, I didn't mean I design ALL my sites at 772 width, I mean I design all my fixed-width sites at 772 width).

Go take a look at CNN.com, ESPN.com, MSNBC.com, Yahoo.com, NBA.com, NFL.com, etc. They're all fixed width, and all based in the 772-780 area. Why? Because when you go to a site like that you want the layout to generally be the same as the last time you went there. Someone like me, I run 1600x1200, and I have multiple browsers running nearly all the time. My window resizes frequently, but I like it if a site keeps everything pretty much where I remembered it.

Also, depending on the nature of graphics and how much text you place on a site, it could become a nuisance full screened at a high resolution. Wasted space is bad, but I don't want to be reading a one line paragraph across a 19" screen.

All sites are different. There ARE reasons to run at a fixed width.

Ever try reading any of those sites in a text only browser (which is what blind people use, the computer reads it to them)? Its horrible. Take a look at their pop up ads as well. Those sites are not pinnacles of design. I agree a one line paragraph is not a good thing, in both design and grammer. But take a look at:

http://glish.com/css/7.asp

I would much rather have that, than the crap at ESPN.com (two pop ups, ugh). Take a look at www.arstechnica.com. Its cramped (they are working on it over the weekend) at 800x600, by I like that no matter what size you use, it takes up 100% of your browser. also check out www.arsware.org Same deal, no matter what size browser, it takes up the whole thing.

The only thing worse is a site that maximizes itself when you go to it and resizes your browser for you. Ugh.

Ugh, you completely missed the point. The point was not that they are pinnacles of design, and popups have no relevance in this arguement. The point that was being made was your throwing away the value of any sites using fixed width.

I never said that, I said there is no reason that you can not design your site to have a variable width. The entire world does not lean towards one resolution. Design for one size and you ignore the other 75%. Design for all sizes. That was my point.

Disigning for a fixed width usually isn't a good thing. People (like me) who run at well above 1900 pixels wide will see too much wasted space on your site. There is no reason whatsoever your site can not dynamically resieze itself to take up the full width of the window size of the browser. Designing for a specific resolution is worse than designing for a specific browser.

Desiging for a specific resolution is worse than designing for a specific browser.

Originally posted by Acronym BOY
Ever try reading any of those sites in a text only browser (which is what blind people use, the computer reads it to them)? Its horrible. Take a look at their pop up ads as well. Those sites are not pinnacles of design. I agree a one line paragraph is not a good thing, in both design and grammer. But take a look at:

http://glish.com/css/7.asp

I would much rather have that, than the crap at ESPN.com (two pop ups, ugh). Take a look at www.arstechnica.com. Its cramped (they are working on it over the weekend) at 800x600, by I like that no matter what size you use, it takes up 100% of your browser. also check out www.arsware.org Same deal, no matter what size browser, it takes up the whole thing.

The only thing worse is a site that maximizes itself when you go to it and resizes your browser for you. Ugh.

I agree. Sites should not maximize your window.

However, I was less than impressed by the above urls that you posted. Some of them looked a bit crowded to me, as do most 3-column webpages. Whitespace is a good thing. You just need to find a balance between too much white space and crowding your page. I'd rather see too much whitespace than a jam-packed page, though.

Originally posted by chrisb
I agree. Sites should not maximize your window.

However, I was less than impressed by the above urls that you posted. Some of them looked a bit crowded to me, as do most 3-column webpages. Whitespace is a good thing. You just need to find a balance between too much white space and crowding your page. I'd rather see too much whitespace than a jam-packed page, though.

Whitespace is a good thing, but you should not have all content on the left side and a big white space on the right becuase someone designed for a resolution that is one quarter what yours is. Thats a very bad use of whitespace.

Acronymboy,
I think we understood you, but you really haven't given any real solutions, except to say "use CSS".
Can you give us a real world example of how you would use CSS to make an image fit all the way across a page on all resolutions without distortion.

"Desiging for a specific resolution is worse than designing for a specific browser."



It's not desiging for a specific resolution, it's desiging for a minimum resolution. Take a look at one of those site's in 1024x768, heck even at 1600x1200 it doesn't look severely out of place (of course I never have my browser full-screened anyway).

Originally posted by chrisb
Acronymboy,
I think we understood you, but you really haven't given any real solutions, except to say "use CSS".
Can you give us a real world example of how you would use CSS to make an image fit all the way across a page on all resolutions without distortion.

Why would you want an image taking up the entire page? Images are fixed sizes, you can not stretch them. That is the problem with using all images. That and 56k people will grow to hate you.

Why not try breaking it down into smaller pieces. I did this just now in Paint to give you a quick example. You have logo.jpg as well as some CSS. You create a few div's, one for teh gray bar across the top, one for the nav bar down the side and one for holding logo.jpg. A fourth will have to be used for content.

IMG]http://acronymboy.com/external/images/layout/1/breakdown.jpg[/IMG]

Navigation bar div: aligned left with either a fixed or variable width
Top banner div: aligned along the top, width set in percent with padding and margin also set, the text is right aligned giving you the text on the right hand side
Content div: falls into place after the nav bar div and fill up the rest of the space, ending at the margin, yet again, please set some padding on this or it will not look pretty
Logo div: floats over all other divs and holds the logo

The web is not about typography. I've said this numerous times. If you want typography look else where.

Now lets say you want something more complex. Check out the stuff over here:

http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html

Not only can you lay images out wherever you want by breaking it all down, but you can also have the text fill in the spaces (dynamically!) and wrap around your stuff.

Also check out the box punch concept:

http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html

You can do teh same exact thing, but with images. And not only can you stick them on th sides, but right in teh middle of text.

Imagine a page like this:

http://acronymboy.com/external/images/layout/1/centerwrap.jpg

The text will wrap around the picture and dynamically readjust itself no matter what size you chnage your browser to. (And it's complaint)

Images can not be manipulated, but everything else can. Images for the web is not the way to go. Images should be pictures, not buttons that have java roll overs (replaced by CSS BTW) and certainly not used for layout. Pictures should be things like your logo, your friend skydiving, or maybe the cool decade old Big Iron sitting in your basement. If you must use iamges, break them down. No need for one huge image along the top, break it down, like in example 1.

edit: I am a *****, I can't use vBul tags

Originally posted by dbodner
"Desiging for a specific resolution is worse than designing for a specific browser."



It's not desiging for a specific resolution, it's desiging for a minimum resolution. Take a look at one of those site's in 1024x768, heck even at 1600x1200 it doesn't look severely out of place (of course I never have my browser full-screened anyway).

I just clicked the one in your profile, and it's exactly what I am talking about. It dynamically resizes. Now head to www.espn.com and watch how you just get more and more white space on the right.

"I just clicked the one in your profile, and it's exactly what I am talking about. It dynamically resizes. Now head to www.espn.com and watch how you just get more and more white space on the right."




I agree, there are uses for dynamically resizing. But I also see a use for static sizes as well, that's all I'm saying. For each site there's a different solution.


And I don't need to visit ESPN.com, I already spend too much time there over the course of a day ;)

I still want my logo banner to go entirely across the top and to fill the width of the screen. There's got to be a best way to do this.

You may be right, acroboy, that the web is supposed to be more for accessibility; but I don't see that. I see compatibility more often as being the goal; and with the introduction of CSS, I think typography is becoming important on the web. Perhaps, its because I'm a former typographer who used to do magazine ads and books.

Image width can be specified as a percentage, but than you have the issue of things looking very stretched and/or compressed depending on how large their browser is. Not a good solution. Not to mention the overwhelming amounts of jaggies.

Which is why text is better as it make itself larger and smaller and wrap when necessary. Not to mention those who are visually impaired won't be able to see your logo (hope you have alt text as well) and text, but at least with the text they can use their browser option to make it all larger. Images don't work that way. Text can be sized smaller or larger by whatever browser you use, desktop ones, cell phones, etc.

Computers and software can deal with text easily, images are a pain.

And CSS is a push away from typography. Sure you get more control, but you also have the fact that a WAP deivce will read it differntly than a PDA which will read it differntly than your desktop, which will print it yet another different way. CSS seperates content from layout and design, making it easier to manipulte both once the difference is clearly shown.