UBB.Developers Forums UBB.threads 6 V6 Modifications Templates Larger Screen Monitors... not always good.

While working on things I decided to try and see what my page would look like at the common 800x600 resolution. If you have a screen larger than 15 inches, which for the last 6 years I hadn't, you will notice that some sites don't fully expand in your browser. MSN's site www.msn.com is one such example. If you look you will see that they have their table width set to 768 pixels wide. This looks good in 800x600 or higher as the size remains constant. So, wondering what my page, created at 1152x864, would look like at 768 pixels wide. To say the very least, it was not good.

Personally, I like it when a site uses the full width of my screen. Such layouts are called "fluid" and fill the available space in the browser. But, as much as I like sites that are able to use this space I do not like sites that were created on a larger screen and are not fluid. It's on these sites that users with smaller screens and resolutions end up scrolling right to see the entire page. When I used to encounter such a site I would just move on as it was annoying. I'll bet I am not the only one that moves on either.

So, now I'm encompassing the body of my pages in a single celled table that is center aligned. I use this to switch the width of the layout from 770 pixels to 100% so I can compare how it will look for myself and for others.

Just thought I would share this insight just in case someone else has been overlooking this aspect too.

Hey dave, I know what you mean. I have a nice 19" running a high res. and I do all my designs and work on that and forget what happens until I go to work and see it on our small monitors there.

I ran into a similar problem on this current site I'm working on, you can see it here:

www.broneah.com

I designed it on my machine, so to me it looked normal. Well, when you start stacking images horizontally if it gets too wide you eventually have the problem you mentioned, which I did not notice at the time. But I think I have the site updated now so it will work at any resolution. You can try it by draging the corner of your browser window and seeing it at various sizes and it looks good under almost all sizes

But yeah, its something I think a lot of people overlook

I know I can drag the screen to various widths but I wasn't always sure where the 800x600 mark was when doing it. Also, when using dreamweaver I can see what it looks like (for the most part) on the lower resolution as I'm working on it. This has been very helpfull for sure.

I'd like to put in my two cents. Although I'm pretty new to it, I've worked very hard to make my website pages fluid. Just about everything is in percentages with very few intentional line breaks. It looks good at different resolutions as well as different font sizes and scrunches up quite well. I understand that on Web TV there is no horizontal scrollbar so if you want your audience to see anything but the left side of your pages, the format needs to be fluid. Take a look . . . www.saynotogmos.org

That's looking really good. Great job.

WebTV has a resolution of 500 pixels wide (same as the tv, right?) so they do throw a wrench into the works. What I'm doing for them, since I seem to be getting alot of them lately, is creating a seperate template set for WebTV users and checking their user agent string and displaying accordingly.

You can get the latest WebTV emulator here: http://developer.msntv.com

Nothing like having "one more" browser laying around... lol

When I was doing heavy web work I had my desktop background set as a big picture that had various resolutions outlined. That way I could just size my browser window to any certain resolution to see how it looked. Simple trick that works pretty good.

I like that idea. Going to use it. Thanks.

I had a little program that resized the browser window exactly (and we usually got a design picture with a screenshot of a window in the right size). I also think Homesite could open the browser with the right size when viewing.

Nowadays I get window size information when resizing the window (and always have two 800 wide windows next to each other) instead.

[] So, now I'm encompassing the body of my pages in a single celled table that is center aligned. I use this to switch the width of the layout from 770 pixels to 100% so I can compare how it will look for myself and for others. [/]

Can you tell me how to do that or post a snippet of code for me? I'm learning how to edit HTML on the fly
This is exactly what I am dealing with now on my start page. (See link)

Something like this:

code:

<!--THIS PART GOES INTO THE GENERIC HEADER-->
<div align="center">
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">


THREADS WILL END UP GOING IN HERE


<!--THIS PART GOES INTO THE GENERIC FOOTER-->
</td>
</tr>
</table>
<p></p>
</div>

---

Then where it says 770 (which is a fixed pixel width) you can change to 100%.

So when you want to see what your site looks like on a very small monitor... change the width from 100% to to a fixed width like 640 etc....

Normally I would leave it on 100% so the site will expand to the full width of everyone's monitor.

Hope that helps.

Thanks Josh for following me from forum to forum

