Scaling web front end

Question

Hi there.

I have a web layout originally designed for use with televisions (running from a device with an obscure browser). We detect which resolution the tv is then serve up the corresponding css file and images. These css sheets and images have been scaled specifically for the three resolutions we support - 576, 720 and 1080.

Now I have the joyous task of trying to get this to work with your standard browsers - IE, FF, Chrome. I am just wondering how I go about scaling to PC resolution (1024x768) in order for this to work in these browsers. I don't have a separate css sheet and images for this task, so I think I either have to scale the default css sheet on the fly with some javascript, or maybe take advantage of the browser's zoom (ctrl+/ctrl-). The latter suggestion was shrugged off so I think I have to so this some other way.

The problem is, is that the images are sprites and they are all background images so I don't know if scaling them would work.

Does anyone have any suggestions?

Answer 1

Are you sure you need to fill the whole screen? Many people keep their browser window smaller than maximum size.

Answer 2

It would (probably) take longer to re-scale the page with JavaScript than it would to just write new CSS. "PC Resolution" is not simply 1024x768, you should assume that it's fluid.

My suggestion. Include one of your existing stylesheets, then create a new stylesheet that you include after it, overriding the parts you need to. Firefox + Firebug might help you here, or Chrome/Safari using the Web Inspector.

Although it's beyond your original question, I would say that trying to blindly port a TV based menu (that I assume was operated with a remote control) to the web is maybe a bad idea and your time might be better spent rebuilding it for the web, not simply trying to make it fit on the screen.