Question

I’m an aspirant web developer, and I’ve been wondering if it’s possible to make fully “scalable” websites without using flash.

Maybe a JQuery plugin that scales every object inside the body according to the body itself, so if its width is 100% of the window everything inside it gets scaled according.

Personally, I think this is needed because both resolution and pixel density of displays are getting discrepant, you can’t assume a specific resolution and a median is very bad for the extremes, which are an enormous part of the users. And the in-browser scaling is not a good solution.

My idea is to make everything super-dimensioned, e.g.: an image that displays at 50x50px in a XGA screen, displays at 100x100px in a QXGA screen, and the image itself could be a 120x120px JPEG. Of course it’s not possible to apply fancy effects for resizing like bicubic interpolation, possibly only nearest neighbor, but it’s better than using a magnifying glass :).

IMHO, There should be a CSS unit that is a percentage of the browser window, for example, wx and wy, so the property fontsize:0.3wx; will always scale the font to 0.3% of the window x size.

Nowadays pixel density ranges from <100 to >200ppi, not counting the different resolutions. A site that has a fixed width developed for XGA screens gets horrible in a high resolution screen, specially if there’s no fancy background. Monitors are becoming bigger and with higher ppi, and there are also portable devices that has low resolution. Of course this was not necessary when you only had to support SVGA and XGA resolutions, but that was the last millennium, nowadays the resolutions ranges from WVGA(tablets) to WQXGA(modern monitors/macs), for smartphones and pocket devices i think it’s okay to make a separate template, but not for tablets, notebooks, low-end desktops, high-end desktops.

So if anyone knows how to do something like this, please lemme know! Otherwise I think it’s impossible to avoid flash, more and more portable devices are supporting it, and it allows you to make fully scalable websites that looks exactly the same on all displays and platforms.

Thank you.

PS: (2013) It turned out that I gave up on web development. Nowadays things are getting more standardized, but even though it’s a real nightmare to support all the different browsers and systems. Certainly not the thing for me.

Answer 1

One of the methods is using the CSS transform property. Old browsers do not support this CSS feature though.

/*Basic syntax:*/
transform: scale(2); /*width and height times two*/
transform: scale(2, 3); /*width times 2, height times three*/
transform: scaleX(2) scaleY(3); /*Same as above*/

To support as much browsers as possible, you have to define -moz-transform, -webkit-transform, -o-transform, -ms-transform and just transform names:

-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);

EDIT, The transform feature can easily be implemented:

var scale = 2; //Dynamic calculations resulted 2
var scaleCSS = ["-moz-", "-webkit-", "-o-", "-ms-", "", ""]
              .join("transform: scale("+scale+");"); /*Less error-sensitive*/
document.body.style.cssText += ";" + scaleCSS;

/*The RE below is similar to this one: /;\s*((?!text-)[a-z-])*transform:/i
  This RE is needed to prevent "text-transform" from matching */
if(!/(;\s*(-moz-|-webkit-|-o-|-ms-|)transform:)/i.test(document.body.style.cssText)) {
    /*the browser doesn't recognise any of the CSS features
      Go to another, probably CPU-consuming JavaScript method
     *Or redirect the user to one of the pre-styled pages */

}