Max size for webcontent in IE on XP

[Schizan]

what size is the area for webcontent in IE on XP when you have a
maximized window whithout the statusfield, adressbar and
navigationbuttons etc.
The screenresolution is 1024 x 768

Thankyou
Llonas

 

[scripts.contact]

what size is the area for webcontent in IE on XP when you have a
maximized window whithout the statusfield, adressbar and
navigationbuttons etc.
The screenresolution is 1024 x 768

Thankyou
Llonas

document.documentElement.offsetWidth

 

[Jonathan N. Little]

what size is the area for webcontent in IE on XP when you have a
maximized window whithout the statusfield, adressbar and
navigationbuttons etc.
The screenresolution is 1024 x 768

Why?

Wrong question. Are you certain your site's visitor:
A) Has IE
B) Has Windows
C) Has a monitor at 1024 x 768
D) Has the browser maximized
E) Does not have any add-on toolbars
F) Using a computer
G) Using a graphical browser

Design for any resolution then it won't matter.

To answer your question though, take a screen shot an measure it.

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Schizan wrote :

what size is the area for webcontent in IE on XP when you have a
maximized window whithout the statusfield, adressbar and
navigationbuttons etc.
The screenresolution is 1024 x 768

Thankyou
Llonas

IE 7 users can force the presence of the address bar, IE 6 SP2 users can
force the presence of the status bar. For usability and accessibility
reasons, all IE6+ users can customize the width/height of scrollbars,
window borders, height of titlebar, etc.. There is no reliable way to
figure out the content area before actually loading a document. And it
is foolish and wrong to try to design according to a precise, defined
area since window can be resized, toolbars can be added or removed,
etc.. Best policy is to design in a flexible manner, with scalable,
fluid design.

Liquid Web Design: Build it right and it will work no matter what the
container.
http://www.digital-web.com/articles/liquid_web_design/

Alt.html FAQ
What is flexible, fluid or liquid design?
http://www.html-faq.com/webdesign/?flexibledesign

Alt.html FAQ
What are the disadvantages of fixed-width design?
http://www.html-faq.com/webdesign/?fixedwidth

WDG Web Authoring FAQ: Web Design
For what screen size should I write?
http://htmlhelp.com/faq/html/design.html#screen-size

Gérard

 

[Jonathan N. Little]

what size is the area for webcontent in IE on XP when you have a
maximized window whithout the statusfield, adressbar and
navigationbuttons etc.
The screenresolution is 1024 x 768

Why?

Wrong question. Are you certain your site's visitor:
A) Has IE
B) Has Windows
C) Has a monitor at 1024 x 768
D) Has the browser maximized
E) Does not have any add-on toolbars
F) Using a computer
G) Using a graphical browser

Design for any resolution then it won't matter.

To answer your question though, take a screen shot an measure it.

 

[Neredbojias]

what size is the area for webcontent in IE on XP when you have a
maximized window whithout the statusfield, adressbar and
navigationbuttons etc.
The screenresolution is 1024 x 768

Thankyou
Llonas

With IE6 (and j/s), one can get 1024x768. Unfortunately, all my archived
examples were wiped out in a crash, but I used to do it routinely when I
didn't know any better.

 

[David Segall]

Schizan wrote :

IE 7 users can force the presence of the address bar, IE 6 SP2 users can
force the presence of the status bar. For usability and accessibility
reasons, all IE6+ users can customize the width/height of scrollbars,
window borders, height of titlebar, etc.. There is no reliable way to
figure out the content area before actually loading a document. And it
is foolish and wrong to try to design according to a precise, defined
area since window can be resized, toolbars can be added or removed,
etc.. Best policy is to design in a flexible manner, with scalable,
fluid design.

Liquid Web Design: Build it right and it will work no matter what the
container.
http://www.digital-web.com/articles/liquid_web_design/

