Mobile Web Technology Options

PB1 © Sapient Corporation 2011 © Sapient Corporation 2011

Mobile Web Technology Options

Mobile Web Tehnology Options



1. INTRODUCTIONThe mobile phone is evolving. Conversations regarding the mobile Web are getting increasingly louder.

And Sapient’s clients want to know: What is the right mobile strategy for this new, ever-changing landscape?

As capabilities and options widen, the choices can seem confusing. This paper responds to clients’ questions

and will explain some of the best platforms that are available for browser-based experiences on the mobile Web.

“It isn’t just about making the Web you know today work on Mobile Phones.We are talking about Innovation.”

- Tim Berners-Lee




2. A BACKGROUNDBefore diving in, it is helpful to have a basic understanding of the mobile experience. The mobile Web is not only an important conversation to have — it’s a critical one.

Those in the mobile space have already realized the trade off between quality and breadth of audience. In other words, the more mobile devices that are included, the worse the experience is. The best experiences are often from native applications on a single platform, which can be relatively high in cost. SMS messaging, which works across all devices, is lower in cost but also results in a poor experience due to the inability to share Web information.

Currently, there are three standard approaches for delivering mobile experiences to the consumer. One is messaging (e.g., SMS, MMS). Another is rich application (made familiar through the advent of the iPhone). But here, the core focus will be on the mobile Web.

2.1 Why mobile? Why now? Wired and mobile browser standards are converging, thereby reducing the fragmentation we’ve seen in the past. This is due in part to the evolution of HTML5 and smartphones, and their efficiency in task-oriented design. Device features like Geolocation (where a developer can find a user’s location and customize the experience), device recognition, and camera integration are starting to be exposed right within the browser. That indicates a trend toward richer experiences on the browser as HTML5 continues to expand, and as device manufacturers give us the ability to build better virtual experiences.

2.2 Limitations. There are still limitations, of course. Mobile networks are slower than wired ones, and have a higher overhead. Accepting your Web access “as is” is certainly not the ideal option, especially when your CSS (Cascading Style Sheets), JavaScript, Web analytics, and so forth are not yet optimized for mobile.

The conversion process has some roadblocks too, since the mobile experience is fundamentally different. There’s no mouse, no keyboard, and a smaller screen. The mobile phone has a much higher ppi and use touch screens. This just means that there simply needs to be an option that works for mobile due to these strong differences.

3. WHAT THE CLIENT WANTSSapient’s clients often request better ways to address and monetize opportunities that the mobile Web presents on both a merchandising and a self-service front. They continue to ask for:

Coverage. Clients want to make sure that the mobile solution has a broad coverage of the target device market. This could include anything from a basic WAP (Wireless Application Protocol) device to the latest Android handset.

Web asset re-use. Most clients have a large investment in their wired Web and want to leverage this investment without having an equal spend on the mobile side.

Parity. In many cases, the client wants parity with the wired Web. That is, they want to offer the same services on the mobile device as they do on the Web.

Enhanced experience. The iPhone has raised the bar and really changed the consumer expectation of the mobile experience. The on-the-go experience is often enhanced when compared to that of the wired Web and, in many cases, cannot be accomplished without the added capabilities of the mobile device.

No impact on IT. The mobile Web solution needs to minimize any impact on existing IT teams.

With the client in mind, we’ve developed what we’re calling “mobile architecture guiding principles” to ensure that these demands are met.



specifically rendered for the requested device. The wired Web site serves as an input for this platform. Some have proprietary device databases and claim to have thousands of devices there with hundreds of attributes, so that they can quickly decide what the capabilities of the target device are and adapt the content to that target device.

5.2 Mobile Portals. Mobile portal are products that are used to create a mobile site that is distinct and separate from the wired Web experience. Unlike the previous option, these platforms offer a slew of widgets and layouts with the option to customize to the requirements that can be delivered to a broad range of target devices. Most use a device independent proprietary language for source code. Developing on these platforms is akin to developing on traditional Web portal platforms plus the use to the device independent markup language. And like the Content Adaption Platforms, Mobile Portals have their own database based on device type and browser features.

5.3 Custom WebKit Centric Solution. A WebKit is a layout engine designed to allow Web browsers to render Web pages. A custom WebKit-focused implementation would uses markup and language technology such as HTML5, JavaScript, and CSS. Rather than target all browsers, this implementation would concentrate on the more prevalent device classes, such as the iPhone, the Android, Blackberry 6.0+, and WebOS. The unifying theme here is that the browsers on these devices are all based on the Webkit layout engine.

6. MOBILE WEB SOLUTIONSNow it’s time to break these solution types down even further. Let’s talk about four real options for those searching for browser-based mobile Web options.

