Responsive Web Design (II) CMS and Zen

29. August 2011 09:00 | Comments: 0 | Categories:

When trying to apply CSS for a responsive web design to sites using CMS Made Simple, and Zen Photo Gallery (this site), I hit some stumbling blocks.

In both environments I needed a different menu - one more suited for use on a mobile - and for Zen I needed to change to Theme configuration settings to alter the number of images in a row, and on a page.

I then spent ages trying to find a way of getting PHP to detect the browsing device, and respond by generating different code for the page.

There are ways of doing "device sniffing" and, within Zen at least, doing theme switching, but it seems clumsy and relies on the device sniffer having a foolproof and up-to-date list of mobile like devices.  Even then it might not detect the orientation of the device.

Then I went down a blind alley trying to think about whether the results of a CSS media query cuold be passed back to the PHP code, until I realised that the PHP is run servier-side with now knowledge of the browser and the device, and it is not until you get to the page running client-side in the browser that the CSS is running and able to detect the viewport widths etc.

So that gets to thinking about using JavaScript and/or JQuery for sniffing out the device properties and then manipulating the DOM properties so the page displays appropriately.  Probably possible, but unwise because you shouldn't use Javascript to shape the layout of a page, not least for the simple reason that you cannot rely on everyone having JavaScript enabled.

So it's back to CSS. But how.

Well, so far I'm thinking that you have to use CSS to generate alternative page objects, and then use CSS to display one or the other depending on the device width.  This might work for menu's, but I need more thinking to solve the Zen layout problem.  I need to look at setting the Theme variables to enable a flexible layout, to be controlled by CSS.

The other option is to have two separate sites: a www. site and an m. site.  I can see how to do this with Zen - two themes sharing the same picture set, but not yet how to do this with CMSms without having to duplicate the whole site.

Some possibilities

http://www.i-do-this.com/blog/14/56/Make-your-CMSMS-website-Mobile-ready

Not there yet.

 

Tags:

No Comments

Closed for comments.