As businesses look to extend their reach beyond the desktop and onto consumer devices like iPad, iPhone and other smartphones/tablets, the demand for optimized experiences on these devices will rise. Web developers will be called upon by clients to deliver a multiscreen web presence (as opposed to a single web site) and will be faced with the challenge of producing different user experiences on different devices.
There is no single "right" approach to multiscreen development and a combination of techniques is what often yields the best results. Some techniques, like using CSS media queries to invoke different CSS based on screen resolution, can be easily implemented with client-side code in the browser. Others, like redirecting to another URL or serving different markup based on the requesting user agent, require server-side processing.
Our goal with Business Catalyst is to ensure that you have several implementation options at your disposal. We're still in the early days of multiscreen web development. New techniques and practices are sure to emerge in the months/years ahead so, overall, we want BC's multiscreen support to be flexible and extendable.
With that in mind, here is the first step from the planned multiscreen features offered in Business Catalyst.
Device classesBC detects server-side the device used to access a page and maps it to one of these device classes:
The mapping is done based on user agent strings and some internal rules. If the device cannot be determined by its user agent or it does not fall in any of the existing device classes, the "desktop" device class will be used.
The module desktop renders the device class value (e.g. "phone") corresponding to the device used to browse the site. This module won't be counted against the current 25 modules limit per page.
Tips & tricksHere is what you can achieve today by using desktop module.
You might want to increase the link & button sizes for phones and tablet. This can now be easily done by including device-specific stylesheets.
Redirect visitors to a mobile site version
If you'd like to serve device-specific content today as part of a template or page, without waiting for the full planned implementation, here's how to do it:
- Generate the device class value in an HTML comment, to workaround the current limitation of having modules in modules. This value will be cached and used for further occurrences.
- Use it as part of a content holder name
Best practicesHere are some articles outlining best practices when building multiscreen sites:
Responsive Web Design
CSS3 Media Queries intro
CSS3 Media Queries video tutorial
What's next?We'll continue implementing multiscreen features throughout the year, discussing details on prerelease. Next step is having templating support for desktop, tablet and phone.
Looking forward to your thoughts, feature requests, tips & tricks and showcases on Content Management forums.