UNIT I

FUNDAMENTALS OF MOBILE & WEB APPLICATION DEVELOPMENT

Basics of Web and Mobile application development, Native App, Hybrid App, Cross-
platform App, What is Progressive Web App, Responsive Web design.

I. BASICS OF WEB AND MOBILE APPLICATION DEVELOPMENT

Definition:
A mobile application or mobile application is designed to run a mobile device such as
a phone tablet or watch.
Mobile applications often stand in contrast to desktop computers, and with web
applications which run in mobile web browsers rather than directly on the mobile device.
Three Types of Applications
 Android Application
 IOS Application
 Mobile Application
What is Android?
 Android is an open source and Linux- based Operating System for mobile devices
such as Smart phones and tablet computers. Android was developed by the Open Handset
Alliance, led by Google, and other companies.
 Android offers a unified approach to the development of mobile devices which means
developers need only develop for Android, and their applications must be run on different
devices powered by Android.
What is IOS?
 IOS (formerly iPhone OS) is a mobile operating system created and developed by
Apple Inc. exclusively for its hardware. It is the operating system that presently powers many
of the company's mobile devices, including the iPhone, iPad, and iPod Touch. It is the second
most popular mobile operating system after Android.
Mobile Application
Developing apps for mobile devices require considering the constraints and features
of these devices. Mobile devices run on battery and have less powerful processors than
personal computers and have more features such as location detection and cameras

1
 As we have witnessed a revolution in the consumer space toward mobility, most
analysts have identified that mobile devices are the major gateways to Internet as compared
to desktop browsers. Mobile device is replacing all traditional channels to access the
information. To align with this trend, enterprises too are designing the digital applications to
cater to wide array of mobile devices and platforms.

Mobile application development involves the process of developing the

applications for mobile devices such as Personal Digital Assistants (PDA), tablets and smart
phones and other mobile devices. Native mobile apps are designed to run on a specific mobile
platform, sometimes specific mobile operating system and supported hardware.

Mobile applications are part of main stream digital strategy for Business to
Consumer (B2C) enterprises. Most of the enterprises are now adopting “mobile-first” strategy
wherein the digital applications are designed, developed and tested for mobile devices;
mobile users attain the primary focus in the digital strategy. Disruption in mobility space has
major impact on the revenues for the enterprises. Mobile apps are shaping user experiences
and are providing real-time information and offer more engaging experiences for the users.

Mobility based digital strategy considers various things such as user experience,
performance, interactivity, device form factors, device limitations, location needs and
personalization.

Key Drivers for Mobile Applications

The following are the key drivers of mobile apps:

Innovation in mobile space such as proliferation of smart phones, higher bandwidths
offered by 3G (Third generation) and 4G (Fourth generation) technologies are coupled with
higher capacity storage technologies with higher speed chips would keep powering mobile
devices.
Consumer behavior: Customers are more used to mobile devices and is easy for them to
access information on the move.
Personalized content delivery: Enterprise can leverage the location and sensors to offer
more contextualized, relevant and personalized content,offers and advertisements.
Mobile ecosystem: An explosive growth in Mobile Applications stores such as Apple
store, Google Play store, Windows marketplace store was coupled with availability of games,
utilities and other apps.
Social Networking: With the popularity of web 2.0 and social media technologies such as
Facebook, Twitter users are increasingly using the location based features in the social media
platforms.

2
Impact of Mobile Apps on various domains
Mobile apps are impacting various industry verticals and functional domains. Given
below are high level changes enabled by mobile apps across industries:
Retail and Consumer Packaged Goods (CPG) Industry: Mobile apps provide location
based store locator, targeted promotions/offers/coupons, service reminders, mobile bidding,
in-store tools, cross sell/upsell tools and comparator tools. Basically, mobile apps play key
role in driving the traffic, increasing the sales and drive the brand loyalty. On B2B front,
mobile apps have redefined lead management, CRM functions, efficient tracking, field force
automation and such. Mobile apps have also lead to improvement in store merchandize,
supply chain and inventory managements.
Banking industry: Mobile apps enable convenient ways to carry out transactions such as
account balance, payment, localized alerts, tap-topay, branch locator, and payment coupons.
Mobile apps would also enable mobile banking, mobile wallet and provide “on-the-go”
features.
Logistics: It is easier to track shipments, get updates, manage warehouse, and fleet using
mobile apps.
Healthcare: Mobile apps can easily connect patients, doctors and insurance providers as
well as provide wellness management solutions.
Besides the above mentioned enterprise scenarios, mobile apps have revolutionized consumer
space with various mobile apps related to gaming, utilities, social media, video streaming and
many more.
Attributes of Mobile applications

The following are the key attributes of mobile applications:

