November 12, 2012

RollCall.com Uses IProCMS to Enable Responsive Design

Implementing responsive design has technical and business challenges. One of the key success factors is choice of CMS. A CMS that is based on XML content objects facilitates access when pages are rendered by the CMS or requested by JavaScript.

One of the key choices to make is where to locate CSS selection decisions. If the logic is placed in the front-end, a large amount of code must be sent to all devices, which will hurt display performance on mobile devices. This problem can be avoided by placing this logic in the display controller that decides which code to send to the requesting device. Then, only one code base must be managed and only the components that each particular device requires must be sent.

IProCMS is unique in using an open-source model view controller, using themes, templates, XML content objects, XML reader profile data objects, and session objects. Having all of this information available during page rendering allows for coding the parameters for HTML5 and CSS3 features to completely control layouts.

You can see this in action at Rollcall.com, a site using this approach. This responsive design uses fixed designs for various devices. When a user accesses the site with a mobile device, the display controller recognizes the device and changes the CSS3 style to format the mobile display. The result is an excellent mobile experience delivered very quickly.

Rollcall.com's responsive design allows readers to easily access content on different sized devices.

In addition to changing the style, the URLs for images are also changed. Roll Call uses an image caching technique whereby images are resized during upload by the CMS. The image sizes are set specifically to support the responsive design, and images are cached on a Content Distribution Network (CDN). The result is very fast display on all device types. When Roll Call published its Politics app, the development went rapidly because the development team already had the needed XML content objects and utilized much of the layout of the existing mobile web app.

An added benefit of using the display controller to render the CSS3 and HTML is that decisions about advertising can be made before the code is sent to the device. Because mobile ads require unique creative, mobile advertising is usually defined as a unique channel. This allows mobile advertising to be purchased separately and measured separately. A completely different set of JavaScript may be required to service the mobile ad request. Knowing the device type while the page is being constructed allows the controller to provide the right advertising module for the job.