A Web-first or Mobile-first approach to application development?

Everything a non-technical individual or business owner needs to know before developing a digital application.

91social
9 min readMay 13, 2020
Web-first or Mobile-first approach to application development

If you are a startup or a business looking to take your presence online, one of the key questions that you may be facing is whether to build a mobile app or a web application? If you’re intrigued by the increasing smartphone share and have decided to build a mobile app to have a wider reach, you may still be faced with questions such as which platform to build first, iOS or Android? Native or Hybrid? Even if you’re considering developing a website/web application, you still cannot afford to lose out on the vast chunk of the population who use mobile browser to access your application. If your website is not designed to be responsive for mobile use, you might end up providing a bad user experience to your customers. Our goal is to simplify all these jargons and help you make informed decisions to get you started in the digital world.

Understanding Websites, Web applications, and Mobile applications

Website:

A website, as the name suggests, is a site or a collection of web pages, which are primarily intended to provide specific information to a user or visitor. Some examples of websites are the news, blogs, and product description pages that we see on a day-to-day basis. To further deconstruct this with some real-time examples, the page that you’re currently on is a web-page. It is static, meaning that it provides the same information to any visitor who reads this. Or, take, for example, our website, 91social.com. The purpose of our site is to let our clients or visitors know about our work and the services that we provide. It also acts as a platform for creating awareness about certain technologies or processes that may help businesses grow.

Programming languages such as HTML, CSS, and JavaScript could be used to develop websites. If you’re not someone who is not comfortable meddling with code, there are plenty of website building applications like WordPress, Wix, etc. which help you get started quickly. Developing a website has become fairly simple, and also does not cost a lot on the wallet.

Responsive Web Design:

Responsive Web Design is a process of developing websites to ensure that the content on it responds and adjusts to various devices depending on their screen size, resolution, browser, etc. “Mobile devices account for approximately half of the web traffic worldwide”, and the trends show that this share is increasing year-on-year. If your customers and visitors fall into the category of those who primarily use mobile devices to browse the internet, it would make sense to design the site keeping them in mind. This thought process is what we call the “mobile-first” approach. Designing the experience and content keeping the smallest screen in mind, and then adding elements and content that are well displayed and engage the audience. This approach is also said to benefit the businesses by better ranking and indexing the mobile-first content on Google’s Search Engine Result’s Page over the desktop equivalent.

Image from freepik.com

The way responsive web designing works is that when a page is designed, the elements and content in it are positioned relative to each other, rather than having them placed in fixed positions. The website, because of these relatively placed elements, which are technically called the fluid or flexible grids, respond, and resize to adjust to various devices. This helps provide a good experience for the user. HTML and CSS are generally used to resize, shrink, or enlarge a web page to fit the size of the device. However, there are a lot of front-end frameworks available too, such as Bootstrap and Foundation, which make it easy to develop or build a mobile-first responsive website.

Web Application:

Web applications are applications that can be run on the browser without having to install them on a system. Unlike websites, web applications are more dynamic and require interaction between the user and the application to solve the user’s problem. Some examples of web applications that we use daily could include e-commerce applications like Amazon or Flipkart; Social media applications like Facebook, LinkedIn; productivity tools like Microsoft Excel, Google Sheets, and so on. At an enterprise level, Software as a Service(SaaS) applications also falls into the category of web applications.

Web applications mainly serve the purpose of getting a user’s job done from any browser or any machine. They’re not as simple as a website in terms of functionality, and have a lot of components, like front-end, backend, business logic, database, etc. Multiple programming languages can be used to develop web applications, PHP, Java, Python, JavaScript, etc. There are also a lot of frameworks like Angular, Backbone, Spring, Rails, etc. that ease the process of web development and help create intuitive web applications.

Mobile App:

There is little to no need for introducing what mobile apps(applications) are. We interact with them daily, and most of our work and communication happens through these apps. So let us now try and understand what these are, and the purpose they serve? During the initial days when smartphone adoption was really low, and both the Android and iOS ecosystems were still naive, there were only two types of apps.

  1. System apps — Apps that are present by default along with the Operating System, such as the Phone(Dialer), Camera, Gallery, etc. These apps are developed to work well with the hardware and provide basic functionality.
  2. Third-party apps — These are apps that are created by developers who wish to make them available to the smartphone users through the platform’s app store.

Now that we know what system apps and third-party apps are, let us delve deeper into how these third-party apps are developed.

Native Apps:

A native mobile app is an application that is developed on the same platform or programming language that is used to develop the operating system itself. For example, to build a native app on the iOS platform, third-party developers need to use Objective C/Swift programming language. Similarly for Android, Java/Kotlin is the programming language that is used.

