With a consistent increase in the use of mobile devices, more and more companies and sole traders – especially those in e-commerce – opt for mobile apps for their customers. At the same time, desktop UIs offer much more detailed layout and extended functionality as compared with smartphones and tablets. How to implement both mobile and desktop solutions most effectively?
As reported by the web analytics company Statcounter, the mobile share of global Internet usage first exceeded the desktop one in October 2016. Still, mature markets such as the US and the UK continue to prefer desktop as the primary mode of using the web.
Unsurprisingly, more and more businesses want to make sure that their web resources are convenient and helpful for both desktop and mobile users. How to handle it better?
Your web development options for both desktop and mobile:
Option 1 is to develop a website and a mobile app as two separate solutions with different looks and functions. In fact, it means two separate projects that should be properly managed by the vendor and overseen by the customer. When one solution needs updates or upgrades, the other should be changed accordingly, which implies additional time and costs for development and maintenance. So this option seems to be the most expensive for the customer who has to invest in two different products.
Option 2 is to develop a mobile-friendly website. Such websites can be realized with either adaptive web design (AWD) or responsive web design (RWD).
AWD is built around defined ranges of browser widths. Say, for browsers of under 600px (which are used in most smartphones), layout 1 is developed; for browsers of 600px-900px (large smartphones, most tablets and netbook-type PCs), it’s layout 2; for browsers of more than 900 pxs (most PCs), it’s layout 3.
AWD can be chosen for a well-defined, limited number of standard screen sizes, browsers and OS. On the contrary, RWD enables to apply the website to as many screen sizes as possible. RWD utilizes fluid grids with percentage values, flexible images and media queries. As a result, it looks great on a variety of screens. However, responsive design is a rather time-consuming solution, its design and implementation taking almost twice as long as fixed-width designs.
The common disadvantages of mobile-friendly websites are that, first, they often load more slowly and perform worse on mobile than dedicated mobile apps. Second, they cannot satisfy all the differing needs and expectations of mobile users who are mostly goal-oriented. They are likely to look for specific functions only (say, checking-in or cancelling a booking) and a specific piece of information which is often tied to their geolocation (say, a restaurant or a hotel or theatre plays on a specific date).
Different contexts generate different content and feature needs, and the customer should decide in advance what advantages desktop and mobile solutions have to bring to their target audiences. In many cases, they want to implement, along with the website with a broader functionality, a handy mobile app.
Is it possible to make it with less budget and time? Yes. There is option 3 in custom software development that enables to create both solutions on a single backend with two different frontends. Below, you will find the tips regarding their architecture, backend and frontend.
Web plus mobile: What’s in there?
The architecture
To avoid extra development and maintenance costs, a software development provider would need to optimize the web-plus-mobile architecture, developing a common backend that serves both mobile and web apps.
Such architecture was implemented in this project, where the backend of a traveler’s phrasebook app was integrated with a language learning web portal. Let’s look at this case more closely.
The traveler’s phrasebook app is designed to be quite lightweight and work offline in any location. It enables to build simple phrases in the local language that are immediately translated, complete with pronunciation and then kept in a personalized phrase directory. The app is original in a way that each phrase reflects some linguistic rule that is gradually memorized by the user. In this way, the mobile app becomes the foundation for further language learning, especially when combined with the learning web portal.
The learning web portal was developed on the Pimcore content management system and is available for desktop, tablet and mobile browsers. It covers more topics and language material than the mobile app, offering a personal workspace, training and revision exercises, multimedia materials and other features. For smooth delivery of content-rich data around the globe, we configured a dedicated server for hosting, and used the CloudFlare content delivery network. Subscription-based billing and in-app purchases were implemented with the Stripe technology.
The backend
Developers can build a backend for both web and mobile apps with RESTful API. This mainstream technology requires less bandwidth, which makes it more convenient. It offers a specific software architecture that makes is easy to scale, use, understand and maintain.
RESTful web services are modifiable, fast-performing (as they are less resource-intensive), reliable (in the case of failure, stateless components can be redeployed), simple and scalable (able to support a growing number of users).
Note for the developer: Many web services return lists of items. As screen sizes – especially in mobile and tablet – differ a lot, you may consider implementing a list size as a request parameter.
The web frontend
The web UI on the frontend side can be built with the React.js view library. Having a reactive data flow design, React.js differs considerably from other frontend JavaScript frameworks. Unlike frameworks like AngularJS , it only allows one-way data bindings, which greatly simplifies the rendering logic.
React.js uses a pretty small component API, and is a handy tool if you want to quickly create a dynamic and high-performing presentation layer. The apps that are built with React.js are well structured and understandable.
An important benefit is that each frontend component can be tested well with a virtual DOM, which decreases the cost of ownership and further updates.
The mobile frontend
At the end of the day, there is nothing special in mobile app architecture. You can develop it with any native or cross-platform technology.
A native technology fits your app better in case most of your targeted mobile users cling to iOS or Android OS.
For cross-platform solutions, the developers can use frameworks such as Xamarin (.NET, C#) or Cordova (HTML/CSS/JS). The first one is a more powerful and comprehensive platform that enables to create apps with close-to-native UX, good performance and responsiveness. Cordova is rapid and cheaper in terms of initial investments, providing agility and extensive functionality. Besides, it makes the solution more homogeneous as both web and mobile apps will be developed with JavaScript.
The bottom line
As mobile Internet use is surging, it’s viable for digital businesses to offer both desktop and mobile web resources to their target audience. With a single backend shared between them, it is an efficient and cost-saving solution from the development and maintenance perspective. Technologically, the use of RESTful API and React.js enables to get high-quality products in the end.
