detecting monitor resolutions

[Carolyn Marenger]

Last time I checked there was no way of determining viewport sizes. Has
there been any change?

I like using three column layouts, but that breaks down when using narrow
viewports. I would like to have a page that uses a three column layout for
anyone with a specific minimum width viewport, and have the layour (via
CSS) downgrade to a two or one column layout for those with narrow
viewports.

Has anyone experimented with that?

Thanks, Carolyn

 

[Andy Dingley]

I would like to have a page that uses a three column layout for
anyone with a specific minimum width viewport, and have the layour (via
CSS) downgrade to a two or one column layout for those with narrow
viewports.

You can do most of this just with decent CSS design, and by placing the
three "columns" in the right order in the HTML.

For anything smarter than that, then it sounds like an ideal job for
client-side JavaScript. Easy enough to do, just make sure that the
fallback still works with JS off -- and that sounds easy enough itself,
just let the 3-column CSS handle it as before.

 

[Travis Newbury]

Last time I checked there was no way of determining viewport sizes. Has
there been any change?

In my monitor size? Why yes there has. I bought a huge flat screen a
few months back. Getting old and needed something bigger. Thanks for
asking.

Has anyone experimented with that?

Flexible is only so flexible. Everything eventually breaks

 

[David Dorward]

Last time I checked there was no way of determining viewport sizes. Has
there been any change?

Here's a post from 1997 that describes how to find that out:
http://groups.google.com/group/comp.lang.javascript/msg/f1c8d5b54fe95524

I like using three column layouts, but that breaks down when using narrow
viewports. I would like to have a page that uses a three column layout for
anyone with a specific minimum width viewport, and have the layour (via
CSS) downgrade to a two or one column layout for those with narrow
viewports.

If you go down that route, then I suggest you pick one layout as a
default, and have a <link> document.written that overrides it under the
circumstances you define. (I wouldn't leave non-JS users with no style
at all).

 

[Jonathan N. Little]

Flexible is only so flexible. Everything eventually breaks

Yep, not much works at 50 pixels! But as Andy pointed out placing the
three "columns" in the right order and the use of min-width on the
columns would do as you wish. BUT, and this is the usual caveat, IE
doesn't support min-width property so you will either have to:

1) put up with IE squishing your 3 columns
2) employ one of the numerous CSS hacks
3) Ugh! Use a spacer image to fix the min width!

I personally would opt for #1

 

[David Segall]

You can do most of this just with decent CSS design, and by placing the
three "columns" in the right order in the HTML.

Could you post (or reference) a sample please? I can't see how you can
persuade "column 2.1" to appear below "column 1" and "column 2.2" to
appear above "column 3" for the two column layout but between them, in
the right order, for the three column layout.

 

[Toby Inkster]

If you go down that route, then I suggest you pick one layout as a
default, and have a <link> document.written that overrides it under the
circumstances you define. (I wouldn't leave non-JS users with no style
at all).

CSS Media Queries[1] are great for doing different things at different
page sizes. Currently only Opera 7+ and the latest Webkit (Safari, etc)
nightly builds support them, but I wonder if support can be added for
other browsers via Javascript, a la Dean Edward's "IE7" collection.

____
1. W3C CSS 3 Candidate Recommendation
http://www.w3.org/Style/CSS/current-work#mediaqueries

2. http://dean.edwards.name/IE7/

 

[Andy Dingley]

Could you post (or reference) a sample please?

Try the usual suspects: glish.com etc.

I can't see how you can
persuade "column 2.1" to appear below "column 1" and "column 2.2" to
appear above "column 3" for the two column layout but between them, in
the right order, for the three column layout.

You can't. Instead you have to code the HTML in the "degraded" order,
then you code the CSS to re-arrange them in the "optimum" state. This
can use CSS absolute positioning (unpleasant though that is).

If navigation is important and the LHS menu is appropriate to appear
first when degraded, then this is fine - the two orders are equivalent.
The RHS "menu" is assumed to be least important and ends up as a
footer.

If the page content is most important, i.e. it's a "leaf" page (e.g. a
news story rather than a headlines list) and they've already navigated
about as far as you expect them to, then it might be better to have the
centre column first (HTML wise). In this case you have to juggle the
CSS positions.

I find this ordering issue, even the problem with "leaf pages", to be a
significant factor when designing HTML web pages and expecting them to
be immediately accessible to 200px wide mobile devices, without any
re-coding.


If I cared more about the "halfway state" when I could support 2
columns but not 3, then I might start using JavaScript to re-arrange
things explicitly. Generally though I assume that I've either got loads
of space, or minimal space.

 

[Jim Moe]

I like using three column layouts, but that breaks down when using narrow
viewports. [...]

How narrow is "narrow"?

 

[Carolyn Marenger]

I like using three column layouts, but that breaks down when using narrow
viewports. [...]

How narrow is "narrow"?

That would depend on the content in each column, but off the top of my head,
600 pixels or so starts to get cramped for three columns.

Carolyn

 

[Carolyn Marenger]

Here's a post from 1997 that describes how to find that out:
http://groups.google.com/group/comp.lang.javascript/msg/f1c8d5b54fe95524

Thanks. I will look into that.

If you go down that route, then I suggest you pick one layout as a
default, and have a <link> document.written that overrides it under the
circumstances you define. (I wouldn't leave non-JS users with no style
at all).

Not something I would do. Being that I am one of those non-JS users myself.

Carolyn

 

[Chaddy2222]

Yep, not much works at 50 pixels! But as Andy pointed out placing the
three "columns" in the right order and the use of min-width on the
columns would do as you wish. BUT, and this is the usual caveat, IE
doesn't support min-width property so you will either have to:

1) put up with IE squishing your 3 columns
2) employ one of the numerous CSS hacks
3) Ugh! Use a spacer image to fix the min width!

I personally would opt for #1

IE7 does support min-width.
But personally, I would just set each colum as a percentage of the
screen (say the main content div at 80%), and have the left and right
colums at 10% each. That way (everything fits on the screen) even at
600px wide. It would just look a bit squished.

 

[Neredbojias]

To further the education of mankind, Carolyn Marenger

Last time I checked there was no way of determining viewport sizes.
Has there been any change?

I like using three column layouts, but that breaks down when using
narrow viewports. I would like to have a page that uses a three
column layout for anyone with a specific minimum width viewport, and
have the layour (via CSS) downgrade to a two or one column layout for
those with narrow viewports.

Has anyone experimented with that?

Can't you use floats? Anyway, check out my index page at:

http://www.neredbojias.com/

Under a generous normal range of resolutions and widths at normal font
size, it (basically) goes from 4 columns to 1 column.

 

[Carolyn Marenger]

To further the education of mankind, Carolyn Marenger


Can't you use floats? Anyway, check out my index page at:

http://www.neredbojias.com/

Under a generous normal range of resolutions and widths at normal font
size, it (basically) goes from 4 columns to 1 column.

I checked it out, and I like how it works. Now, I just need to figure out
the mechanics of it. I'll wait until I am a little more awake. Thanks!

Carolyn

 

[Neredbojias]

To further the education of mankind, Carolyn Marenger

I checked it out, and I like how it works. Now, I just need to figure
out the mechanics of it. I'll wait until I am a little more awake.
Thanks!

Most welcome and good luck with whatever there can help you.