6 Replies Latest reply: Jul 29, 2012 1:21 PM by JJMack

How to make my psd-webpage fit all screen resolutions

evillo Jul 25, 2012 5:09 PM

I used to assign certain width numbers for my psd webpages but it creates horizontal scroll bars on small monitors. I have been looking around and searching to find a solution for this. I actually found many different suggestions but they don't seem to work. Can i do something with my psd file using photoshop in order to make the webpage fit all screen sizes? I don't like horizontal scrollbars appearing when my site loads. On the other hand, I also don't like un-necessary space appearing on large screens when my site loads. I use photoshop 7. Your help is highly appreciated guys.

Evillo.

Webdesign Program.

Message was edited by: evillo .. Sentence correction.

1. Re: How to make my psd-webpage fit all screen resolutions

Noel Carboni Jul 25, 2012 5:16 PM (in response to evillo)

In my experience, web designers sometimes experiment with dynamically changing web pages, where the various elements size themselves to fit whatever space is available, but then they choose a fixed width page, assuming a minimum monitor size (most choose 1024 x 768). Ultimately a fixed width is easier to manage.

Look at Adobe.com, Apple.com, Dell.com, or most other big name sites... All fit a fixed width, proper for a 1024 pixel window, and space expands on the left and right if the window is wider. I put a nice background gradient on my own web pages to help break the monotony of the empty space on the sides a bit.

-Noel
Like Show 0 Likes (0)

Actions
2. Re: How to make my psd-webpage fit all screen resolutions

evillo Jul 25, 2012 5:20 PM (in response to Noel Carboni)

Thank you Noel. Never thought of this to be honest. So if i get what you were saying correctly, you're suggesting that I might keep using fixed width to fit 1024X768 screens and leave the big screens an extended background of my choice. right?
Like Show 0 Likes (0)

Actions
3. Re: How to make my psd-webpage fit all screen resolutions

Noel Carboni Jul 25, 2012 5:34 PM (in response to evillo)

Sounds right. I've seen some (e.g., AMD) try busy backgrounds, but that tends to be distracting, and I know I found myself stretching windows very wide to try to see what was out there. Light colors seem to be everyone's choice.

-Noel
Like Show 0 Likes (0)

Actions
4. Re: How to make my psd-webpage fit all screen resolutions

Mylenium Jul 25, 2012 11:20 PM (in response to evillo)

Read up on web design. You can swap different backgrounds based on media queries and CSS rules or jQuery just like you can suppress scrollbars. You're looking for the solution on the wrong end.

Mylenium
Like Show 0 Likes (0)

Actions
5. Re: How to make my psd-webpage fit all screen resolutions

evillo Jul 29, 2012 7:53 AM (in response to Mylenium)

You are right, Mylenium. I was looking into "responsive design" lately and it offered several solutions not just one. Thanks for the headsup.
Like Show 0 Likes (0)

Actions
6. Re: How to make my psd-webpage fit all screen resolutions

JJMack Jul 29, 2012 1:21 PM (in response to evillo)

You can also code your pages as a html table that is 100% the width of the Browsers window than code the rows and columns. The table will adjust to the Browsers windows width and only have horozontal scroll bars when the browsers windower is narrower then the minimun width needed for the table. I only played with that idea when I set up my home page years ago. My web site is only a toy not maintained I mostly use my web server as a place I can upload files to then post or send link to these so I can share files like programs, raw picture files, Action set and scripts. http://www.mouseprints.net/ some images links and text example here http://www.mouseprints.net/Photoshop.html

<table cellspacing="0" cellpadding="4" border="0" width="100%">
Like Show 0 Likes (0)

Actions