WEB APPLICATION

DEVELOPMENT
LECTURE 5

Chamila Karunatilake
Department of ICT
F a c u l t y o f Te c h n o l o g y
University of Sri Jayewardenepura
[email protected]
RESPONSIVE WEB DESIGN

2
 RESPONSIVE WEB DESIGN
• The use of mobile devices to surf the web is growing at an astronomical
pace.

3
 RESPONSIVE WEB DESIGN
• Much of the web isn't optimized for those mobile devices.
• Mobile devices are often constrained by display size and require a
different approach to how content is laid out on the screen.
• A multitude of different screen sizes exist
• Phones
• Phablets
• Tablets
• Desktops
• Game consoles
• TVs
• Wearables
• Screen sizes are always changing, so it's important that a web page can
adapt to any screen size, today or in the future.
4
5
RESPONSIVE WEB DESIGN

6
 RESPONSIVE WEB DESIGN
• Responsive Web Design is about using HTML and CSS to automatically
resize, hide, shrink, or enlarge, a website, to make it look good on all
devices (desktops, tablets, and phones)
• The layout changes based on the size and capabilities of the device.
• For example, on a phone users would see content shown in a single
column view; a tablet might show the same content in two columns.

7
 SET THE VIEWPORT
• Pages optimized for a variety of devices must include a meta viewport tag
in the head of the document.
• A meta viewport tag gives the browser instructions on how to control the
page's dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1">

8
SET THE VIEWPORT

9
 SET THE VIEWPORT
In addition to setting an initial-scale, following attributes can be
set on the viewport:

• minimum-scale
• maximum-scale
• user-scalable

10
 USE CSS MEDIA QUERIES
• Media queries are simple filters that can be applied to CSS styles.
• For example, with media queries, completely different styles can be
defined for different browser sizes.
• Styles can be applied based on several other characteristics of the device
such as,
o Display type
o Width
o Height
o Orientation
o Resolution

11
 USE CSS MEDIA QUERIES
@media only screen and (min-width: 768px)
{
.img-banner{
display:block;
width: 100%;
padding-bottom: 30px;
}
}
screen: It is used to set the screen size of media query
only screen: The only keyword is used to prevent older browsers that do
not support media queries with media features from applying the specified
styles.
12
 PARAMETERS FOR MEDIA QUERIES
Parameters Description
min-width Rules applied for any browser width greater than the value defined in
the query.
max-width Rules applied for any browser width less than the value defined in
the query.
min-height Rules applied for any browser height greater than the value defined
in the query.
max-height Rules applied for any browser height less than the value defined in
the query.
orientation=portrait Rules applied for any browser where the height is greater than or
equal to the width.
orientation=landscape Rules for any browser where the width is greater than the height.

13
 GUIDELINES FOR CSS MEDIA QUERIES
• Use relative units
• Pick major breakpoints by starting small, then working up
• Pick minor breakpoints when necessary
• Create breakpoints based on content, never on specific devices,
products, or brands
• Optimize text for reading (70 to 80 characters per line)
• Never completely hide content

14
 RESPONSIVE WEB DESIGN PATTERNS
• Responsive web design patterns are quickly evolving, but there are a few
established patterns that work well across the desktop and mobile
devices.
• Most layouts used by responsive web pages can be categorized into one
of five patterns:
• Mostly fluid
• Column drop
• Layout shifter
• Tiny tweaks
• Off canvas

15
 MOSTLY FLUID
• The mostly fluid pattern consists primarily of a fluid grid.
• On large or medium screens, it usually remains the same size, simply
adjusting the margins on wider screens.
• On smaller screens, the fluid grid causes the main content to reflow,
while columns are stacked vertically.

16
 MOSTLY FLUID
.container { @media (min-width: 600px) { .c3, .c4 {
display: -webkit-flex; .c2, .c3, .c4, .c5 { width: 33%;
display: flex; width: 50%; }
-webkit-flex-flow: row wrap; } .c5 {
flex-flow: row wrap; } width: 34%;
} @media (min-width: 800px) { }}
.c1 { @media (min-width: 800px) {
.c1, .c2, .c3, .c4, .c5 { width: 60%; .container {
width: 100%; } width: 800px;
} .c2 { margin-left: auto;
width: 40%; margin-right: auto;
} }
}
17
 COLUMN DROP
• For full-width multi-column layouts, column drop simply stacks the
columns vertically as the window width becomes too narrow for the
content.
• Eventually this results in all of the columns being stacked vertically.

18
 COLUMN DROP
.c1, .c2, .c3 { .c2 { @media (min-width:
width: 100%; width: 40%; 800px) {
} -webkit-order: 1; .c2 {
order: 1; width: 20%;
@media (min-width: 600px) } }
{
.c1 { .c3 { .c3 {
width: 60%; width: 100%; width: 20%;
-webkit-order: 2; -webkit-order: 3; }
order: 2; order: 3; }
} }
}
19
 LAYOUT SHIFTER
• The layout shifter pattern is the most responsive pattern, with multiple
breakpoints across several screen widths.
• Key to this layout is the way content moves about, instead of reflowing
and dropping below other columns.

