Mobile Web Technology Options


Published on

The mobile phone is evolving. What is the right mobile strategy for this new, ever-changing landscape?

White Paper by By Ritesh Soni Director of Technology, Sapient

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile Web Technology Options

  1. 1. Mobile Web Technology Options Mobile Web Tehnology Options1 © Sapient Corporation 2011
  2. 2. Mobile Web Technology Options Mobile Web Technology Options 1. INTRODUCTION The 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-Lee2 © Sapient Corporation 2011
  3. 3. Mobile Web Technology Options 2. A BACKGROUND 2.2 Limitations. Before diving in, it is helpful to have a basic understanding There are still limitations, of course. Mobile networks of the mobile experience. The mobile Web is not only an are slower than wired ones, and have a higher overhead. important conversation to have — it’s a critical one. Accepting your Web access “as is” is certainly not the ideal option, especially when your CSS (Cascading Style Those in the mobile space have already realized the trade Sheets), JavaScript, Web analytics, and so forth are not yet off between quality and breadth of audience. In other words, optimized for mobile. the more mobile devices that are included, the worse the experience is. The best experiences are often from native The conversion process has some roadblocks too, since applications on a single platform, which can be relatively the mobile experience is fundamentally different. There’s high in cost. SMS messaging, which works across all no mouse, no keyboard, and a smaller screen. The mobile devices, is lower in cost but also results in a poor experience phone has a much higher ppi and use touch screens. This due to the inability to share Web information. just means that there simply needs to be an option that works for mobile due to these strong differences. Currently, there are three standard approaches for delivering mobile experiences to the consumer. One is 3. WHAT THE CLIENT WANTS messaging (e.g., SMS, MMS). Another is rich application Sapient’s clients often request better ways to address (made familiar through the advent of the iPhone). But here, and monetize opportunities that the mobile Web presents the core focus will be on the mobile Web. 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 2.1 Why mobile? Why now? experience. The on-the-go experience is often enhanced Wired and mobile browser standards are converging, when compared to that of the wired Web and, in many cases, thereby reducing the fragmentation we’ve seen in the cannot be accomplished without the added capabilities of past. This is due in part to the evolution of HTML5 and the mobile device. smartphones, and their efficiency in task-oriented design. Device features like Geolocation (where a developer can No impact on IT. The mobile Web solution needs to find a user’s location and customize the experience), minimize any impact on existing IT teams. device recognition, and camera integration are starting to be exposed right within the browser. That indicates a With the client in mind, we’ve developed what we’re calling trend toward richer experiences on the browser as HTML5 “mobile architecture guiding principles” to ensure that continues to expand, and as device manufacturers give us these demands are met. the ability to build better virtual experiences.3 © Sapient Corporation 2011
  4. 4. Mobile Web Technology Options 4. SAPIENT’S GUIDING PRINCIPLES specifically rendered for the requested device. The wired Our mobile Web research centered on a number of mobile Web site serves as an input for this platform. Some have architecture guiding principles to help tackle the options. proprietary device databases and claim to have thousands Six principles stood out as the focus. of devices there with hundreds of attributes, so that they can quickly decide what the capabilities of the target device Target experiences. WebKit, a layout engine, is a great are and adapt the content to that target device. example, and it’ll be explained more later. Choosing to target high-end WebKit-based devices becomes a unifying 5.2 Mobile Portals. factor for the majority of traffic on the mobile Web. Mobile portal are products that are used to create a mobile site that is distinct and separate from the wired Maximize reuse. Again, by reusing Web processes and Web experience. Unlike the previous option, these assets, such as design, code, and deployment, we avoid platforms offer a slew of widgets and layouts with the duplication of the business investment. option to customize to the requirements that can be delivered to a broad range of target devices. Most use a Personalize campaigns. The goal is to create unique device independent proprietary language for source code. experiences for clients around ecommerce and multi- Developing on these platforms is akin to developing on channel commerce. traditional Web portal platforms plus the use to the device independent markup language. And like the Content Decouple the Web and mobile. Design and development Adaption Platforms, Mobile Portals have their own teams should be separate in order to eliminate database based on device type and browser features. dependencies while integrated just enough to maximize re- use and consistency. 5.3 Custom WebKit Centric Solution. A WebKit is a layout engine designed to allow Web Allow integration. Multi-channel integration is a key browsers to render Web pages. A custom WebKit-focused experience, and online transactions should span the Web implementation would uses markup and language and mobile. For example, if a product is added to a cart technology such as HTML5, JavaScript, and CSS. Rather on the phone, the consumer should be able to finish that than target all browsers, this implementation would transaction on the Web. concentrate on the more prevalent device classes, such as the iPhone, the Android, Blackberry 6.0+, and WebOS. The Manage traffic. Segment and manage traffic on a device unifying theme here is that the browsers on these devices basis. Clients should be able to take the traffic coming in are all based on the Webkit layout engine. from an iPhone and direct it to an optimized experience. Additionally, the user should have the option to switch to 6. MOBILE WEB SOLUTIONS the full Web experience if they so choose. Now it’s time to break these solution types down even further. Let’s talk about four real options for those searching 5. TECHNOLOGY OPTIONS for browser-based mobile Web options. Now, let’s focus on the three broad solution types for developing the mobile Web. Content Adaption Platforms 6.1 UsableNet: A Content Adaptation Platform and Mobile Portals have balanced the tradeoff between UsableNet’s pitch is straightforward: Give them six weeks coverage and enhanced experience. They address most and your mobile Web site will be ready. client demands and most of the driving principles addressed above. Conversely, the custom WebKit is more specialized UsableNet provides all the technological services necessary and is designed specifically for higher-end smartphones. to translate a Web site to the mobile Web, without involving the client beyond selecting suitable content for the mobile 5.1 Content Adaption Platforms. product. Because no training or infrastructure is needed, Content Adaption Platforms use existing Web pages as a companies that employ strong in-house Web design and source and adapt them into a mobile experience that is a mature ecommerce framework will find UsableNet to4 © Sapient Corporation 2011
  5. 5. Mobile Web Technology Options be a perfect fit, because they can delegate the mobile mobile device. The platform also uses XHTML-based specialization to UsableNet, and remove the need for in- coding and auto-categorizes unknown devices. house mobile Web programming. Unfortunately, InfoGin uses .Net-based implementation, which requires a C#, .Net, and Visual Studio experience Very often, UsableNet’s clients are from the hospitality and environment. It’s weaker on actual customer industry where functional aspects such as checking in, implementations, and cannot build custom IGML (InfoGin booking a flight, or booking a hotel room have a higher Markup Language) components. As far as HTML5, CSS3, priority over the mobile experience. Consider UsableNet for and advanced mobile features, there’s not much available. quick projects that need an overnight turnaround. And, if your user base contains a wide variety of devices, from basic 6.3 Volantis: A Mobile Portal phones to the most advanced smartphones, UsableNet Volantis employs a combination of transcoding, SiteBuilder, may be advantageous for the implementation. and custom coding. They have a proven record of thin-client solutions for a wide variety of customers. But proceed with caution if your requirements are heavy Volantis has modified its product lines and strategy on user experience or forward-looking features such as significantly during the past few years, transforming itself Geolocation or device recognition. The platform seems into a vendor primarily supplying its vast device library to be closed, though UsableNet claims to provide an SDK and transformation engine. This narrow market focus (software development kit) for premier clients. Additionally, has enabled Volantis to build a significant lead over other HTML5 and CSS3 features are completely driven by client vendors of device library functions, requirements, and device recognition is the responsibility of the client as well. Some sites seem to lack thorough mobile Volantis uses a language called XDIME (XML Device rendering; some phones just aborted it, which resulted in Independent Mark-up Extensions), which is based on the lost information such as images. W3C’s DIAL (Device Independent Authoring Language), an XHTML 2.0 standard. The foundation of the platform is 6.2 InfoGin: A Content Adaptation Platform robust, but has yet to embrace the changes in HTML5. InfoGin has been in business since 2000 and employs about 80 people. They use software solutions that are deployed Volantis has a good number of interface components within individual data centers to create adapted documented on its site including auto-complete. It also mobile sites. uses a custom CSS wrapper (-mcs) that tries to map the most appropriate CSS properties. Additionally, an XML InfoGin focuses on a mobile Web adaptation server — Pipeline can consume XML feeds from CMS databases. If the Intelligent Mobile Platform (IMP). This platform provides your objective is to code once and run anywhere, Volantis’ a visual design studio that offers content editing and multiple solutions can help fill the gap. The platform’s development tools to create new or existing Web content. standard compliance is impressive and features such as markup optimization are handy. InfoGin administers content and functionality adaptation, as well as developer tools among others. In our analysis, But, if your objective is to leverage the latest features, InfoGin’s product offering had more unique features for Volantis may fall short. And the narrow market focus custom implementation, such as content overlay, and has left Volantis relatively unprepared to answer the the automatic content adaptation platform. If working requirements of rich-client architectures. Also, the custom with InfoGin, consider having a prototype built up that CSS and theme options are completely dependent on demonstrates at least one objective of the experience; their parser. And Volantis shows persistent and significant this development should result in a better chance of a confusion over standards and technologies in presentation successful outcome. (e.g., HTML5 and CSS3 were confused with Bondi and JIL widget frameworks). Favorable features include the ability to adapt CSS and JavaScript. Additionally, InfoGin has a desktop level 6.4 NetBiscuits: A Mobile Portal emulator that captures screenshots for Flash and AJAX NetBiscuits is a complete content adaptation platform responses and then sends back HTML content for the5 © Sapient Corporation 2011
  6. 6. Mobile Web Technology Options whose templates must be created by their authors. This platform offers components that render across virtually any 7. THE PLATFORM SUMMARY device, with the ability to target the specific device and pass The chart below will help to distinguish between the custom code. different platforms available. 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 Most mobile Web platforms were developed with one single ability to include custom JSP (JavaServer Pages) with mix objective: to render content across all devices — from the of BiscuitML and custom code, and the inclusion of some most basic devices to smartphones. With clients looking at rich components including Apache POI, which provides a long-range footprint, they are probably — and should be Java libraries for reading and writing files in Microsoft — looking at these platforms as a mobile Web technology Office formats. solution. But NetBiscuits is not without its share of problems. For If you require compatibility across most devices over instance, the proprietary markup language cannot be higher-end mobility features, one of the Content Adaption compiled, there is no advanced HTML5/CSS3 components Platforms or mobile portals provided can probably be featured, and code quality is poor when using tables. leveraged. Also, NetBiscuits work well for a basic implementation, but will not actively support any customization. So, if your On the other hand, with emerging WebKit devices, the site requires simple implementation and isn’t heavy on mobile browser landscape has moved beyond compatibility experience, consider NetBiscuits. into mobility. We’re really able to leverage features that are only available on specific device families. 6.5 Custom WebKit focused implementation By taking a closer look into the platforms that exclusively And, just quickly, remember that we also have the Custom serve the browser-based mobile Web experience, you’re WebKit platform option, a solution that deals almost now be better prepared to advise clients on the quickly- primarily with smartphones. evolving mobile solution space. 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.6 © Sapient Corporation 2011
  7. 7. Mobile Web Technology Options 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 or via LinkedIn.  REFERENCES AND RESOURCESGartner — 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 — Mobile resources http://mobiforge.comDeviceAtlas — Device detection http://deviceatlas.comW3C mobileOK Checker — — www.usablenet.comInfoGin — www.infogin.comVolantis — www.volantis.comNetBiscuits — www.netbiscuits.comWebKit — www.webkit.orgThis paper was first published as a Webinar on May 20, 2010.7 © Sapient Corporation 2011