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
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.
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
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.
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>
Don't set any fixed sizes. Use percentages of screen width instead.
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.