[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2004-10-28
11
Medium Priority
?
196 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
Comment
Question by:Ike23
[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
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 8

Expert Comment

by:amirinamdar
ID: 12438081
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
ID: 12438116
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12438207
>>>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
ID: 12438208
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
ID: 12438237
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:
humeniuk earned 1000 total points
ID: 12438243
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
ID: 12438283
<< 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
ID: 12670293
Points to humeniuk IMHO.

Cd&
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 12670349
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

650 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