Re: [css-d] Proportional Layouts

[Jason Yamada-Hanff]

Thanks for all the responses.  I was not aware of the upcoming media 
query thing in CSS3, I think I'll wait and watch out for wide browser 
support.  I was also not aware of the Javascript option.


I don't want to get into it too much because I think it is more of a 
theoretical issue but as for whether I should try to do it at all, I 
think it is more complicated than simply whether we should or should not 
do it.  I am aware of the text sizing, text length, and picture sizing 
issues inherent in proportional layouts - a search for creative 
solutions to those issues is one of the main reasons why I asked the 
question here.  I don't think that we should quash the whole idea 
because in some layouts, without some other changes, the line length 
will be over 35 ems.


Currently, I own a 1920x1200 screen.  That screen resolution was well 
within my modest budget's reach about 2 years ago - and there are much 
much bigger screens to be had.  I believe high-res screens will soon 
represent a significant chunk of visitors.  In other uses, a high-res 
screen means more functionality, more viewing space, greater usability.  
Currently, almost none of this is true when surfing a webpage.  To me, 
this is a forwards compatibility, and has general implications for 
allowing desginers to ensure consistency through both the screens of the 
past and the screens of tomorrow (not to mention the screens of today).


But again, I suppose this is a theoretical discussion that is more 
acceptable in another forum... but interesting nonetheless

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Proportional Layouts

[Roberto Gorjão]

Christy,

Maybe you were referring yourself to this page...: 
http://www.maxdesign.com.au/presentation/em/


Roberto

--

Christy Collins wrote:

  There is a web page that I have seen posted to this list about the 
best / most easily read widths for a block of text.  I don't have the 
link, maybe someone else will post.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Proportional Layouts

[Christy Collins]

On Friday, August 5, 2005, at 04:30 AM, Gunlaug Sørtun wrote:


Then comes my question: is proportional scaling a good idea?
Personally I don't think proportional pages/elements are of much use in
most cases, and may be counter-productive in some cases because they 
may

end up not fitting anywhere.
Adjusting parts of a page proportional to window-size may work perfect
though.



This is sort of where I am at with this issue - I used to do it, but 
then I realized that a really wide block of text is just hard to read.  
There is a web page that I have seen posted to this list about the best 
/ most easily read widths for a block of text.  I don't have the link, 
maybe someone else will post.


-Christy

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Proportional Layouts

[Martin Heiden]

Jason,

  I think that this is an interesting idea. Right now I try to make my
  layouts scale with the text-size, which leads to some resolution
  problems regarding images and lots of sizing issues with
  background-images. But with some planning it is really nice.

  When media-queries (CSS3) will be better supported, one could test
  the screen/window width and serve different styles (incl.
  background-images) for different resolutions.

  Today you could do some tests with Opera > 7 which already supports
  media queries.

  http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708/

regards,

  Martin

 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Proportional Layouts

[Gunlaug Sørtun]

Jason Yamada-Hanff wrote:

Of course, a fluid layout fits the bill to a certain extent except 
that in my case, the ratios of the container width/height and 
sidebar/content widths are essential design aspects and so those 
ratios must be retained.


My question is a practical one - is this something that I will be 
able to roll-out with my site?  is it achievable in CSS or will it 
require scripting?  how could I get such a thing to work?


I'm testing pages across 3840px screen-width in all browsers, so I have
an idea about what you're after. I've played with proportional scaling
as part of mostly fluid designs, but once the fun was over I scrapped
most proportional scaling, and limited the fluidity.

No problem doing it with pure CSS - but browsers are a little behind.
1: 
You can hit any screen anyway you like, but only Opera is to some degree
able to follow up on it, and will make it look exactly as you want (but
doesn't need it). Firefox is slowly catching up on mediaqueries, but no
working solution there yet, AFAIK.

2: Proportional scaling based on em/font-size is an option. Plenty of
sites around, but they are often not using it to scale all elements,
because of the problems with image-resolution among other things.

3: Scaling everything based on percentage of window-width is also
possible, but a bit tricky. Besides, IE/win is not very good at scaling
images.

Then comes my question: is proportional scaling a good idea?
Personally I don't think proportional pages/elements are of much use in
most cases, and may be counter-productive in some cases because they may
end up not fitting anywhere.
Adjusting parts of a page proportional to window-size may work perfect
though.

Opera can zoom as the user wants, and even shrink the page to make it fit.
IE6 can also zoom, but need a user stylesheet for it.

My conclusion is that: yes, it can be done but it may not improve the
experience for the end-user.

regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Proportional Layouts

[Roberto Gorjão]

Olá Jason,

One of the best attempts I know of to do what you suggest was delivered 
by Dan Cameron (aka: the man in blue). His solution depends on scripting 
but it is possible to choose a default size for those users who have not 
JavaScript. Images are another problem, as, when stretched, they lose 
definition. Even if you make them big enough to accommodate the biggest 
size that a liquid layout may require, they always lose definition if 
they are not in their natural size. The implementation of Dan Cameron's 
is somewhat difficult and tends to crash Explorer when some extreme 
sizes are required or when the resizing of the browser is done manually 
and too fast.


http://www.themaninblue.com/experiment/BrowserWidth/
http://www.themaninblue.com/writing/perspective/2003/12/22/

Hth.

Cumprimentos,

Roberto

---

Jason Yamada-Hanff wrote:

Wouldn't it be great if a layout would scale to automatically optimize 
viewing on any screen on any viewport size - a layout that is 
proportional to the viewport (within certain limits, of course)?  This 
flexibility would also be useful in terms of maintaiming design intent 
through text resizing.


Of course, a fluid layout fits the bill to a certain extent except 
that in my case, the ratios of the container width/height and 
sidebar/content widths are essential design aspects and so those 
ratios must be retained.


My question is a practical one - is this something that I will be able 
to roll-out with my site?  is it achievable in CSS or will it require 
scripting?  how could I get such a thing to work?


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Proportional Layouts

[Jason Yamada-Hanff]

Recently, I've been experimenting with a "flash-aesthetic" rectangular 
box layout - fixed height and width that is somewhat smaller than the 
viewport (at least for the homepage).  When I coded the page to fill a 
800x600 screen, the whole thing (including the text) looked tiny on my 
1920x1200 screen.


I am somewhat used to things looking tiny on my screen, but this time it 
made me wonder why so many websites took up so little of my screen real 
estate.  Wouldn't it be great if a layout would scale to automatically 
optimize viewing on any screen on any viewport size - a layout that is 
proportional to the viewport (within certain limits, of course)?  This 
flexibility would also be useful in terms of maintaiming design intent 
through text resizing.


Of course, a fluid layout fits the bill to a certain extent except that 
in my case, the ratios of the container width/height and sidebar/content 
widths are essential design aspects and so those ratios must be retained.


My question is a practical one - is this something that I will be able 
to roll-out with my site?  is it achievable in CSS or will it require 
scripting?  how could I get such a thing to work?


Thanks for the help/direction!

A link to a gif of a very rough draft of the layout in question is 
provided below:

http://www.sixteenfeet.com/layout.gif
(The ellipse with "CYCLE" inside is an absolutely positioned div with a 
bg image, that element must stay in that particular relation to the 
edges of the other divs through resizing, yipes! Also, the gray footer 
background is for development purposes only.)

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/