The benefits of developing a native app are:

  • It’s the look and feels is consistent with that of the Operating System(OS) itself, and performs better than hybrid applications.
  • It is easier to access the hardware and system-level functionality on a native application.

Just to help you understand, let us assume a bank XYZ has developed and published a native app on both the Android and iOS platforms. This native app would be able to better leverage the hardware components such as memory and battery, to provide better performance. Consider that the app wishes to provide an additional layer of security to the user, by utilizing the fingerprint hardware. This is possible with a native app, while the same cannot be done with a hybrid app.

A major limitation of developing native apps is the need for maintenance of separate codebase for each platform and subsequently, supporting and updating those platforms. Eventually, this process becomes harder and expensive for a small business.

Hybrid Apps

Hybrid apps are cross-platform mobile apps, created using languages such as HTML5, CSS, and JavaScript, and by utilizing a plethora of frameworks available such as Apache Cordova, React Native, PhoneGap, etc. These languages help create webview elements/objects that are encapsulated as a native application wrapper, which when compiled for a specific platform will run as a native app within its browser. It is widely believed that Uber develops its app as a hybrid app, and yet, works well on both iOS and Android platforms.

Some of the benefits of using hybrid app development include the relatively low cost of development in reaching out to a wider number of users and the ease of maintaining the codebase. Also, it is easy to ship early versions of the product to both the platform and test the waters quickly and cheaply.

However, there are also some downsides to developing hybrid apps, which include inconsistency in app performance when not developed properly and cautiously. There is still an issue for hybrid apps having limited ability to interact with the system components and OS features, which could be a deal-breaker for some developers. All in all, some mobile apps developed using React Native have been close to native apps with regards to user experience, but need to catch up on the performance front.

Progressive Web Apps

Progressive Web Apps (PWA) sit somewhere between a regular web application and a native mobile app. A regular web application is accessible over multiple devices and operating systems, and provides a consistent experience to all the users, with a single codebase. On the other hand, native apps, as we had discussed previously, provide a rich user interface, perform tasks flawlessly due to their ability to make use of the OS features and system hardware. However, they are restricted to one platform/operating system, and for the app to reach the user network of other platform, it needs to be developed on another operating system as well. This may seem to be a costly development process, as multiple codebases have to be maintained. This is where PWAs come to rescue, by providing native experience on multiple platforms.

Source: What are PWAs — Web Dev

Now, to define what exactly PWAs are, is a little complicated, since everyone who is familiar and enthusiastic about PWAs see them differently. Google defines PWA as “Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment.”

Source: Getting Started with Progressive Web Apps — Google Developers

One significant benefit that PWAs provide over native or hybrid apps is that since these apps run on the browser like any other web apps, and function like native apps, the user doesn’t have to install these apps on their device, rather, they’ll just have to add them to their home screen. That way, for users, storage space is no longer a concern, and for the developers, the footprint of the app is not going to be a major setback.

Every time I talk about PWAs, I make sure to end the discussion with my experience using Flipkart Lite, a Progressive Web App that Flipkart has built sometime in 2017. By far, this is one of the best apps that I’ve used. The experience is no different from that of the native Flipkart app, and to my surprise, the PWA loads certain screens faster than the native app itself. I could be wrong, or maybe it’s just with my device, but I feel, the more I use it, the better it gets. There are occasional glitches with notifications, but then once I refresh the app, they seem to work fine. This is where I think the PWAs shine, in providing a good user experience, and for the developers making the development cost lower. When more and more developers start focusing on PWAs, the ecosystem will mature and get better.

Final thoughts on choosing the right development approach

A business owner should be clear about the problem that he/she is solving, and what their customer profile could be like. If the purpose of having a website or a mobile app is to keep the customers informed about the latest products and services of a business, then a responsive web app or a PWA could be what you want to build. If your primary target market uses mobile phones more than desktops, then you may want to start with a hybrid app, and as your business grows, you might want to either convert it to a PWA, or native apps for multiple platforms. For most small and medium businesses though, building native apps might not be the right approach, unless they want to differentiate through in-app user experience or, unless the business has enough resources to maintain native apps on two platforms. Whatever is the development approach that your business chooses, make sure to take a mobile-first route.

If you're looking for some help turning your idea into a product, visit us at 91social.com. Alternatively, you can contact us at social@91social.com or on +91 95130 07587.

--

--

91social

We provide technology services to businesses. Our mantra is to help businesses 'Go Digital'.