I find it extraordinary that anybody can argue in favour of "build it
right and it will work no matter what the container" and fail to
produce a single web site that meets that specification. The
referenced web site is designed for 800x600 and shows nothing but
white space on the right of even a 1024x768 screen. Two of the three
sites that Digital Web admire as "liquid design"
<http://www.builder.com> and <http://www.falkondesign.com> are 800x600
layouts centered in the screen to distribute the white space on both

Alt.html FAQ
What is flexible, fluid or liquid design?
http://www.html-faq.com/webdesign/?flexibledesign

At least this site does practice what it preaches however, on my "wide
screen" monitor, their solution to the problem leaves the bottom half
of the screen blank. I don't think this is any better than leaving the
right hand side blank. Of the four sites they reference only one
<http://www.webtechniques.com/archives/1999/10/desi/> attempts "fluid
design" and it illustrates why the concept fails. The text is far too
wide to read comfortably and the menu at the top of the page is
designed exclusively for a 1024 pixel wide monitor.

Alt.html FAQ
What are the disadvantages of fixed-width design?
http://www.html-faq.com/webdesign/?fixedwidth

WDG Web Authoring FAQ: Web Design
For what screen size should I write?
http://htmlhelp.com/faq/html/design.html#screen-size

These two both use the full width of the screen but neither are
satisfactory at the relatively modest "extremes" of 800x600 and
1680x1050 that I have used to test them. Their is ample evidence that
there is a comfortable width for a line of text and the print media
solve the problem by using columns. There is no comparable browser
compatible solution that fits within a strict topic definition of this
Usenet group.

 

[Jonathan N. Little]

Gérard Talbot <[email protected]> wrote:
At least this site does practice what it preaches however, on my "wide
screen" monitor, their solution to the problem leaves the bottom half
of the screen blank. I don't think this is any better than leaving the
right hand side blank. Of the four sites they reference only one
<http://www.webtechniques.com/archives/1999/10/desi/> attempts "fluid
design" and it illustrates why the concept fails.

I agree there are few sites that practice what they preach, but in
defense web authoring is still quite new, and just beginning to shed the
shackles of print orientation. I believe you will see more examples as
the concept sinks in.

The text is far too
wide to read comfortably and the menu at the top of the page is
designed exclusively for a 1024 pixel wide monitor.

Ah, yes I have a large monitor as well, but nobody's got a gun to your
head forcing you to have your browser maximized at all times! I rarely
maximized my browser and I usually have more than one app going at
once...true multitasking. You can also bump your text size up a bit and
it will shorten the effect line length. IE users don't have a hot-key
for adjusting text size and rarely think to customize the toolbar to add
the button so that have a tendency to settle for whatever the browser is
set at.

These two both use the full width of the screen but neither are
satisfactory at the relatively modest "extremes" of 800x600 and
1680x1050 that I have used to test them. Their is ample evidence that
there is a comfortable width for a line of text and the print media
solve the problem by using columns. There is no comparable browser
compatible solution that fits within a strict topic definition of this
Usenet group.

True, newspapers with newspaper-columns can wrap the text from one
column to the next because they have the advantage of knowing the
dimensions of their page and have a fixed font size. The web is not
paper. It is much easier to scroll up and down then left and right. And
as I said your can always narrow the page by narrowing your browser
which can make reading more comfortable.

 

[Bergamot]

Of the four sites they reference only one
<http://www.webtechniques.com/archives/1999/10/desi/> attempts "fluid
design" and it illustrates why the concept fails. The text is far too
wide to read comfortably and the menu at the top of the page is
designed exclusively for a 1024 pixel wide monitor.

Which only goes to show that anybody can implement a good design poorly.

 

[Schizan]

Thank you all for answering.

I guess thou I should have said that it's not a project to be published
on the web, just a thing i'm doing for a friend to be viewed on her
computer.
My thought is to open images in new windows with those fields, and
scrollbars, removed. But there's still the taskbar (I think it's called
in english) and the namelist in the browser that I dont know how many
pixels they use.
Unfortunately I don't have XP myself. 98 is the most recent version of
Windows I have.

