Re: [PHP] Re: posting variables to parent frame

#1 (**permalink**) 04-27-2007

Edward Vermillion wrote:

> So you're saying that if I "maximize" my browser window, all the
> sites that you made with tables will "actually look good", at 1680 x
> 1050, because they are stretchy-pages?
>
> Honestly, I have no clue as to why some folks think that a "stretchy"/
> liquid/dynamic layout has anything to do with good design... I have
> yet to see one that did anyway*... :P
>
> On the other hand, if I increase my font size (which I almost always
> do) I expect the layout to "grow" so that I can actually read what's
> on the page, without the words all running together. But that's a
> different thing than being "stretchy".
>
> Ed
>
>[*] I'm often wrong, but I'm open to different viewpoints if you've
> got an example to prove me wrong. ;)

Ok, this is attempt #2 since the list rejected the previous attempt.

Well one of my biggest pet peeves with absolute-positioned-element pages
is if I maximize my window, I still just have a tiny little blob in the
centre which has the actual page content, with lines of text still
needlessly wrapping around their artificial constraints. Then I see
trash like "this site looks best in 1024x768" or something similar.
What ever happened to device-independent design? What's next, a trip
down memory lane to 1998 when sites had "looks best with Internet
Explorer" and "looks best with Netscape" plastered all over them!? I
scoffed at anyone who back in the day used to say "most people view web
sites at 800x600, so design for that". No. I say design something
that's still readable at 640x480, and make it liquid so it will expand
to whatever's available up to the point where it no longer needs
expansion. At that point, just make sure it's centered.

So what I usually do is I put my page content in a rectangular
boundary. (sometimes I'll put page headers and footers outside this
bounding box, but the main content stays inside.) I then left-justify
all the inner content to the box. (English reads left-to-right, so
left-justified paragraphs look 10 000 times better centered text.) But
if someone expands their window to a huge size, it looks dorky to have
_everything_ stuck to the left of the window! So the *bounding box* is
what's centered in the window.

Everything inside the bounding box is then set with percentage-based
widths where "stretchyness" is ok (eg. for blocks of text), or pixel
values where it should never change (eg. for images placed on the
page). For the percentage-based widths, this is a percentage of the
bounding box size. The actual size of the bounding box is nice and
liquid, stretching as wide as necessary until there are no more lines of
text that need to be wrapped.

I think that results in the best page layout, all the way from tiny PDA
screens at 160x240 to your 1680x1050 behemoth! :-)

If there's an elegant way of doing this with CSS, let me know. But I've
found this usually works well for a simple site layout that has headers
and footers as wide as the window, and a menu down the left made with
120px wide graphics.

<?php echo "Here's some PHP code so this list doesn't consider my post
O.T."; ?>
<body>

<center><table cellpadding="0" cellspacing="0" border="0"><tr
valign="top" align="left"><td>
<table>
<tr>
<td width="120">

</td>
<td width="*">

</td>
</tr>
</table>
</td></tr></table></center>

</body>

The coments commented as "Liquid / stretchy text..." can then have divs
completely dynamic tables and whatever, which are all scaled to whatever
size that particular table cell (with width="*") happens to end up being
rendered at.

#2 (**permalink**) 04-27-2007

