Phone-Targeted CSS

After reading over the source of the Less CSS Framework 2, I have implemented a phone-targeted rendering approach for client sites (soon to be ported to sordina.net).

The full size page:

Chrome

The phone-targeted page:

iPhone

A smaller sized layout is kept in mind at all stages of the design process, and finally customized when the bulk of the site is finished.

The trick lies almost entirely in the @media selector:

@media only screen and (max-width: 756px)

This allows for conditionally applied layouts.

I have found that two layouts is the most optimal number, as it allows for a customized browsing experience from phones, but at the same time doesn't overwhelm the developer with what essentially boils down to a constraint satisfaction problem when trying to eliminate browser glitches.