Responsive Web Design

References :
1. Principles of Web Design, 6th Edition, Skylar
2. www.w3schools.com
 Objectives
• Recognize the need for responsive web design
• Create flexible responsive layouts
• Create responsive navigation schemes
• Use responsive images
• Build a responsive web page design for
desktops, tablets, and smartphones

2
Recognizing the Need for Responsive Web
Design
• Tablets and smart
phones add to web
design challenge
• More device sizes,
screen orientations, and
screen resolutions
• Design responsively
rather than for specific
devices

3
 Recognizing the Need for Responsive Web
Design
• Traditional web design techniques do not
adapt well to mobile devices
• Legibility and navigation are challenges
• Responsive design lets you build a more
flexible type of web page that responds to the
varying size of mobile displays

4
 Responsive?

Responsive Web Design… In 2012, PC sales were

Means that a web site works lower than the previous
optimally well for users year, something that
regardless of the device they hasn’t happened since
are using. 2001. Why? Tablets.
Phones.
The core of RWD is a media
query, a request for the
resolution of the users’
viewport.
http://mashable.com/2012/12/11/responsive-web-design/
 Recognizing the Need for Responsive Web
Design
Three main elements of responsive design:
• Flexible images - These images adapt to the
parameters of the user’s screen size
• Flexible layouts - These layouts realign
elements of your content structure based on
the display device

6
 Recognizing the Need for Responsive Web
Design
Figure shows the responsive design of the World Wildlife Fund
web site at five screen resolutions
• Both page designs are flexible to adapt to sizes above or below the
768-pixel threshold
• This threshold is called the breakpoint—the point at which design
layouts change in responsive design schemes

7
 How do we do it?
• Use CSS style rules to change the order,
positioning, and other display characteristics
of your page elements
• Build one basic layout and then use style
rules targeted to different screen sizes

8
 Recognizing the Need for Responsive Web
Design
• Figure 12-3 shows the range of sizes and the
breakpoint used in the style of the World
Wildlife site
• The web site design adapts to larger screen
sizes, expanding and adding more content and
navigation as the browser widths increase
• In this example, the breakpoint is set to 768
pixels

9
10
Recognizing the Need for Responsive Web
Design
You can control style
characteristics …
• Adding and removing
entire columns
• Changing navigation
• Stacking columns on
top of each other

11
12
 Content-First Design
• Think carefully about your content and users’
needs when building responsive designs
• Which content is valuable to the user of a
smaller device?
• How much content can be used effectively on
each device?
• Will you have to edit or restructure content?

13
Measurement Units in Responsive Design

• Breakpoints are best measured in ems

• Ems are better than pixels because they are
flexible
• It is easier to design in pixels, so convert pixels
to ems
• 1 em equals 16 px

14
 Creating Flexible Responsive Layouts
• In this example, the flexible layout works well over
750 pixels wide
• Under 750 pixels, the user must scroll horizontally

15
 Creating Flexible Responsive Layouts
To solve this
problem,

The layout’s flexibility

must be extended to
include all screen
sizes from smart
phones to desktop
displays, as shown in
this figure

16
 Creating Flexible Responsive Layouts
• This proposed layout works well at any width
between the smallest device and 780 pixels
• Once the design is expanded past 780 pixels,
the content is spread too widely across the
page
• The page design can change to take advantage
of the larger screen size

17
18
 Creating Responsive Navigation Screens

• When readers access on a smart phone, they

have different navigation motives than when
using a larger screen
• Mobile sites should offer the most popular
links readily available on the first page
• Navigating on a small device is much easier
when the navigation is direct and accessible

19
20
 Using Responsive Images
• When building responsive layouts, consider the behavior of
images and how they react to different device sizes
• You can let images adjust to the browser size or have a fixed
size

Flexible

Fixed

21
 Using Responsive Images
• Set the image’s height to auto to maintain the aspect ratio when the
image is scaled:

img {
max-width: 100%;
height: auto;
}

• With a style rule, you can choose to set a minimum fixed width for the
image if necessary:
img {
min-width: 240px;
}

22
23
 Using Responsive Images
• You can wrap text img {
around an image in a
float: left;
responsive column
• Float the image and set width: 40%;
a width for the image height: auto;
that is a percentage of min-width: 200px;
the containing column
• The image style rule
margin: 0 1em 1em
sets the width at 40%, 0;
down to a minimum }
width of 200 pixels

24
 Using Responsive Images
• The image style rule sets the width at 40%,
down to a minimum width of 200 pixels:
img {
float: left;
width: 40%;
height: auto;
min-width: 200px;
margin: 0 1em 1em 0;
}
25
26
27
28
 Before we solve the activity…. Let’s learn some RWD coding …

Responsive Web Design - The Viewport

What is The Viewport?

• The viewport is the user's visible area of a web page.

• The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen.
• Before tablets and mobile phones, web pages were designed only
for computer screens, and it was common for web pages to have
a static design and a fixed size.
• Then, when we started surfing the internet using tablets and
mobile phones, fixed size web pages were too large to fit the
viewport. To fix this, browsers on those devices scaled down the 29
entire web page to fit the screen.
 Setting The Viewport

HTML5 introduced a method to let web

designers take control over the viewport,
through the <meta> tag.

You should include the

following <meta> viewport element in all your
web pages:

<meta name="viewport" content="width=device-

width, initial-scale=1.0">

30
A <meta> viewport element gives the browser
instructions on how to control the page's
dimensions and scaling.

