?
Solved

Resolution Problem

Posted on 2003-03-31
17
Medium Priority
?
357 Views
Last Modified: 2010-04-09
Hi,
I am working on a web site that contains tables, I am facing a problem in determining the resolution of the viewer for my site, I made the site suitable for 800x600 , and if a viewer with resolution more than that , the site will appear not good.

Any help on this ?


Amjad
0
Comment
Question by:amjad
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +7
17 Comments
 
LVL 2

Expert Comment

by:miskate
ID: 8243745
redesign your site?

A big part of good web design and development is building a site that looks good on all resolutions. Don't forget that someone using an 800x600 (or any other size) screen can resize their browser so that it's much smaller than the size you think it should be. Also, scroll bars and window borders mean that unless the user is operating on full screen mode your actual working resolution is much smaller.

A solution favoured by a lot of sites is to have a fixed 780px wide div or table with all their content and then however much whitespace around it is needed to fill the users screen. IMHO this is a fairly lazy way of going about things. You should design your sites to have a flexible layout that can happily stretch to fill whatever dimensions are made available to it.
0
 
LVL 2

Expert Comment

by:miskate
ID: 8243749
BTW, if you want a more specific answer you will have to post the code or a link. How can we offer redesign suggestions for something we cannot see and fiddle with?
0
 
LVL 5

Expert Comment

by:kasandra
ID: 8243784
I agree with miskate - redesigning your site is a good idea.  Designing for a specific size is not. At the very least, use % values for your table rather than fixed widths.
0
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

Expert Comment

by:alphaeternity
ID: 8243808
hey amjad, there's a pretty simple solution.  what you probably want is to have the browser determine the resolution of the site, and then lead them to a page accordingly.  

for example, if i were on 800x600 and i came to see your site, then that's fine cause you maybe made it on that res.  if someone with 1024 res came then you maybe make another site (with eveything the same, just different image sizes or whatever), and have the browser detect his settings and have it redirect it to that site.  and if someone with like.. 1600 res came along and your site would look terrible or something, then redirect him to a page that says "sorry, your current resolution is not supported by this site" or something to that extent.   now for the coding, it's pretty basic.  however, it's not html.

just stick this in between the <head> tags.
//code
<script language="JavaScript1.2">
<!--
if (screen.width==640||screen.height==480) //for 640x480 res
window.location.replace("http://error.redirectSite.com")

else if (screen.width==800||screen.height==600) //for 800x600 res
window.location.replace("http://my.site.com")

else if (screen.width==1024||screen.height==768) //for 1024x768 res
window.location.replace("http://other.screenSize.com")

else //all other screen resolutions
window.location.replace("http://this.otherPage.com")

//-->
</script>
0
 
LVL 5

Expert Comment

by:kasandra
ID: 8243897
Would you really want to maintain FOUR copies of your site?? Surely it is better to design the site so that it flows with the browser. Like miskate said, what if the browser window isn't maximised? I never have my browser windows maximised, so in the above instances, I would always get horizontal scrollbars. Do you have any idea how annoying that is to the user? Design smartly. Having to maintain four separate copies of your site is definitely not smart.
0
 
LVL 3

Expert Comment

by:hexagon47
ID: 8244774
kasandra (and everybody else) although I definitely agree that maintaining four copies of the site might present certain issues (I am being diplomatic), I also have to say that having a table stretching to a width of 100% might look horrible on a very high res
If you have a table that has an actual content that is 400px wide and you see it at 1280*1024 you will have a lot of white space in the cells if you put the width at 100%.

Amjad I think that the main problem you have is that a table (if used to present data and not for layout) should look good for the table itself, because your objective is to display data in a readable way.
No point - in my opinion - to stretch it just to satisfy somebody that has a huge res. It will make the table hardly readable...

Therefore my solution would be to make the table readable and well proprtioned in despite of the resolution.

It is just an opinion do not shoot me :)
0
 
LVL 19

Expert Comment

by:webwoman
ID: 8246711
>>If you have a table that has an actual content that is 400px wide and you see it at 1280*1024 you will have a lot of white space in the cells if you put the width at 100%.

There are lots of ways to get around that, and besides, most users who have very high res monitors DON'T use the browser maximized. I don't, and I don't even use that high a res. If you have a 800x600 setting, you will, because otherwise you don't see anything.

You can make the main area 100%, and the content fixed sizes. That works well, I do it all the time.

REmember too -- anybody with a high res setting will see everything SMALLER than you figure. This is why it's better to use relative font sizes (em/%) than absolute ones (px/pt -- and you should NEVER use pt, it's inconsistent across systems). Then the user can change the size if necessary. Another reason to have a flexible design... ;-)
0
 

Expert Comment

by:alphaeternity
ID: 8250925
it's not hard to maintain four copies of a site.  especially if you write it in php using dynamic scripting, updating one will update them all.  however, i also would personally have made a page that is widely supported by most (if not all) resolutions.

Noting this, i do not know the specifics of Amjad's page/status/time availability, but whatever it is he needed to ask this question and thus i gave the most viable answer in my opinion.  "design a new page" isn't exactly a good suggestion, cause i'm confident that he's already considered this and it's probably not an option for whatever the case.

cheers
0
 
LVL 5

Expert Comment

by:kasandra
ID: 8251006
I guess it depends on how large the site is (in terms of individual pages, and how many that would blow out to if quadrupled), and how far amjad has got with his site already.

It is possible that minor changes can be made to change it from a static width design to a more fluid one.

But without any additional information to what amjad has said (" if a viewer with resolution more than that, the site will appear not good") none of us can really say for sure which is the best solution to his problem...            
0
 
