Transcript Introduction to Web Development

Responsive Web Design (RWD)
MIS 3502
Jeremy Shafer
Department of MIS
Fox School of Business
Temple University
Responsive Web Design (RWD)
(1 of 2)
What is Responsive Web Design?
– The idea has been called many things: “flexible”,
“fluid”, “elastic”
– Bottom line: it is a web site (or web interface) that
adapts to browser dimensions
– This is an essential consideration as we live in an
environment full of diverse platforms and screen
sizes.
Slide 2
Responsive Web Design (RWD) (
2 of 2)
According to Ethan Marcotte, RWD is three
things:
1. A flexible grid
2. Flexible Images
3. Media Queries
Ethan Marcotte is a web designer, author, and public speaker. See
http://ethanmarcotte.com
He described the theory and practice of responsive web design in
his brief 2011 book titled Responsive Web Design.
Slide 3
Flexible Grid Layout
It’ really not as complicated as this.
Slide 4
Flexible Grid Layout (1)
• The term “Grid Layout” has its origins in graphic
layouts for the printed page.
• Web developers adopted the concepts and
terminology of the grid layout, and adapted it to
the dimensions of common devices
• So, a 800 x 600 resolution screen might be
sliced into ten, 80 pixel, columns.
• For now we only concern ourselves with the
width of our display, as vertical scrolling is
acceptable to most users.
Slide 5
Flexible Grid Layout (2)
100px
100px
100px
100px
100px
100px
100px
100px 100px 100px 100px 100px 100px
100px
Slide 6
Flexible Grid Layout (3)
100px
100px
100px
100px
100px
100px
100px
100px
Slide 7
Flexible Grid Layout (4)
• Of course 800x600 is ancient. A more common
resolution screen size would be 1024 x 768.
• Oh no! 1024 is an unwieldy number.
• Designers identified 960 pixels, with margin on
the left and right, as an ideal width to work with
conceptually.
Slide 8
960 pixels (1 of 2)
• Why 960? Well, it is close to 1024, and it has a
lot of factors.
• 960px is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12,
15, and 16
• Also, 1024 x 768 was the most common
resolution for many years and designers were
forced to design for the lowest common
denominator.
Slide 9
960 pixels (2 of 2)
80px 80px 80px 80px 80px 80px 80px 80px
80px 80px 80px 80px
Slide 10
Making it Flexible (1 of 4)
• If we specify our layout in specific pixel widths,
then we have a very inflexible layout. We have
a layout that is designed for one specific screen
size. That’s not practical any more.
• So, we begin the process of making our grid and
flexible grid.
• We do that by expressing fonts and widths in
relative terms. Specifically, percentages and
units of em.
Slide 11
Making it Flexible (2 of 4)
8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333% 8.333%
Slide 12
Making it Flexible (3 of 4)
What just happened there?
• We replaced absolute pixel references with
percentages.
• We calculate our percentages as follows:
(Item width px) / (Item container px)
• It’s a good idea to document your reasoning in
your css file. Like this:
width: 8.33333% /* 80 / 960 */
Slide 13
Making it Flexible (3 of 4)
Once again, the formula to remember is:
𝑇𝑎𝑟𝑔𝑒𝑡 ÷ 𝐶𝑜𝑛𝑡𝑒𝑥𝑡 = 𝑅𝑒𝑠𝑢𝑙𝑡
Slide 14
What about EM units?
• Font sizes are often expressed in pixels as well.
• By convention, we express fonts in terms of em
units.
• Historically, the term “em” goes back to
typography and the size of the letter “M” for a
particular font.
• But I like to think of it in terms of emphasis
• A 1em font size is to be the default font size on
the browser / device being used.
• A 2em font size is twice as big as that.
Slide 15
What about EM units?
(2)
• Again, we replaced absolute pixel references
with the relative size.
• We calculate our percentages as follows:
(Item size px) / (Context size px)
• It’s (still) a good idea to document your
reasoning in your css file. Like this:
font-size: 1.25em /* 20 / 16 */
Slide 16
Good rules of thumb …
• Use “em” units for font-sizes
• It is often OK to keep vertical
dimensions in pixels.
• Use percentages for everything
else.
Slide 17
A few more things to add to your
bag of tricks…
•
•
•
•
•
Don’t use HTML tables for layout
Use <div> tags and the CSS float property instead
Set up a “clearfix” class to that you can stop the
custom float behavior
You *can* specify a min-width in pixels to force the
float drop
You should set the viewport with the following
command:
<meta name="viewport" content="width=devicewidth, initial-scale=1.0">
Slide 18
The clearfix trick
.clearfix {
clear: both;
visibility: hidden;
height: 0;
display: block;
}
The
The
The
clear
visibility
height:
property
0;
property
statement
specifies
can means
make
themeans
sides
an
make
element
of this
an element
element
invisible.
where
infinitely
Butas
(like
floating
the elements
invisible
…element
so it
The
“display:
block;”
command
display
the element
asmall
block
Thisnot
is all
just man)
a to
work-around
because
we
couldn’t
say
none;”
are
allowed
won’t
float.
it will
take
This
still
uptake
statement
anyup
space
space
says
on
on
the
“clear
the
page.
page.
both“display:
sides” please.
(like
<p>)
Slide 19
Flexible Images
Slide 20
Flexible Images
Flexible Images are necessary to scale images fluidly.
The CSS attribute that allows us to do this is:
max-width: 100%;
That is, if we apply that style to an image, then it will expand (or
shrink) to the size of its containing element. Like this:
<img src="sample.png" style="max-width:100%;">
Note: It’s important to have a containing element!
Slide 21
Flexible Images (2)
• There are a number of extra steps you need to
take in order to support legacy browsers.
• The older browsers don’t scale the images well.
This problem is diminishing, as browsers
continue to improve.
• It was really bad in IE9.
• If you ever need to justify a decision to not
support an old browser, get some metrics.
For example:
http://www.w3schools.com/browsers/browsers_stats.asp
Slide 22
Media Queries
Slide 23
Media Queries
Media queries allow us to override previously
declared style sheet attributes using and @media
rule.
@media rules allow us to customize styles to
categories of media, screen dimensions, or both.
Slide 24
Media Queries (2)
For example:
@media print {
img {
display: none;
}
}
This says … when you print this page, don’t display
any of the images.
Slide 25
Media Queries (3)
Another example:
@media all and (max-width: 480px)
{
#header{
height: 20px;
}
}
This says when the media is on any device, and width of the
480px is a good threshold width. Screens below 480px are usually mobile
whole page (i.e. the viewport) is at most 320px, then apply the
devices.
following special CSS.
Slide 26
Media Types
Media Type
Description
all
Used for all media type devices
aural
Used for speech and sound synthesizers
braille
Used for braille tactile feedback devices
embossed
Used for paged braille printers
handheld
Used for small or handheld devices
print
Used for printers
projection
Used for projected presentations, like slides
screen
Used for computer screens
tty
Used for media using a fixed-pitch character grid, like
teletypes and terminals
tv
Used for television-type devices
I only care
about
these two
…
Slide 27
Time for a challenge…
Slide 28