6.1 UsableNet: A Content Adaptation PlatformUsableNet’s pitch is straightforward: Give them six weeks and your mobile Web site will be ready.

UsableNet provides all the technological services necessary to translate a Web site to the mobile Web, without involving the client beyond selecting suitable content for the mobile product. Because no training or infrastructure is needed, companies that employ strong in-house Web design and a mature ecommerce framework will find UsableNet to

4. SAPIENT’S GUIDING PRINCIPLESOur mobile Web research centered on a number of mobile architecture guiding principles to help tackle the options. Six principles stood out as the focus.

Target experiences. WebKit, a layout engine, is a great example, and it’ll be explained more later. Choosing to target high-end WebKit-based devices becomes a unifying factor for the majority of traffic on the mobile Web.

Maximize reuse. Again, by reusing Web processes and assets, such as design, code, and deployment, we avoid duplication of the business investment.

Personalize campaigns. The goal is to create unique experiences for clients around ecommerce and multi-channel commerce.

Decouple the Web and mobile. Design and development teams should be separate in order to eliminate dependencies while integrated just enough to maximize re-use and consistency.

Allow integration. Multi-channel integration is a key experience, and online transactions should span the Web and mobile. For example, if a product is added to a cart on the phone, the consumer should be able to finish that transaction on the Web.

Manage traffic. Segment and manage traffic on a device basis. Clients should be able to take the traffic coming in from an iPhone and direct it to an optimized experience. Additionally, the user should have the option to switch to the full Web experience if they so choose.

5. TECHNOLOGY OPTIONSNow, let’s focus on the three broad solution types for developing the mobile Web. Content Adaption Platforms and Mobile Portals have balanced the tradeoff between coverage and enhanced experience. They address most client demands and most of the driving principles addressed above. Conversely, the custom WebKit is more specialized and is designed specifically for higher-end smartphones.

5.1 Content Adaption Platforms. Content Adaption Platforms use existing Web pages as a source and adapt them into a mobile experience that is



mobile device. The platform also uses XHTML-based coding and auto-categorizes unknown devices. Unfortunately, InfoGin uses .Net-based implementation, which requires a C#, .Net, and Visual Studio experience and environment. It’s weaker on actual customer implementations, and cannot build custom IGML (InfoGin Markup Language) components. As far as HTML5, CSS3, and advanced mobile features, there’s not much available.

6.3 Volantis: A Mobile Portal Volantis employs a combination of transcoding, SiteBuilder, and custom coding. They have a proven record of thin-client solutions for a wide variety of customers.Volantis has modified its product lines and strategy significantly during the past few years, transforming itself into a vendor primarily supplying its vast device library and transformation engine. This narrow market focus has enabled Volantis to build a significant lead over other vendors of device library functions,

Volantis uses a language called XDIME (XML Device Independent Mark-up Extensions), which is based on the W3C’s DIAL (Device Independent Authoring Language), an XHTML 2.0 standard. The foundation of the platform is robust, but has yet to embrace the changes in HTML5.

Volantis has a good number of interface components documented on its site including auto-complete. It also uses a custom CSS wrapper (-mcs) that tries to map the most appropriate CSS properties. Additionally, an XML Pipeline can consume XML feeds from CMS databases. If your objective is to code once and run anywhere, Volantis’ multiple solutions can help fill the gap. The platform’s standard compliance is impressive and features such as markup optimization are handy.

But, if your objective is to leverage the latest features, Volantis may fall short. And the narrow market focus has left Volantis relatively unprepared to answer the requirements of rich-client architectures. Also, the custom CSS and theme options are completely dependent on their parser. And Volantis shows persistent and significant confusion over standards and technologies in presentation (e.g., HTML5 and CSS3 were confused with Bondi and JIL widget frameworks).

6.4 NetBiscuits: A Mobile PortalNetBiscuits is a complete content adaptation platform

be a perfect fit, because they can delegate the mobile specialization to UsableNet, and remove the need for in-house mobile Web programming.

Very often, UsableNet’s clients are from the hospitality industry where functional aspects such as checking in, booking a flight, or booking a hotel room have a higher priority over the mobile experience. Consider UsableNet for quick projects that need an overnight turnaround. And, if your user base contains a wide variety of devices, from basic phones to the most advanced smartphones, UsableNet may be advantageous for the implementation.

But proceed with caution if your requirements are heavy on user experience or forward-looking features such as Geolocation or device recognition. The platform seems to be closed, though UsableNet claims to provide an SDK (software development kit) for premier clients. Additionally, HTML5 and CSS3 features are completely driven by client requirements, and device recognition is the responsibility of the client as well. Some sites seem to lack thorough mobile rendering; some phones just aborted it, which resulted in lost information such as images.

