Question

I just tested my site using online mobile emulators and the site
appears to be working flawlessly. The only thing I’d like to do
is to just reduce the size of everything.

I have a plugin that allows me to do this in the CSS:

.mobile {change any css I want}

So for example:

#container {width:800px}  <-- normal css

I can do:

.mobile #container {width:340px} <-- specific css for all mobile devices

It’s great, but you can see how tedious this is going to be. My css
file is 2000 lines long.

So I’m wondering if there is a shortcut method that would
change all. Is there a way to shrink a site down to say, 30% of
its original size? A jquery shrinkSite plugin, perhaps? I’m looking
to do this in the least amount of steps possible, as my interest
in mobile devices is zero (since I don’t have one).

Answer 1

The closest you can get to this without doing a lot of work is:

<meta name="viewport" content="width=640"/>

The default zoom won’t work properly on large Android devices (requiring the user to manually zoom in). But it does uniformly scale the entire website. The code above is for a website that’s 640 pixels wide.

If you need greater mobile support than that, you start getting into Responsive Design which requires a lot more effort, either Adaptive Content (where the layout changes but most of the content doesn’t scale) or Fluid Grid (where the layout remains the same and all of the content scales, somewhat uniformly).

Adaptive Content is about designing a website differently to support mobile devices, while Fluid Grid is an attempt to force a traditional desktop website to scale on mobile devices (which isn’t how browsers were designed to work).

Adaptive Content is the industry standard, but it requires a lot of planning before designing and building the pages. Fluid Grid is wildly problematic to implement for non-trivial websites, and I don’t recommend it (having worked with it before).