behavior & presentation - university of hawaiibehavior & presentation communication 437...
TRANSCRIPT
BEHAVIOR & PRESENTATIONCommunication 437
Behavior & Presentation
Jeffrey Veen: Art & Science of Web Design
What is Design?
“Bad Design… is decoration”
“Good design is problem solving”
What Needs Solving?
Integrating good traditional design with
the possibilities and limitations of the web
Traditional Paper-Based Design
Involves controlling many variables– Paper stock & size– Typefaces & Size– Ink colors and density– Viewing mechanism– Image display is immediate & accurate
1
2
3
4
5
Web-Based Design
Involves dealing with largely unknown variables– Screen size and resolution– Number of colors & how rendered– Typefaces on system & platform used– Type size individually configurable– Download speed for images– Plug-ins available– Platform, browser brand, and browser version
What is the Solution?
• Ignoring the user or• Ignoring the web’s possibilities and limitations
Liquid, Elastic, & FixedLayouts
Creating Liquid Layout
• Layout uses percentages, not absolute widths, which are relative to the viewport (browser) width
Liquid Page Layout
6
7
8
9
10
Liquid Page Layout
Liquid Layout
Liquid Layout
Creating an Elastic Layout
•Layout uses relative measurements (ems), and resizes content based on the font size
Creating a Jello Layout
•Layout depends the viewport size but uses min-width and max-width CSS properties to constrain both the minimum and maximum size of the content
11
12
13
14
15
Creating a Solid Layout
•Use absolute measurements (e.g., pixels)
Fixed / Solid Page Layout
Solid Design
Solid Design
HYBRID =LIQUID + SOLID
16
17
18
19
20
Creating a Hybrid Layout
• Use percentages, or other relative measures, for some elements
• Use absolute measure for other elements
Hybrid Layout
Hybrid Layout
Hybrid Layout
Hybrid Layout
21
22
23
24
25
GRACEFUL DEGRADATION
“Correct” Display
No CSS Display
Text-Only Display
POOR DEGRADATION
26
27
28
29
30
“Correct” Display
No CSS Display
Screen Reader Display
Text-Only Display
31
32
33
34