Responsive
Design
Designing for
Mobile Devices
Chapter 5
Learning 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
• Insert a meta viewport element
• Use a mobile simulator
• Create a sticky element
• Integrate custom fonts
• Use a pseudo-class
• Create a mobile-friendly navigation system
• Make rounded corners
• Background gradients (with AI)
Introduction
Responsive design is a website development strategy
that strives to provide an optimal user experience of a
website regardless of the device used
By applying responsive design principles, the webpage and
content respond to the screen size of the user’s device
• Minimizes unnecessary scrolling and zooming, making reading
and interacting with the site as convenient and intuitive as
possible
Exploring Responsive Design
• Content is easy to read and navigate on devices of
three sizes: desktop browser, tablet, and phone
• Philosophy that is constantly refined as HTML and CSS
standards, browsers, and technology evolve and
improve
Fixed Design
Fixed layout
All widths are specified in the absolute unit of measure: px and pt
The widths of the page components (body, main, footer)
will NOT change as the user changes the width of the browser
window
A 2-column web page with fixed-width columns
Issue is to fit the box inside of the box
<body>
<header><h2>Header</h2></header>
<main><h2>Main content</h2></main>
<aside><h2>Aside</h2></aside> = 600 + 360 + 2
<footer><h2>Footer</h2></footer>
</body>
= 962
* { margin: 0; padding: 0; }
body {
width: 962px;
background-color: white;
margin: 15px auto;
border: 1px solid black; }
h2 { padding: 1em; }
header { border-bottom: 2px solid #ef9c00; }
main {
height: 350px; /* to give the sidebar some height
for its border */
width: 600px;
float: left;
border-right: 2px solid #ef9c00; }
aside {
width: 360px;
float: right; }
footer {
clear: both;
border-top: 2px solid #ef9c00; }
If you have troubles,
What sizes are your “boxes”?
If the boxes do not fit,
they will appear
going down
(underneath)
Why?
Code is read from the
top to the bottom
Responsive Design
Fluid layout
• Applies proportional size measurements to the
webpage wireframe and content
The viewport is the viewing area for the webpage;
refers to the area of the webpage that a user sees at
any one time, regardless of device, browser, screen
size, screen resolution, window size, or orientation
With a fluid layout, the width
of the page changes as the
user changes the width of the
browser window.
The width of the columns will
change too.
How to use floating to create a 2-column, relative-width
page layout
body { width: 90%;
background-color: white; body is inside of html element
margin: 2% auto; body is set to 90% of hmtl
border: .05em solid black; }
= 66% + 33% + .05%
main { width: 66%;
= under 100% of body
height: 66%;
border-right: .05% solid gray;
float: left;}
aside {width: 33%;
float: right;}
Use a percentage!
Good idea if your website will be used on mobile devices
Same idea for Images
Responsive or flexible images
• Shrink and grow based on the size of the viewport
• Do not have height and width attributes or values in
the HTML document
• Use CSS rules to resize the image relative to the
wireframe and viewport
img {
border: 1% solid #ddd;
border-radius: 1em;
No px
padding: 2em;
No pt
width: 50%;
height: auto;
Opactiy = transparent
opacity: 0.5;
(0.0 to -1.0 values)
}
Designing for Mobile Devices
Mobile website [Link]
• Completely separate, parallel website optimized for
mobile users to address problems with viewports
Open on
• Identified with an m. or mo. prefix in the URL your cell
phone
• Prefix example in the URL such as
[Link] Pasco-Hernando State
College’s mobile website.
• Optimizes the viewing experience for a wide range
of devices using one website
• Major downside: multiplies the work required to
maintain what becomes two separate websites for
the same organization
One Site : Mobile-first Strategy
Employs responsive design principles
• Web developer designs the flexible wireframe and essential
content for the smallest viewport first, progressively adding more
content as the viewport grows
• Media queries are used to add styles for progressively larger
viewports, progressing from tablet to laptop and desktop
More productive and effective way to build a website from
scratch
Implementation of the website development approach depends on many factors
Current environment
Target audience
Available resources
Time available to tackle the project
Mobile
First
Mobile
Last
Using Responsive Design: keep this in mind…
Webpage with a fluid layout adjusts the webpage
design and content based on the size of the
viewport
• Responsive designs are based on fluid layouts
• Using percent or em
Fixed layouts do not change in width based on
the size of the viewport
• 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
• Using px or pt
[Link]
Website Examples that are Responsive Design
Intel [Link]
Microsoft [Link]
W3Schools [Link]
In Chrome, search for website, F12
[Link]
F12
Creating a Fluid Layout
A fluid layout requires a fluid grid and responsive images
• To create a fluid grid, you design a webpage that uses a grid
or columns
• A mobile viewport should use a single-column design, which is
ideal for a smaller viewport
• As the viewport’s size increases, the number of columns can
also increase
Remember that when creating styles that include units of measurement,
do not put a space between the value and the unit of measure.
font-size: 2em;
!
/* correct */
No space
font-size: 2 em;
/* incorrect */
Start with Single Column Layout
It is better to use a single-column layout for a mobile display
as this prevents scrolling horizontally
• Displaying what mobile device users need and want on a single
screen with minimal scrolling creates a more enjoyable
experience
Styling content for mobile devices requires that each page be analyzed
• Determine the most important content on the page and style that
content
Key Practice Designing Ideas
When designing for mobile viewports :
• Make use of 100% of the screen space
• Design the navigation to be easy and intuitive
• Keep load times minimal
• Display essential page content and hide
nonessential page content
• Make the content easy to access and read
• Design a simple layout
Meta Viewport Element (Tag)
When creating a website with a responsive design, a meta
viewport element must be included within every HTML file
• Provides the browser with information about the page’s dimensions
and how to adjust scaling on the webpage
Name attribute: lets the browser know that there are instructions about
how to control the webpage’s dimensions
Content attribute: includes 2 values (width and initial-scale) meaning
width is the width of the device and scale specifies the beginning zoom
level when the page is first displayed
Exampl
e of a
BAD
design Missing the meta
viewport element
for
mobile
Open Brackets
File, Close ALL
File, Open FOLDER
Browse to where you unzipped the Chapter #5 Starter file from Canvas:
fitness folder
Split your screen Vertical
Adding Meta Viewport Element
SAVE
Live
Preview
Hit F12
MUST
Be
In
CHROME
First Steps
First, analyze each page to determine the most essential
content and whether to hide some of the content on a mobile
device
Depending on the design, you may want the company name
or logo to remain at the top of the webpage as the user scrolls
down
• To accomplish this task, you create a fixed or sticky header, known
as a sticky element
[Link]
How to position elements
Position elements to a specific location on the page:
Value Description
static the element is placed in the normal flow. This is the default.
absolute the element is removed from the normal flow and is positioned
relative to the closest containing block that is also positioned.
Based on top, bottom, right, left you specify.
fixed The element is removed from the normal flow and positioned
absolutely relative to the browser window.
relative The element is positioned relative to its position in the normal
flow. The element is still in the normal flow.
sticky An element that remains on the screen as the user
scrolls up or down; sticky elements are typically at the
top or bottom of the screen. You must specify a top
property with a value of zero
[Link]
Then scroll down, watch the top of your screen
Sticky Menu
Delete in the header:
Float
Width
SAVE ALL
Live
Preview
Scroll
Down
Notice
your nav
Menu
In under
Responsive Navigation
The navigation system for a website can look different in each
viewport
• Many mobile viewport designs use a hamburger button or icon to
display or toggle a navigation system
To make the hamburger element
Hamburger functional, you need to write some
button JavaScript code. You will learn more
about how to integrate a hamburger
button and make it functional with
JavaScript in Chapter 10.
[Link]
howto_js_mobile_navbar.asp
Cleaning up in the Nav styles
SAVE ALL
Live
Preview
F12
Custom Fonts
Typography is a design element to consider when designing a website
• Today’s modern browsers support standard fonts; Times New Roman, Arial, Georgia, and Verdana
• But there is more… many custom fonts can be used by downloading them onto web servers or by
linking to them in HTML files
• Two popular font solutions include:
Google Fonts [Link].
Adobe Fonts. [Link]
Download the font or link an element
Custom Fonts
[Link]
Search for Francois One
Click on the selected Font style then
Go back, let’s add another font to our family
Search for Roboto Slab
Click on the basket icon
Click on “Get embedded code”
Copy the code:
You can copy all of the code or just the last <link href=“…
Paste the embedded code
Paste the HTML code:
Update the CSS code:
Sounds like: Sue doe
Pseudo-class
A pseudo-class can be used with a selector to specify
the state of an element
• For example, you can specify a style to apply when a mouse
hovers over an element
a:link {color: green;}
a:hover {color: fuchsia;}
Pseudo-class Example Description
:first-child li:first-child Applies to the first list item element
:last-child li:last-child Applies to the last list item element
:nth-child(n) li:nth-child(3) Applies to the third list item element
:link a:link Link that hasn’t been visited by default is blue underline
:visited a:visited Has been visited by default purple underling
:hover a:hover When mouse hovers over it No
space!
Add pseudo-class for hover
SAVE ALL
Live
Preview
Normal
View
Rounded Corners
By default, element borders use a 90-degree angle at each
corner
• You can see the angle when you specify a border all around an
element
• Images also have a default 90-degree angle at each corner
• Change default appearance by applying rounded corners with CSS
• CSS property to round corners is border-radius
Syntax!!
Top, right, bottom, left
Background Gradients
Gradient is a gradual transition from one color to another.
Linear: transition from several different angles
• Default is top to bottom
body {background-image: -webkit-linear-gradient(70deg, gold 50%, orange 55%, white 85%)}
Radial: are specified by their center.
[Link]
[Link]
Copy your code!
Add Gradient
Paste your code in the main element
Go back your CSS code generator:
[Link]
Look at all the other coding “helpers” this site provides!
File, SAVE ALL
File, CLOSE ALL
File, OPEN FOLDER
new folder of Chapter #5 Music zip file
[Link] [Link]
Live Preview
Normal
View
See what you have and
notice:
Margin: auto;
hover
Let’s make the header sticky!
Live Preview
Normal
View
Use your CSS Generator to code for box shadow
[Link]
Live Preview
Normal
View
Use your CSS Generator to code for TEXT shadow
Link
Live Preview
Normal
View
Use your CSS Generator to code for any COLOR
Link
Live Preview
Normal
View
Use your CSS Generator to code for FONT family
Link
Live Preview
Normal
View
Use your CSS Generator to code for BORDER
Link
Live Preview
Normal
View
Use your CSS Generator to code for Border Link
Radius
Live Preview
Normal
View
Reminder: what does it mean?
. means class in html
# means id in html
Auto means center
One number means all sides
Color means font color
Text-decoration means the hyperlink underline
Display as block means whole box is clickable
This is from your Chapter #5 homework assignment
Mobile-Friendly Test
Once you have completed your design for a mobile
viewport, view and test it on as many smartphone
devices as possible
• Google Chrome’s device mode is helpful during the design
process
• Testing on an actual device is optimal
F12
[Link]
or
Chapter #5
Textbook Page 274-276
Homework
Assignment Lab 2: Styling the Wild Rescues Website for Mobile
Viewport
Submit: One zip file
• upload to Canvas one zip file that contains all your
folders and files of your Wildlife Rescue website.