Ubiquity: Mobile applications are always available and connected and enable users to
access
information anytime anywhere
User friendliness: Mobile applications provide responsive and interactive user interface
with essential information. They utilize the camera, sensors, media output, touch/multi-
touch/voice interface for providing simplified actionable information.
Location awareness: Mobile applications provide location sensitive information using
Global Positioning System (GPS) and other sensors.
Minimalistic: The content and features in mobile apps are minimal which are essential for
the functionality.

3
Objectives
 Understand key concepts of mobile app development,
 Know the opportunities and challenges of mobile apps,
 Know the details of PC based apps as well as web based apps,
 Know the content and key protocols of mobile apps
 Know the evolution of mobile apps, and
 Comparison of mobile apps and web apps and upcoming trends in mobility space.

II. MOBILE APP ARCHITECTURE

4
 III. CONSIDERATIONS AND CHALLENGES FOR MOBILE APP

The main considerations for mobile app design are listed below:
Intended utility of the mobile app
o Consumer engagement with richer user experience
o Productivity through efficient flows
o Driving incremental revenue through user stickiness
o Customer conversion
o User loyalty through targeted and personalized offers
App Architecture
o Native vs hybrid vs web based on the requirements
o Middleware requirement for centralized configuration
o Offline vs online capability for storing data
App Development Principles
o User experience through richer controls and interactive components
o Compatibility on various devices and platforms
o Performance for each screen and task
o Security for data
o Productivity enhancement tools
Target users
o Consumers for B2C apps
o Business for Business to Business (B2B) apps
o Partners for B2B apps o Employees for Business to Employee (B2E) apps
Testing
o Device testing
o Performance testing
o Various testing scenarios

5
The main challenges in mobile app strategy are given below:
 Diversity of devices and heterogeneous technologies: There are various mobile
platforms and devices. The app should provide optimal experience in all the
scenarios.
 Security: Mobile app should ensure data security during transmission and during
storage.
 User experience: Mobile app should provide optimal user experience leveraging the
device capabilities to provide highest engagement possible.
 Network: Mobile app should be designed to work in regions with network, latency
and bandwidth challenges.
 Compliance to diverse standards, OS, mobile platforms and devices.

IV. PC BASED APPLICATIONS

Personal Computer (PC) based applications are software programs developed to run on
specific operating system and hardware platforms. These were the pioneer applications that
were used during the initial days of software development. There are mainly two types of PC
based applications, namely, standalone PC applications and client server applications.

Standalone PC Applications
Standalone PC applications are independent software programs which would run on
an OS. These applications do not typically use network resources or support multi-user mode.
Utility programs such as word processor, calculators, and media players fall into this
category. Each of the applications had a good user interface for the PC user to interact.
Client server applications
In client server applications, each terminal PC had client software which is connected
to a centralized server software. The client program would get input from the end user and
would submit the details to the server software through a dedicated session established
through the network. These applications were also referred to as “thick clients”. Database
software, networked games, banking software, network file system are some of the examples
of this category of applications.

6
 V. WEB BASED APPLICATIONS
What is a web application?
A web application (web app) is an application program that is stored on a remote
server and delivered over the internet through a browser interface. Web services are web apps
by definition and many, although not all, websites contain web apps.
Developers design web applications for a wide variety of uses and users, from an
organization to an individual for numerous reasons. Commonly used web applications can
include webmail, online calculators or e-commerce shops. While users can only access some
web apps by a specific browser, most are available no matter the browser.
Internet enabled applications that are mainly rendered on desktop browsers are
categorized as web applications. Most of the modern web applications follow layered Model-
View-Controller (MVC) architecture which supports loose coupling and flexible modular
components. A typical MVC based web application is depicted in the Figure.

The key layers of the MVC framework are shown below:

Presentation layer (View layer): User experience components such as portlets, widgets,
pages, User Interface (UI) modules, buttons, and forms are present in this layer. Modern web
applications normally use JavaScript components to build the UI modules. The UI modules
will mainly render the view portion of the application. View components communicate with
back end through services. Modern web applications use Representational State Transfer
(REST) based light-weight services.
Business layer: This layer consists of business components which implement business
logic and business rules. The layer mainly consists of rules engine, search, business objects,
workflows, business process management (BPM), caching frameworks and other entities. All
business modules expose services to presentation layer.

7
 Data layer (model layer): This layer mainly consists of persistence handling components
such as database access components, Data access objects (DAO), query components, Object
Rational Mapping (ORM) frameworks and such.
Besides these layers we also have security components (responsible for
authentication and authorization) in security layer and utilities components to handle cross-
cutting concerns.
A complex n-tier enterprise web application is depicted in Figure. We could
see various layers for enterprise search, content management, ecommerce with various
enterprise interfaces.