The width=device-width part sets the width of the

page to follow the screen-width of the device
(which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level

when the page is first loaded by the browser.

31
Here is an example of

a web page without the viewport meta tag, and the same web
page with the viewport meta tag:

32
33
 Responsive Web Design - Grid-View

What is a Grid-View?
• Many web pages are based on a grid-view, which
means that the page is divided into columns:

Using a grid-view is very helpful when designing web pages. It

makes it easier to place elements on the page.

34
A responsive grid-view often has 12 columns, and
has a total width of 100%, and will shrink and
expand as you resize the browser window.

Responsive_grid_view.html

35
 Building a Responsive Grid-View

Lets start building a responsive grid-view.

First ensure that all HTML elements have the box-sizing property
set to border-box. This makes sure that the padding and border
are included in the total width and height of the elements.

Add the following code in your CSS:

* {
box-sizing: border-box;
}

36
 The following example shows a simple responsive web
page, with two columns:
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

This example is fine if the web page only contains two columns.
However, we want to use a responsive grid-view with 12 columns, to have more
control over the web page.
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:
37
.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%;}
.col-12 {width: 100%;}

38
 Sample Design example

Code sample : Chania_rwd.html

39
 Responsive Web Design - Media Queries

What is a Media Query?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only

if a certain condition is true.

Example
If the browser window is 600px or smaller, the background color will
be lightblue:

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}
40
Source : rwd_media_greenblue.html
41
 Add a Breakpoint
• Earlier, we made a web page with rows and
columns, and it was responsive, but it did not
look good on a small screen.
– Media queries can help with that.
– We can add breakpoints where certain parts of
the design will behave differently on each side of
the breakpoint.

42
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;} The media query to add a
.col-3 {width: 25%;}
.col-4 {width: 33.33%;} breakpoint at 768px
.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%;}
.col-12 {width: 100%;}

@media only screen and (max-width:

768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
43
When the screen (browser window) gets smaller than 768px,
each column should have a width of 100%:
/* For desktop: */
.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%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
} 44
 Sample design code

Source Code : chania2_rwd_mediaquery.html 45

 Always Design for Mobile First
• Mobile First means designing for mobile before designing
for desktop or any other device (This will make the page
display faster on smaller devices).

• This means that we must make some changes in our CSS.

• Instead of changing styles when the width

gets smaller than 768px, we should change the design
when the width gets larger than 768px. This will make
our design Mobile First:

46
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.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%;}
.col-12 {width: 100%;}
}

47
 Another Breakpoint
• You can add as many breakpoints as you like.
• We will also insert a breakpoint between tablets and mobile
phones.
/* For mobile phones: */
[class*="col-"] {
@media only screen and (min-width: 768px) {
width: 100%;
/* For desktop: */
}
.col-1 {width: 8.33%;}
@media only screen and (min-width:
.col-2 {width: 16.66%;}
600px) {
.col-3 {width: 25%;}
/* For tablets: */
.col-4 {width: 33.33%;}
.col-s-1 {width: 8.33%;}
.col-5 {width: 41.66%;}
.col-s-2 {width: 16.66%;}
.col-6 {width: 50%;}
.col-s-3 {width: 25%;}
.col-7 {width: 58.33%;}
.col-s-4 {width: 33.33%;}
.col-8 {width: 66.66%;}
.col-s-5 {width: 41.66%;}
.col-9 {width: 75%;}
.col-s-6 {width: 50%;}
.col-10 {width: 83.33%;}
.col-s-7 {width: 58.33%;}
.col-11 {width: 91.66%;}
.col-s-8 {width: 66.66%;}
.col-12 {width: 100%;}
.col-s-9 {width: 75%;}
}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
} 48
 Typical Device Breakpoints
• There are tons of screens and devices with different heights and widths, so
it is hard to create an exact breakpoint for each device. To keep things
simple you could target five groups:

Example

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...} 49
 Orientation: Portrait / Landscape
• Media queries can also be used to change layout of a page depending on
the orientation of the browser.
• You can have a set of CSS properties that will only apply when the browser
window is wider than its height, a so called "Landscape" orientation:

Example

The web page will have a lightblue background if the orientation is

in landscape mode:

@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}

50
Hide Elements With Media Queries
• Another common use of media queries, is to hide elements on
different screen sizes:
Example
/* If the screen size is 600px wide or less, hide the element
*/
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}

51
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: yellow;
padding: 20px;
}
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is 600px wide or less, hide the div element. Resize the browser window
to see the effect.</p>
</body>
</html>

52
 Change Font Size With Media Queries
• You can also use media queries to change the font size of an
element on different screen sizes:
Example
/* If the screen size is 601px or more, set the font-size of <div> to
80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}

/* If the screen size is 600px or less, set the font-size of <div> to

30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
} 53
<!DOCTYPE html>
<html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
} }
</style>
</head>
<body>
<h2>Change the font size of an element on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is 600px wide or less, set the font-size of DIV to 30px. When it is 601px
or wider, set the font-size to 80px. Resize the browser window to see the effect.</p>
</body>
</html>
54
 CSS @media Reference

For a full overview of all the media types and

features/expressions, please look at
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

55
 Summary
• Responsive web page designs let you create one
source of content and use style sheets and media
queries to adapt the page design to different devices
• Design for the needs of the content, not the device
• Remove or add content as necessary to provide the
best experience for the user
• Use the fewest breakpoints possible, and determine
the breakpoints by examining how the content
behaves at different browser widths

56