Solved

Trying to get my application to look good on different resolutions.

Posted on 2004-10-28
159 Views
Last Modified: 2012-05-05
I've created a pretty cool document management application but have a few small bugs that I need to fix if possible.  One of them is that when I look at the app in a window with resolution of 800 x 600 it looks cramed together and some of the text needs to wrap in order to stay in the window.  The fonts all look like they could be reduced in size and still be readable.  I seem to run into this problem a lot and I'm wondering if anyone has any tips on how to make this work and look good on different resolutions.  I'm thinking that I might be able to capture the users screen resolution and then use a different style sheet depending on what resolution they get.  Maybe that isn't possible.  Any suggestions are welcomed.

Tim
0
Question by:Ike23
    10 Comments
     
    LVL 8

    Expert Comment

    by:amirinamdar
    0
     
    LVL 8

    Expert Comment

    by:amirinamdar
    Oooops.... I did not read the Q properly, that it does not specifically refer to a browser. I was assuming it did, since it is in the 'Browser Issues' section. Please ignore if not relevant.
    ;-)
    0
     
    LVL 33

    Expert Comment

    by:humeniuk
    If you want specific advice regarding this individual website, post a link here or, better yet, in the Web Dev section and you'll get a lot of good advice.  Your idea about using a different style sheet for different resolutions would work (it can be done with Javascript), but isn't that extremely impractical?

    You may want to stop reading right there if you're the kind of person who doesn't like answers that lead to a whole bunch of new questions, but there's a Pandora's Box kind of sitting there and I can't help but open it . . .

    Since you mention style sheets, I presume you're familiar with CSS, which is good.  I'm not expert, in fact it's something I'm in the process of learning, in part because I've come to believe that it is the best way to accomplish the necessary goal of creating websites with fluid layouts that are cross-browser and cross-resolution compatible.  It's been challenging at times, largely because in my case it involves unlearning a lot of things I've been using for a while.  Needless to say, this is a big question and a there is a lot of opinions and info out there including a great deal here on E-E (browse through the CSS, HTML, and Web Dev TA's for a while, you'll see what I mean).

    Here are a few threads that have influenced my thinking on this topic:

    http://cd-articles.fateback.com/Formsin4.html (ok, it's an article, not a thread, but it's by COBOLdinosaur, so it's kind of an honorary thread)
    www.experts-exchange.com/Web/Web_Languages/CSS/Q_21110511.html
    www.experts-exchange.com/Web/Web_Languages/CSS/Q_21078818.html
    www.experts-exchange.com/Web/Web_Languages/CSS/Q_21087312.html
    www.experts-exchange.com/Web/Web_Languages/CSS/Q_21077593.html
    www.experts-exchange.com/Web/Web_Languages/HTML/Q_21121008.html


    If you want to see some examples of how CSS can be used to serve this purpose, consider this:

    "It is difficult to see the value in it until you look at sites like this: http://www.csszengarden.com/

    Look at a few of the alternate layouts and understand, they are all the same page.  The presentation differences are just creative use of CSS; and anyone can do it once they decide to leave the two dimensional world of flat grids for web pages." (from Q_21110511.html above)  Take a look at the examples in different resolutions and different browsers and you'll have a good idea what to aim for.

    I hope this helps.
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    >>>The fonts all look like they could be reduced in size and still be readable.

    Readable by who?  Someone with perfect vision?  What about those of us who where biofocal? or have serious vision deficiencies.  On every browser ther is a control to let the user change the size of fonts.  It you build pages that specify fonts sizes you make it less accessible.

    Which is more important the blocks of text fit into the area where you you want them to render, or everyon being able to read the text.  A great layout means absolutely zero if the content is not accessible and usable to all users.  The absolute number one mistake that developers make is thinking that the page is about them, their design and the cool layout.  after seeing it once the average user does not notice any of teh cute little pieces the developer put ther for them. They notice that they get exactly what they needed; they got it fast; and it was easy to use the controls.

    A web page is not a printed page and you should not try and control it like one.  Let it flow and flex.  Use CSS to give it the 4 dimensional aspect it deserves.  Take a look at how many the same content can be presented if you let CSS drive the bus: http://www.csszengarden.com/

    Cd&
    0
     
    LVL 4

    Author Comment

    by:Ike23
    I was just thinking that I could use a dynamic variable to set the font sizes in my style sheet.  If I could tell what the resolution of the browser was then I could set a variable say 12 for font-size and have that value updated every place that uses font-size of 12.  Then if the res was say 800 x 600 I could change the variable to 10 and have the fonts show up smaller so they don't have to wrap as much.  I am already done with the site and am not about to re-design it so I need a way to make it look a little better is all.  It still works but I want it to be a bit more browser friendly.  Thanks.
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    Oops dup the link.  Sorry about that.  Great minds think alike; and there are a lot of us that really love zengarden.

    Cd&
    0
     
    LVL 33

    Accepted Solution

    by:
    If you've decided that's the way you want to go, here's a javascript solution that will redirect your user to different pages based on screen resolution: http://javascript.internet.com/user-details/resolution-page.html.  You could certainly modify it to call a different style sheet rather than redirect.
    0
     
    LVL 33

    Expert Comment

    by:humeniuk
    << Oops dup the link.  Sorry about that.  Great minds think alike; and there are a lot of us that really love zengarden. >>

    I'm just repeating some great advice that I've received in the past.  The quote and link in my post come from your post in the specified thread, so the credit belongs to you  :)
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    Points to humeniuk IMHO.

    Cd&
    0
     
    LVL 33

    Expert Comment

    by:humeniuk
    TY Cd.

    I would suggest that the content of Cd's comment and his influence on the content of mine (I quoted him and referred the asker to other comments he's made) are deserving of recognition as well.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT Security CISA, CISSP & CISM Certification

    Master the advanced techniques required to protect network resources from external threats with the IT Cyber Security bundle. Built around industry best-practice guidelines, the IT Cyber Security bundle consists of three in-depth courses.

    Suggested Solutions

    How many times have you been browsing the internet, with multiple tabs open, and closed the wrong one? Have you ever clicked 'Close all tabs' instead of 'Close current tab' ? Internet Explorer 8 now brings to you, what Firefox has had for a wh…
    Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
    This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
    This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

    913 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now