Page size?

I am curious. When designing a website how do you know how wide you can make the page? Meaning, I use a 1280 x 1024 resolution, so making webpages just willy nilly I get a page that looks great for me but not on a machine that is 1024 X 768 or less.

How do you know you boundries?

Thanks

Paladine

Master Poster

Team Colleague

824 posts since Feb 2003

Reputation Points: 211

Solved Threads: 27

7 Years Ago

I use: http://www.onestat.com/html/aboutus_pressbox31.html

to tell me what the most common browser/screen configurations are. Then I decide, based upon the site, what to do.

If I'm working on a company's intranet, then I am much less conservative. If the page/site has user interface features that benefit from a maximized browser on a 1024 x 768, and the company can require the users to use it that way, then that's what we do.

A site such as this, where most users are programmers and techies, who will tend toward newer hardware, etc, then go with the most common settings.

If it's a public high-traffic website, then I'll generally make the site work on the number 2 or 3 config in that list.

Notice for example, that 1024x768 is the most common. But not everyone has it, and not everyone browses maximised, so 800x600 is a good target.

To determine, on-the-fly, what a user has, JavaScript provides the "screen.width" property. That way, you can dynamically alter your site or load different CSS files, based upon a user's screen resolution.

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

7 Years Ago

I appreciate the reply, but I know the stats, that was not my question.

OK. But when designing and coding the page, how do you know what your boundaries are? I mean the site I have right now works on 1280 x 1024, but not so well on 1024X768.

How in the world do you know what the boudaries are? Do you use Pixels? %? or some other means to insure that you page conforms to the viewers resolution? And on my 1280 x 1024 how would I know where to stop the page from left to right for a 1024 x 768 resolution?

Thanks

Paladine

Master Poster

Team Colleague

824 posts since Feb 2003

Reputation Points: 211

Solved Threads: 27

7 Years Ago

When I'm coding to a specific resolution, I set my screen to that resolution. I have a dual-screen setup, so that's very convenient for me.

But to make adjustments on the fly, you use "screen.width". So you can set the various CSS Positioning attributes, via JavaScript, based upon the user's resolution.

There just isn't a shortcut to testing. Look at your site on various resolutions, and determine, in advance, how your layout should react to those resolutions. Code accordingly.

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

7 Years Ago

Hey thanks man. I appreciate the help!

Found some source code for just that!

//**************************************
//     
// Name: Page Resize
// Description:This code is designed to 
//     resize your page based on the screen res
//     olution of the person viewing it. In the
//     code provided, this is only applied to t
//     he image, however there is no limit as t
//     o how this could be applied to your page
//     .
// By: Ken Wolf
//
//This code is copyrighted and has// limited warranties.Please see http://
//     www.Planet-Source-Code.com/vb/scripts/Sh
//     owCode.asp?txtCodeId=2522&lngWId=2//for details.//**************************************
//     

<HTML>
<HEAD></HEAD>
<BODY>
<FORM Name= "Pic">
<IMG src= "yourimage" name= "MyPic" border= "0">
</FORM>
<SCRIPT LANGUAGE=JAVASCRIPT>
var sWidth = screen.width 
var sHeight = screen.height
var imgWidth = (sWidth * .5) //This value can be adjusted based on how large you want the image 
var imgHeight = (imgWidth * .75) //This value should be adjusted based on the width to height ratio of the image
document.Pic.MyPic.width = imgWidth
document.Pic.MyPic.height = imgHeight
</SCRIPT>
</BODY>
</HTML>

Paladine

Master Poster

Team Colleague

824 posts since Feb 2003

Reputation Points: 211

Solved Threads: 27

3 Years Ago

for firefox see....

https://addons.mozilla.org/en-US/firefox/addon/539

works great

~ASR

asr777

Newbie Poster

1 post since Mar 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Don't set any fixed sizes. Use percentages of screen width instead.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

3 Years Ago

Don't set any fixed sizes. Use percentages of screen width instead.

(except images) fixed images only because bitmaps dont scale well, and allow the text to flow around them.
The page does not have to look the same, on every browser, every OS every screen resolution,
the page just has to look good, on every browser, every OS every screen resolution,
as you design your layout, you can use, Browsershots.org to see the layout in 100+ combinations of hardware/software

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

This article has been dead for over three months

You