Forum Moderators: phranque

Message Too Old, No Replies

Monitor Resolution Issues

What considerations when designing?

         

wildwestica

3:34 am on Apr 9, 2003 (gmt 0)

10+ Year Member



Hello Forum. Usability tests for my all-CSS site are presenting numerous problems. The latest of which has to do with the "binocular" effect, where the elements are so large it is like looking through binoculars. Everything is huge and only a portion of the site is visible. Site was viewed on PCs using both IE 5.5 and Netscape 4.7 at the local library. The library webmaster said it has to do with graphics cards in the computers. Looks great on my home computer, which has a graphics card circa 1997. I pulled up the ESPN site - which from reading this forum I know is also CSS - and it too was zoomed in.
Here is the top code (some may recognize this code from an earlier post where I was having difficulty getting site to load on Macs)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE> title here </TITLE>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="StyleShe/indApr.css" type="text/css" media="screen"/>
The other conundrum occurred when I viewed the site next day on a PC using IE6 at yet another library. Everything on the page was scrunched up in one corner of the monitor. There was no revised uploading in between these viewing events.
Appreciate your help …

grahamstewart

4:24 am on Apr 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Wow! Thats a weird one! :D

Don't see why the graphics card would affect the element size like that. Sounds like FUD to me.

Umm.. well I guess its back to basics...

  • Have you validated both the HTML and the CSS?

  • What units are you using to define your element sizes in?

  • Which elements in particular were affected? (e.g. was the text large or just the div)
  • grahamstewart

    4:29 am on Apr 9, 2003 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    Afterthought: maybe someone had just messed with text size controls at the library? Look at your page in IE and then set the View->Text Size->Largest menu option.

    wildwestica

    2:01 pm on Apr 9, 2003 (gmt 0)

    10+ Year Member



    font-size:12px; although it looked like 24px at the library.
    For scalabilty, someone suggested font-size: small; but this would not scale other elements.

    Aside: Netscape actually displayed the site, albiet billboard size. Whereas before it would show text only.

    As for scrunched up, all elements were stacked up, including text, images, and all unique div ID assignments. Elements were all huddled together in a corner.

    martinibuster

    2:27 pm on Apr 9, 2003 (gmt 0)

    WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



    It sounds like you are creating the site using a monitor set at 1024x768, then experiencing the super-size while viewing it on a monitor set at 800x600.

    This sounds like a monitor resolution issue, not css.

    On the super-size pc, right-click the desktop, go to Properties, then click Settings in order to verify the resolution.

    The scrunch up? NN 4.7 won't properly display a design that heavily relies on css for formatting, particularly in a table-less design.

    wildwestica

    2:40 pm on Apr 9, 2003 (gmt 0)

    10+ Year Member



    My Monitor setting reads 1280 x 1024. I also suspected the binocular effect was due to monitor res rather than graphics card (since my graphics card is ancient.
    The scrunched effect was not in Net but rather IE6.
    Site displayed OK at one location of computers yet scrunched at a different location the next day.
    Wonder if scrunching may have anything to do with using a new trial of a third party FTP. Perhaps something in the uploading or a file corruption?

    martinibuster

    3:02 pm on Apr 9, 2003 (gmt 0)

    WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



    Looks great on my home computer... My Monitor setting reads 1280 x 1024

    That's why it looks great, because of the higher resolution.

    Check the resolution of the monitors in which you see the Zoom Effect, I'll bet you'll see a lower resolution (800x600).

    Sounds like one element of the problem is monitor resolution.

    grahamstewart

    3:16 pm on Apr 9, 2003 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    My Monitor setting reads 1280 x 1024

    Doh! That explains the 'binocular effect' anyways.

    A 12px font will always be (about) 12 pixels high - regardless of the screen resolution. I guess your library is using a very low screen res (like VGA 640x480).

    On your 1280x1024 display 12 pixels is about an 85th of the screen height.
    Whereas on a 640x480 display 12 pixels accounts for a 40th of the screen height.

    To mimic this effect while testing I suggest you install the Screen Size favlets from [tantek.com...]
    These simply allow you to resize your browser window to the appropriate dimensions so you can see (roughly) what people on lower res displays will see.

    As for the bunching up problem. Not sure why it would look ok on your PC but not the one at the library. You could check for corruption during the upload by validating the online pages (the WDG Validator [htmlhelp.com] can validate an entire site in one go for you).

    (Incidentally, my sincere apologies to the librarian: he was dead right. If that is the best resolution they can run the PC at then it is indeed "to do with the graphics cards" - because they clearly dont have enough memory on them!)

    martinibuster

    3:43 pm on Apr 9, 2003 (gmt 0)

    WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



    grahamstewart

    Monitor Resolution, Yes. That's what I've saying for the last two posts.

    Additionally, you hardly see monitor resolutions of 640x480, that's for a very small 14 inch to 15 inch monitor. 640x480 is not likely the resolution in this case.

    What you'll run into in significant numbers, as far as smaller monitor resolutions, is 800x600.

    wildwestica

    8:12 pm on Apr 9, 2003 (gmt 0)

    10+ Year Member



    Closing in now on the troubleshoot. Validator does not like something in the ... js tag.
    Error: required attribute TYPE not specified
    <script language="JavaScript" SRC= "javaScr/popup.js">
    </script>
    Is the FIX adding type=? As in the following:
    <script language="JavaScript" type="text/javascript" SRC= "javaScr/swapImg.js">
    </script>

    Validator also did not like end tags for /Head and /Body, which have since been removed.

    Back to binocular, is it suggested to re-design for the 640x480 audience? Many monitors in this town are small ones, between the libraries and friends, and this town is considered fairly tech-savvy. I wonder if I should reconsider the smaller monitor audience as LCD.

    Being a newbie, I am not sure how I would approach the construction.

    DrDoc

    8:33 pm on Apr 9, 2003 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    I wouldn't call 800×600 a "smaller resolution", it's actually rather normal. In fact, more than 50% of all users are using 800×600, about 40% are using 1024×768... Everyone else is sharing the last 5-10% :)

    DrDoc

    8:36 pm on Apr 9, 2003 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    <script language="###"> was the historic way of defining JavaScript sections. The correct way should now be:

    <script type="text/javascript" src="javaScr/swapImg.js">
    </script>

    Also, you might want to put the </head> and </body> tags back ;)

    martinibuster

    9:03 pm on Apr 9, 2003 (gmt 0)

    WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



    is it suggested to re-design for the 640x480 audience?

    No.

    As I noted earlier, "you hardly see monitor resolutions of 640x480" and as DrDoc made explicit, "Everyone else is sharing the last 5-10%."

    The 640x480 resolution should never have been brought up because it hasn't been a concern for many years.

    If it looks fine at 800x600 rez, and at the higher resolutions, then that's all you should be worrying about. (I agree that 800x600 can be considered normal, but it in the context of a conversation about 1280 x 1024 rez monitors, it is a smaller rez- :))

    A liquid layout will however, look decent on most size monitor resolutions. I think ebay has a liquid layout, in that the layout resizes itself according to the browser window size.