2021 Regulation CCS332 App Development UNIT 1
Some popular examples of Progressive Web Apps
AliExpress
.
o 104% increase in conversions for new users.
o 3x increase loading time in the PWA app.
o 50% higher re-engagement.
Flipkart
Flipkart Lite. combines the best of both the web and native apps.
fast and uninterrupted experience to smartphone phone users.
After changing to a Progressive Web App, Flipkart saw incredible results:
o 70% increase in conversions.
o 40% higher re-engagement.
o 3x increase loading time in the PWA app.
o 65% increase in pages session in the PWA app.
Twitter Lite
Twitter Lite loads posts instantly. I
t reduces data usage by optimizing pictures and keep on cached data.
push notifications
After changing to a Progressive Web App, Twitter saw incredible results:
o 75% increase in Tweets sent.
o 20% decrease in bounce rate in the PWA.
o 65% increase in pages session in the PWA.
Instagram
It reduces data consumption through processing photos.
. Page 1
2021 Regulation CCS332 App Development UNIT 1
After changing to a Progressive Web App, Instagram saw incredible results:
o 77% increase in conversions.
o 50% higher re-engagement.
o 3x increase loading time in the PWA app.
o 4x lower data usage in the PWA app.
BookMyShow
To sort out problems with the BookMyShow mobile app.
PWA gives smartphone users a smooth ticket-booking experience.
After changing to a Progressive Web App, Instagram saw incredible results:
o Over 80% increase of conversions in the PWA app.
o Smaller size than the iOS app and android app.
o 5x increase in conversion rates.
MakeMyTrip
o 3x increase in conversion rates.
o Smaller size than the iOS app and android app.
o Over 160% increase of user sessions in the PWA app.
1. Responsive Web Design
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.
Designing for the best experience for all users
desktops, tablets, and phones.
web page should look good, and be easy to use, regardless of the device.
Desktop Tablet Phone
. Page 2
2021 Regulation CCS332 App Development UNIT 1
Responsive Web Design - The Viewport
Viewport
user's visible area of a web page.
varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages to have a static design and a fixed size.
To fix this, browsers on those devices scaled down the entire web page to fit the screen.
Setting the Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width - sets the width of the page to follow the screen-width of the device.
Initial-scale=1.0 - sets the initial zoom level when the page is first loaded by the browser.
. Page 3
2021 Regulation CCS332 App Development UNIT 1
Without the viewport meta tag With the viewport meta tag
Size Content to the Viewport
Users are used to scroll websites vertically on both desktop and mobile devices - but not
horizontally!
the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a
poor user experience.
Responsive Web Design - Grid-
View Grid-View
page is divided into columns:
makes it easier to place elements on the page.
12 columns, and has a total width of 100%, and will shrink and expand as you resize
the browser window.
Building a Responsive Grid-View
. Page 4
2021 Regulation CCS332 App Development UNIT 1
Add the following code in your CSS:
*{
box-sizing: border-box;
}
The following example shows a simple responsive web page, with two columns:
Example
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
However, we want to use a responsive grid-view with 12 columns
First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.
Then we make one class for each of the 12 columns, class="col-" and a number defining how
many columns the section should span:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
. Page 5
2021 Regulation CCS332 App Development UNIT 1
All these columns should be floating to the left, and have a padding of 15px:
. Page 6
2021 Regulation CCS332 App Development UNIT 1
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Each row should be wrapped in a <div>.
The number of columns inside a row should always add up to 12:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
We also want to add some styles and colors to make it look better:
Example
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
.margin: 0; Page 7
padding: 0;
2021 Regulation CCS332 App Development UNIT 1
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
. Page 8
