Converting a CMSB website for mobiles

8 posts by 6 authors in: Forums > CMS Builder
Last Post: December 8, 2011   (RSS)

By NigelGordijk - December 1, 2011

Hi, All.

I designed and built a site for a client - www.masselsmarine.com - and they've asked me to create a mobile version. I've never done a site for smartphones before. Can anyone point me in the right direction for info on how to do this?

Thanks!
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [NigelGordijk] Converting a CMSB website for mobiles

By InHouse - December 2, 2011

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.

Re: [InHouse] Converting a CMSB website for mobiles

By ross - December 2, 2011

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 :).
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

Re: [ross] Converting a CMSB website for mobiles

By Toledoh - December 2, 2011

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

Tim (toledoh.com.au)

Re: [NigelGordijk] Converting a CMSB website for mobiles

By Mikey - December 8, 2011

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

Re: [zick] Converting a CMSB website for mobiles

By NigelGordijk - December 8, 2011

Thanks, Zick.
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [Toledoh] Converting a CMSB website for mobiles

By NigelGordijk - December 8, 2011

Thanks, Tim.
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net