Site Studio Mobile Example - WCM Reuse

mobile_lead.png
Mobile internet usage is growing by leaps and bounds and it is theorized that in the not-to-distant future it will eclipse traditional access via desktop browsers. Mary Meeker, a managing director at Morgan Stanley and head of their global technology research team, recently predicted that mobile usage will eclipse desktop usage within the next 5 years in an Events@Google series presentation.

In order for organizations to reach their prospects, customers and business partners, they will need to make their content readily available on mobile devices. A few years ago it was fairly challenging to provide a special, separate, site to cater to mobile users using technologies like WML (Wireless Markup Language). Modern mobile browsers have rendered the need for this as irrelevant and now the focus has moved toward providing a browsing experience that works well on small screen sizes and is highly performant.

mobilescreen1_370.png
What does all of this mean for Oracle UCM? Taking site content from an existing Site Studio site and targeting it for consumption for mobile devices is a very straightforward process that is aided by a number of native capabilities in the product. The example highlighted in this post takes advantage of dynamic conversion capabilities in Oracle UCM to enable site content to be created and updated via MS Office documents. These documents are then converted to a simple, clean HTML format for consumption in the desktop and mobile browsing experiences. To help better understand how this is possible the example below shows a fictional .COM and its mobile site counterpart that both leverage the same underlying content. The scenario is not complete or production ready, but highlights that a mobile experience may be best delivered by omitting portions of a site that would be present within the version served to desktop clients.

cnet200.png
If you have browsed CNet (news.com) on a mobile device it becomes quickly apparent that they are serving an optimized version for your mobile device. An iPhone style version can be accessed at http://iphone.cnet.com/. In order to do that they leveraged some work done for the iPhone iUi project developed by Joe Hewitt that provides mobile browsers an experience that is similar to what users may find in a native iPhone application. For our example parts of this framework are used (the CSS) and this approach provides a page that will degrade nicely over a wide range of mobile browsers, since it is comprised of lightweight HTML markup and CSS. The iPhone iUi framework also provides some nice JavaScript to enable animated transitions between pages, but for the widest range of mobile browser compatibility we will only incorporate the CSS and HTML DIV / UL based page markup in our example.The following screen shots illustrate the basics that are contained in the sample downloads, contrasting the desktop and mobile experiences that are based on the same underlying data, with different presentation templates.

Home Page
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.

mobilescreen2_620.png

Product Page
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.

mobilescreen5_620.png

Product Details
On the product details page only the detail and a link back to the product list are available on the mobile version.

mobilescreen6_620.png

Blog Page
The blog page is similar to the product page above - providing an abbreviated listing without adding additional visual elements.

mobilescreen3_620.png

Blog Details
The details page only shows the single blog article with a link back to the blog post listing.

mobilescreen4_620.png

Mobile Templates
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
<body>
<div class="toolbar">
<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>
<!--$endif-->

</div>

<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 -->
<!--$wcmPlaceholder("WYSIWYG")-->
<!--$wcmPlaceholder("MobileLists")-->

<!-- 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)-->
<!--$endif-->
</ul>
</div>
</body>

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.
<!--$if wcmDynamicList("DynamicList")-->
<!--$executeService("SS_GET_SEARCH_RESULTS")-->
<!--$loop SearchResults-->
<li><a href=""<!--$ssUrl-->"><!--$xml(dDocTitle)--></a></li>
" <!--$endloop-->
<!--$endif-->

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

Future Enhancements
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.

Code Download
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.

Comments:

Good post John. Here at Fishbowl we've got a Mobile ECM component that is geared for the iPhone, Android and iPad platforms. In fact, at Collaborate 2010 we were the only ones there (as far as I know) showcasing an actual, working iPad app hooking up with UCM. The Mobile ECM advantages grow when you start considering not just consuming web pages but also submitting content from your device (e.g. via SMTP - email) for photos or emails or actual document edits for larger devices like the iPad.

Posted by billycripe on May 31, 2010 at 03:54 PM CDT #

Great solution for lightweight quick data retrieval to a mobile device :D All you need now is to apply a simple switch if you wanted to view the site in its full glory or lightweight. Reminds me of the old wml days of creating internet support to old mobiles. We be soon working heavily on providing both UCM and WebCenter Spaces access via mobile device this is exactly what we need - Thanks

Posted by John on May 31, 2010 at 10:15 PM CDT #

Thanks Billy. Do you have a link to additional details? That sounds like a great offering. It definitely makes sense that contributions and management will occur on a wide range of mobile devices.

Posted by john.brunswick on June 04, 2010 at 05:51 AM CDT #

Post a Comment:
Comments are closed for this entry.
About

Enterprise 2.0 and Content Management

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today