I have a client who can't get past the idea that resolutions vary on computers; he sees a sample of his web site on my laptop and can't get past the "blank" space on the right-- I built the samples with a common resolution in mind, basically a static site that visitors will move through fairly quickly, but my laptop was set for a much higher res at the time I brought up the sample--
Aside from the fact that I changed the res on my laptop and it still didn't appear "right" to him, he now wants the site to be resolution sensitive. (Don't even talk to this guy about the need for "alternate navigation" in case the "slick" javaScript menu fails in someone's browser, he'll have nothing of it).
But I've got an issue here; the graphic header that he insists on is a set size which is hampering me-- sure I could build duplicate pages for redirection per resolution, but that's insanity!
I've considered using a frames solution, but this is a business site and I have concerns about direct linking off of search engines as well as other frame issues.
What the hell do I do on this? I'm familiar enough with PHP to suspect that my solution may lie there. I need some advice or direction on this issue.
How do I create a liquid site that has a fixed width graphic header on EVERY PAGE without using frames(I can't talk this guy out of this crazy stuff; he just refuses to listen; I'm getting him to sign waiver after waiver and I don't think I'll use this site in a portfolio at all) ?
I realize PHP won't detect the resolution and that a JavaScript will need to do that, but once the resolution is detected can a PHP script be used to call the appropriate graphic for the resultion detected?
CSS cannot detect the user's resolution. JavaScript can with: screen.width and screen.height.
Resolutions takes some serious pratice learning to deal with. The best page I've ever made so far, that works with all resoltutions, uses % measuements in all my widths and heights through out the page so my content resizes with the screen. % mesausements are based on the browser window size not your resolution. Thus, if you resize your browser window to tinne-tiny, when using % measurements, everything in the page will shrink with it -- even though you haven't changed your screen resoltuion. And vice-versa -- if you expand your browser window, all the % content grows with the page.
It won't happen if you went one step futher by putting your body content into a DIV/container that has a set width and height in pixels.
The last step is using JavaScript to detect the user's resolution and resizing the DIV's/container's width and height, in pixels, to the correct resolution. If JavaScript preforms this resize too late into the page load, it looks very unprofessional how the page "grows" before your very eyes. It's best to use a SCRIPT tag and a NOSCRIPT tag to initial the DIV to the correct size on the spot. If the user has JavaScript enabled the contents in the NOSCRIPT tag are overlooked by the browser and JavaScript will then detect the user's resolution and write a DIV with the a height and width in Pixels based on the user's resolution. Usually you just set the DIV to the resolution. If JavaScript is not enabled the SCRIPT tag is overlooked by the browser and the NOSCRIPT tag is used.
Then, since everything contained within the DIV will be in % measurements, all of the tags/elements will "grow" or "shrink" to the appropiate size.
In the future, I am thinking about making a JavaScript or Perl program that will accept either an uploaded HTML file or entered content through a textarea and it will change all your PX measurements into % measurements -- based on the browser window size you tell the program along with it. Then you'd have all your sizes in % simple as that. (not to mention MM, PT to PX convertions etc -- which would be done first to get those to % as well)
Reply With Quote
Bookmarks