November 12, 2012
RollCall.com Uses IProCMS to Enable Responsive Design
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.
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.