Screen Resolution

Hi,

I am new to website design and am wondering how screen resolution will affect how my page looks on other peoples computers.

This is my first site that is from scratch (not a template like usual). I am using adobe photoshop and sitespinner v2 to put the site together. I made the basic design in adobe and then spliced the images, loaded them into sitespinner, and dragged and dropped the images into there proper places. Sitespinner is a wysiwyg editor. Anyhow, in adobe, and in sitespinner, I am designing everything as if everybody's screen resolution was 800x600. A few minutes ago reality hit and I realized not everybody uses the same resolution as me.

Anyhow, I know the computers at work use a lower resolution than 800x600, and they get scroll bars so they can see the whole site. This is not a problem in my eyes, I believe there are few people who still actually use resolutions this low. (My company is ran by a cheapskate )

Now when it comes to higher resolutions than 800x600 I have no idea how my site or other sites would look (yes I am a cheapskate too). Higher resolutions on my monitor do not look right by any means, so it's not a good comparison what my site would look like on someone with a monitor that supports higher resolutions. I am basically wondering if they will see my full site, aligned to the left of the browser, and a big whitespace to the right of the browser. Or if a higher resolution will stretch my site to fit the full screen (ie..there full resolution).

I would like a few people with higher than 800x600 resolutions to check my site out and post here and tell me what happens at higher resolutions, and if the site still looks good. I am not really looking for critiques on this site, since it is not going to be a real site, it's just me learning how to do site design. Although if you think I did a pretty good job for my first *from scratch* site, let me know This site is by no means complete either, so there is really no content on it, just a logo, buttons that don't work, and a nice graphic of a server.

After viewing the site, if higher resolutions do not look good, please post some tips on how to fix it so it will display properly at all resolutions.

You can view the site at: http://discount-pc-parts.com/test/

My resolution that I am using is 1280x1024 and there is indeed a large white space to the right of the screen. There is also a huge white space below. Your site basically fills the upper left corner of my screen with the rest being white. If you filled the site up with content I am guessing there wouldn't be a huge white space below anymore, not positive though.

As far as fixing it I would recommend making a part of your header "stretchable" so that as the screen resolution changes, so would your header. You could easily adjust the rest of your site to strech as well. I wouldn't stretch the whole image, as you would distort it, but I would stretch a part of the image that when stretched it doesn't look distorted. Not sure if that entirely makes sense.

Another you could do is put an some sort of mild background for the site that would fill all the white and then center the rest of the site (which is currently aligned left) which would reduce the amount of empty space that is on one side. This might make the site look better so you wouldn't really have to stretch anything if you didn't want to go that route.

Thanks for the tips!

I will implement something tomorrow morining, so if you could check back tomorrow afternoon and let me know if it looks better. I will post here when the changes are made. Thanks for helping!!

My res is currently 1152x864. Here’s pretty much a screeny of what I see. <a href="http://www.neogoddess.com/tempimages/screeny.jpg" target="blank"> [ Click ] </a>

As you can see it’s nudged to the side and it leaves a lot of white space. To make it a little better you could always center the whole thing, so that it’s happily in the middle and it looks like there’s less blank space surrounding it. Also, as you can see, your black border seems to stop while the background continues to go on.

Ok,

I wiped out the black bars completly. I can not get them to do what I want. I have stopped using sitespinner I do not like how it makes everything in an absolute position, it makes it very hard to edit stuff.

Anyhow, I created tables and put my graphics in it, and centered it all. I does not center exactly perfect in IE6 on 800x600 res, but we are talking small difference so it's not a big deal.

Please let me know how it looks at higher resolutions now!!

http://discount-pc-parts.com/test/

It looks better, but it sort of disorientates you. It might look better with content within it, but I have a feeling it’s going to have a floating effect that might not be all that appealing (But try it out first anyhow)

Since you’re using Photoshop, why not cut it up so that the black bars are in their own table cell? (If they weren’t already, I forgot to look at the previous layout’s code) Then all you have to do it make that table’s cell background the black bar as well, so then I’ll stretch with the browser.

(I also don’t think you need to cut up your top image quite that much. Cutting up larger into many tiny little squares will help. But when you have something smaller it doesn’t help all that much, and leaves room for more errors.

Ah well, good luck. (here's another <a href="http://www.neogoddess.com/tempimages/screeny2.jpg" target="_blank"> screeny2</a>)

thanks for another screeny.. At least now the page will appear better at higher resolutions, so now I am past that obstacle. The background image may change, to get rid of the floating effect. I am not sure yet, I will mess around with it more once I get some content on the page.

I do plan to have all my content within a table with a white background, and the background image will only show on the sides (about 10 pixels each side) in 800x600 mode. In larger resolutions you will still see the background in areas outside of the page.

Is there any script java or php that will automatically detect screen resolutions and show the appropriate page? If so I may create several different pages all with different resolutions.

Howdy,

First thing I noticed on your test page was the graphics are really bad. You can still make a smaller image size without losing a lot of its quality - you just need to test saving it as a jpg on various quality levels or as a gif.

The other thing I wanted to say is maybe an easier way of putting the site together is to make the site in Photoshop then save it as a .psd and open it in Ulead Photoimpact.

You can simply click on sliced section and make them links etc. Then you just select Save for Web > Save as HTML - it gives you a whole heap of options to save it as JPG or GIF as well as being able to add a heap of things like Page Title/Author/Decriptions/Add Favourite Icon, backgrounds and much more.

It then produces your image into a ready made HTML file all you have to do is go in and tweak a few things like <div align="center"> to make the page sit in the centre no matter which browser views it. You will have a lot of wasted space on either side if the site is viewed in anything higher than 800x600.

-

Now 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 editing your code.

What it does is resize your page to whatever the size of the browser window is. I don't quite remember if this is what it is, but I have some advice:

Instead of using constants for your widths, use variable values. Example
Instead of
<table width="700">

you should put

<table width="80%">

This will ensure that whatever the screen size is, the table will be 80% of that screen size.

CSS is basically the same concept! There are some good css tutorials here: http://glish.com/css/

Hope that helps,
Rose