Usability and CSS Intro
Download
Report
Transcript Usability and CSS Intro
( THE
CS 115: COMPUTING FOR
SOCIO-TECHNO WEB
USABILITY AND CSS
USABILITY DEFINED
“How well users can use the system’s functionality”
Dimensions of usability:
•
•
•
•
•
Learnability
Memorability
Efficiency
Errors
Satisfaction
USER EXPERIENCE GOALS
•
•
•
•
•
•
•
•
Satisfying
Fun
Enjoyable, Fun
Entertaining
Motivating
Aesthetically pleasing
Supporting collaboration
… and more
VISUAL DESIGN PRINCIPLES
Balance
Alignment
Emphasis
Proportions
Movement
Pattern
Contrast
Unity
BALANCE
CONTRAST
EMPHASIS
WHITE SPACE
Use white space for grouping, instead of lines
Use margins to draw eye around design
Do not crowd elements together
GESTALT PRINCIPLE OF GROUPING
Proximity
Similarity
COLOR PSYCHOLOGY
CONSISTENCY
WEB PROGRAMMING IN CS/MAS115
Behavior
Structure and content
Look and feel
CSS
Style sheets can be put in (at least) three
different places:
• Inline Styles. These are specified in the tag itself using the style
attribute.
• Document-Level (Internal) Style Sheets. These are specified in
the <head> of a document, using a special tag <style>.
• External Style Sheets. These are specified in a separate CSS file
that is connected to the HTML file by the <link> tag.
CSS SYNTAX
Fonts with CSS
serif family
Times New Roman
Georgia
body
sans-serif family
A
Arial
{
font-family: Verdana, Arial, sans-serif;
font-size: medium;
font-style: italic;
}
em {
font-family: Impact;
Specifying font size:
font-size: 14pt;
font-weight: bold;
}
Verdana
default is
normal
font-size: 20px;
font-size: 150%;
Keywords: xx-small, x-small,
small, medium, large, x-large,
xx-large, smaller, larger
CSS SELECTORS