Web Design with

HTML5 & CSS3

8th Edition

Chapter 5

Responsive Design Part

1: Designing for Mobile
Devices
Chapter Objectives
• Explain the principles of responsive design
• Describe the pros and cons of a mobile website
• Explain the design principles of a mobile website
• Describe a mobile-first strategy
• Define a viewport
• Create a fluid layout

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 2

Chapter Objectives (continued)
• Make images flexible
• Use styles for a mobile viewport
• Insert and style a span element
• Insert a viewport meta tag
• Test a responsive site using a device emulator

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 3

Exploring Responsive Design
• Responsive design
– Responsive design is a website development strategy
that strives to provide an optimal user experience of a
website regardless of the device or browser used
– The content in responsive design is easy to read and
navigate on devices of three sizes: desktop browser,
tablet, and phone

Chapter 5: Creating an Image Map 4

Exploring Responsive Design
(continued 1)
• The three concepts of responsive design are:
1. Fluid layout:
– Applies proportional size measurements to the
webpage wireframe and content
– The viewport is the viewing area for the webpage

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 5

Exploring Responsive Design
(continued 2)
2. Media queries
– Allow the webpage developer to detect the
approximate pixel size of the current viewport
– Allow the developer to selectively apply CSS rules
that work best for that viewport size

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 6

Exploring Responsive Design
(continued 3)
3. Flexible images
– They shrink and grow based on the size of the
viewport
– They do not have height and width attributes or
values in the HTML document
– They use CSS rules to resize the image relative to
the wireframe and viewport

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 7

Designing for Mobile Devices
•Mobile websites
–Techniques emerged to build a completely separate,
parallel website optimized for mobile users called a
mobile website to address problems with viewports
–They are identified with an m. or mo. prefix in the
URL
–In contrast, responsive design optimizes the viewing
experience for a wide range of devices using one
website
Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 8
Designing for Mobile Devices
(continued 1)
• Mobile-first strategy
– Employs responsive design principles
o In this, a web developer designs the flexible wireframe and
essential content for the smallest viewport first,
progressively adding more content as the viewport grows
o Then, media queries are used to add styles for progressively
larger viewports, progressing from tablet to laptop and
desktop
– It is a more productive and effective way to build a
website from scratch

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 9

Designing for Mobile Devices
(continued 2)
– Implementation of the website development approach
depends on many factors, such as:
o the current environment
o the target audience
o available resources
o the time available to tackle the project

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 10

Using Fluid Layouts
• Fluid layout
– It is also known as a webpage with a liquid layout
– It changes in width based on the size of the viewport
– Responsive designs are based on fluid layouts

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 11

Using Fluid Layouts (continued 1)
• Fixed layouts
– They do not change in width based on the size of the
viewport
– They use fixed measurement units such as pixels to
define the width of the areas of the wireframe that
“fix” the width of the content regardless of the size of
the viewport
– It is implemented by measuring the widths of the
wireframe elements and content in relative units such
as percentages and ems
Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 12
Using Fluid Layouts (continued 2)

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 13

Creating a Fluid Layout
• It is created by using percentages to measure the
width of each column in a webpage
• A webpage can have a liquid layout without using
media queries
• No matter how small a browser becomes, the
content placeholder boxes on the page shrink and
grow in response to the size of the viewport

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 14

Creating a Fluid Layout
(continued 1)
• To make the navigation links more appealing on a
webpage, they can be formatted so they look like
buttons rather than text links

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 15

Creating a Fluid Layout
(continued 2)
• Figure 5–8 shows a webpage with a liquid layout
in two widths

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 16

Making Images Flexible
• Flexible image – It resizes itself to accommodate
the size of the viewport and is easy to implement
• Creating flexible images:
1. Delete the height and width attribute values
for the img tags in the HTML files
2. Add styles for the images in the CSS file to
provide the desired flexibility such as the
following style: max-width: 100%;

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 17

Making Images Flexible
(continued)
• By setting the width of the image to 100%, the
image automatically stretches to fill 100% of the
width of the container element

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 18

Following a Mobile-First Strategy
• It is better to use a single-column layout for a
mobile display as this prevents scrolling
horizontally
• Styling content for mobile devices requires that
each page be analyzed to determine the most
important content on the page, and then style
that content to attract users of mobile devices

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 19

Following a Mobile-First Strategy
(continued 1)
• Figure 5–22a depicts a wireframe example for a
traditional desktop viewport, while Figure 5–22b
depicts all these same areas of content for a
mobile design

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 20

Following a Mobile-First Strategy
(continued 2)
• Figure 5–23 shows how to hide some webpage
areas to create a revised mobile wireframe

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 21

Following a Mobile-First Strategy
(continued 3)
• Optimize the interface to maximize the mobile
user experience
• Some of the key best practices when designing for
mobile viewports are as follows:
1. Make use of 100% of the screen space
2. Design the navigation to be easy and intuitive
3. Keep load times minimal. Enhance load times by
removing bandwidth-intensive content and
streamlining your HTML code

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 22

Following a Mobile-First Strategy
(continued 4)
4. Display essential page content and hide
nonessential page content
5. Make the content easy to access and read
6. Design a simple layout

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 23

Using the Span Element
• span element
– Allows the use of CSS to format a span of text
separately from its surrounding text
– The <span> and </span> are the start and the end
tags
– As an inline element, it can be applied to text
within a block
– A class can be added to a span element to style its
text
Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 24
Using the Span Element
(continued)
– For example, the following code shows a phone
number wrapped in span element.
<span class="desktop">(814) 555-9608</span>

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 25

Adding Meta Tags
• For responsive sites, add the following meta tag to
the head section of each webpage.
<meta name="viewport"
content="width=device-width, initial-
scale=1">
• This code makes sure that the page initially loads
in a layout width that matches the viewport of the
device

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 26

Testing Webpages in Viewports
of Different Sizes

Chapter 5: Responsive Design Part 1: Designing for Mobile Devices 27

 HTML
8 Edition
th

Chapter 5 Complete