Hi, i've just started designing and i'm using dreamweaver. I've always had the problem of designing for diferent resolutions. I mean, I use a 1280x1024 resolution on a 19'' monitor... so It kinda seems like I have a lot of space in the page. But the first time I was designing and uploaded to a temporary host; I then went to another pc that had a 800x600 resolution and... well it's pretty obviuos what happened.
So... i'm thinking if there is some standard measurement to make the site fit on the most common used resolutions (like 800x600, 1024x780 and 1280x1024). Or if you guys desing 3 diferent sites that fit each resolution and make the user pick one when the enter (or if there's an api that checks the user resolution and redirects it to the correct desinged site) but that seems a lot of trouble just to avoid having an horizontal scroll bar.
Well; thanks everybody and sorry for another lame question.
There are 3 ways:
1) Make diffrent pages for each res... (bad choise - lot of work)
2) Make a centered page with width of 790px - it's not so bad choise - i usualy use this option - looks Ok on 800x600 and 1024x768 and not so bad in 1280+
3) Make a resisable page 
When You do it on tables just give width 100% or 90% (your choise 
). For Div's - center the div, give width: 100% for body {} and then width 100% or 90% for DIV
2&3 are good choises - it is Your decision | solmol wrote: |
Hi, i've just started designing and i'm using dreamweaver. I've always had the problem of designing for diferent resolutions. I mean, I use a 1280x1024 resolution on a 19'' monitor... so It kinda seems like I have a lot of space in the page. But the first time I was designing and uploaded to a temporary host; I then went to another pc that had a 800x600 resolution and... well it's pretty obviuos what happened.
So... i'm thinking if there is some standard measurement to make the site fit on the most common used resolutions (like 800x600, 1024x780 and 1280x1024). Or if you guys desing 3 diferent sites that fit each resolution and make the user pick one when the enter (or if there's an api that checks the user resolution and redirects it to the correct desinged site) but that seems a lot of trouble just to avoid having an horizontal scroll bar.
Well; thanks everybody and sorry for another lame question. |
I also had this question in my mind spinning.
| b4r4t wrote: |
2) Make a centered page with width of 790px - it's not so bad choise - i usualy use this option - looks Ok on 800x600 and 1024x768 and not so bad in 1280+
3) Make a resisable page When You do it on tables just give width 100% or 90% (your choise Razz). For Div's - center the div, give width: 100% for body {} and then width 100% or 90% for DIV |
Thanks, I'm gonna test it...I hope it will work for me cauze I ain't pro in CSS and I heard tables aren't good so it has to be fixed in CSS/div'smake sure your images can stretch, or it might look weird.
| fireydeviant wrote: |
| make sure your images can stretch, or it might look weird. |
What do you exacly mean and could give an example to explane it abit? | timerecords wrote: |
| fireydeviant wrote: | | make sure your images can stretch, or it might look weird. |
What do you exacly mean and could give an example to explane it abit? |
when a site scales up for a site, the image needs to scale.
For instance: http://forum.ariakon.com/
or even in this forum, the width scales to the size of you monitor, and the background image of the fades above messages repeats itself.
I'm just saying that with tables, you have to be careful that you don't repeat something like a banner over and over. you have to make the background of the table you put it in blend in so that when the table stretches, only the BG image stretchs and your banner looks fine.
This site is a good example:http://www.themexp.org/
the black bars will change size according to the user's resolution. If you attempt to highlight it, you can see that it is a background image.
here is the specific image they repeat: http://www.themexp.org/images/Slice_10.gif
Sorry for not explaining this earlier, caffeine hadn't kicked in yet 
If you look at the top of the page here and play around with the size of your browser site will change width depending on how wide the browser is. Look at the CSS here or view the source to see how it's done in CSS.
It takes a little more effort to make a site fluid (based on percentages) but each page is tailored to each users resolution.
One thing though, it's a good idea to set a min-width: XXpx; in CSS for pages based on percentages. Eventually the fluidity will break down when you get too small, and you'll want to stop that before that happens (you'd rather have a horizontal scroll bar) and the min-width does that. (doesn't work in IE6 though... 
) Oke oke oke oke, I'm abit noobish with this kinda shizzle but maybe you can help me with giving an example with my own site?? Maybe I would understand it then (I hope atleast).
My site is: http://home.deds.nl/~timerecords/Home.html
I hope someone will help 
Greetz,
Time Records Personally I would just use Javascript to check for the user's screen resolution and then feed them different stylesheets accordingly.
| b4r4t wrote: |
There are 3 ways:
1) Make diffrent pages for each res... (bad choise - lot of work)
2) Make a centered page with width of 790px - it's not so bad choise - i usualy use this option - looks Ok on 800x600 and 1024x768 and not so bad in 1280+
3) Make a resisable page When You do it on tables just give width 100% or 90% (your choise ). For Div's - center the div, give width: 100% for body {} and then width 100% or 90% for DIV
2&3 are good choises - it is Your decision |
could you explain a bit more, or give a website with more info about making a website like that ?
thanksOne question. what kind of image types are resizable? For all i know, JPEGs would pixelate if you stretch them
| engeland wrote: |
| One question. what kind of image types are resizable? For all i know, JPEGs would pixelate if you stretch them |
You don't really want to stretch images. The best bet is to have the ends of the image (like the border) seperate, and then just have the middle repeat as much as necessary.
Like I make images with a top border seperate, and bottom border seperate, and the middle just a 1px line that is repeated as needed. Same concept but also do it by the width. | engeland wrote: |
| One question. what kind of image types are resizable? For all i know, JPEGs would pixelate if you stretch them |
Hahaha There are no resisable images It's not this way ...
You have to make a logo where one part repeats
Then You cut in this place , make a 1px width strip and give it as the bckrnd of container div (repeat y). This kind of logo You make from 2 (whe left or right side of logo repeats) or 3 parts (when center part of logo repeats) You can have a 'sorta' resizable image if you have a SVG equivalent and parse it to, say, GIF according to the screen res you previously sniffed from your client via Javascript.
There's no real solution for typical bitmaps, like a picture of people, but for simple vectorial elements like icons or the like it's actually in use in many websites.
| polarBear wrote: |
You can have a 'sorta' resizable image if you have a SVG equivalent and parse it to, say, GIF according to the screen res you previously sniffed from your client via Javascript.
There's no real solution for typical bitmaps, like a picture of people, but for simple vectorial elements like icons or the like it's actually in use in many websites. |
the only thing i didnt get about what you said is the SVG. What is it?My suggestion is to make it on a 800 by 600 screen res that way it will fit all screens the biggest problem the most surfers HATE! it the annoying horizontal scrolling you don't have to face that if you make your site on a 800 by 600 res.
Hope that helps.
| b4r4t wrote: |
There are 3 ways:
1) Make diffrent pages for each res... (bad choise - lot of work)
2) Make a centered page with width of 790px - it's not so bad choise - i usualy use this option - looks Ok on 800x600 and 1024x768 and not so bad in 1280+
3) Make a resisable page When You do it on tables just give width 100% or 90% (your choise ). For Div's - center the div, give width: 100% for body {} and then width 100% or 90% for DIV
2&3 are good choises - it is Your decision |
you should actually make the centered table a width of 780 instead of 790 considering the average scrollbar is 20 pixels.
