screen size

[thesteelsource]

I read somewhere in one of the forums that one should design a site so that the page adjusts automatically to the screen size/resolution of the viewing person. How do you do that? I'm currently using Dreamweaver for site design. Thanks.

[SyrenSong]

The best way to create flexible page widths is to use percentages instead of specific pixel widths. This method will work whether you're designing using tables or divs. And it doesn't matter whether you're using Dreamweaver, Front Page, or manually editting your code.

Since you mentioned you are using Dreamweaver, check your pulldown options in the Properties toolbar. You have the choice between pixels and percentages, as well as several others. Just select percentages and decide how much of the page should be used for each part of your design. Simple as that.


<table width="100%>

BTW, another method some folks use is to design for 800x600 using set widths for their tables. Then you'd set your table's position for horizontal centering on the page. That would allow for the main part of the page to look exactly the same no matter the visitor's resolution, but would keep the design from being shoved over to the left side of the page.


<table align="center">

That's all there is to it.

BTW, if you're using CSS for your design, just use "div" in place of "table" and you've got it licked!

HTH!
Syren

[thesteelsource]

I am using percentages already, so I guess I have that covered. I thought it was something more complicated than that. Unless someone else sees that it's not working for them? I know on lower resolutions the screen ends up being too big and toolbars appear. I'm trying to design for middle-of-the-road.

And I haven't even started to learn CSS yet, although I would like to. I took a look at some of the CSS stuff in Dreamweaver and couldn't make heads or tails of it. I understand the principle, just not how to implement it. I guess that's a project for later. Thanks.

[SyrenSong]

I am using percentages already, so I guess I have that covered. I thought it was something more complicated than that. Unless someone else sees that it's not working for them? I know on lower resolutions the screen ends up being too big and toolbars appear. I'm trying to design for middle-of-the-road.

One of the best ways to test how flexible your site is would be to try shrinking and enlarging your browser window. I don't know the capabilities of your monitor, so I'm not sure how much you can do on your own.

You could always post your site for review here, and ask specific questions about resolution and screen size issues there. I'm sure lots of folks would be happy to help. ;)

