WebSphere Portal Mobile Themes

Live from Lotusphere, Tyler Tribe and Jonathan Lidaka gave a presentation titled “Deliver Rich Mobile Experiences with IBM WebSphere Portal Mobile Theme.”  First, let’s start with some mobile statistics.

Mobile Statistics

• Within 5 years, 80% of all people will have a mobile device
• By 2020, 10 billion mobile connected devices
• Mobile is a top priority of 74% of surveyed CIOs behind only business intelligence
• Online adult community
• 177 million US adults are online
• 105 million having 2 or more device types
• 1/3 have at least 4 devices
• 4.5 million have at least 9 different web connected gadgets

Key Customers Expectations

Mobile users have some very specific expectations.  They:

• Want consistent content across channels
• Do not expect identical experiences
• Want seamless movement between channels and devices
• Expect experiences to leverage strengths of devices

Mobile has 4 main delivery channels

• Mobile web
• Mobile web applications (runs in mobile browser)
• Hybrid mobile app and web (runs on device)
• Native downloadable applications

Key Considerations for Mobile Development

When developing for a mobile platform, make sure to consider the devices and network.

• Devices
• Multiple screen sizes
• Limited memory for caching
• Browser capabilities vary
• Network
• Lower bandwidth
• Higher latency

Mobile Themes

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Mobile themes are used to deliver rich mobile applications and sites that rune within mobile browsers.  Base mobile themes can be downloaded from the IBM solutions catalog.

Device Identification

Device identification is required in order to identify an incoming mobile device and properly serve content.  There are 4 main detection techniques with portal.

• Can check the user agent, e.g. request.getHeader(“User-Agent”)  to check the browser type
• CCPP profile capabilities in java
• WebSphere Portal personalizatoin rules
• Dojo, e.g. dojo.isWebkit

Clients and Markups

Mobile devices require different markup than standard desktop browsers.  Clients and markups can easily be administered in portal.

• Specific through portal and provided through portal administration
• New clients can be added such as an iPhone or webkit browsers
• New markups can be created for the clients

Portal Navigation

Portal navigation must be able to properly handle both traditional browsers and mobile devices.  There are 2 techniques in portal.

Use Same Pages

• Theme must detect the device layout and adapt layout
• Portlets must handle detection and provide cross-device compatible markup
• Issue: full site is often more complex than optimized mobile site

Use Separate Pages

• Use a virtual portal to isolate mobile in a virtual portal
• Could use Theme must detect the device layout and adapt layout

Mobile Theme Notes

• Targets high end smartphones: Android, BlackBerry, iPhone
• Lightweight but visually rich using CSS3 visual effects
• Mobile navigation widgets are available
• Mobile page layouts show interaction patterns
• Offline support has a demo which shows how to enable a subset of the site for offline viewing

Architecture Concepts

• Theme UI comprised of ultra-lightweight pure JavaScript widgets
• dojo and jQuery are not required but they are fully supported if needed
• There are 4 mobile layout metaphors implemented with the theme
• Accordion
• Swap
• Select
• Carousel

Responsive Web Design

Mobile themes can support responsive web designs.  While this takes additional effort from CSS, it provides the optimal user experience.

Definition

• Web design that automatically responds to resolution, device and orientation
• Flexible images and elastic layouts
• Different views enabled via CSS media queries

Benefits

• Single site/theme/content for multiple devices
• Optimal web experience
• Enhanced usability

Out of all the mobile solutions for portal, mobile themes can provide the best experience for users when your target community are various smartphones.