Transcript Responsive Web Design - Temple Fox MIS

Responsive Web Design (RWD)
MIS 3502, Spring 2016
Jeremy Shafer
Department of MIS
Fox School of Business
Temple University
2/11/2016
Course Overview
We are (still) here
New tools
Weeks 1 - 5
Using a web
framework
Weeks 6 -8
Using a mobile
device IDE
Weeks 9-10
The class project
(It’s a bake off!)
Weeks 11-15
 PDO syntax
 MVC pattern
 JavaScript / AJAX
 JSON
RWD
Slide 2
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 3
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 4
Flexible Grid Layout
It’ really not as complicated as this.
Slide 5
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 6
Flexible Grid Layout (2)
100px
100px
100px
100px
100px
100px
100px
100px 100px 100px 100px 100px 100px
100px
Slide 7
Flexible Grid Layout (3)
100px
100px
100px
100px
100px
100px
100px
100px
Slide 8
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 9
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 10
960 pixels (2 of 2)
80px 80px 80px 80px 80px 80px 80px 80px
80px 80px 80px 80px
Slide 11
Making it Flexible (1 of 3)
• 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 12
Making it Flexible (2 of 3)
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 13
Making it Flexible (3 of 3)
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% /* 12 / 960 */
Slide 14
What’s an EM?
“Auntie Em! Auntie Em!”
Slide 15
What’s an EM?
• 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.
• On conventional desktop / laptop browser, 1em =
16px. On a smart phone 1em = approx 28px.
• A 2em font size is twice as big as that.
Slide 16
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 17
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 18
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
Slide 19
Time for an exercise…
Slide 20