On 4/27/07, Justin Frim <jfrim@xxxxxxxxxxx> 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>
<!-- Headers go here -->
<center><table cellpadding="0" cellspacing="0" border="0"><tr
valign="top" align="left"><td><!-- bounding box start -->
<table>
<tr>
<td width="120">
<!-- Menu column made with 120px wide graphics goes here -->
</td>
<td width="*">
<!-- Liquid / stretchy text and other page content goes here -->
</td>
</tr>
</table>
</td></tr></table></center><!-- bounding box end -->
<!-- Footers go here -->
</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
--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php