The multi-layered architecture is mainly based on MVC architecture:

PRESENTATION LAYER
This involves the presentation components like portlets and other user experience
components. Key components are explained below:
Personalization: Role-based access and other fine-grained access control to provide
personalized user experience.
Widgets: Wherever required jQuery based client-side widgets would be developed to
provide client-side functionalities. This would help enhance overall user experience and
improve the page performance. Real-time report data display/refresh, pagination, search
functionality are typical scenarios where this AJAX-based feature can be employed.

8
 Multi-device support: Responsive design and device recognition features will be
leveraged to cater to various mobile devices.
Page layouts: Flexible page layout to cater to various web pages.
Information architecture and navigation models: This consists of context menus, bread
crumb, left navigation, site map, site hierarchy for the web site.

WEB CONTENT MANAGEMENT LAYER

Web content management layer consists of mainly following modules:
Content authoring using authoring templates.
Content tagging with relevant metadata and tags.
Content publishing to various targets and in various formats.
Asset management of various digital assets, documents and multimedia files.
Workflow for managing the content approval, publishing and update processes.
E-COMMERCE LAYER
Ecommerce modules usually consist of modules related to catalog management, order
management, modules for shopping cart, promotion, cross sell and up sell, and product
information management.
INTEGRATION LAYER/SERVICES LAYER
The solutions use business service layer for integration with external system.
Integration strategy is based on Service Bus Architecture, in which the middleware can act as
a service bus linking multiple applications that require services of each other through a
central service layer. The service bus becomes a point of data interchange and manages the
communication with each peripheral application independently. All service invocations will
be done through ESB layer. JMS component will be developed to send and receive the
messages to the ESB message destination. Application/System services will be developed and
exposed to the ESB layer.

SECURITY LAYER
Security layer consists of modules related to authentication, authorization and single
sign on.

9
 VI. EVOLUTION OF MOBILE BASED APPLICATIONS

The core features of the various stages of mobile app evolution are detailed
below:
Embedded systems: In this category, we has embedded systems such as calculators on
various devices. The embedded systems had limited functionality.
Device specific apps: The applications specific to the device are part of this category. For
instance, device specific games and other utility apps fall into this category.
OS specific apps: Operating system specific apps such as games, media players fall into
this category.
Cloud based apps: In this category, we have always available cloud based apps.

VII. COMPARISON OF A MOBILE APP WITH A WEB APPLICATION

Criteria Web Application Mobile App

Provides good experience Mobile apps can leverage full
optimized for desktop browsers. device capabilities and offer rich
User experience experience to users. Mobile apps
provide rich branding experience
to users.
Web applications provide good Native mobile apps provide high
Performance performance based on performance.
performance optimizations.
Web applications provide Mobile apps provide location
Location awareness relatively less location sensitive and contextual
awareness information
We can have single code base We need to potentially have
and hence relatively lesser multiple code bases to cater to
Development cost development and maintenance various mobile platforms and
cost. hence relatively higher
maintenance cost.

10
 Criteria Web Application Mobile App
Web applications are mainly Mobile apps are accessed by
Access mechanism accessed by desktop browsers mobile browsers and mobile
and mobile browsers. devices.
Web applications use limited Mobile apps provide intuitive
User intuitive amount of device features. features using device’s camera,
features sensors, GPS etc. and provide
notifications to users.
Web applications provide Mobile apps offer high level
Interactivity interactive interfaces through interactivity through touch
widgets. interface.
Web applications are normally Gaming, location-specific
used as Information display applications such as car rental
Applicability
platforms apps, store locator apps, reporting
apps.
Web applications offer Mobile apps provide high degree
personalization features through of personalization through various
Personalization
server side preferences. context parameters such as
location, history etc.
News, blogs. Games, social media and location
Common use cases
related services.

VIII. Types of Mobile Application

1. Native
2. Hybrid
3. Web
4. ProgressiveWeb
If a business or adeveloper wants to build an app, then they must be aware of the
types of mobile examples and their functionalities.
We will discover the major differences between these types of apps and also how
they are taking your business to the front foot. The different types of mobile
applications are:
NATIVE APPS
Native apps are the most used mobile apps .These are specifically developed for a
particular mobile operating system, such as iOS or Android.
These apps ensure high performance through seamless integration with the device’s hardware
and software capabilities. For example, they take advantage of the device’s features, such as
camera,GPS,storage,RAM,etc.

11
 Technology Used: These apps are built using programming languages like Swift or
Objective-C for iOS and Java or Kotlin for Android. Some other programming
languages for native app development are C++, C#, Python,etc.

Features of Native Apps

 Native OS Support: The primary feature of Native apps is that they are built for
