Converting a CMSB website for mobiles

Hi,

I posted a similar query (Multiple list and detail viewers to a single section) and got a reply that would apply to you. Hope it helps.

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.

Hi guys

InHouse is on the right track here.

The process of working with mobile templates and CMS Builder is pretty much the same proccess. First, you design the templates. Then you integrate CMS Builder into them.

The difference is going to be that designing mobile templates is going to be different than designing conventional templates. InHouse has some great tips for you there.

Once you get the templates going. integration CMS Builder is the exact same process so you should be all good there.

Keep us up to date with how you are making out :).

Have a look at http://return-true.com/2011/12/css-tip-css-media-queries/

I came across a post on BuildInternet about two weeks ago. Read through it, downloaded the files and had my first mobile site running in about 1.5 hours... a complete site with a search engine, news, faqs, categories, etc... powered by CMS Builder.

The CMS Builder process is really no different than building a typical website.

Here are links to check out:
Building a Mobile Landing page (which will get you started in developing your mobile site)
http://buildinternet.com/2011/01/add-a-mobile-landing-page-to-your-site/

Mobile redirect scripts for your regular website:
https://github.com/sebarmeli/JS-Redirection-Mobile-Site

Give your full website and mobile site a snazzy mobile phone icon for bookmarking. I had mine built in no time at all.
http://buildinternet.com/2009/12/give-your-website-a-custom-iphone-bookmark-icon/

Zick

Thanks, Tim.