Well I tried adding that and it didnt do much.I probably have a lot of extra tags in my Generic Header and Header Insert since Im flying by the seat of my pants in the html editing (compliance is out the window) so I'll mess with it tomorrow.
This should shrink or stretch Threads when resizing the browser window correct?

Thanks again

Yes.

I should have said to put the first part before your existing header...
and the last part after your existing footer.

This basically "wraps" the whole thing inside a cell of a table.

Looks like your site is working correctly... it expands and contracts depending on the size of the browser window.

Threads doesn't go quite edge to edge... there's a percentage setting in the theme file for that. Yours looks to be about 90%.

But if you want to see what your site looks like on a small monitor... change the 100% in the table to 700 pixels (for example)... that'll stop it from stretching and you'll see what layout elements get squished etc...

You don't want users to scroll left and right.... so that'll show you problem areas in your layout... then you can make the adjustments, and put it back to 100%.

Hmm..It doesn't seem to be working.My UBBThreads pages still wont browsersize.

This is my Header-Insert

code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Emerald Forest Seattle </title>
<meta name="description" content="Gaming Servers">
<meta name="keywords" content="Aliens vs Predators,[SuX],SuX Clan, Anti-Cheat,Counter-Strike,Counter Strike,Half Life,Half-LIfe,CS server,Game Servers,Natural Selection,Day of Defeat">
<meta http-equiv="pragma" content="no-cache">

<!--THIS PART GOES INTO THE GENERIC HEADER--><div align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top">


<body bgcolor="#626d5c">

<center><p>
<table border="0" cellspacing="0" cellpadding="0" width="95%"><tr>
<td width="560" align="left" valign="middle">
<img src="/efslogo(1).jpg">
</td>
</tr><tr><td align="center" colspan="2">
<p>
<table border="0" cellspacing="1" cellpadding="2" width="95%" bgcolor="#000000">
<tr bgcolor="#424B3C">
<td align="center" width="20%"><b><a href="/faq.html" target="_new">Rules</a></b></td>
<td align="center" width="20%"><b><a href="/html/index.php" target="_new">Statistics</a></b></td>
<td align="center" width="20%"><b><a href="/index.html" target="_new">Live Status</a></b></td>
<td align="center" width="20%"><b><a href="/staff.html" target="_new">Staff</a></b></td>
<td align="center" width="20%"><b><a href="/Links.html" target="_new">Links</a></b></td>
</td>
</tr>
</table>
<br>

---

This is my Generic Header

code:
<tr>
  <td align="center">
        <table border="0" cellspacing="1" cellpadding="2" width="95%" bgcolor="#000000">
          <tr>
          <td width="20%" class="welcome">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_xclick">
            <input type="hidden" name="business" value="[email protected]">
            <input type="image" src="https://www.paypal.com/images/x-click-but04.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
            </form>
            <b>Send Money!</b>
          </td>
	  <td width="60%" td bgcolor="626d5c">
            <center><font color="white"><b>Welcome To The Emerald Forest-Play Nice!</B></font></center>
          </td>
          <td width="20%" align="right" class="welcome">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_xclick">
            <input type="hidden" name="business" value="[email protected]">
            <input type="image" src="https://www.paypal.com/images/x-click-but04.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
            </form>
            <b>Hurry!</b>

 </tr>
</td>
 </table>                
<br>

---

and I stuck this in the Footer

code:
<!--THIS PART GOES INTO THE GENERIC FOOTER--></td></tr></table><p></p></div>

---

Gratefull for your help Josh

Now are you saying that when you resize your window... nothing changes width at all?

It does for me.

Or do you mean that it doesn't quite go edge to edge?

If that's the case... then check your theme file for this:

Table width - all screens. (Can be a percentage or integer):


I suspect yours is on about 90% or so.... try 95% or 100% and you should see a difference. '

Make sure you've got the % sign for things to resize.

What I am saying is that when I drag my browser window smaller the page stays the same size and doesnt resize to fit like this particular page on my site


http://emeraldforestseattle.com/index.html

When making the browser window smaller I am forced to drag left or right when opening this page

http://emeraldforestseattle.com/index.php

It's tough to tell without the theme file percentage being higher.... but the index.php page does resize for me.

Now there is a limit to how small it can go.. there are graphics and things that don't resize.. and thus... they can only be squeezed so far.

But drag it wider... and you'll see the table cells stretch out.