FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Question about resolutions





solmol
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.
b4r4t
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 Smile 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 Smile

2&3 are good choises - it is Your decision Smile
timerecords
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's
fireydeviant
make sure your images can stretch, or it might look weird.
timerecords
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?
fireydeviant
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 Very Happy
Donutey
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... Rolling Eyes )
timerecords
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 Embarassed

Greetz,
Time Records
littlegiant
Personally I would just use Javascript to check for the user's screen resolution and then feed them different stylesheets accordingly.
Bengt
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 Smile 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 Smile

2&3 are good choises - it is Your decision Smile

could you explain a bit more, or give a website with more info about making a website like that ?
thanks
engeland
One question. what kind of image types are resizable? For all i know, JPEGs would pixelate if you stretch them
snowboardalliance
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.
b4r4t
engeland wrote:
One question. what kind of image types are resizable? For all i know, JPEGs would pixelate if you stretch them


Hahaha Smile There are no resisable images Smile It's not this way ...
You have to make a logo where one part repeats Smile
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) Smile
polarBear
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.
engeland
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?
cr3ativ3
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.
xframe
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 Smile 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 Smile

2&3 are good choises - it is Your decision Smile


you should actually make the centered table a width of 780 instead of 790 considering the average scrollbar is 20 pixels.
Related topics
I Have a question . Is it the server support Chinese?
Question before requesting free hosting
question abt posts/mth
Kinda dumb question regarding DNS
A question
UT2004 U like the game? Do u have any question post here.
Question about DNS!
Question about Domain!
another uni.cc question
Question
Question abt lang. support...
question!!!!!!
A question about Naruto
C++ Question
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.