LVL 5

Expert Comment

by:gator4life
ID: 8251257
amjad -

Read this site:

http://www.allmyfaqs.com/faq.pl?AnySizeDesign

gator4life
(chomp, chomp)
0
 
LVL 10

Expert Comment

by:substand
ID: 8259876
As everyone has been sugguesting, there are basically 2 ways to look at this issue:

1) set the table width in pixels
2) set the table width in percents

both have thier advantages.

for example, setting your page in percents ensures that when the browser window is resized, your page is also resized.  This used to be an awesome option, and one that the web development company I work for _used_ to stand by 100%.  It's great because no matter how small the resolution, a visitor can come to your site and not have to scroll sideways (assuming the longest unbreakable line is less than the width of the screen, which it almost always is).  Also, having to scroll sideways is _very_ annoying.

However, now that there is a large distribution in the available screen resolutions (there are still people on 640x480, and there are some on 2000+ wide), it gets VERY annoying for people like myself to view pages based on percents.  This site is the perfect example.  The line of text gets so long I can't read it unless I make my window smaller, or highlight word by word what I am reading.

This is why my company has started going in between the two.  But there are a couple of options.

1) You can set widths based on most importance.

ie, something you want everyone to see will be width 600, but the next 200 pixels will be reserved for people with 800 width resolution, and the next 200 after that will be for people with 1000 width, etc etc..

2) you can do a combination of setting width in pixels and percents.  for example, (using one of the solutions above to detect resolution), you would set say 800 or less to be based on a percentage pixel width, but say 1000+ be set to 1000 no matter what.

Hope this helps, as its becoming a touchy issue.  From my experience, generally the private sector will have better resolution that you can count on (except for a few people), but what about all those teachers, students, and govt employess on "legacy" systems that access the internet through public means.  generally, these people will have very low resolutions.

I try to use the combo I described above whenever time permits me to, however, you're decision should be based on your demographics.

For example, if 90% of your visitors use IE 6.0 on a 2000px wide screen, why spend extra weeks developing for those 10% who use netscape 4.0 on a 600 px wide screen?  See my point?  At some point, it becomes cost ineffective to develop for the few, so you concentrate on the many.

My company has taken a look at our weblogs and figured out that less than 5% of the users that visit our many domains use something less than netscape 6.0.  So we develop mostly for IE5+ (which 90% use) and NS6.0+ (which no less version is compatible with the IE 5+/W3C standards).. NS < 5 is crappy.

so we don't care to waste a couple of weeks and our customer's time developing for people who don't have any better.  They don't represent even a sizeable minorty, and thus it would be a waste of our customers' money to develop for them.  If they're not willing to spend the 50 dollars and 10 minutes to buy a better monitor and upgrade browsers, why are they going to spend 50 dollars on the site?  And if they do spend 50 dollars, is it worth the 2000 we put into it?

However, when we develop web applications for government agencies(as we just finished one), we do develop for the lower versions, since they don't upgrade as much as normal people (this is intrisic in the ineffiecency of government).

It depends on your needs.  But if you don't know your needs, go with the compromise I mentioned.
0
 
LVL 2

Accepted Solution

by:
Stanley83 earned 1500 total points
ID: 8305016
yup..exactly..
try this :
<html>
<head></head>
<body>
<table width="100%"><tr><td>
<center>Hi</td></tr></table>
</body>
</html>

this example will cause the table width to fit the screen.. Thus even if users resolution is above or below ur developed monitor's resolution,it does not affect much on your design unless u include pictures which might deteroriate according to compression..
0
 

Expert Comment

by:WiBBas
ID: 8360693
Could you do this with CSS?
0
 
LVL 2

Expert Comment

by:Stanley83
ID: 8362126
there's no need for CSS. coz this is for the displaying format of HTML.. for html, other than font, input box, etc.. the others can easily be done using HTML and javascript. :)

please clear my doubts about your problems thank you
0
 

Expert Comment

by:SpideyMod
ID: 8407627
amjad,
High point questions are great, but you aren't keeping up with responding to the experts who are donating their time to assit you.  I also see you have re-asked this question as well.  Please see the following for help with your questions:
http://www.cityofangels.com/Experts/Member.htm
Especially the parts:
http://www.cityofangels.com/Experts/Member.htm#5
http://www.cityofangels.com/Experts/Member.htm#7
http://www.cityofangels.com/Experts/Member.htm#11

Now, on this site, a question is considered abandoned when there's been no activity by the questioner for 21 days.  This question fits that description.  Please handle it within 72 hours.  Here are your possible means of handling the question:
http://www.cityofangels.com/Experts/Closing.htm

I have temporarily removed your question points until you start participating in your own questions and finalizing them.  They will be re-instated when that happens.

I will return in 72 hours to review your progress on your questions.  If after that point, there is nor progress, I am obligated to turn your account over to administrative review.

To get a list of all of your open questions, simply click the top left link with your login name on it and it will take you there.

SpideyMod
Community Support Moderator @Experts Exchange
0
 

Expert Comment

by:SpideyMod
ID: 8439261
The C has been changed to a B.  I can only go up one grade at the moment.

amjad,
If you have not read the links in my previous post, please do so now.

SpideyMod
Community Support Moderator @Experts Exchange
0
 
LVL 2

Expert Comment

by:Stanley83
ID: 8443684
Thank you SpideyMod, well, regarding the grading, its alright. Well, i have noticed my codes ain't that great after all, and doesn't really deserve an A..heehee...Never mind, just enjoy your stay :) An A's or C doesn't really matters much to me anyway. I'm used to that now :) haha
0

Featured Post

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question