20
 LAYOUT SHIFTER
.container { @media (min-width: 600px) @media (min-width:
display: -webkit-flex; { 800px) {
display: flex; .c1 { .container {
-webkit-flex-flow: row width: 25%; width: 800px;
wrap; } margin-left: auto;
flex-flow: row wrap; margin-right: auto;
} .c4 { }
width: 75%; }
.c1, .c2, .c3, .c4 { }
width: 100%;
} }

21
 TINY TWEAKS
• Tiny tweaks simply makes small changes to the layout, such as adjusting
font size, resizing images, or moving content around in very minor ways.
• It works well on single column layouts such as one page linear websites
and text-heavy articles.

22
 TINY TWEAKS
.c1 { @media (min-width: 500px) @media (min-width:
padding: 10px; { 800px) {
width: 100%; .c1 { .c1 {
} padding: 20px; padding: 40px;
font-size: 1.5em; font-size: 2em;
} }
} }

23
 OFF CANVAS
• Rather than stacking content vertically, the off canvas pattern places less
frequently used content—perhaps navigation or app menus—off screen,
only showing it when the screen size is large enough, and on smaller
screens, content is only a click away.

24
INTRODUCTION TO BOOTSTRAP

25
 INTRODUCTION TO BOOTSTRAP

• Bootstrap is a free and open source toolkit for developing with

HTML, CSS, and JS.
• Targeting responsive, mobile-first projects on the web
• It is the world’s most popular front-end component library
• Developed by Mark Otto and Jacob Thornton at Twitter and
initially released in 2011
• Originally named as Twitter Blueprint
• Bootstrap 4 is the newest version (latest available release 4.3.1)

26
 ADVANTAGES OF BOOTSTRAP
• Easy to use: Anybody with just basic knowledge of HTML and CSS can
start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops
• Mobile-first approach: In Bootstrap, mobile-first styles are part of the
core framework
• Browser compatibility: Bootstrap 4 is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and
Opera)

27
 WHERE TO GET BOOTSTRAP 4?

There are two ways to start using Bootstrap 4 on your own web
site.
• Include Bootstrap 4 from a CDN
• Download Bootstrap 4 from getbootstrap.com

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/
bootstrap.min.css">

28
 WHERE TO GET BOOTSTRAP 4?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1
/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popp
er.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.mi
n.js"></script>
</head>

29
 CONTAINERS
• Bootstrap 4 also requires a containing element to wrap site
contents.
• There are two container classes to choose from:
 The .container class provides a responsive fixed width
container
 The .container-fluid class provides a full width container,
spanning the entire width of the viewport

<div class="container"> <div class="container-fluid">

<h1>My First Bootstrap Page</h1> <h1>My First Bootstrap Page</h1>
<p>This is some text.</p> <p>This is some text.</p>
</div> </div>

30
 BOOTSTRAP GRID SYSTEM

• Bootstrap's grid system allows up to 12 columns across the

page.
• If you do not want to use all 12 columns individually, you can
group the columns together to create wider columns
• The grid system is responsive, and the columns will re-arrange
automatically depending on the screen size.
• Make sure that the sum adds up to 12 or fewer (it is not
required that you use all 12 available columns).

31
BOOTSTRAP GRID SYSTEM

32
 BOOTSTRAP GRID SYSTEM

The Bootstrap grid system has five classes:

.col-xs (extra small devices - screen width less than 576px)

.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

33
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-
7</div>
<div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-
md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-
6 .col-md-10</div>
<div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-
md-2</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div> 34
 INLINE SUBHEADINGS
• To add an inline subheading to any of the headings, simply add <small>
around any of the elements or
• add .small class and you will get smaller text in a lighter color as shown in
the example below:

<h1>I'm Heading1 <small>I'm secondary Heading1</small></h1>

<h2>I'm Heading2 <small>I'm secondary Heading2 </small></h2>

35
 EMPHASIS
<small>This content is within <small> tag</small><br>
<strong>This content is within <strong> tag</strong><br>
<em>This content is within <em> tag and is rendered as italics</em><br>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-muted">This content is muted</p>
<p class="text-primary">This content carries a warning class</p>
<p class="text-success">This content carries a success class</p>
<p class="text-info">This content carries a info class</p>
<p class="text-warning">This content carries a warning class</p>
<p class="text-danger">This content carries a danger class</p>

36
 LISTS
<ul class="list-unstyled"> <dl class="dl-horizontal">
<li>Item 1</li> <dt>Description 1</dt>
<li>Item 2</li>
<dd>Item 1</dd>
<li>Item 3</li>
<li>Item 4</li> <dt>Description 2</dt>
</ul> <dd>Item 2</dd>
<ul class="list-inline"> </dl>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

37
 TABLES
• <table class="table">
• <table class="table table-striped">
• <table class="table table-bordered">
• <table class="table table-hover">
• <table class="table table-condensed">

38
 TABLES

<table class="table"> <tr class="danger">

<tr class="active"> …
…. </tr>
</tr>
<tr class="success"> </tbody>
…. </table>
</tr>
<tr class="warning">
….
</tr>

39
QUESTIONS?

40