a particular OS (Operating System). For example, you cannot use iOS apps on
Android or Blackberry devices.
 Offline Access :These apps store their data on users’ devices. That’s why they
often come with offline access functionalities. For example,you can download
any YouTube video and watch it when you don’t have access to the internet, or
you can play mobile games without an internet connection.
 Access to Device Features: Native apps can take advantage of all of the
device’s features, such as its camera, microphone, accelerometer, and soon. For
example, Paytm uses your device camera to scan QR codes and make payments.
 Great User-experience: Native mobile applications are designed with platform-
specific user interface(UI) elements. It provides a familiar and intuitive
experience to users. The UI can be designed to match the platform’s guidelines,
resulting in a seamless and engaging experience.
 Optimal Security: Native apps benefit from security measures implemented by
the underlying device. They take advantage of and work with the built-in
security features of your device. For example, these apps can work under the
security policies of devices like Knox Security by Samsung or Think Shield by
Motorola.
Pros and Cons of Native Apps
 Instant and easy app update
 Easy to launch and deploy
 Fasterand betterperformance
 Takes device space
 High cost of regular updates
Examples: Whats App,Instagram,PUBG,Candy Crush, Uber,etc.

12
WEBAPPS
As the name suggests, Web Apps are applications that are hosted on the web and
do not require an installation to use it. They are built with web technologies in mind and
can be accessed across multiple platforms.
These apps behave and function similarly to the Native Apps; it’s just that they
are not stand alone applications.

Technology Used: The most common and popular language for web app technology is
JavaScript. Some other programming languages are CSS, HTML5, Ruby,etc.
Features of Web Apps
 Cross-Plat form Compatibility:Web applications can be easily accessed
through different web browsers and operating systems. They ensure
compatibility across various platforms and devices.
 Integration Features:Web apps have the ability to integrate with various third-
party apps and services. For example, you can seamlessly integrate Grammarly
with Google Docs.
 Easy Maintenance and Updates:Web applications can be updated and
maintained from a central location.They reduce the need for individual
installations or manual updates, making it easier to add new features and fixes.
 Scalability:These apps are designed to handle a large number of users and data
and are scalable to accommodate growing user demands without compromising
performance.
 Simple and Interactive User Interface:Webapplications provide a visually
appealing and interactive user interface. They allow users to easily navigate and
interact with the application’s features and functionalities.

13
 Pros and Cons of WebApps
Works with multiple OS and devices
• Easy maintenance
• Nostoragelimitations
• Reliescompletelyontheinternetconnection
• Highdevelopmentandmanagementcost
Examples:GoogleDocs,DropBox,Pinterest,etc.

HYBRID APPLICATION
Hybrid apps are a combination of both web and native apps. They are developed
using web technologies and then wrapped within a native container. These are basically
web apps that are designed to resemble and function similarly to native apps.
They mimic the appearance of native apps with features like a home screen app
icon, responsive design, and fast performance. However, it’s important to note that they
are still fundamentally web applications.

Technology Used: Hybrid apps combine web technologies with native APIs. They are
built using various tools and languages,such asHTML5,Ionic,Swift, Objective C, etc.
Features of Hybrid Applications:
 Native app-like performance: Hybrid applications leverage the power of native
device functionalities. This helps them to deliver high-performance experiences
similar to native apps.
 Cross-Platform Compatibility:Hybrid apps are designed to work seamlessly
across multiple platforms, such as iOS and Android, ensuring wider audience
reach.
 Scalability:Hybrid applications can quickly scale to accommodate a growing user
Base or increased demand, thanks tot heir ability to leverage both native and web
components.
 Access to device features:Similar to Native,hybrid applications can access a Wide
range of device features,such a scamer as,GPS,contacts,notifications,etc.

14
  Easy maintenance:As hybrid apps have a single code base,updates, and bug
fixes can be implemented once and deployed across platforms, simplifying
maintenance efforts.
Pros and Cons of Hybrid Applications
 Easytomaintainduetoasinglecodebase
 Cheaperandquickerto build
 Lesscustomization
 Complexdebuggingprocess
Examples:SoundCloud,Evernote,Gmail,AmazonAppStore,etc.

PROGRESSIVE WEB APPS (PWAS)

A Progressive Web App (PWA) is a website that resembles and functions like a
mobile app. It utilizes the capabilities of mobile devices without the need for users to go
through app stores ,pay for downloads, or install software on their devices.
Instead, PWAs can be easily found through search engines and accessed instantly
through web browsers.
Technology Used: PWAs are built using standard web technologies like CSS,
HTML,Web Assembly,and JavaScript.
Features of Progressive Web App
 Responsive Design: Progressive Web Apps can adapt to different screen sizes