Otherwise, take a look at AnyBrowser (http://www.anybrowser.org/). They can give you a feel for what your site looks like on different size browsers.



And I haven't even started to learn CSS yet, although I would like to. I took a look at some of the CSS stuff in Dreamweaver and couldn't make heads or tails of it. I understand the principle, just not how to implement it. I guess that's a project for later. Thanks.

The basics of CSS are pretty simple, really. Start out by playing with fonts and work outward from there. With XHTML (the upcoming language as straight HTML is phased out), you'll need to know about using CSS for fonts and backgrounds, among other things, so that's a good place to start learning.

If Dreamweaver's method of working with CSS is too confusing, or doesn't give you the information you need to feel comfortable with it, try TopStyle (http://www.bradsoft.com/). I've recently started using TopStyle Lite and I like it enough I may even spring for the Pro version.

If you want to read a book on the topic, I highly recommend the CSS books by Eric Meyer. They're all wonderful references and his teaching style is good for beginners, as well as more advanced programmers.

HTH, and good luck!
Syren

[SyrenSong]

Sorry about the long link, quotes, etc. I meant to Preview, then hit Submit accidentally.

I really miss having an "Edit Post" function. :(

Syren

<edit - since I was here again and the "edit" function was back, figured I'd fix my link.> :)

[valk97_goose]

Hi thesteelsource

This may be of assistance...

<script language="JavaScript" TYPE="text/javascript">
<!-- Hide from old browsers
function maximizeWin() {
if (window.screen) {
var aw = screen.availWidth; /* get the screen width */
var ah = screen.availHeight; /* get the screen height */

if (aw >= 1024) { /* check for 1024 x 768 resolution or greater */
aw = 790
ah = 700
window.moveTo(100,20);
} else {
if (aw < 1024) { /* check for 800 x 600 resolution or smaller */
aw = screen.availWidth;
ah = screen.availHeight;
window.moveTo(0,0);
}
}
}
/*window.resizeTo(aw, ah);*/
window.resizeTo(aw, ah);
}
maximizeWin()
// -->
</script>

Place the script between your HEAD tags

Regards...

[thesteelsource]

That looks interesting. Exactly what does it do? In layman's terms.

[valk97_goose]

Hi thesteelsource

Well its just some JavaScript to allow you to set the window size that will correspond to the users screen resolution setting, what I though you were looking for?

Regards...

[thesteelsource]

Yes, I'm interested in that. What I meant is, how does it work? It looks like it's setting a particular size for the site depending on the viewer's resolution. Is that correct? I always like to know why, not just how. I learn more that way. Thanks.

[valk97_goose]

Hi again thesteelsource

I have added more comments to the script, it should be more clear now.

<script language="JavaScript" type="text/javascript">
<!-- Hide from old browsers
function maximizeWin() {
if (window.screen) {
/* The following two variables are assigned the users screen width and height in pixles */
var aw = screen.availWidth; /* get the screen width */
var ah = screen.availHeight; /* get the screen height */
if (aw >= 1024) { /* check for 1024 x 768 resolution or greater */
/* Ok the user has capability of 1024x768 or greater resolution so assign these values to aw and ah */
aw = 790
ah = 700
/* now position top-left-hand-corner of window position (pixles) use any resonable value you want */
window.moveTo(100,20);
} else {
if (aw < 1024) { /* check for 800 x 600 resolution or smaller */
/* OK so the resolution is lower than 1024x768 so use the screen values for aw and ah */
aw = screen.availWidth;
ah = screen.availHeight;
/* now position top-left-hand-corner of window position to 0, 0 */
window.moveTo(0,0);
}
}
}
/* call the function */
window.resizeTo(aw, ah);
}
/* now maximize the window to the values set */
maximizeWin()
// -->
</script>

Regards...

[valk97_goose]

thesteelsource


I found this site, it may be of help...

http://www.webreference.com/js/tutorial1/manipulate.html


Regards...

[Jackie]

Here's another link that might be helpful to you:
http://www.echoecho.com/toolresizer.htm

It will help you see if you're headed in the right direction. You can always change your resolution, but this is even easier than doing that.

[valk97_goose]

Hi Jackie

Thats a great site Jackie, keep that one in my Favorites...

Regards...

[dhenry]

Hello,

Your script is great, I've been using a similar thing for quite a while, but I didn't like the way my pages looked on Huge monitors: your method of setting an upper limit to the size of a maximized window is fantastic.

I'm wondering it it would be possible to make a further refinement:

Could the window be centered horizontally when viewed on a monitor wider than 1024 pixels? I imagine this would be a matter of taking the "screen.availWidth" value, subtracting 1024, dividing that in half, and putting that value in to the "window.moveTo" command.

I'd try it myself, but I really don't know Javascript well enough to avoid wasting hours getting this to work.

Thanks so much,
David


Hi thesteelsource

Well its just some JavaScript to allow you to set the window size that will correspond to the users screen resolution setting, what I though you were looking for?

Regards...

[carbonize]

Sorry about the long link, quotes, etc. I meant to Preview, then hit Submit accidentally.

I really miss having an "Edit Post" function. :(

Syren

Off thread I know but I get an Edit button on the top right of my posts. Were you logged in when you noticed the mistake SyrenSong?

[valk97_goose]

Hi dhenry,

Just test for the resolution you want.

Remember that the settings aw = 790 & ah = 700 are my settings they depend on your page design size.

Also the code window.moveTo(100,20); determines where the top left had corner of your browser window will appear on the screen. To centre, you would determine the left position by subtracting the page or browser width aw from the screen width screen.availWidth; and dividing the result by two. You will need to set another variable that's all.

I don't have time to set this up for you just now, about to head off for two week motorcycle riding, but if you send me your email address I will email it to you once I get back. You can get me at contactus@engadineweb.com.au

Regards,
Bruce...

[carbonize]

Hate to be the damp squid here but I personally don't like having my browser resized and I'm sure others don't as well. This is why I have told my browser, Mozilla Firebird, not to allow javascript to resize the window.

[valk97_goose]

Sorry carbonize, but my comments were for dhenry who requested this information.

Regads,
Bruce

[carbonize]

As were my comments. I was pointing out that some people don't like having their browser resized and this could put visitors off.

[SyrenSong]

I really miss having an "Edit Post" function. :(

Off thread I know but I get an Edit button on the top right of my posts. Were you logged in when you noticed the mistake SyrenSong?

That was a while ago, when I first made the post. The edit ability disappeared for a short while, but it's back now, so I fixed the post. :)

[SyrenSong]

Could the window be centered horizontally when viewed on a monitor wider than 1024 pixels? I imagine this would be a matter of taking the "screen.availWidth" value, subtracting 1024, dividing that in half, and putting that value in to the "window.moveTo" command.

I agree with carbonize here. I really hate it when some website decides to reorganize my computer screen for me. It's incredibly annoying and off-putting!

Oftentimes, I'm multi-tasking and when a program decides to make changes to my desktop, it can be extremely aggravating. To the point of me leaving the offending website without even continuing to see if they had whatever it was I was searching for to begin with.

There's also the possibility of causing lots of confusion for older visitors to your website. They get thrown for a loop if their computer starts doing things they don't expect and they can't figure out why it happened or what they did wrong or how to keep it from happening again.

And the possibility of scaring the pants off paranoid visitors. You know the ones I mean - every time their computer does something they're not expecting it to, it must be caused by a virus. They're going to leave your site is a huge hurry!

Personally, I'd avoid doing anything that would annoy or confuse people like resizing their windows for them if I were you. It's just not worth the loss of good-will for the company you're designing the site for.

Just my 2-cents.

[valk97_goose]

Hi SyrenSong

The option to resize is a design option as I see it, if you are designing a site where the page format is dynamic, i.e. expands and contracts within the browser window then resizing is of no consequence.

However, as with the webproworld site where the header image plus the red "click here" button set the window dimensions (initiating the horizontal scrollbar) then sizing the browser window has the advantage of providing the customer with a fully open window (depending on their screen resolution);

1. avoiding all that unused space (if the previous browser settings were wide), and

2. avoiding the customer only seeing a small portion of the site (if the previous browser settings were narrow) and missing important information that may cause them to browse further.

I think have seen most site design methods and I can't believe you would leave a site because the browser dimensions were set at load. I would leave a site because the FLASH intro was boring or long, or there were annoying pop-ups or loud music, but I must admit leaving a site because the browser resized to give you a full site view has me bewildered. However I do get annoyed when my browser window is set to maximum available screen width, but that does not seem to happen as much nowadays.

Re the age issue, my mother is in her 80's and has been using the web for the last 10 years. I rang her and asked her opinion. She said it has never been a problem for her but she is going to ask her mates at her monthly computer class.

I have used this method on a number of sites and for those sites it works well. It is not a requirement for all sites but it is a useful tool.

Thanks SyrenSong

Regards,
Bruce (in sunny Sydney)

[SyrenSong]

Ooops! I think I probably need to clarify what I meant a little better. LOL!

To be perfectly honest with you, valk97_goose, my reaction to having my window resized depends a lot on what I'm doing while surfing.

If all I'm doing is surfing for the enjoyment of surfing, then it's not a major problem.

However, if I'm running several programs simultaneously and just trying to find some information, the more a site takes over my desktop, the more annoying it is for me. When I say I multi-task, I really mean it. I may be doing calculations, while surfing for reference materials, while checking my email, while thinking through a design layout. Some days it can be pretty hectic being me. ;) Resizing my screen can really throw my off-kilter when I'm doing that sort of stuff. Fortunately, that's the exception, rather than the norm for me!

I won't say I always leave a site like that, but sometimes it's just more annoying to deal with those sites than it's worth. Especially when at a quick glance the site tells me it isn't going to give me what I need.

I will also admit that it's those sites that resize my browser window and take away my scrollbars that are exceptionally annoying. It's my desktop and I simply resent sites that try to take over my workspace. That may not make sense to you, but there are times when it makes entirely too much sense to me.

It's a situational issue, not a constant state of affairs. Guess ya gotta be there at the time to really understand what I mean. <shrug>

And yes, I do understand that I'm probably in the minority regarding my personal opinions. If a client wants the site to resize, then I'll set it up to re-size. It's just simply something I prefer not to do.

As for the need to resize, I prefer to program sites that are more flexible, so that nothing is missed and I don't have to take over someone's desktop to show them what's on the site. If things appear a bit crowded 'cause someone's looking at the site on less than 800px wide, they can resize the window at their leisure, rather than on my demand.

As for how older folks react to the internet, it depends a lot on the folks. When I made that statement, I was thinking of a particular woman I used to work with who was in her early fifties and totally clueless about the web. Anything that was the least bit out of what she considered the ordinary sent her into states of extreme confusion and she would call for help.

Some people are simply more comfortable with technology than others. That has a lot to do with their reactions to the unusual.

Those folks who are in your mother's computer class are striving to understand all this technology. Unfortunately, not everyone in her age group, and even in some younger age groups, is as adventurous as your mother and her classmates. Many people over 40 (and some younger folks as well) are still very timid about computers. I've worked with quite a few of these types of people, so I'm saying this from personal experience, not because of things I've read in books.

BTW, I also agree with you wholeheartedly regarding sites with long downloads (Flash or not), loud music (especially late in the evening), and lots of popups. They're all incredibly annoying!

Hope I was able to clarify my opinions a bit better for you. I certainly didn't mean to be confusing or sound as totally intolerant as my post read when I looked at it again.

Sorry about that, Chief! <grin>

S

[valk97_goose]

Sure SyrenSong, I fully understand where you are coming from.

I entered this "Site Design" subject as a member was requesting assistance and I had some answers that would help.

I think most of this subject data really belongs in the "Design Peeves and Solutions" Forum.

Have a great day...

Regards,
Bruce...

[SyrenSong]

LOL!

Nothing like sidetracking or hijacking a topic, is there! ;)

I'd be more worried about it, if it didn't look like thesteelsource had already gotten the answer to his question.

It was some of the comments that followed after his question was answered that got me involved in this topic anyway.

I'd suggest separating appropriate parts of it into Design Peeves, but I think there are too many interwoven comments and it would probably get a bit confusing the way it stands right now, but it may be good for a topic to stand all on its own.

I'll have to think about it for a bit and work on my wording, so no one misunderstands where I'm coming from. ;)

[dhenry]

Hello Bruce, I worked up some courage and came up with this script that appears to work with Internet Explorer 5.2 and Netscape 7.1 on the Mac.

Please let me know what you think... Sidenote: I'm sort of amused at peoples' reactions against such a script. As it happens, I am trying to improve this script so it leaves space to the left and right of a window if the visitor has a monitor larger than 1024 pixels wide, in which case the window is resized to 1024 pixels wide, and the whole available screen height. Otherwise the window is resized to the entire screen dimensions. For those of you who don't like having your other windows covered up: Remember to use Alt-Tab...

function maximizeWin() {
if (window.screen) {
var aw = screen.availWidth; /* get the screen width */
var ah = screen.availHeight; /* get the screen height */

if (aw >= 1024) { /* check for 1024 x 768 resolution or greater */
aw = 1024
ah = screen.availHeight
AvailaWidth = screen.availWidth-1024
margin = AvailaWidth/2
window.moveTo(margin,0);
window.resizeTo(aw, ah);
} else {
if (aw <= 1023) { /* check for 800 x 600 resolution or smaller */
aw = screen.availWidth;
ah = screen.availHeight;
window.moveTo(0,0);
window.resizeTo(aw, ah);
}
}
}
}
maximizeWin()

Just test for the resolution you want.

Remember that the settings aw = 790 & ah = 700 are my settings they depend on your page design size.

Also the code window.moveTo(100,20); determines where the top left had corner of your browser window will appear on the screen. To centre, you would determine the left position by subtracting the page or browser width aw from the screen width screen.availWidth; and dividing the result by two. You will need to set another variable that's all.

I don't have time to set this up for you just now, about to head off for two week motorcycle riding, but if you send me your email address I will email it to you once I get back. You can get me at contactus@engadineweb.com.au

Regards,
Bruce...[/quote]

[rocky1]

Have been using the percentage based manipulation of page size, however in attempting to validate my pages I see errors for this setting. Suggested correction for the error is to use fixed pixel page width.

Has anyone else experienced this problem?

Rocky
www.rtfi.us

[Riverfish]

Is there a way to convert draw layer cells from pixels to percentage after they have been built?