Anyway it's an interesting discussion for me. Used to work with
printing, and getting things exactly as I want them, it's not easy to
make a good looking page in html. But I like it and all advices are
more than welcome.

Thanks again
Llonas

 

[David Segall]

I agree there are few sites that practice what they preach, but in
defense web authoring is still quite new, and just beginning to shed the
shackles of print orientation.

I don't think they are "shackles". I believe they provide about 550
years of experience in presenting text to the reader and the
principles can, and should, be adapted to the computer screen.

I believe you will see more examples as
the concept sinks in.

More? Do you have a URL for just one of those examples?

I don't think that the "concept" is practical. I don't believe it is
possible to use only HTML to design a site that meets a visitor's
expectation of "good design" over the current range of computer
monitors. By "good design" I only mean the general standard of
presentation they expect to find from products on a newsstand.

Your own web site, <http://www.littleworksstudio.com>, provides a good
example of the problem. On our "wide screen" monitors there is too
much of the stone background at the bottom of the front page and at
800x600 Firefox, at least on my set up, seems to have a vertical
scroll bar that allows a visitor to scroll down forever without
reaching the end of the page. Please don't take this is a critique of
your site. My own site <http://www.profectus.com.au> looks terrible on
a wide screen because the right hand text is too wide and the heading
image on most pages looks bad when it repeats.

Ah, yes I have a large monitor as well, but nobody's got a gun to your
head forcing you to have your browser maximized at all times! I rarely
maximized my browser and I usually have more than one app going at
once...true multitasking. You can also bump your text size up a bit and
it will shorten the effect line length. IE users don't have a hot-key
for adjusting text size and rarely think to customize the toolbar to add
the button so that have a tendency to settle for whatever the browser is
set at.

Of course a visitor can fix the look of a web site by adjusting the
browser window. However, that negates the entire concept of "fluid
design".

 

[David Segall]

Which only goes to show that anybody can implement a good design poorly.

OK. But please provide the URL of _any_ site that implements your view
of "good design" well. For the purpose of this discussion "good
design" means a site that looks good to you in a browser window that
ranges in size from 800x600 to 1680x1050 pixels.

 

[Jonathan N. Little]

I don't think they are "shackles". I believe they provide about 550
years of experience in presenting text to the reader and the
principles can, and should, be adapted to the computer screen.

What Gutenberg was doing was printing on *paper*. Paper has absolute
dimensions, a webpage does not! It is a different media. The same
transition when television was invented, the early shows tried to do tv
like radio, but it didn't really work. The "shows" had to change. Same
here with print media to web

More? Do you have a URL for just one of those examples?

I don't think that the "concept" is practical. I don't believe it is
possible to use only HTML to design a site that meets a visitor's
expectation of "good design" over the current range of computer
monitors. By "good design" I only mean the general standard of
presentation they expect to find from products on a newsstand.

Your own web site, <http://www.littleworksstudio.com>, provides a good
example of the problem. On our "wide screen" monitors there is too
much of the stone background at the bottom of the front page and at
800x600 Firefox, at least on my set up,

So what? The content it framed in a solid readable background. The
marble is superfluous decoration. If you print the page, print preview
will do, there is no marble. In fact I have a different stylesheet for
printing that removes a lot of the "web" features that are meaningless
in print like link underlines and navigational elements. The printed
version gives the visitor what they want, the content! "The fact ma'am,
just the facts!"

seems to have a vertical
scroll bar that allows a visitor to scroll down forever without
reaching the end of the page. Please don't take this is a critique of
your site.

That's a bug in my JavaScript that governs the floating navbar. It only
occurs in a few specific situations, but I haven't bothered to fix
because I am think of restyling the site to have a horizontal navbar
where the submenus are easier to navigate.