and devices, providing a seamless experience across desktops, tablets, and smart
phones.
 App-Like Experience: These apps offer an app-like interface and navigation,
allowing users to interact with them similarly to native mobile applications. This
enhances the user experience.
 Fast Loading Speed: These apps leverage caching and other optimization
techniques to load quickly. This speediness helps businesses improve user
retention.
 PushNotifications:PWAs can send push notifications to users’devices,even when
those are inactive.This feature enables timely updates and engagement.
 Discoverability and Shareability:Thay are discoverable through searchengines
and can be easily shared via URL links.

15
 Pros and Cons of Progressive Web App
 No need to install any app or software to use it
 Quick and easy to develop
 Easily adaptable to devices with a browser
 Consumes a lot of device battery
Examples:Starbucks,Soundslice,MakeMyTrip,Flipkart,etc.

CROSS-PLATFORM MOBILE DEVELOPMENT

Cross-platform mobile development is an approach to developing software

applications that are compatible with multiple mobile operating systems (OSes) or platforms.
These apps are platform-agnostic, meaning they can be used regardless of the OS powering
the mobile device.
The need for cross-platform mobile development
Originally, the complexity of mobile app development was compounded by the
difficulty of building out a back end that worked across multiple platforms. Although it was
time-consuming and expensive, it was often easier to build native applications for each
mobile OS. The problem was that the code built for one operating system could not be
repurposed for another OS.
Cross-platform development provides a solution to those challenges. With a cross-
platform app, some or even all of the source code can be shared across platforms, such as
Android and iOS. As a result, developers need to code mobile assets only once. These assets
will work seamlessly on all platforms so they don't have to be recoded for each individual
platform. Cross-platform development is different from native development, where a mobile
app is created to run only on a specific mobile OS.
Native vs. cross-platform development
Native applications are loyal (or native) to a particular OS. Thus, native apps created
for Android devices will not work on iOS devices, and vice versa. For the app to run on other
platforms, developers must create multiple versions, which requires additional coding effort.
This effort adds to development time as well as costs. In addition to accommodating a
particular OS, native apps are coded in a particular programming language. Often, the
language is Objective-C or Swift for iOS, and Java, C or C++ for Android.
These specifics can be disadvantages in dynamic development environments where
language flexibility and speed are essential. In such situations, cross-platform app

16
development may be a better choice since the approach results in a single-code application
that will work on every platform right from the outset.
Even though native apps have several disadvantages, they do have some benefits as
well, including the following:
 More reliable performance on the intended mobile OS.
 Can fully use the features and capabilities of the device.
 More responsive.
 Can have a more intuitive interface.
 Often deliver a better user experience (UX).
Benefits of cross-platform mobile development
Cross-platform apps have shareable code that can be reused across multiple platforms.
A single codebase speeds up development and cuts development costs, particularly for
repetitive tasks like data serialization and API calls. Faster development usually translates to
faster time to market.
Adopting the cross-platform approach enables project managers to use their
development resources more effectively since they don't have to assign separate resources for
developing apps for different platforms. Also, fewer lines of code means there are fewer
chances of bugs and security errors, reducing the time and effort required for code testing and
maintenance.
Drawbacks of cross-platform mobile development
Performance glitches are the most common issue with cross-platform apps. Many
such apps have limited functionality since they cannot support many native-only functions of
mobile devices, such as advanced graphics. Poor design is another common problem,
resulting in poor UX.
That said, improvements to development technologies and frameworks are helping to
overcome these issues and create cross-platform apps that have the following characteristics:
 Flexible.
 Adaptable.
 Stable.
 High performing.
 Highly functional.
 Able to deliver good UX.

17
Popular cross-platform development frameworks
Cross-platform app developers can choose from many mobile app development
platforms, each with its own capabilities and benefits. Among the most popular frameworks
are the following:
Xamarin. Launched in 2011, Xamarin is an Open Source framework for developing cross-
platform and hybrid apps that can work seamlessly on any mobile platform, including
Android and iOS. Xamarin uses C# programming and Microsoft's .NET framework. It
provides its own integrated development environment (IDE), as well as numerous software
development kits (SDKs). The platform was once independent but later acquired by
Microsoft. Today, it is available under the MIT License as part of Visual Studio IDE and
source code editor.
Flutter. Like Xamarin, Flutter is an open source cross-platform framework. Created by
Google, Flutter uses the Dart programming language. It is suitable for building many kinds of
cross-platform apps that look native on multiple mobile platforms, especially the following:
 Minimum viable products (MVP).
 Apps that may put a heavy load on the device CPU or GPU.
 Apps that need to share UI components while looking as close to native as possible.