On 4/27/07, Justin Frim <jfrim@idirect.com> wrote:
> Edward Vermillion wrote:
>
> > So you're saying that if I "maximize" my browser window, all the
> > sites that you made with tables will "actually look good", at 1680 x
> > 1050, because they are stretchy-pages?
> >
> > Honestly, I have no clue as to why some folks think that a "stretchy"/
> > liquid/dynamic layout has anything to do with good design... I have
> > yet to see one that did anyway*... :P
> >
> > On the other hand, if I increase my font size (which I almost always
> > do) I expect the layout to "grow" so that I can actually read what's
> > on the page, without the words all running together. But that's a
> > different thing than being "stretchy".
> >
> > Ed
> >
> >[*] I'm often wrong, but I'm open to different viewpoints if you've
> > got an example to prove me wrong. ;)
>
>
> Ok, this is attempt #2 since the list rejected the previous attempt.
>
> Well one of my biggest pet peeves with absolute-positioned-element pages
> is if I maximize my window, I still just have a tiny little blob in the
> centre which has the actual page content, with lines of text still
> needlessly wrapping around their artificial constraints. Then I see
> trash like "this site looks best in 1024x768" or something similar.
> What ever happened to device-independent design? What's next, a trip
> down memory lane to 1998 when sites had "looks best with Internet
> Explorer" and "looks best with Netscape" plastered all over them!? I
> scoffed at anyone who back in the day used to say "most people view web
> sites at 800x600, so design for that". No. I say design something
> that's still readable at 640x480, and make it liquid so it will expand
> to whatever's available up to the point where it no longer needs
> expansion. At that point, just make sure it's centered.
>
> So what I usually do is I put my page content in a rectangular
> boundary. (sometimes I'll put page headers and footers outside this
> bounding box, but the main content stays inside.) I then left-justify
> all the inner content to the box. (English reads left-to-right, so
> left-justified paragraphs look 10 000 times better centered text.) But
> if someone expands their window to a huge size, it looks dorky to have
> _everything_ stuck to the left of the window! So the *bounding box* is
> what's centered in the window.
>
> Everything inside the bounding box is then set with percentage-based
> widths where "stretchyness" is ok (eg. for blocks of text), or pixel
> values where it should never change (eg. for images placed on the
> page). For the percentage-based widths, this is a percentage of the
> bounding box size. The actual size of the bounding box is nice and
> liquid, stretching as wide as necessary until there are no more lines of
> text that need to be wrapped.
>
> I think that results in the best page layout, all the way from tiny PDA
> screens at 160x240 to your 1680x1050 behemoth! :-)
>
> If there's an elegant way of doing this with CSS, let me know. But I've
> found this usually works well for a simple site layout that has headers
> and footers as wide as the window, and a menu down the left made with
> 120px wide graphics.
>
> <?php echo "Here's some PHP code so this list doesn't consider my post
> O.T."; ?>
> <body>
> 
> <center><table cellpadding="0" cellspacing="0" border="0"><tr
> valign="top" align="left"><td>
> <table>
> <tr>
> <td width="120">
> 
> </td>
> <td width="*">
> 
> </td>
> </tr>
> </table>
> </td></tr></table></center>
> 
> </body>
>
> The coments commented as "Liquid / stretchy text..." can then have divs
> completely dynamic tables and whatever, which are all scaled to whatever
> size that particular table cell (with width="*") happens to end up being
> rendered at.
>

I guess the same can be done with <div>... But the main problem is
that there's no real standard for resolution. I see people having
resolution set at 800x600, and 1600x200, how is it ever possible to
make a page look good at both? Resizing it to 1600x1200 would give you
an enormous page, while keeping it at 800 width makes it so damn
small. So lets say you re size it to 1024 width, then you still have
such damn borders on both sides. That doesn't look nice either. And
how would you do deal with pages that have a layout based on pictures?
Should you create a header that is 1600 width, and resize it down
until 800 when a user with 800x600 visits? and all images used at
borders and corners? That's the biggest problem in dynamic layouts.
Atm, i repeat small images around the borders, but that's a real pain
in the ass. For now, i mostly design static pages, that are best
viewable with 1024x768, and resolutions higher then that have those
damn borders... If sombody has a better way, i'd like to hear :)

Tijnema

#3 (**permalink**) 04-27-2007

Tijnema ! wrote:
> I guess the same can be done with <div>... But the main problem is
> that there's no real standard for resolution. I see people having
> resolution set at 800x600, and 1600x200, how is it ever possible to
> make a page look good at both? Resizing it to 1600x1200 would give you
> an enormous page, while keeping it at 800 width makes it so damn
> small. So lets say you re size it to 1024 width, then you still have
> such damn borders on both sides. That doesn't look nice either. And
> how would you do deal with pages that have a layout based on pictures?
> Should you create a header that is 1600 width, and resize it down
> until 800 when a user with 800x600 visits? and all images used at
> borders and corners? That's the biggest problem in dynamic layouts.
> Atm, i repeat small images around the borders, but that's a real pain
> in the ass. For now, i mostly design static pages, that are best
> viewable with 1024x768, and resolutions higher then that have those
> damn borders... If sombody has a better way, i'd like to hear :)

This attitude is why most web "design" sucks. It seems to me that the
really successful applications these days are "designed" to be flexible.
Always use relative sizes like % or preferably em, never use px or pt.
That will allow your users to change the font size on their browser to
their preference without screwing up your design. Yes, it will require
you to do more testing at different font sizes, but it will be worth it.