My own site <http://www.profectus.com.au> looks terrible on
a wide screen because the right hand text is too wide and the heading
image on most pages looks bad when it repeats.

Well, that is not a good idea. You want your navigational strategy
usable regardless of the window size.

Of course a visitor can fix the look of a web site by adjusting the
browser window. However, that negates the entire concept of "fluid
design".

No it doesn't! The content is present regardless of the window size. If
the user changes the font the page is fluid and adjusts. A fixed design
would force horizontal scrolling, which must be a pisser on a cellphone,
or elements break-out and overlap which will destroys usability.

 

[Bergamot]

OK. But please provide the URL of _any_ site that implements your view
of "good design" well.

I think these guys did pretty well:
http://www.brightfinance.co.uk/

 

[David Segall]

I think these guys did pretty well:
http://www.brightfinance.co.uk/

Really? I am using the latest version of Firefox and Internet Explorer
under an up-to-date version of Windows XP. The page appears to be
merely an 800x600 pixel design that is centered in the browser window.
There is no attempt to use the extra space provided in a window that
is any larger than 800x600.

I think that this is a legitimate way to design a web site but I don't
think you can present it as a successful example of "fluid design".
The essential element advocated by the "fluid design" advocates is
that the page should automatically adjust to fit the visitors screen
size.

 

[Bergamot]

Really? I am using the latest version of Firefox and Internet Explorer
under an up-to-date version of Windows XP. The page appears to be
merely an 800x600 pixel design that is centered in the browser window.

You are mistaken. The columns widths are set in % (of window) with a
total max-width in ems, so the design adapts with both the window and
text size. Maximize your browser window then change the text size up or
down and see what happens. Make your browser window narrower and see
what happens.

I wish all multi-columned sites were designed this way, except they
shouldn't set the body font-size so dang small of course. As it is, this
design adapts very well to my browser's large minimum font size setting
(17px). That's something I don't see that often.

There is no attempt to use the extra space provided in a window that
is any larger than 800x600.

Must be your default text size makes 800px wide a good line length. If
it were wider, you'd probably complain about text being hard to read.

The essential element advocated by the "fluid design" advocates is
that the page should automatically adjust to fit the visitors screen
size.

Which this site does. You just don't notice it because of your
particular browser settings. It is very noticeable in mine, which is why
the site immediately sprang to mind.

So what would you have them do differently?

 

[Jonathan N. Little]

I think these guys did pretty well:
http://www.brightfinance.co.uk/

I wouldn't say that's a prime example it is essentially a fixed width
with auto left and right margins.

 

[Bergamot]

I wouldn't say that's a prime example it is essentially a fixed width
with auto left and right margins.

No, it isn't. If you examine the code or at least experiment some with
your browser window and text size settings, you'd see it is not fixed
width at all.

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

David Segall wrote :

I find it extraordinary that anybody can argue in favour of "build it
right and it will work no matter what the container" and fail to
produce a single web site that meets that specification.

You are confusing Nick Finck who wrote that article in 1999 with the
owners and webmaster of http://www.digital-web.com/ . Nick Finck does
not own digital-web.com . And the owners and webmaster of
http://www.digital-web.com/ do not necessarly understand and see what
would be in their best (commercial and web authoring) interests.

Note also that Nick Fink originally wrote that article in 1999. And in
1999, many web browsers had huge amount of HTML 4 and CSS bugs,
implementation bugs, incomplete support.


The

referenced web site is designed for 800x600 and shows nothing but
white space on the right of even a 1024x768 screen. Two of the three
sites that Digital Web admire as "liquid design"
<http://www.builder.com> and <http://www.falkondesign.com> are 800x600
layouts centered in the screen to distribute the white space on both
sides. The third example <http://www.alistapart.com/stories/noblue/>
no longer exists but their error page is strictly 1024x768.

