Why developing ONLYOFFICE mobile web interface was so inevitable and how we managed it

Giving access to the product through mobile screen is a question of life and death for any self-respecting developer. There’s no better proof than stats: back in 2016, mobile and tablet web traffic overtook that of PC. And recently, Android became the most used operating system to access the Internet from, leaving Windows right behind.

We had our mobile web editors set up along with a PC version. However, it was still very green back then, limited in programmatic realization and user interaction. One day this made us revise our approach to the mobile and give gadget users a big update.

Obstacles to having a better mobile web suite

The need to give up Sencha Touch. We have nothing against this mobile framework: at the time using ExtJS it was a perfect symbiosis. But we had to give up on the latter due to the changing license policy, and establish our own solution that allowed to enhance the browser version of the editors. At this stage the development of mobile versions has slowed down significantly, while improvement of Sencha touch continued. Then came the moment when the updates were impossible to release without solid modification of the apps.

The underoptimized UI. The old version was adapted only for iOS 6 and looked rather alien on Android. In case of modern Apple phones and tablets the old interface also needed considerable optimization.

Limited toolset capabilities. There was only the basic editing functionality provided that proved to be rather tight for the demanding users. However the existing interface did not fully allow extending the functionality, and was still not properly adapted for mobile devices.

Lack of spreadsheet and presentation editors. Having released the first version of mobile web applications, we introduced only text editing features, while spreadsheets and presentations remained available for viewing only. However the experience began to show the increasing trend in editing spreadsheets and presentations on mobile.

And steps taken to eliminate them

Having worked the user requests out fast we estimated the volume of work we faced and decided upon a huge reform of mobile editors. The road is made by walking, as the saying proposes.

Introducing new skeleton. We had studied the most popular frameworks and libraries for building them, such as jQuery Mobile, Ionic, Onsen UI, Framework 7, Mobile Angular UI, etc. All of them had both pros and cons for us. Besides, we already had that perfect Backbone + MVC combo that our PC web apps are based on. That’s why we decided to use the trusted solution for the skeleton of the application, and introduce Framework 7 for the user interface.Thanks to the thorough research efforts we wrote the first mobile web editor prototype in one month. That obviously proved the success of linking our own solutions with Framework 7.

Learning from the best practices. The interface was fully optimized for modern mobile devices: the visual elements are easily realized under Apple and Material Design guides. The project is expanding dramatically today, and we decided not to miss the boat.Our mobile web editors perfectly run on all modern iOS and Android devices and received personalized interfaces for each platform. Moreover, the interface confidently adapts to both cell phones and tablets. The touch-based control was also significantly improved along. It is much more intuitive and effortlessly noticeable.

Following the mobile logic. Not all the desktop editor functions are available on mobile devices (not all of them are even needed), but the most necessary ones were successfully introduced. Obviously the mechanics of working from mobile screen are nothing like using a keyboard and a mouse. That required thorough improvement of touch control and smart element allocation, besides introducing the tools themselves. The instruments were grouped and compacted on the upper panel, reducing the number of visible buttons and making paths to the tools more intuitive.

Putting a big finishing touch. The development of spreadsheet and presentation editors did not cause any complications: it basically took us a while to introduce and work out the tool set. Soon all three instruments were out for the test. We announced the new mobile editors already in version 4.3.

Text document editor for iOS: old version (left) and new version (right)
Text document editor for Android: old version (left) and new version (right)

We offer all those using iOS and Android devices to test our renewed editors and evaluate the results of our work. We count on your feedback: only this allows us to push our solutions forward and determine the correct vector of our future development.

Go to www.onlyoffice.com to find out more about our solutions.

)

The ONLYOFFICE team

Written by

ONLYOFFICE

Office software development, creation and design of our products and picky updates on the industry.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade