Thursday, November 20, 2014

Transforming Web Content for Enterprise Mobility

Mobile Expert and Chief Technologist with Cognizant's Studio 13, Peter Rogers emerges from another mission to Spain, where he was teaching mobile application development, to share more insights on application development and integration with us.  Enjoy!
Peter Rogers

Often I find myself buried in projects where the backend integration is ridiculously complicated and there is effectively no way to write to the internal systems. Forget those promises of SOA and more recently API Gateways, the majority of systems are still locked away behind email or push based systems. Sometimes the only way to write to these internal systems is through the existing web solution, which is generally a terrible experience on mobile. I have seen some really expensive systems out there that either treat the mobile phone as another desktop, or worse still, try to create a mobile-first experience but end up creating a mobile-monstrosity.

One solution I have recently come up with is to use WebViews in order to display the existing web solution but to transform the results using script injection. A lot of people use very expensive “pay per hit” systems which transform the website in the Cloud but for small projects you can actually do that using client-side injection of JavaScript. The idea is that you inject a small piece of JavaScript which manipulates the webpage in order to make it look and perform better on mobile.

There are two different ways to do achieve this goal:

  1. Transform the Document Object Model (DOM)
  2. Apply style sheets to the webpage
If you go with the DOM approach then you may find yourself losing valuable parts of the web page, such as hidden form elements. If you go with the second approach then you need to brush up on your CSS3 but the webpage should work in exactly the same way as before.

Script injection has become popular recently with the new WKWebView in iOS 8 allowing you to use WKUserScript in order to achieve this task more easily. It is of course equally possible using the original UIWebView or PhoneGap. The benefit of using WKWebView is that you finally get parity with Mobile Safari but the downside is that there are still a few defects, like the lack of ability to load local media resources and JavaScript alerts not working. It is also possible to use the same technique in Appcelerator Titanium to bring this to portable native applications.

A typical webpage in an enterprise system will have some kind of form that submits and a series of tables. I have been able to inject a script which loops through the HTML tables and picks out the key one that I am interested in focussing on for the mobile experience. I was then able to change its width and height, along with giving it a greater z-index, so that it becomes the sole focus of the mobile webpage. I then discovered the CSS zoom property which enabled me to zoom into my selected HTML table (as the name implies). A linear gradient as a background enables the rest of the content to be nicely faded out. You could also add media queries to make the whole experience responsive to changes, such as an orientation change.

The icing on the cake was being able to create a script that listened for the form submission event and added an additional custom event handler. My event handler stored the values of the username and password fields into web storage, so that they could be pre-populated the next time around. I was even able to patch some behaviour that stopped the code working in older browsers. Of course if you had more control over the underlying webpages themselves then you could look at using DOM reduction in order to create a web solution that performed more effectively too. You can remove adverts and other widgets which are not optimised for mobile and maybe even add in a few new media features such as audio.

There will certainly be cases where you have to fallback to using embedded webpages inside of native Apps in order to get access to the backend systems. In which case, why not use a client-side solution to make that experience as painless as possible. It does not always have to involve signing up to an expensive screen scraping or web transformation vendor.

Kevin Benedict
Writer, Speaker, Senior Analyst
Digital Transformation, EBA, Center for the Future of Work Cognizant
View my profile on LinkedIn
Learn about mobile strategies at
Follow me on Twitter @krbenedict
Subscribe to Kevin'sYouTube Channel
Join the Linkedin Group Strategic Enterprise Mobility
Join the Google+ Community Mobile Enterprise Strategies
Recommended Strategy Book Code Halos
Recommended iPad App Code Halos for iPads

***Full Disclosure: These are my personal opinions. No company is silly enough to claim them. I am a mobility and digital transformation analyst, consultant and writer. I work with and have worked with many of the companies mentioned in my articles.