Converting a CMSB website for mobiles

Hi Nigel,

enisoft has it right. We were just discussing Media Queries as a way to convert the layout of your standard large-screen site for use on smaller devices.

It's fairly straightforward: Using Media Queries in your CSS file, you create new display rules for your page elements based on the size of the screen being used. For exmaple, you might have a set of rules for screens with a min width of 400px and max width of 800px. Another for anything with less than 399px. I'm pulling these numbers out of thin air here, BTW.

So for the 400 to 800px screens, you might hide a big graphical masthead and reposition a logo. Then for the very small screens, you do the above, plus you unfloat all your column blocks and stack them vertically. Or un-float your nav list to make them blocks and therefore full width buttons on the small screen.

The basis is that you keep most of your CSS rules but just override some items for better display on the various screen sizes. This has the advantage of not having to build a second site, and any stylistic changes you make in the regular CSS rules also carry to the smaller screen automatically unless you tell them not to. It's pretty efficient.

The current bleeding edge approach is called Repsonsive Deisgn and begins with a mobile-first philosophy which is then ammended to support larger screens. Very mod, but not widely in practice in the wild - yet.

J.