As far as images go, there are ways to get around this problem by using
relative size definitions and making the actual size of the image a
compromise between looking good when your site is viewed with a large
font size, and not being too big that site performance suffers. At
smaller font sizes the browser will resize the image for you (with
varying degrees of quality). I'm sure this is one area of browser
technology that will see some innovations in the next few years.

Fixed width sites are bad unless 1) they resize properly with font size
changes, or 2) the user is using a browser that can properly zoom fixed
layouts (opera does this very well).

Content is king. There has been a period recently when this wasn't the
case, but it's coming back as the primary concern for most web users -
the fluff don't work no more! And if content is king, the accessibility
of that content is the queen - the thing that makes the king look good!

People are easily turned off something, and not being able to read the
text on a site, or having to battle against a poor user experience for
the sake of a pretty design will easily prevent your site from being a
success.

-Stut

#4 (**permalink**) 04-27-2007

At 11:56 AM +0200 4/27/07, Tijnema ! wrote:
>I guess the same can be done with <div>... But the main problem is
>that there's no real standard for resolution. I see people having
>resolution set at 800x600, and 1600x200, how is it ever possible to
>make a page look good at both? Resizing it to 1600x1200 would give you
>an enormous page, while keeping it at 800 width makes it so damn
>small. So lets say you re size it to 1024 width, then you still have
>such damn borders on both sides. That doesn't look nice either. And
>how would you do deal with pages that have a layout based on pictures?
>Should you create a header that is 1600 width, and resize it down
>until 800 when a user with 800x600 visits? and all images used at
>borders and corners? That's the biggest problem in dynamic layouts.
>Atm, i repeat small images around the borders, but that's a real pain
>in the ass. For now, i mostly design static pages, that are best
>viewable with 1024x768, and resolutions higher then that have those
>damn borders... If sombody has a better way, i'd like to hear :)
>
>Tijnema

If you use css and em's properly, it doesn't make any difference what
the user's monitor size is.

For example, look at this:

http://earthstones.com/

That's my wife's site and I based the entire site on em's -- as explained here:

http://sperling.com/examples/zoom/

IMO, static sites don't use the medium well -- the web is not print.

Cheers,

tedd

PS: I'm redoing her site -- it's dated.
--
-------
http://sperling.com http://ancientstones.com http://earthstones.com

#5 (**permalink**) 04-27-2007

On 4/27/07, tedd <tedd@sperling.com> wrote:
> At 11:56 AM +0200 4/27/07, Tijnema ! wrote:
> >I guess the same can be done with <div>... But the main problem is
> >that there's no real standard for resolution. I see people having
> >resolution set at 800x600, and 1600x200, how is it ever possible to
> >make a page look good at both? Resizing it to 1600x1200 would give you
> >an enormous page, while keeping it at 800 width makes it so damn
> >small. So lets say you re size it to 1024 width, then you still have
> >such damn borders on both sides. That doesn't look nice either. And
> >how would you do deal with pages that have a layout based on pictures?
> >Should you create a header that is 1600 width, and resize it down
> >until 800 when a user with 800x600 visits? and all images used at
> >borders and corners? That's the biggest problem in dynamic layouts.
> >Atm, i repeat small images around the borders, but that's a real pain
> >in the ass. For now, i mostly design static pages, that are best
> >viewable with 1024x768, and resolutions higher then that have those
> >damn borders... If sombody has a better way, i'd like to hear :)
> >
> >Tijnema
>
> If you use css and em's properly, it doesn't make any difference what
> the user's monitor size is.
>
> For example, look at this:
>
> http://earthstones.com/
>
> That's my wife's site and I based the entire site on em's -- as explained here:

When i zoom in as max as possible, with current resolution @ 1280x1204
(not even 1600x1200) i still have borders...
>
> http://sperling.com/examples/zoom/
>
> IMO, static sites don't use the medium well -- the web is not print.

Never knew anything of ems, i use % for al dynamic stuff. Is there any
diference between those 2?

>
> Cheers,
>
> tedd
>
> PS: I'm redoing her site -- it's dated.

haha, you're also on that site :P
It's more youre site then hers i guess, you made it, and you're on it.
She's on it too but well, what more? :P

Tijnema

#6 (**permalink**) 04-27-2007

