Post on 15-Jul-2015
Interactive News Editing and
ProductionThursday, Feb. 26
• Media queries
• Grid-based layouts
• Design: Type, Color, Usability
Today’s agenda
CSS IV
• Media queries are the second half of
responsive web design. Maybe more than
half.
• They are settings allow you to broadly adapt
your content to different screen sizes and
orientations.
• It’s not just a liquid layout. It’s changing the
shape of the lakes.
• Why?
Media query 101
• Flexible containers and margins and scalable
images account for some variations.
• But developers need more ways to ensure a
good user experience across the hundreds of
devices at vastly different sizes and
resolutions.
• So you set breakpoint values (320px or
1024px ) to generically account for devices.
• List on class site and here
Media query 101
iPad 3 screen size: 768 x 1024 px (x2)
Galaxy S4 screen size: 320 by
640 px (x3)
iPhone 5s screen size: 320 by 568 px (x2)
iPhone 6+ screen size: 414
by 736 px (x3)
• Devices: screen or print
• Values: width, height, aspect-ratio,
orientation, device-width, device-height,
device-aspect ratio
Orientation is portrait or landscape.
For all others “min-” and “max-” prefixes can be
(should be) used.
Key media query values
@media screen and (max-width: 50em) {
header img {
display: none;
}}
@media screen and (min-width: 480px) and (max-width: 880px) {
h1 {
font-size: 2em;
}}
Media query format
<link rel=“stylesheet” type=“text/css”
href=“phone.css” media=“only screen and (max-
width: 480px)” />
<link rel=“stylesheet” type=“text/css”
href=“desktop.css” media=“screen and (min-width:
481px)” />
Read more at Stackoverflow
Media query stylesheets
• In the lesson1 folder, view the document
mq.html in your browser, then open it and
mq.css your text editor.
• Explore how it responds to browser changes.
• Instructions are at the top of the CSS file.
• We’ll do this together.
Workshop: Lesson I
To do: At 30em, use @media to do the following:
1. Turn the headline font the color red
2. Do not display the photo in the <section>
container
3. Stop floating the images and allow them to stack
vertically
4. Expand the <article> containers to the full width
of the entire browser
5. Change the h1 font size to 1.5em and the <h2>
font size to 1.2em
Workshop: Lesson I
• DPI often varies on devices
with similar resolutions.
• The initial-scale property
controls the zoom level
when the page is first
loaded.
• <meta name=“viewport”
content=“width=device-
width, initial-scale=1.0” />
Viewport setting
• In the lesson2 folder, view the document
chifire.html in your browser, then open it and
chifire.css your text editor.
• Explore how it responds to browser changes.
• Instructions are at the top of the CSS file.
This is an in-class workshop. Go. Fight. Win.
Workshop: Lesson II
At 58em:
• 1. Hide all images in the <header>
• 2. Center the text in the <ul> navigation bar and set an appropriate
margin on each <li>.
At 30em:
• 3. Hide the background image in the <body> container
• 4. Make both <article> containers in the #twoLayer container stack
vertically instead of float horizontally and expand to the full width of the
browser.
• 5. Hide the image in the #fullLayer container
• 6. Hide all the images #threeLayer container
• 7. Make all three <article> containers in the #threeLayer container stack
vertically instead of float horizontally and expand to the full width of the
browser.
Workshop: Lesson II
Chris Coyier: http://css-tricks.com/css-media-queries/
Brad Frost:
http://bradfrostweb.com/blog/post/7-habits-of-highly-
effective- media-queries/
Mozilla:
https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Media_queries
Viewport testers:
http://bradfrostweb.com/demo/ish/
http://www.responsinator.com/
Good reading, @media
• In the drew-peterson folder, view the
document drew.htm in your browser, then
open it and main.css your text editor.
• Explore how it responds to browser changes.
• Instructions are at the top of the CSS file.
Homework I: Drew Peterson
Why use a grid? Much more flexible. Scales
best to smaller devices. It can be much easier
to place content.
Grid-based layouts
Nathan Smith’s Unsemantic:
http://unsemantic.com/
Bootstrap:
http://getbootstrap.com/2.3.2/scaffolding.html
Responsive Grid System:
http://www.responsivegridsystem.com/
Skeleton:
http://www.getskeleton.com/
Denis Leblanc’s responsive.gs:
http://responsive.gs/
Grid-based layouts
Design
• “The physical embodiment of a collection of
letters, numbers, symbols, etc. is a font.”
• “When referring to the design of the collection (the
way it looks) you call it a typeface.”
• “A font is what you use; a typeface is what you
see.” The typeface is the album. A font is the song.
• Arial is a typeface.
• Arial 45 light condensed is a font.
• Now, people generally use them interchangeably.
Font or typeface?
This is Garamond.
(It’s a typeface, not a font)
It’s not easy to read when small, like 20px
At least not as easy as Georgia
The height of lowercase letters is the x-height
The larger the x-height, the more
efficiently the typeface uses space
And the more legible it is when small. Helvetica is a great example
But these fonts look dumb when big
• Use text to establish hierarchy.
• Use text as design, and blocks as grids.
• Left-alignment is easier to read, easier to scan. In
U.S.
• Emphasize only ONE way.
• Standards: Verdana, Georgia, Helvetica, Arial,
Palatino, Times New Roman etc (more)
• Free fonts: Google. Usage tips
• Not-so-free: Typekit
• Establish order of preference, font fallback, in CSS.*Emily Withrow
Typeface tips*
• Typetester: http://www.typetester.org/
• 19 font combinations: http://bonfx.com/wp-
content/uploads/2009/09/19-top-fonts-in-19-top-
combinations-chart.pdf
• Smashing Magazine's 40 best typeface combinations:
http://smashinghub.com/40-best-typeface-combinations-
in-web-design.htm
• Smashing Magazine: What font should I use?
• http://www.smashingmagazine.com/2010/12/14/what-
font-should-i-use-five-principles-for-choosing-and-using-
typefaces/
Good reading, typography
COLOR …This is Impact. It’s ugly but is heavy enough for
color.
Think memes. Little else.
Tips:Choose a few and stick with them.
Colors should mean things
Be consistent
Get help. Use tools.
Let photos, logos do the work
Use reverse smartly
When in doubt, design on white
• Adobe Color CC: https://color.adobe.com/
• RGB color calculator:
http://drpeterjones.com/colorcalc/
• B&A Mag: How to Find the Perfect Color
handout is on class site and here:
https://lhefnerucodesign.files.wordpress.com/20
12/03/ba0453perfectcolor.pdf
Good reading, color usage
Usability is defined by 5 components, says Jakob Nielsen.
1. Learnability: How easy is it for users to accomplish basic
tasks the first 1me they encounter the design?
2. Efficiency: Once users have learned the design, how
quickly can they perform tasks?
3. Memorability: When users return to the design after a
period of not using it, how easily can they reestablish
proficiency?
4. Errors: How many errors do users make, how severe are
these errors, and how easily can they recover from the
errors?
5. Satisfaction: How pleasant is it to use the design?
Usability
• If a website is difficult to use, people leave. If the
homepage fails to clearly state what a company
offers and what users can do on the site, people
leave. If users get lost on a website, they leave.
If a website’s information is hard to read or
doesn’t answer users’ key questions, they leave.
• There are plenty of other websites available;
leaving is the first line of defense when users
encounter a difficulty.
Usability
There are many other important quality attributes.
A key one is utility, which refers to the design’s
functionality:
• Does it do what users need?
• Usability and utility are equally important
Usability
How do you make a site/app usable? Steve Krug
says:
• Take advantage of conventions
• Create effective visual hierarchies
• Break up pages into clearly defined areas
• Eliminate distractions
• Format content to support scanning
Remember: Users will not think. They will muddle.
Or leave.
Usability
• Download the design.zip file. Inside is a folder
called lethal injections. In contains files for a
responsive table.
• Your homework is use the typeface and color
tools here and redesign it.
• You must use at least 2 Google fonts.
• At least one font and one background color must
have color.
• Colors must be in hexadecimal notation.
Homework II: Lethal injections
• Deadline: Tuesday, 11:59 p.m.
• Apply media queries to Drew Peterson page
• Restyle colors and typefaces on the responsive
table
• Don’t Make Me Think, Revisited: chapters 6-7
Homework recap
• Metrics
• Documents
• WordPress
Next up