Just an example there AlienQ:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>omg teh css are awsomze</title>
<link href="browser.css" rel="stylesheet" type="text/css" media="screen">
<link href="cellphone.css" rel="stylesheet" type="text/css" media="handheld">
</head>
<body>
<div id="this">some content here</div>
</body>
</html>
Now, in browser.css we have this.
#this {width: 2500px; height: 500px; background: url('someimage.jpg'); font: 16px; }
* A horizontal website
Now in cellphone.css we have this.
#this { position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; overflow: scroll; font: 10px; }
*A smaller top left aligned scrolling vertical website with no images and smaller font.
This is done with JUST css. No hacks, no special shit. Not to mention we're going extremely basic with the changes to each version.