Please consider what the message of the article is about. For examples,
I can find a lot of articles promoting valid markup code, using web
standards, etc.. which have considerably a lot of validation errors.
Just visit microsoft.com for starters: the microsoft.com website has
been claiming to support approved W3C web standards for years and you'll
find that 99.999% of all their webpages fail to pass markup and CSS
validation. That's unfortunate, contradictory but the message should
still be heard: use valid markup code and valid CSS code and design
according to W3C web standards.

At least this site does practice what it preaches however, on my "wide
screen" monitor, their solution to the problem leaves the bottom half
of the screen blank. I don't think this is any better than leaving the
right hand side blank. Of the four sites they reference only one
<http://www.webtechniques.com/archives/1999/10/desi/> attempts "fluid
design" and it illustrates why the concept fails.

Written in october 1999 at a time where browsers (MSIE 4, MSIE 5.x, NS
4.x) had tons of CSS bugs, faulty implementation, incomplete support, etc.

The text is far too
wide to read comfortably and the menu at the top of the page is
designed exclusively for a 1024 pixel wide monitor.

These two both use the full width of the screen but neither are
satisfactory at the relatively modest "extremes" of 800x600 and
1680x1050 that I have used to test them. Their is ample evidence that
there is a comfortable width for a line of text

"Confortable width for a line of text" can be very relative to several
parameters which are outside the control of web designers. Hence more
reasons to not try to rigidly constraints the webpage design.

People should view Web sites the way they wish to view them, not the way
the web author expects people to view them, with the same screen
resolution, with the same monitor screen, with the same browser, medium,
etc..


and the print media

solve the problem by using columns. There is no comparable browser
compatible solution that fits within a strict topic definition of this
Usenet group.

Meeting a specific, particular defined screen resolution should never be
a goal by itself; scalable design, fluid, flexible design should always
be prefered, an on-going continuous goal.

HTML should be device-independent and media-independent. HTML is not a
formating language and never was designed to be device-dependent and
media-dependent. That does not mean one can not or should not set/define
max-width, max-height, min-width and min-height *_when and where_* it
makes sense (ie. for the screen media). Rendering a webpage on a 21 inch
monitor screen is quite different from a 14 inch one.

For mobile and small screen rendering/medium (SSR), styling via a proper
stylesheet should be defined for that media (mobile).

Bottom line is: Yes, CSS is a formating language. No HTML is not a
formating language.

Your post is worthy for pointing out that a multi-media, multi-device
friendly website is difficult to achieve. I can testify on this. E.g. at
mozilla.org and developer.mozilla.org, the website are not mobile or SSR
friendly. We've certainly discussed this issue (with Doug Turner, main
Minimo project manager).

Gérard

 

[dorayme]

You are mistaken. The columns widths are set in % (of window) with a
total max-width in ems,

If this is meant to imply that the cols grow at merely resizing
the browser window, it does not happen on my machine. Now read on
B, don't react.

Segall is not exactly mistaken. Perhaps he is not cottoning on to
something that is important to you, namely where font size
alterations are involved. He probably did not notice how it grew
on a big screen when one ups the text size. And this is another
element of a more sophisticated idea of "fluid design".

The term "fluid design" is too undefined to settle the matter. It
is pretty confusing for a lot of people as it is sometimes used
to cover the simple idea of the content growing to fill the
browser window (to picture this, imagine a graphic dependent page
and all the images dimensioned as percentages of the browser
window). Nothing to do with font size as such.

Another more likely example of a fluid design in this non 'font
variable' sense is a thumbnail gallery with a great many pictures
that are floated. They wrap and they adjust well to whatever the
size of the screen. Those with big screens (no matter about their
font requirements) get to take advantage of their screens. They
get to see more pictures than on a small screen, they scroll
less, etc.

In your example, there is none of this "taking advantage" in this
pure sense I am describing. I understand _your_ point very well,
it is a good one in many ways, please do not re-explain it. But
you need to take a deeper look at the idea if it is to connect
and mean things to the average punter.