On 4/27/07, tedd <tedd@sperling.com> wrote:
> At 3:44 PM +0200 4/27/07, Tijnema ! wrote:
> >>
> >
> >Never knew anything of ems, i use % for al dynamic stuff. Is there any
> >diference between those 2?
>
> Google "em css":
>
> http://htmlhelp.com/reference/css/units.html
>
> Lot's of stuff there -- just another way to size stuff. However, IMO,
> it's the best method.
>
> Cheers,
>
> tedd

Ah i see, ems are relative to the font size, and % is relative to the
browser width/height.
Maybe a combination of both would create "the perfect" (or something
close to that) layout :)

Tijnema

#7 (**permalink**) 04-27-2007

On Fri, 2007-04-27 at 16:19 +0200, Tijnema ! wrote:
> On 4/27/07, tedd <tedd@sperling.com> wrote:
> > At 3:44 PM +0200 4/27/07, Tijnema ! wrote:
> > >>
> > >
> > >Never knew anything of ems, i use % for al dynamic stuff. Is there any
> > >diference between those 2?
> >
> > Google "em css":
> >
> > http://htmlhelp.com/reference/css/units.html
> >
> > Lot's of stuff there -- just another way to size stuff. However, IMO,
> > it's the best method.
> >
> > Cheers,
> >
> > tedd
>
> Ah i see, ems are relative to the font size, and % is relative to the
> browser width/height.
> Maybe a combination of both would create "the perfect" (or something
> close to that) layout :)

% is relative to the parent.

Cheers,
Rob.
--
..------------------------------------------------------------.
| InterJinn Application Framework - http://www.interjinn.com |
:------------------------------------------------------------:
| An application and templating framework for PHP. Boasting |
| a powerful, scalable system for accessing system services |
| such as forms, properties, sessions, and caches. InterJinn |
| also provides an extremely flexible architecture for |
| creating re-usable components quickly and easily. |
`------------------------------------------------------------'

#8 (**permalink**) 04-27-2007

Tijnema ! wrote:
> I guess the same can be done with <div>... But the main problem is
> that there's no real standard for resolution. I see people having
> resolution set at 800x600, and 1600x200, how is it ever possible to
> make a page look good at both? Resizing it to 1600x1200 would give you
> an enormous page, while keeping it at 800 width makes it so damn
> small. So lets say you re size it to 1024 width, then you still have
> such damn borders on both sides. That doesn't look nice either. And
> how would you do deal with pages that have a layout based on pictures?
> Should you create a header that is 1600 width, and resize it down
> until 800 when a user with 800x600 visits? and all images used at
> borders and corners? That's the biggest problem in dynamic layouts.
> Atm, i repeat small images around the borders, but that's a real pain
> in the ass. For now, i mostly design static pages, that are best
> viewable with 1024x768, and resolutions higher then that have those
> damn borders... If sombody has a better way, i'd like to hear :)
>
> Tijnema

I posted something in response to Ed by the damn list filters blocked it
as O.T.

Anyhow, essentially I said my layout conventions will expand as much as
necessary as the user expands their window size. Once there is no more
text being wrapped, no further expansion is possible. (And it wouldn't
make sense to do so anyhow, even if it were possible.) At that point,
it just centers the *block* of page content, while still keeping the
actual text left-justified within that block.

I think that's a hell of a lot better than site designs fixed for a
width of 800px or 1024px or whatever, because if more space becomes
available (like say 1600px), they still wrap the text within a tiny
tunnel-vision 800px (or whatever) fixed-width block. That's unnecessary
and gross.

An intuitive site designer should be able to identify what parts of
their layout _can_ expand without looking stupid, and what parts have to
stay at a specific size. Then design it accordingly so those sections
that can expand, will expand (given the opportunity to do so... ie.
being viewed in a large window.)

#9 (**permalink**) 04-27-2007

Tijnema ! wrote:
> [snip]
> Should you create a header that is 1600 width, and resize it down
> until 800 when a user with 800x600 visits? and all images used at
> borders and corners? That's the biggest problem in dynamic layouts.
> Atm, i repeat small images around the borders, but that's a real pain
> in the ass. For now, i mostly design static pages, that are best
> viewable with 1024x768, and resolutions higher then that have those
> damn borders... If sombody has a better way, i'd like to hear :)

Oh yeah, forgot to mention. I usually headers and footers outside of my
"centered expandable block", so they stretch the whole width of the
screen even if the centered block doesn't.

Again, using the hated "tables for layout" approach, I create a table
with width=100%, and as many columns as I need for the header or footer
content. Then I use a tiled background image in the table for making
the prettyness stretching across the width page.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode