The Digital Future

Kevin Benedict

Subscribe to Kevin Benedict: eMailAlertsEmail Alerts
Get Kevin Benedict via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


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 MobileEnterpriseStrategies.com
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.

More Stories By Kevin Benedict

Kevin Benedict serves as the Senior Vice President, Solutions Strategy, at Regalix, a Silicon Valley based company, focused on bringing the best strategies, digital technologies, processes and people together to deliver improved customer experiences, journeys and success through the combination of intelligent solutions, analytics, automation and services. He is a popular writer, speaker and futurist, and in the past 8 years he has taught workshops for large enterprises and government agencies in 18 different countries. He has over 32 years of experience working with strategic enterprise IT solutions and business processes, and he is also a veteran executive working with both solution and services companies. He has written dozens of technology and strategy reports, over a thousand articles, interviewed hundreds of technology experts, and produced videos on the future of digital technologies and their impact on industries.