Flutter also incorporates platform channel technology that enables developers to create
platform-specific code. Additionally, its hot reload feature allows them to make code changes
and view them instantly.
React Native. Introduced by Facebook in 2015, React Native is suitable for building both
hybrid and cross-platform apps. It is based on the React JavaScript library and supports
multiple languages, including Java, Swift and C. Some of the benefits of this framework are
the following:
 It can render a native-like interface.
 Code is reusable.
 It provides numerous ready-to-apply features.
 It converts the source code into native elements to enhance UX.
 It's easy to use.
Ionic. Ionic provides a simple syntax and a library of HTML, CSS and JavaScript
components to develop interactive cross-platform apps. The framework features hardware-
accelerated transitions and touch-optimized gestures to improve app speed and performance.
Its single shared codebase enables developers to create flexible UIs for all major OSes.

18
Developers can also choose eye-pleasing themes, form controls, add inline overlays and
much more.
Sencha. Sencha is a JavaScript grid to build data-intensive cross-platform applications for
both web and mobile. It is based on modern web technologies, such as ES6, HTML5,
JavaScript and
CSS, and provides more than 140 UI components to quickly build apps for mobile devices.
IX. INDUSTRY-SPECIFIC TYPES OF MOBILE APPLICATIONS
Let’s explore some of the best industry-specific types of mobile applications and
how they cater to the unique demands of various sectors.
1. Social Media Apps
Social Media Apps are the most favorite apps in the world. With billions of users and
traffic, they have become an integral part of our daily lives. That’s why it is crucial for
these apps to deliver a seamless and enjoyable experience while constantly evolving to
provide new and exciting features.

Some of the Social Media Appsare:

 Facebook
 Instagram
 LinkedIn
 WhatsApp
2. UtilityApps
Utility apps are designed to simplify and enhance our day-to-day tasks, yet we often
over look their existence. These apps mostly come within the device and serve basic
features. These apps require less space and integrate with device’s own hardware and
software features.

19
Some of the Utility Apps are:
 Camera
 Calculator
 Flashlight
 Calendars
3. LifestyleApps
In recent years, there has been a significant rise int he popularity of life style
apps. These apps are designed to enhance and facilitate various aspects of your life.

They encompass a wide range of mobile applications that cater to different areas of your
life, such as:
 Fitness-Fitbit, GoogleFit
 Dating-Tinder, Bumble
 Food-Zomato, Swiggy
 Shopping-Amazon, eBay
4. Productivity Apps
Productivity apps aim to boost efficiency and organization, helping you to manage
your work and personal tasks effectively. These apps are often provided by large
organizations to help you with your day-to-day professional work.

20
Examples of productivity apps are:
 Google Docs
 Mail
 GoogleSheet
 Ever note
 ZohoDocs
5. Gaming & Entertainment
This is a huge industry with a lot of competition .From casual games to immersive
role-playing games and streaming entertainment on the go, gaming and entertainment
apps have taken their place strongly.

Someof the best Gaming & Entertainment apps are:

 Netflix
 SubwaySurfers
 Hulu
 Hotstar
 COC

21
 6. News
Mobileapps dedicated to news keep us informed about the latest happenings in the
world. They offer personalized news feeds, breaking news alerts, and multimedia
content.These apps ensure that we stay up dated and well-informed.

The most popular news apps are:

 Google News and weather
 AajTak
 BuzzFeed
 Feedly
 Inshorts
X. COMPARE TYPES OF MOBILE APPLICATION IN DETAIL

Mobile
Native Hybrid Web ProgressiveWeb
Application
Development
Technology Swift, Java,Kotlin, etc. HTML5,Ionic, CSS,HTML5,Ruby CSS,HTML,
Used Swift, etc. ,etc Web Assembly, etc.

Both App store and

Distribution Play Store or Appstore
web browsers Web browsers Web browsers
Cross-
platform No Yes Yes Yes
support
Security High Moderate Low Low
Cost High Minimal Low Low

Updates Automatic or
Manual Manual Automatic Automatic
PokeMonGo, Evernote,Gmail, GoogleDocs, StarBucks,
Examples Instagram, Spotify, etc. AmazonApp DropBox, Soundslice,
Store,etc. Drive,etc. MakeMyTrip,etc.

22
 XI. RESPONSIVE WEB DESIGN
Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to
provide an optimal viewing experience, easy reading and navigation with a minimum of
resizing, panning, and scrolling, across a wide range of screen sizes and devices.
Introduction
Responsive web design is a process of designing and building websites to provide better
accessibility and optimal viewing experience to the user by optimizing it for different
devices. With the growing trend of smart phones and tablets, it has become almost
unavoidable to ignore the optimization of sites for mobile devices. Responsive web design is
a preferable alternative and an efficient way to target a wide range of devices with much less
efforts. Responsive layouts automatically adjust and adapts to any device screen size, whether
it is a desktop, a laptop, a tablet, or a mobile phone. Figure 1 shows the Illustration

Understanding Responsive Web Design

Responsive Web design is the approach that suggests that design and development
should respond to the user’s behavior and environment based on screen size, platform and
orientation. The practice consists of a mix of flexible grids and layouts, images and an
intelligent use of CSS media queries. As the user switches from their laptop to iPad, the
website should automatically switch to accommodate for resolution, image size and scripting
abilities.With more devices come varying screen resolutions, definitions and orientations.
New devices with new screen sizes are being developed every day, and each of these devices
may be able to handle variations in size, functionality and even color. Some are in landscape,
others in portrait, still others even completely square. As we know from the rising popularity
of the iPhone, iPad and advanced smartphones, many new devices are able to switch from
portrait to landscape at the user’s whim. How is one to design for these situations? Refer to
Figure 2

23
Why Responsive Web Design Is Important
There was a time when people only accessed websites from a desktop
computer. The vast majority had the same size monitor. Websites were designed for the
average visitor. Today, people access websites from a variety of different devices with
screens ranging from a few inches all the way up to 27″ or more and expectations have
changed. Consumers expect the website they’re visiting to know that they’re using a tablet vs.
a PC. They expect the site to adjust to them—not the other way around.Different devices also
come with different expectations in terms of usability. For example, the Apple iPhone has
“trained” people to expect to be able to swipe left/right/up/down. People visiting a website
from a smartphone expect to be able to click a phone number and have their phone give them
the option of auto-dialing that number. Similarly, they expect an address to have a “click for
directions” option that uses their phone’s GPS. A site that is responsive takes all of this into
account and automatically adjust to provide visitors with the best possible user experience
regardless of the device being used to access the site.
How does responsive web design work?
Responsive web design works through Cascading Style Sheets (CSS), using
various settings to serve different style properties depending on the screen size, orientation,
resolution, color capability, and other characteristics of the user’s device. A few examples of
CSS properties related to responsive web design include the viewport and media queries.
How to check if a website is responsive?
You can quickly see if a website is responsive or not in your web browser.
1. Open Google Chrome
2. Go to your website
3. Press Ctrl + Shift + I to open Chrome DevTools
4. Press Ctrl + Shift + M to toggle the device toolbar
5. View your page from a mobile, tablet, or desktop perspective

24
 You can also use a free tool, like Google’s Mobile-Friendly Test, to see if pages on
your website are mobile-friendly. While you can achieve mobile-friendliness with other
design approaches, such as adaptive design, responsive web design is the most common
because of its advantages.
Pros of Responsive Web Design
There are many advantages(Figure 3) of RWD:
1. User experience friendly: Responsive web design is specially designed to respond
according to customer’s or user’s behaviors and their needs, according to screen size, etc. It is
used to create a website that adjusts smoothly to different screen sizes especially for mobile
viewing. Therefore, it increases reach to customers and users on small devices like mobiles,
tablets, etc.
2. Save cost on responsive web design development: Comparing with the development for
websites on PC, iPad, and mobile phone, the responsive design is more conducive to saving
design and development costs.In terms of design, it only needs to design two sets of design
renderings for the responsive web interface based on the PC, iPad, and mobile. From the
perspective of the front-end development, itonly needs to develop 3 different sets of CSS
styles. From the perspective of post-maintenance, there is no need to maintain PC interface,
iPad interface, and mobile interface.
3. SEO friendly: Responsive websites are generally responsible for ranking top at SEO
(Search Engine Optimization). On mobile devices or small devices, a responsive website
loads much faster as compared to a desktop or laptop. This automatically increases positive
user experience that in turn gives a higher ranking to the website on SEO.
4. Increase profit and sale: Responsive web design is easy to create and faster to implement.
This is because there is no requirement for another website for small devices. A responsive
website is specially designed to fit all screen sizes. Therefore, one can save time, effort,
maintenance costs and development cost associate with creating another website for small
devices. It generally increases user experience and reaches more audiences through small
devices. More will be an audience; more will be profit and sale.
5. Low maintenance: Responsive websites are designed to fit all screen sizes. There is no
change in content and other elements to fit on a different device. This website uses the same
content across all devices. There is only one website that fits all screen sizes so the cost of
maintaining two websites is also saved because maintaining a separate site for a small device
requires a lot of testing and support. Managing a single website requires less maintenance,
less cost, saves time, etc.
25
6. Easy to track users: Responsive websites take less time to load, saves time, money, save
development effort of creating another website for small devices. One can use this time and
effort to track their site visitors.

Cons of Responsive Web Design

There are many disadvantages (Figure 4) of RWD:
1. Bad compatibility for the old version of IE browser:If your site users are mostly using the
old version of IE, it is not recommended to do responsive design. That’s a fatal problem for
the older version of IE browser (IE6, IE7, IE8).
2. Slow page loading: Though, responsive websites are easy to maintain, but it sometimes
takes a long time to load the page. It includes some high-resolution images and videos that
sometimes require a lot of time to load.
3. Navigation is tough: Responsive websites are specially designed to fit on small devices.
But maintaining the simplicity of large websites for small devices sometimes becomes
difficult. This is because small devices have less screen size and this turn make it more
difficult to navigate website through small devices.
4. Time-consuming development: Responsive websites are essential but take a lot of time in
the development process as compared to the development time of normal websites

26
Fluid or Elastic or Liquid Layout
Most webpage layouts include one, two, or three columns. In the early days of web
design, when most users had similar screen sizes, web developers would assign the columns
fixed widths. For example, a fixed layout may include a main content area that is 960px wide
with three columns that have widths of 180px, 600px, and 180px. While this layout might
look great on a 1024x768 screen, it might look small on a 1920x1080 screen and would not
fit on a 800x600 screen.Fluid layouts solve this problem by using percentages to define each
area of the layout. For example, instead of creating a content area of 960px, a web developer
can create a layout that fills 80% of the screen and the three columns could take up 18%,
64%, and 18% respectively. By using percentages, the content can expand or shrink to fit the
window of the user's computer. The CSS used to create a fixed layout vs a fluid layout is
shown below

The CSS classes in the examples could each be assigned to a div within a
page's HTML where the .left, .right, and .middle classes are enclosed within the .content
class. The content class could also be a assigned to a table and the other classes could be
assigned to table cells. The fixed width .content class does not require a defined width since it
automatically spans the width of the enclosed divs or table cells. So, a fluid layout is a type of
webpage design in which layout of the page resizes as the window size is changed. This is
accomplished by defining areas of the page using percentages instead of fixed pixel widths.In
a fluid website layout, also referred to as a liquid layout, the majority of the components
inside have percentage widths, and thus adjust to the user’s screen resolution.It is a layout in
which the width of main container is flexible(in percentage). Whatever the screen-size is, the
layout will remain same. Refer to Figure 5. The image in Figure 5 shows a fluid (liquid)
website layout. While some designers may give set widths to certain elements in fluid
layouts, such as margins, the layout in general uses percentage widths so that the view is
adjusted for each user

27
Properties of Fluid Layout
1. Width is in percentage.
2. Text scroll down when zoom in or zoom out
3. Dependent of screen size.
4. Horizontal Scroll will never come on any screen unless any fixed content is inside.
Designers may not use fluid page designs for various reasons, but the layout’s
benefits are often overlooked. Below are pros and cons to think about when considering fluid
web page design.
Pros
1. Fluid web page design can be more user-friendly, because it adjusts to the user’s set up.
2. The amount of extra white space is similar between all browsers and screen resolutions,
which can be more visually appealing.
3. If designed well, a fluid layout can eliminate horizontal scroll bars in smaller screen
resolutions.
Cons
1. The designer has less control over what the user sees and may overlook problems because
the layout looks fine on their specific screen resolution.
2. Images, video and other types of content with set widths may need to be set at multiple
widths to accommodate different screen resolutions.
3. With incredibly large screen resolutions, a lack of content may create excess white space
that can diminish aesthetic appeal

28
Example:
STYLE
<!DOCTYPE html>
<htmllang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
box-sizing:border-box;
}
.container{
width:80%;
margin:auto;
}
header{
padding:10px;
background:aqua;
}
nav{
padding:10px;
background:gray;
}
main{
display:flex;
}
aside{
background:pink;
flex: 1 0 25%;
padding:10px;
}
29
section{
background:yellow;
flex: 1 0 75%;
padding:10px;
}
footer{
padding:10px;
background:#333;
color:#fff;
}
</style>

HTML
</head>
<body>
<div class="container">
<header>This is header</header>
<nav>navigation menu</nav>
<main>
<aside>this is left sidebar</aside>
<section>this is right section</section>
</main>
<footer>this is footer</footer>
</div>
</body>
</html>

30
Fluid Layout vs Responsive Design
The terms "fluid layout" and "responsive web design" are sometimes used
interchangeably, but they are two different things. A page created using responsive web
design includes CSS media queries, which load different styles depending on the width of the
window or the type of device used to access the page. Responsive web design requires more
CSS (and sometimes JavaScript) than a basic fluid layout, but it also provides more control
over layout of the page.

31