Site Studio Mobile Example - WCM Reuse
By John Brunswick on May 31, 2010
The home page has a variety of content, but only the key pieces are used on the mobile version of the site. This is just an example, but it is likely that replicating an entire .COM for a mobile experience may not be ideal.
Similar to the example below the mobile version provides a streamlined example, using the same underlying content. The Region Templates have been adjusted on the mobile version to not display the summary, but a nice, large link to the content.
On the product details page only the detail and a link back to the product list are available on the mobile version.
The blog page is similar to the product page above - providing an abbreviated listing without adding additional visual elements.
The details page only shows the single blog article with a link back to the blog post listing.
Given that the content is the same within the different experiences, the customization comes down to the Page and Region Templates that manage the display of the content, as well as the dynamic conversion the occurs with the MS Office Document. All of the site content that is delivered to mobile devices will reside in Unordered List (UL) tags in the page body. This approach, when combined with some light CSS, will give users a clean, native iPhone application feel to the page content.
Mobile Page Template
<h1 id="pageTitle">**Company Icon Here** <!--$ssGetNodeLabel(siteId,nodeId)--></h1>
<!-- Only show the back button on pages that are not the home page (node 630) -->
<!--$if nodeId != 630-->
<a id="backButton" class="button" href=""..">" Back</a>
<ul id="home" title="Navigation" selected="true">
<!-- The WYSIWYG block is used on the home page and optional on others to show text above the various links to sections -->
<!-- Only show all of the navigation options on the home page (node 630) -->
<!--$if nodeId == 630-->
<!-- SS_BEGIN_SNIPPET(fragment1,2)--><!--$ssFragmentInstanceId="fragment1", ssIncludeXml("AVITEKSSFRAGMENTLIBRARY", "fragments/fragment[@id='AvitekMobileUI']/snippets/snippet[@id='2']/text()")--><!-- SS_END_SNIPPET(fragment1,2)-->
Mobile Region Template
The following region template populates the List Items that are part of the Unordered List (UL) tags in the main Page Template above.
Behind the Templates
Behind the templates standard contributor data files are referenced that are shared with the main .COM that is focused toward desktop users. This ensures that content is available
When brainstorming how the solution could be enhanced using more native features of Oracle UCM to help mobile users my peer Amir Kader had an excellent idea regarding the dynamic conversion templates. Since the dynamic conversion services are being used to process the office documents based on a template is would be possible to automatically, without changing the contribution process, setup a conversion template that would break content items into smaller pages for mobile users. This means that there is no additional technical effort to provide a feature that will support faster page downloads and better usability.
Download the Avitek Standard and Mobile Samples here. Please note that the samples were created using Site Studio 10GR4.
Detecting if a User is Mobile
In order to automatically direct our users to the correct experience a few different methods can be used. The following list is by no means exhaustive, but illustrates some common methods of redirection for this scenario. Given the large number of devices that may be accessing the site it is most economical to serve a single type of mobile experience that can suit a range of devices.
1. Apache mod_rewrite - If you are using the Apache HTTP server or a variant, there are many ways to handle redirection based on a client's browser type that are well documented as illustrated by a quick Google on the subject.
2. JSP / etc - Oracle WCM content is capable of being used within a variety of application environments, whether standalone or embeded within an application. Each of these particular environments provide objects that can be used to understand the type of client requesting content and redirect them to the appropriate view of that content.
3. Idoc HTTP related objects - The HTTP_USER_AGENT retrieves the client browser type, version number, library, and platform the browser is configured for. Based on this information the client can be redirected to the appropriate mobile or desktop browsing experience.
Hopefully the above examples and information are enough to get you started on your way to serving mobile users a rich, elegant experience, while using existing content assets within the enterprise.