Recurring Revenue Authors: Elizabeth White, Yeshim Deniz, Zakia Bouachraoui, Liz McMillan, Xenia von Wedel


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.

IoT & Smart Cities Stories
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
Bill Schmarzo, Tech Chair of "Big Data | Analytics" of upcoming CloudEXPO | DXWorldEXPO New York (November 12-13, 2018, New York City) today announced the outline and schedule of the track. "The track has been designed in experience/degree order," said Schmarzo. "So, that folks who attend the entire track can leave the conference with some of the skills necessary to get their work done when they get back to their offices. It actually ties back to some work that I'm doing at the University of ...
Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...