6.2 InfoGin: A Content Adaptation Platform InfoGin has been in business since 2000 and employs about 80 people. They use software solutions that are deployed within individual data centers to create adapted mobile sites.

InfoGin focuses on a mobile Web adaptation server — the Intelligent Mobile Platform (IMP). This platform provides a visual design studio that offers content editing and development tools to create new or existing Web content.

InfoGin administers content and functionality adaptation, as well as developer tools among others. In our analysis, InfoGin’s product offering had more unique features for custom implementation, such as content overlay, and the automatic content adaptation platform. If working with InfoGin, consider having a prototype built up that demonstrates at least one objective of the experience; this development should result in a better chance of a successful outcome.

Favorable features include the ability to adapt CSS and JavaScript. Additionally, InfoGin has a desktop level emulator that captures screenshots for Flash and AJAX responses and then sends back HTML content for the



7. THE PLATFORM SUMMARY The chart below will help to distinguish between the different platforms available.

Most mobile Web platforms were developed with one single objective: to render content across all devices — from the most basic devices to smartphones. With clients looking at a long-range footprint, they are probably — and should be — looking at these platforms as a mobile Web technology solution.

If you require compatibility across most devices over higher-end mobility features, one of the Content Adaption Platforms or mobile portals provided can probably be leveraged.

On the other hand, with emerging WebKit devices, the mobile browser landscape has moved beyond compatibility into mobility. We’re really able to leverage features that are only available on specific device families.By taking a closer look into the platforms that exclusively serve the browser-based mobile Web experience, you’re now be better prepared to advise clients on the quickly-evolving mobile solution space.

whose templates must be created by their authors. This platform offers components that render across virtually any device, with the ability to target the specific device and pass custom code.

Founded in 2000, NetBiscuits focuses on mobile Web adaptation and hosts more than 10,000 mobile sites. A mobile site can be built using either their site builder or by Web applications generating BiscuitML, their proprietary markup language that outputs content based on device capabilities. The BiscuitML library provides components called Biscuits (pre-defined widgets) for all common content and functional elements of a site. These Biscuits either render directly or are able to connect to other resources for content. Each Biscuit has a number of levels, which ensure that the content of each is optimally adapted to virtually any end device. Successful features of the NetBiscuits platform are the application of strong media transcoding solutions, the ability to include custom JSP (JavaServer Pages) with mix of BiscuitML and custom code, and the inclusion of some rich components including Apache POI, which provides Java libraries for reading and writing files in Microsoft Office formats.

But NetBiscuits is not without its share of problems. For instance, the proprietary markup language cannot be compiled, there is no advanced HTML5/CSS3 components featured, and code quality is poor when using tables. Also, NetBiscuits work well for a basic implementation, but will not actively support any customization. So, if your site requires simple implementation and isn’t heavy on experience, consider NetBiscuits.

6.5 Custom WebKit focused implementation And, just quickly, remember that we also have the Custom WebKit platform option, a solution that deals almost primarily with smartphones.

If 80% of Web traffic is on iPhones and Androids, the unifying factor is WebKit, the platform that allows Web browsers to display Web content. It uses HTML, JavaScript, and CSS. It doesn’t target all browsers, but instead concentrates on the more prevalent device classes.



Ritesh Soni is a Director of Technology at Sapient.

Concentrating on the telecommunications space, Ritesh focuses on the emerging trends in

dot-com, device and network arenas to create transformational strategies for mobile and

social applications. In his role, he advises Fortune 100 companies on how to best align their

investment spend in these fast-growing and dynamic areas in order to achieve top performance

in multi-channel commerce, multi-channel support, loyalty, and mobility.

Ritesh can be contacted at [email protected] or via LinkedIn.

REFERENCES AND RESOURCES

Gartner — Mobile Architectures, 2009 Through 2012: A Trend Toward Thin (10 Jun 2009, Nick Jones, William Clark, ID : G00166465)

Gartner — Magic Quadrant for Mobile Consumer Application Platforms (3 December 2009, Michael J. King, William Clark, Nick Jones, ID :

G00171503)

Forrester — 2010 Mobile Trends (13 January 2010, Thomas Husson)

W3C — Mobile Web Initiative http://www.w3.org/Mobile

mobiForge — Mobile resources http://mobiforge.com

DeviceAtlas — Device detection http://deviceatlas.com

W3C mobileOK Checker — http://validator.w3.org/mobile

UsableNet — www.usablenet.com

InfoGin — www.infogin.com

Volantis — www.volantis.com

NetBiscuits — www.netbiscuits.com

WebKit — www.webkit.org

This paper was first published as a Webinar on May 20, 2010.