Website Resolution Question ?

[dimijin]

Hey guys...

I was hoping you could help me figure out how to proceed with my website design. Here's where I am.

I am designing a mock-up in Photoshop using layer comps for examples of my different pages. I've been designing it at an image size of 1024x768 px using a monitor displaying at 1920x1200 so it appears compact and minimal (my intentions) on my display. However, I am aware this will not be the case on monitors with the resolution equal to or lesser than my actual design resolution of 1024x768. With this in mind I have a few questions since I'm no web designer and could use the help understanding how I can get my own site to translate as well as possible across multiple resolutions.

My first question is, should I consider designing multiple versions of the site then detect the viewers monitor resolutions in order to link them to the properly sized HTML? Does anybody have any experience they might be able to share using this method?

Secondly, if I don't go with the custom HTML site being specific to the user's resolution option, is 1024x768 OK or do I need to shrink it with IMAGE SIZE to something smaller to account for the browser's menu and search bars?

I've read some advice saying to design for 800x600 but actually use 775x425 to account for the browser's interface. This seems to be a bit small for my photography site and I'm not sure many people looking at artwork would have such a small resolution but I could be wrong. What are your thoughts on such a small resolution?

Thanks a lot for any feedback, I appreciate it very much!

[TheDoc]

1) My first question is, should I consider designing multiple versions of the site then detect the viewers monitor resolutions in order to link them to the properly sized HTML? Does anybody have any experience they might be able to share using this method?

A: No.

Secondly, if I don't go with the custom HTML site being specific to the user's resolution option, is 1024x768 OK or do I need to shrink it with IMAGE SIZE to something smaller to account for the browser's menu and search bars?

A: 1024x768 is the perfect size to code for. I usually use a width of about 960px when all's said and done.

I've read some advice saying to design for 800x600 but actually use 775x425 to account for the browser's interface. This seems to be a bit small for my photography site and I'm not sure many people looking at artwork would have such a small resolution but I could be wrong. What are your thoughts on such a small resolution?

A: It's no longer necessary to support 800x600, don't worry about it. As I stated above, you'll want to do the same thing you are describing to the 1024x768 resolution. Don't actually have it be 1024px wide, chop it down by a bit. Most people will hover between 960-1000px.

[dimijin]

TheDoc...

Thanks for your advice, I really appreciate it.

I like the fact that I don't have to redesign the site twice but I am curious as to why you said "No". Could you elaborate a bit on why the multiple site option isn't the best solution.

Also, what would be your advice on trimming the Photoshop document down to 960px. Would the IMAGE SIZE operation be the best (least destructive) way to down-sample my document?

Thanks again for the input!!!

[TheDoc]

I wouldn't change the image size, no. I would simply tweak the design to fit into the new parameters.

As for designing multiple versions, what's the point? The same could essentially be done with using an elastic/fluid CSS design. Myself, I prefer a fixed-width layout, much easier to manage.

[dimijin]

Thanks again for the advice!

Would you suggest I crop it after I tweak the design to fit?

I would assume if I didn't there would be a scroll bar in the browser.

[TheDoc]

I'm still not quite sure what you mean. The size of your PSD should have nothing to do with the final html/css output. You could have a PSD 3000px wide, but the design in it could be 960px wide.

[dimijin]

Sorry, I wasn't being specific enough.

The design is meant to be static as I was planning on taking the design into flash and using flash to program the navigation of the 4 pages within the site to have a small area in the center that updates. So the design of the surrounding area that holds the individual page content areas would be static therefore having a bunch of extra pixels around the design would make it much larger to import into Flash which would end up in a larger HTML file.

My question was should I tweak the actual design itself to fit within that 960x? area and crop the remaining pixels out of the psd?

[TheDoc]

Ah yes. Tweak the design to fit within your new boundaries, and then crop the outside that is not going to be used. But don't just do "Image Size", that would be the lazy way out!

[dimijin]

Thanks again for the help Doc.

I have one more question and I promise to stop tugging at your shirtsleeve.

You suggest 960px for width, what about height?

[TheDoc]

Height doesn't matter to me. If I hear one more person say "I don't want it to scroll", I might shoot them in the face.

HOWEVER, you mentioned building a flash site? In which case I'm not really sure, I don't work in flash myself.