www.webdeveloper.com
Results 1 to 12 of 12

Thread: Dealing with different screen resolutions?

  1. #1
    Join Date
    Mar 2010
    Posts
    78

    Dealing with different screen resolutions?

    I've got a Web-based App. that I've developed in 1680 x 1050 and I have some users in 1280 x 768, etc. The higher resolution is nice for this App., because it gives me more screen real-estate to take advantage of the newer rectangular screens.

    Is there a clever way to set up my site so that my web pages will look good in most modern resolutions; i.e. 1024 x 768 and above?

    I know I can re-work things to display at a minimum common denominator, kind of thing; or I could have multiple copies of my site at different resolutions, which I really don't want to do, and do js resolution-sniffing.

    But, I'm wondering if there's a better way. I do have a lot of AP elements.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    maybe try using percentage element widths instead of fixed widths or a combination of the 2 to make the screen layout more 'elastic'.

  3. #3
    Join Date
    Mar 2010
    Posts
    78
    G'day Tirna,

    Thanks for the suggestion. I think I'll try that and see if that does it for me. Right now I'm using almost exclusively fixed-width. I'll try that on the AP elements too, I suppose.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    G'day redtail - are you by any chance an aussie?

    I don't see the g'day greeting much from non-aussies.

    If so - 'ow ya goin' mate?

  5. #5
    Join Date
    Mar 2010
    Posts
    78
    I wish I was! No, I'm an American that plays the Didj. I saw that you were from Melbourne...

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    It's not always the resolution you need to look at, but the browser's working window size that is being used to view your pages. You can have the same problems at the same resolution, but using different screen sizes which means the veiwing area of the browser will be different.

    Percents are better to be used, but it is a decision between flexible or a fix design.

    Might be of interest...

    Choosing Dimensions for Your Web Page Layout:

    http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/

  7. #7
    Join Date
    Mar 2010
    Posts
    78
    Thanks for the info. Ron,

    I realize that, about the window size. In this case, it's really the MS Windows screen resolution that is the main problem. I designed the app to take advantage of the newer rectangular screens, and the user that I'm working with does have a good Dell rectangular monitor, but he doesn't really want to change his screen resolution. He's at
    1280 x 768 (default) and his monitor can support much higher res. but he has some vision issues. I've expanded his window size to the max. and it's still a bit too small for the content.

  8. #8
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Well, they do have scripts that detect the screen resolution which you can use to feed a different CSS for that resolution. I don't understand why the fuss over ONE user though. Any other Users are going to have a problem if you design to one User.

    Changing monitor resolution is not an option anyway, although User can set their monitor to show web pages as big as they want. They just need to go in and set a lot of the customizing for their system display, font DPI, etc.. Even the browser can be set up with its own font sizes and family used although that's not a good idea except if you view pages that do not have this styling set. Even a browser can have a customized CSS file used for viewing web sites. Never liked that option as it's best to let the site choose the styling.

    The best way is to get what header information you need from the viewer's browser and set the CSS file used accordingly.

  9. #9
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by redtail View Post
    Thanks for the info. Ron,

    I realize that, about the window size. In this case, it's really the MS Windows screen resolution that is the main problem. I designed the app to take advantage of the newer rectangular screens, and the user that I'm working with does have a good Dell rectangular monitor, but he doesn't really want to change his screen resolution. He's at
    1280 x 768 (default) and his monitor can support much higher res. but he has some vision issues. I've expanded his window size to the max. and it's still a bit too small for the content.
    The best way to allow the most flexibility for clients (browsers, mobile devices, or otherwise) is to use fluid widths so the width doesn't create horizontal scrollbars. Most sites with enough content have vertical scrollbars.

  10. #10
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Flexibility can only go so far with all the modern devices being used today that have different screen sizes. That's why methods to restyle the web pages according to screen size seems to need more looking into today and more effort has to be made by designers to get these options in place to meet the various screen sizes for their sites. Use of percentages only goes so far when viewing a web page on an iPod as opposed to viewing same web site on a 32-inch monitor.

    If a User has their monitor at the highest resolution, they need to also resize the system's display for fonts, Desktop, etc. That is done through the OS' Appearance Properties. Once the display looks right size for them, then the web pages should fall somewhat into line for displaying in their browser. These adjustments have to be juggled for each user even if they use same size monitor and resolution. Those with vision issues will have to set the font DPI higher to make the system text bigger. That includes the text for the Desktop icons. I think once that has been done to the user's satisfaction, then the browser's display of a web site can be looked into.

  11. #11
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by Major Payne View Post
    Flexibility can only go so far with all the modern devices being used today that have different screen sizes. That's why methods to restyle the web pages according to screen size seems to need more looking into today and more effort has to be made by designers to get these options in place to meet the various screen sizes for their sites. Use of percentages only goes so far when viewing a web page on an iPod as opposed to viewing same web site on a 32-inch monitor.

    If a User has their monitor at the highest resolution, they need to also resize the system's display for fonts, Desktop, etc. That is done through the OS' Appearance Properties. Once the display looks right size for them, then the web pages should fall somewhat into line for displaying in their browser. These adjustments have to be juggled for each user even if they use same size monitor and resolution. Those with vision issues will have to set the font DPI higher to make the system text bigger. That includes the text for the Desktop icons. I think once that has been done to the user's satisfaction, then the browser's display of a web site can be looked into.
    Correct, however if the site is solely based on pixel values it will not resize to display properly even when the DPI has been changed. The pixel values do not change when DPI is changed (as in Vista's adjustment for extremely high resolution displays). You must use percentages or em values if you want your site to adjust its size.

    A properly planned site should easily degrade removing most images for mobile devices (especially since most sites are blog based or ecommerce which can be displayed in a list anyway). A single computer screen css and mobile css should be sufficient without needing any javascript to adjust (as javascript may or may not be enabled on mobile devices even further than browser clients anyway).

  12. #12
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    I am only talking about the proper setting of the monitor for the visual issues that must be overcome. Then the web pages themselves can be made as flexible as need be, but percentages is NOT always the best way to do that for going from an iPod screen size to a 32-inch monitor (example). Pixel sizes has only an effect for the user and the monitor being used and once the monitor has been set to overcome the visual issues, the web site design can be addressed in the proper manner where pixels will not be an issue.

    Use of the header info from the browser to generate a properly stled CSS file for the screen sizes expected to be encountered is best. Some people do not like flexible designs and rather have fixed designs. Fixed designs can be made for ALL screen sizes too.

    Images are the hardes as the aspect ratio of these have to be kept in mind and using percentages does not always work. Smaller screen sizes really need better resolution images and to actually have them resized properly. PHP scripting in some cases does a fairly good job of resizing images and keeping the aspect ratio correct. Images can still be maintained for mobile devices although it would be better to remove all of them that are extraneous. Usng ems for font sizes has always been recommended.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles