INSTITUTE : UIE

DEPARTMENT : CSE
Bachelor of Engineering (Computer Science
& Engineering)
Mobile Application Development(20CST-355)

TOPIC OF PRESENTATION:
Choosing a Mobile Web Option, Adaptive Mobile
Websites
Prepared by:
Parveen Kumar Saini(E13339)

DISCOVER . LEARN .
www.cuchd.in EMPOWER
Computer Science and Engineering Department
 Choosing a Mobile Web Option,
Adaptive Mobile Websites

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Web Developer or Android Developer – Which One is Better Career Choice?

• Web development and Android development are the two most emerging career sectors for
developers.
• Both of these sectors require different skills, have different markets, and most important have
diversified usability.
• While making choice, we need to compare them on the basis of the frameworks required for
development steps in learning Web Development and Android development, level of difficulty,
career opportunities, salaries, and future trends of android and web development.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 1. Understand Difference Between Web Development and Android
Development:

• Web Development involves coding, designing, and operating web applications and websites.
• A proficient Web Developer is expected to design and develop a user-friendly website with easy
navigation.
• The programming languages needed for web development are HTML, CSS, JavaScript, etc. Web
development can further be divided into 3 categories:
• Front-End Web Development.
• Back-End Web Development.
• Full Stack Web Development.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Web development can further be divided into 3 categories:

• Front-End Web Development: It involves designing the webpage i.e. how the website looks,
inserting the content as well as specifying different navigation.
• Back-End Web Development: It involves dealing with the database and server-side
programming. It basically maintains all the data that is being entered and processes the data to
display the output to the users.
• Full Stack Web Development: It is a combination of front end development as well as back end
development.
• The full stack developer takes care of the designing of the websites as well as maintaining and
processing the data entered.
• Android Development involving the designing of mobile applications.
• Here the developer is required to build the applications for android devices. In general, the most
popular languages used for android development are Java and Kotlin.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 2. Steps to Learn: Web Development and Android Development

• Web Development:
• Step 1: Select your field of interest among Front End and Backend Development
• Step 2: Front End Developers need to learn the skills required such as
• Creating the layout using HTML (Hypertext Markup Language)
• Styling your web page using different attributes in CSS (Cascading Style Sheet)
• How JavaScript fetches queries and responds to them and helps in adding interactive features such
as audio, video, and images.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Web Development:

• Step 2: Front End Developers need to learn the skills required such as
• Responsive designs that help web pages to adjust to the device (Bootstrap)
• Version control systems such as Git and GitHub also need to be used as they allow to track changes
made and go back to the previous versions.
• If you are interested in Backend development then you can learn
• Programming languages such as Java or Python,
• Server-side frameworks such as Node JS and
• SQL and NoSQL Database Systems such as MYSQL, MongoDB where data to be stored,
retrieved, and updated.
• Step 3: You also need to know about HTTP protocols and deployment tools which allow moving
files/data to and from the server.
• Learning DevOps would be a great addition as it helps a single team to implement the entire
Application Development Lifecycle.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Android Development:

• An android developer specializes in designing applications and android apps for the marketplace.
• Step 1: Learn the basics of android development which includes
• Java SDK
• Knowledge of any programming language among Java/Kotlin
• Android UI Design
• Step 2: Learn the advanced skills of android development which includes
• Proficient in using Git, REST API
• Knowledge about Database Systems
• Able to design applications around UI, cloud message API, and continuous integration.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 3. Difficulty Level

• Front-End Web development is slightly easier than Backend Web development because in the
backend you need to keep track of the data processed in addition to storing and maintaining the
data.
• Overall web development is comparatively easier than android development – however, it majorly
depends on the project you build.
• For example, developing a web page using HTML and CSS can be considered an easier job in
comparison with building a basic android application.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 4. Career Opportunities

• The global mobile application development market is likely to expand at a 14% CAGR during the
forecast period (2016-2022).
• Similarly, the job opportunities for Web Developers are expected to grow by 25-27% by the year
2024.
• So, the job market for both technologies is constantly increasing.
• But since learning web development is comparatively easier than android development,
competition for web developers is huge!
• On the other hand, android developers are relatively lesser in numbers than web developers, so
they are slightly in greater demand.
• Developers skilled in both android and web development would have the highest demand overall
because it will open up much more career opportunities for them in both the developing fields.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 5. Learning Curve

• Web development and Android development both offer great and impressive learning skills.
• Web development gives us knowledge of different languages such as HTML, CSS, JavaScript, and
also frameworks such as ReactJS, AngularJS, and server-side frameworks like NodeJS.
• In mobile app development, you can learn about developing an iOS app as well as developing an
android app.
• Here, you get a chance to learn and implement programming languages like Java, Kotlin, etc.
• Learning Git and GitHub and database management systems is a common requirement for any
kind of software development process.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 6. Salary & Future Advancements

• Salary is one of the most seen requirements while deciding on career options.
• So for a Web developer in India, salary varies from 5 LPA to 27 LPA depending upon the
experience and expertise in the development.
• Salary of android developer also lies somewhere in the same region, it is slightly more for iOS
developers as skilled iOS developers are lesser as compared to android developers.
• As technological advancements are growing day by day, web developers and android developers
both have a great future ahead.
• The demand for good and user-friendly mobile and web applications is continuously going to rise
in the future and not going to stop any time soon!!
• So, as of now, you have got a clear picture of which career option suits you the best! Now, what
are you waiting for? Pick up a domain and start learning!!

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 What is the dif­fer­ence be­tween a mo­bile app and a web app?
• As a busi­ness owner, pro­ject man­ager or stake­holder, one of the crit­i­cal de­ci­sions you will make in
your quest for cus­tom soft­ware will be whether to de­velop a mo­bile ap­pli­ca­tion or a web ap­pli­ca­
tion.
• Unless you are fa­mil­iar with the ba­sics of web­site de­vel­op­ment, there is a high chance you need a
suit­able an­swer to this ques­tion: how do desk­top apps, web apps and mo­bile apps dif­fer?
• This is not to say that you can’t dif­fer­en­ti­ate be­tween a mo­bile ap­pli­ca­tion and a web ap­pli­ca­tion
on your own, but do you know which of the two of­fers a higher re­turn on in­vest­ment?
• What are the fac­tors that you need to con­sider be­fore you de­cide? Which of your buyer per­sonas
mo­ti­vated your choice?

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 We ex­plore the dif­fer­ences be­tween web apps and mo­bile apps.
• have knowl­edge of the processes in­volved in build­ing mo­bile and web apps,
• have knowl­edge of the tech­nol­ogy be­hind it,
• know how to de­cide which of them is suit­able for your busi­ness and how you can link your web­
site to whichever kind of ap­pli­ca­tion you choose,
• understand the var­i­ous fac­tors to con­sider be­fore you choose one,
• and lastly, know how you can lever­age web and mo­bile app de­vel­op­ment to achieve your busi­ness
goals.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Mobile App vs. Web App: Definitions, Pros and Cons

• The traf­fic com­ing from mo­bile apps and web apps make up a con­sid­er­able vol­ume of all or­ganic
traf­fic for web­sites and eCom­merce stores.
• Mobile app vs web app sta­tis­tics are stag­ger­ing.
• Currently, mo­bile apps are re­spon­si­ble for 50% of web traf­fic glob­ally for the last four con­sec­u­tive
years (2017 — 2021).
• However, traf­fic is not the sole in­di­ca­tor of busi­ness re­turn.
• You still need to con­sider your Click-Through Rate (CTR), sales con­ver­sion, and cus­tomer re­ten­
tion.
• So, let’s briefly de­fine and com­pare the pros and cons of build­ing mo­bile apps and web apps.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 What are web apps?

• Web ap­pli­ca­tions, short­ened as web apps, are ap­pli­ca­tion pro­grams stored re­motely on a server and
de­liv­ered to a web browser in­ter­face via the in­ter­net.
• Think about the func­tion­al­ity you can per­form on your browser.
• These in­clude on­line cal­cu­la­tors, word pro­cess­ing, eCom­merce stores, in­ter­net bank­ing, stock trad­
ing, etc.
• Some web apps only work with spe­cific browsers, while oth­ers work re­gard­less of the browser.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 What are mo­bile apps?

• Mobile ap­pli­ca­tions, also known as na­tive apps, are de­signed to func­tion ex­clu­sively on mo­bile de­
vices.
• Mobile apps have ac­cess to many fea­tures of mo­bile de­vices, such as the mi­cro­phone and cam­era,
and there­fore of­fer im­proved func­tion­al­ity and op­ti­mal user ex­pe­ri­ence

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Mobile App Vs Web App Pros

• Here is a quick com­par­i­son be­tween mo­bile apps and web apps.

• Mobile App
• Higher speed and per­for­mance due to built-in fea­tures on phones such as lo­ca­tion ser­vices, cam­era
and mi­cro­phone, etc.
• Superior user ex­pe­ri­ence and optimized per­for­mance for over­all bet­ter functionality.
• Push no­ti­fi­ca­tions that en­hance con­ver­sion on the go for bet­ter engagement.
• Ability to reach a broader au­di­ence by lever­ag­ing stores (App Store vs. Google Play).
• Web App
• Cost-efficient in its de­vel­op­ment, re­sult­ing in a smaller amount of time and re­sources re­quired to
build.
• Easily ac­ces­si­ble to the mar­ket as it re­quires no ap­proval from mar­ket­places and app stores.
• Wider cov­er­age to users re­gard­less of the type of de­vice or op­er­at­ing system.
• Instant up­dates since it uses a com­mon code base al­low­ing for sim­pler and faster up­grades.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Mobile Apps vs Web Apps Cons

• Here is a quick com­par­i­son of a mo­bile app vs web app cons

• Mobile App
• Requires high in­vest­ment as the cost of de­vel­op­ing across var­i­ous op­er­at­ing sys­tems can be ex­pen­sive.
• For in­stance, Android apps can­not work on Apple prod­ucts and vice versa.
• The need to down­load, in­stall and grant ac­cess can be a turn off for po­ten­tial cus­tomers and, as such re­sult in a loss
of revenue.
• High cost of main­te­nance due to con­stant plat­form hard­ware and soft­ware up­grades. E.g. new phones or op­er­at­ing
systems.
• Getting ap­proval from the app store can take time, and bad ex­pe­ri­ences/ rat­ings from users can kill the app and have
se­vere neg­a­tive con­se­quences on the busi­ness.
• Web App
• Dependence on in­ter­net avail­abil­ity means the app is al­most use­less where there is no in­ter­net access.
• Limited ac­cess to de­fault mo­bile de­vices fea­tures such as GPS, cam­era, mi­cro­phone, etc.
• Non-uniform ex­pe­ri­ence for users as dif­fer­ent web browsers can af­fect the smooth run­ning of the web appMost
browsers do not sup­port push no­ti­fi­ca­tions, which trans­lates to po­ten­tial loss of en­gage­ment and cus­tomers.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Understanding the tech­nol­ogy be­hind de­vel­op­ment

• Web de­vel­op­ment has a lot of tech­ni­cal jar­gon that many busi­ness lead­ers will find bor­ing.
• It re­ally sucks read­ing tech­ni­cal terms when you can’t wrap your head around them.
• However, we’ll cover the ba­sics and sim­plify it for you as much as pos­si­ble.
• Having the ba­sic knowl­edge be­hind the tech­nol­ogy we lever­age will give you an in­sight into which
one is the most suit­able for your busi­ness.
• Full-stack de­vel­op­ment is broadly di­vided into two main cat­e­gories; front-end and back-end.
• The front-end deals with con­vert­ing data into a graph­i­cal in­ter­face with the use of pro­gram­ming
lan­guages such as JavaScript (JS), Hypertext Markup Language (HTML), and Cascading Style
Sheet (CSS).
•  Used by al­most all web de­vel­op­ers to code cus­tomer be­hav­iours into web­sites, web apps or mo­
bile apps.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Understanding the tech­nol­ogy be­hind de­vel­op­ment

• HTML: Hypertext Markup Language han­dles the struc­tur­ing of your web page.

• CSS: The Cascading Style Sheet is a pro­gram­ming lan­guage that con­trols the pre­sen­ta­tion of your
web page. It re­mains the foun­da­tion of the World Wide Web to­day, along­side JavaScript and
HTML.
• Back-end de­vel­op­ment in­volves utilizing data­bases to trans­fer and re­ceive data from one end to an­
other.
• It also en­com­passes the man­age­ment of user con­nec­tions, se­cure con­nec­tion and every­thing that
em­pow­ers your web ap­pli­ca­tion to per­form op­ti­mally.
• Popular pro­gram­ming lan­guages such as Python, Java, PHP and Ruby are used for back-end de­vel­
op­ment.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Mobile web app frame­works and other tech­nolo­gies

• Every busi­ness is unique, and so are the tech­nolo­gies that power their ap­pli­ca­tions.
• Analyzed var­i­ous fac­tors that are im­por­tant to con­sider when choos­ing be­tween mo­bile apps and
web apps.
• However, the tech­nol­ogy de­ployed also de­pends on some fac­tors.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Some fac­tors.
• Website
• Speed of in­for­ma­tion mat­ters in web­site de­vel­op­ment.
• Many web de­vel­op­ers of­ten pri­ori­tise vi­sual ap­peal over load­ing speed. According to sev­eral re­
ports, 40% of users leave web­sites that take longer than 2 - 3 sec­onds to load.
• The lighter and softer your web­site, the faster it shows data, and the higher Google will score it on 
Google Lighthouse.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Web App

• When we say web app, we are re­fer­ring to re­spon­sive web apps.

• For busi­nesses that want to save both money and time, we usu­ally rec­om­mend de­vel­op­ing re­spon­sive
web apps first be­fore build­ing mo­bile apps.
• An ex­am­ple of this is when you have one app that works on a desk­top as well as through a mo­bile
browser, such as Slack.
• Slack.
• Slack makes it easy to contact your colleagues – you can message anyone inside or outside your
organization and collaborate just as you would in person.
• People can work in dedicated spaces called channels, which bring the right people and information
together.
• What is the purpose of Slack?
• Slack is a messaging app for business that connects people to the information they need. By bringing
people together to work as one unified team, Slack transforms the way organizations communicate.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Slack.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Mobile App
• There are many tech­nolo­gies mo­bile de­vel­op­ers de­ploy for app de­vel­op­ment.
• However, we rec­om­mend us­ing React Native due to its re­spon­sive user in­ter­face and fast load
time.
• One ques­tion that most busi­ness own­ers ask is, can we in­te­grate mo­bile ap­pli­ca­tions to web ap­pli­ca­
tions? The quick an­swer is, yes!
• Mobile ap­pli­ca­tion in­te­gra­tion can be car­ried out us­ing ap­pli­ca­tion pro­gram­ming in­ter­face (API)
tools and by us­ing a shared data­base.
• So yes, mo­bile apps de­vel­oped with React Native can be linked to web apps. However, con­sider
what the in­ten­tion of the prod­uct is.
• If it is im­por­tant to be across all de­vices, note that you only need a mo­bile app and a min­i­mum vi­
able prod­uct (MVP) to get started cre­at­ing the ap­pli­ca­tion ecosys­tem.
• If the prod­uct re­quired na­tive de­vice ac­cess, such as ge­olo­ca­tion, that can’t be ac­cessed through a
web app - that func­tion­al­ity would­n’t be avail­able across all plat­forms.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 The process of build­ing a mo­bile app

• According to Statista, mo­bile apps’ rev­enue through app stores and in-app ad­ver­tis­ing stands at
$693 bil­lion, while en­ter­prise mo­bil­ity has a pro­jected value of $510.39 bil­lion by 2022.
• As a busi­ness owner or stake­holder, your com­pany should take ad­van­tage of these grow­ing trends.
• Beyond app cre­ation, the mo­bile app de­vel­op­ment processes your de­vel­op­ers adopt will de­ter­
mine the suc­cess or oth­er­wise fail­ure of your app.
• At WorkingMouse, we fol­low a de­vel­op­ment process we call the Way of Working that en­sures all
your scope re­quire­ments are fully met.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 The process of build­ing a mo­bile app

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Web App Vs. Mobile App: Which is bet­ter for my busi­ness?

• How would you feel if we told you that so­lu­tion A is bet­ter than so­lu­tion B?
• You might take our word for it. Unfortunately, though, we can’t make that de­ci­sion for you.
• No two busi­nesses are the same, ir­re­spec­tive of their level of sim­i­lar­i­ties.
• Even if you be­long to the same in­dus­try and serve the same au­di­ence, your busi­ness strate­gies and
cus­tomer ser­vice is ex­clu­sively your as­set.
• As such, your de­ci­sion to opt for a web app or na­tive app de­pends on sev­eral fac­tors, which we’ve
cov­ered off be­low:

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Top 6 Factors to con­sider while choos­ing web app vs mo­bile app

• Here are some of the fac­tors to con­sider in the web app vs. mo­bile app de­bate:
• 1. Target Audience
• 2. Functionality and user ex­pe­ri­ence (UX)
• 3. Development and launch time
• 4. Organic reach and ease of dis­cov­er­abil­ity
• 5. Privacy Concerns
• 6. Budget

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 1. Target Audience

• Your cus­tomers are the most crit­i­cal de­ter­mi­nant of most of your busi­ness de­ci­sions.
• You need to un­der­stand your buyer per­sonas, de­mo­graph­ics, psy­cho­me­t­ric, pur­chase power and
pref­er­ences.
• Comparing web apps and mo­bile apps sta­tis­ti­cally will al­ways favour the lat­ter.
• This is be­cause, for every 1% in­crease in web app au­di­ence, there is a 41% in­crease in mo­bile
users.
• However, a di­rect com­par­i­son might not be log­i­cal busi­ness-wise.
• You need to know which of the two your au­di­ence is more com­fort­able work­ing with.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 1. Target Audience
• For in­stance, if your busi­ness serves the mil­len­nial, choos­ing a web app over a mo­bile app spells
dis­as­ter right from the start.
• In con­trast, if your cus­tomers are busy pro­fes­sion­als such as bankers, ac­coun­tants, or busi­ness lead­
ers, there is a chance that they will not have time to op­er­ate mo­bile de­vices as they are al­ways
glued to their lap­tops.
• In that case, a web app may be an in­tel­li­gent choice.
• Also, if you need to up­date your ap­pli­ca­tion fre­quently, it will be best to in­vest in a web app over
a na­tive app.
• However, if your ser­vices re­quire cus­tomers to use your app of­fline with full func­tion­al­ity, a mo­
bile app is the pre­ferred choice.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 2. Functionality and user ex­pe­ri­ence (UX)
• As we ex­plained ear­lier, mo­bile apps al­low the user to use mo­bile de­vices with in­built func­tion­al­i­
ties such as cam­era, mi­cro­phone, lo­ca­tion and so on.
• Therefore, if the prod­ucts or ser­vices you mar­ket re­quire that your cus­tomers use these fea­tures,
then you should con­sider na­tive app de­vel­op­ment.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 3. Development and launch time

• Time is al­ways a crit­i­cal fac­tor for the suc­cess of your busi­ness.

• If you need to reach your cus­tomers within the short­est pos­si­ble time, a web app is def­i­nitely your
best op­tion.
• This is be­cause mo­bile app de­vel­op­ment is time-con­sum­ing from a tech­ni­cal per­spec­tive.
• Additionally, you will need to de­velop dif­fer­ent apps for the var­i­ous op­er­at­ing sys­tems, Android
and iOS.
• Furthermore, the mar­ket­place re­quires ap­proval be­fore you can pub­lish it for users to down­load.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 4. Organic reach and ease of dis­cov­er­abil­ity

• Despite the num­ber of users, mo­bile apps rely en­tirely on busi­ness­es’ ef­forts in let­ting their cus­
tomers know about their app.
• Some users as­sume that every busi­ness owns a mo­bile app.
• Thus, many of them will pos­si­bly check you out on the Play or App Store to see what they can
find. On the other hand, web apps are ranked or­gan­i­cally through web­site pages.
• Therefore, your SEO ef­fort will ben­e­fit web apps over mo­bile apps.
• What does SEO means?
• Search Engine Optimization
• SEO means Search Engine Optimization and is the process used to optimize a website's
technical configuration, content relevance and link popularity so its pages can become easily
findable, more relevant and popular towards user search queries, and as a consequence,
search engines rank them better.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 5. Privacy Concerns

• With cy­ber­crime grow­ing and the con­tin­u­ous aware­ness of the need for pri­vacy, many cus­tomers
are con­scious of the apps they in­stall on their phones.
• If users need to grant ac­cess to use some of your ap­pli­ca­tion fea­tures, they may be dis­cour­aged
from in­stalling the app.
• This gives web apps an edge over na­tive apps.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 6. Budget

• Web apps are more bud­get-friendly com­pared to mo­bile apps.

• If your busi­ness seeks to minimize ex­penses, a web app is a more cost-friendly choice.
• However, you need to be care­ful not to priorities bud­get over achiev­ing your busi­ness ob­jec­tives.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Advantages and Disadvantages of Adaptive Web Design

• Adaptive web design is especially developed to adjust to size of browser or screen. In adaptive web
designing, different website layouts are created to fit best to specific screen sizes of different devices. 
• Basically, two versions of websites are generally created, one is created for small screen i.e., mobile
version and other one is created for large screen i.e., desktop version.
• Mobile versions are used for smartphones, tablets, etc., and desktop versions are used for laptop,
desktop.
• Website or server detect size of device screen and then choose website layout that fit best on device
screen. 
• Choosing right website design will lead to better performance and positive result because different
business has different needs and requirements.
• Therefore, before choosing any web design, determine what are your needs and web design can be
beneficial or not. 

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 There are several advantages and disadvantages of adaptive web design that
can help in making decision. Some of them are given below:    

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Several advantages of adaptive web design
• Targeted for each user
• Increase load time
• Reusable existing websites
• Advertising monetization

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Several advantages of adaptive web design
• Targeted for each user: Adaptive web design create different versions of website for different
devices for increasing user experience at individual devices.
• On each device, users should have a positive experience. In this web design, one can customize
and change page content, layout to best fit screen and improve user experience.
 
• Increase load time: Adaptive web design create different layout for different devices and display
features that are best for specific website.
• Whenever user load website on their device, then layout that fit best on device screen gets loaded.
• This increase loading speed as traffic is decreased.
• Even, server detect device size and then provide layout that will fit best on device screen.
• It provides high resolution graphics only when it detects high-density screen.
 

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Several advantages of adaptive web design
• Reusable existing websites: Some of complex websites are developed using legacy code i.e., source code
written using outdated technology or is no longer supported and is incomprehensible.
• Adaptive websites have different versions of layout for different devices.
• So, if one wants to change or update something, then they do not need to go back to drawing board and again
re-code existing website from starting point.
 
• Advertising monetization: Monetizing websites with ads will only lead to more money and give more
opportunities for earning.
• Adaptive website is the best way to optimize advertise options as adaptive websites are designed to fit best on
device it is viewed on.
• There is no need to chan5ge or replace ratio of banners, images, etc., for smaller resolutions to display best on
screen because smaller versions of websites are available.
• Ad monetization is the practice of taking the existing traffic you drive to your website or digital
property and monetizing that traffic by presenting advertisements to those viewers in exchange for
payment from advertisers.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Several disadvantages of adaptive web design

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Several disadvantages of adaptive web design
• Labor intensive to create .
• Harder to maintain and is complex.
• Expensive.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Several disadvantages of adaptive web design
• Labor intensive to create: Adaptive web design are not easy to create.
• It requires great thinking skills and more labors to create.
• Adaptive web design requires more time and effort as different website layouts are created to best fit
on screen.
• Different website layout means different html code, and more will be code, then more will be labors
required to develop it.
 
• Harder to maintain and is complex: Adaptive websites are not easy to maintain as it is not easy to
maintain all website versions at same level.
• One has to update and maintain each version of website individually whenever required.
 
• Expensive: Adaptive web design is labor intensive I.e., requires a greater number of developers or
labors to create it and also requires a lot of budgets to handle complexity.
• Adaptive design is complex and complicated and therefore it is expensive. It is more expensive to
build and maintain.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Difference between responsive design and adaptive design

• In earlier times, web designers design the user interface of the website by considering the size of
the desktop.
• but nowadays we use websites for Mobile, Tablet, laptops, Wearable devices, and many more
devices so the size of the screen differs for each device.
• Considering these things in mind web designer wants to design a user interface in such a way that
it works properly and fully functionally on all types of devices.
• So Responsive Design and Adaptive Design come into play, Both provide a better user interface
for all types of devices but both follow a different path.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Responsive Design:

• In this design web designers design the user interface of a website in such a manner that whatever
device you are using you can access comfortably web page.
• if we use a web page on the laptop then it splits into a large view but if you use the same web page
on mobile then it synchronizes itself.
• web designers simply design it by using only HTML & CSS. designer works with the developer
for a better user experience.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Responsive Design:

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Adaptive Design:

• In this design web designers design the user interface of a website in such a manner that it creates
different layouts of the web page for the different devices.
• so based on the screen size of the device it loads the layout of the page. it creates the different
layouts for different devices like screen size as for 320px, 480px, 760px, 960px, 1200px, 1600px.
• for different sizes of mobile screens, tablet screens, and many more devices it depicts the size of
layouts of the screen and displays the content of the page. web designers have to work more
because they have to develop six different pages.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Adaptive Design:

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 The major difference between these two are:

S. No. Responsive Design Adaptive Design

1 It adjusts its content and width According to the device, it loads the content of
according to the device. the web page that was already designed.
2 Designers have to work less because Designers have to work more because they
they have to create the single layout of have to create six different versions of the site
the page designers. to handle different screen sizes.
3 If there is any new layout of the screen Designers have to develop a completely new
comes into the market, the content is page if the new layout of the screen has come
adjusted according to them. into the market.
4 Responsive Design works well for Adaptive Design works well for smaller sites
larger sites that are being built from that are being refreshed.
the scratch.
5 Responsive design is smooth because Adaptive design snaps into place since the
the layout adjusts in the flow website is serving something different which
regardless of the device being viewed.  relies on device or browser used to view it.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 The major difference between these two are:

S. No. Responsive Design Adaptive Design

6 Use of Responsive Design Use of Adaptive Design
It has been made easier for less Adaptive is handy for updating an existing site
experienced designers and developers to make it more mobile-friendly.
to use Responsive Design with the
availability of themes via CMS systems
such as WordPress, Joomla, and many
more.

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 The major difference between these two are:

S. No. Responsive Design Adaptive Design

7 Pros- Pros- 
Search Engine friendly A company with an adaptive website
There are numerous templates to outperforms on speed tests.
choose from. Best user experience irrespective to device
Flexibility used.
The design process takes a shorter Mobile devices can detect their users’
amount of time. surroundings.
Availability of design for all screen Optimization of advertisements can be carried
resolutions and sizes out through user data from smart gadgets.
Widely used 
Easier implementation

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 The major difference between these two are:

S. No. Responsive Design Adaptive Design

8 Cons- Cons-
More Coding To begin with, it is normally far more work than
Advertisements can disappear from building a responsive design. As a result, the
the screen bulk of adaptive designs is utilized to modify
The site speed suffers if not existing sites so that they may be accessed via
implemented properly. numerous devices.
Elements can move around  Modification in adaptive design websites is
Download time is more for mobile complex
devices. Not widely used like responsive design

9 Examples- Examples-
Slack Apple
Dropbox Amazon
Github
Shopify

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 Reference
• https://www.geeksforgeeks.org/web-developer-or-android-developer-which-one-is-better-care
er-choice/
• https://www.linkedin.com/pulse/key-considerations-when-choosing-between-mobile-app-web-
david-burkett
• https://www.geeksforgeeks.org/advantages-and-disadvantages-of-adaptive-web-design/
• https://www.geeksforgeeks.org/difference-between-responsive-design-and-adaptive-design/
• https://www.alphadigital.com.au/blog/advice/responsive-adaptive-dedicated-mobile-sites/

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE)
 THANK YOU

For queries
Email: [email protected]

www.cuchd.in Computer
University Science and
Institute Engineering Department
of Engineering (UIE) 56