cis 1310 – html & css 5 web design. cis 1310 – html & css learning outcomes describe...

CIS 1310 – HTML & CSS

5

Web Design


Learning OutcomesLearning Outcomes

Describe Common Types of Website Organization

Describe Principles of Visual Design

Design for Target Audience

Create Clear, Easy-to-use Navigation

Improve the Readability of Text on Web Pages

Apply Universal Design to Web Pages

Describe Web Page Layout Design Techniques


Web Site StructureWeb Site Structure

Hierarchical General to Detail Progression

Linear Purchasing Sequence of E-Commerce Site Book

Web Mimic Associative Thought and the Free Flow of Ideas


Web Site StructureWeb Site Structure

Shallow Too Many Choices; Confusing & Less Usable Web Site

Deep Too Many Clicks to Navigate to Desired Page Three Click Rule

From a Page to Any Other Page in a Maximum of Three Clicks


W3C’s WAI (Web Accessibility Initiative)

http://www.w3.org/WAI

Web Content Accessibility Guidelines

http://www.w3.org/WAI/WCAG20/quickref/

Accessible Website

Provides Accommodations for Individuals with:

Visual, Auditory, Physical, & Neurological Disabilities

?AccessibilityAccessibility


Federal Law

Americans with Disabilities Act (ADA)

Prohibits Discrimination Against People with Disabilities

Section 508 of US Rehabilitation Act

Mirrors Web Accessibility Initiative of W3C

Web Projects Funded by Government

Took Effect 2001

?Importance of Accessibility ComplianceImportance of Accessibility Compliance


Guideline 1

Provide Equivalent Alternatives to Auditory & Visual Content

Provide Text Equivalent for Every Non-text Element

Images, Image Maps, Animations, Graphical Buttons, Sounds, Audio, Audio Tracks of Video, Video

Provide Redundant Text Links for Image Links

Provide Auditory Description for Visual Multimedia Content

W3C WAI GuidelinesW3C WAI Guidelines


Guideline 2

Do Not Rely on Color Alone

All Information Conveyed with Color is Available without Color

Ensure Foreground & Background Provide Sufficient Contrast

Guideline 3

Use Markup & Style Sheets Properly

Use Markup Rather than Images to Convey Information

Create Documents that Validate to Published Formal Grammars

Use Relative Rather than Absolute Units in Markup

Use Header Elements to Convey Document Structure



Guideline 4

Clarify Natural Language Usage

Clearly Identify in Text

Captions

Specify Expansion of Abbreviation/Acronym When it First Occurs

Guideline 5

Create Pages that Transform Gracefully

For Data Tables, Identify Row & Column Headers



Guideline 6

Ensure Pages with New Technologies Transform Gracefully

Organize Documents So They May be Read Without Styles

Ensure Pages are Usable When Scripts, Applets, etc. are

Turned Off

Not Supported



Guideline 7

Ensure User Control of Time-sensitive Content Changes

Avoid Causing the Screen to Flicker

Avoid Causing Content to Blink

Avoid Movement in Pages

Do Not Create Periodically Auto-refreshing Pages

Do Not Use Markup to Redirect Pages Automatically

Configure the Server to Perform Redirects



Guideline 8 Ensure Direct Accessibility of Embedded User Interfaces

Embedded Objects with Their Own Interface Must be Accessible

Guideline 9 Design for Device-independence

Provide Client-side Image Maps Vs. Server-side Image Maps

Create a Logical Tab Order Through Links & Form Controls

Provide Keyboard Shortcuts To Important Links

Form Controls

Groups of Form Controls



Guideline 10

Use Interim Solutions

Do Not Cause Pop-ups or Other Windows to Appear

Do Not Change the Current Window Without Informing User

Ensure Proper Position For Form Controls With Labels

Label Must Immediately Precede Its Control On The Same Line

Allowing More Than One Control/Label Per Line

Be in the Line Preceding the Control

With Only One Label & One Control Per Line

Provide a Linear Text Alternative for Tables that Use Parallel, Word-wrapped Columns



Guideline 11 Use W3C Technologies & Guidelines

Use W3C Technologies When Available & Appropriate For Tasks Use Latest Versions

Avoid Deprecated Features of W3C Technologies

Provide Info to Users According To Their Preferences Language, Content Type

If You Cannot Create an Accessible Page Provide a Link to an Alternative Page That

Uses W3C Technologies

Is Accessible

Has Equivalent Information or Functionality



W3C GuidelinesW3C Guidelines

Guideline 12

Provide Context & Orientation Information

Divide Large Content Areas into More Manageable Groups

Use OPTGROUP to Group OPTION Elements Inside a SELECT

Group Form Controls with FIELDSET & LEGEND

Use Nested Lists where Appropriate

Use Headings to Structure Documents

Associate Labels Explicitly with Their Controls

Use LABEL & its FOR Attribute



Guideline 13

Provide Clear Navigation Mechanisms

Clearly Identify the Target of Each Link

“Information About Version 4.3” Vs. “Click Here”

Use of TITLE Attribute

Use Navigation Mechanisms in a Consistent Manner

Group Related Links, Identify the Group



Guideline 14

Ensure that Documents are Clear & Simple

Use Clearest & Simplest Language Appropriate For Site

Supplement Text With Graphic or Auditory Presentations

Only Where They Will Facilitate Comprehension of Page

Create a Style of Presentation that is Consistent Across Pages


Three Levels of Emotional DesignThree Levels of Emotional Design

Behavioral

Usability

Visceral

Appearance

“Hardwired”

Reflective

Branding


Underlying Principles of DesignUnderlying Principles of Design

Subjective

Communication

Visual Appeal

Objective

Utility

Engagement



Communication

User Interaction

First Seconds

Site Must Clearly Communicate Why it is Useful

10 Seconds

Convince User Site can be Navigated Easily

1 Minute

Content is of Real Interest & Value



Communication

Clarity

Logical Organization

Opening Content that can be Scanned v. Read

Concisely Stated, Without Extraneous Material

Benefit to User

Clear v. Obscure

Error Free

Spelling & Grammar

Accurate & Current

Link Rot, Link Quality, & Link Descriptions



Communication

Legibility

High Contrast

Color

Text Size

Typeface

Density

Use Headings & Lists

Images

Meaningful Relationship to Content

White Space



Communication

Readability

Understanding

Familiar Terms & Phrases

Language

Vivid

Active

Personable



Visual Appeal

Richness

Uncluttered

White Space

Balance

Images Complement Content & Each Other

Images

High Quality



Visual Appeal

Style

Suitable for Purpose

Convey Mood or Tone

Formal/Informal, Youthful/Mature, Playful/Serious

Stylistic Elements Fit Together

Color Combinations

Typefaces

Images



Visual Appeal

Unity

Organization

Consistency & Repetition

Color, Navigational Elements, Logo

Makes Each Page Appear to be Part of the Whole

Creates a Sense of Order

Immediately Obvious Which Elements Relate to Each Other



Utility

Intuitive Interface

Easy to Use

Clear as to How to Perform Tasks

Predictable

Lack of Frustration

Successful Accomplishment of Tasks



Utility

Navigability

Clearly Identified Links

Describes Link Destination

Should NOT Have to Backtrack to Home

Where You Are, Where You Can Go, Where You’ve Been

Logical Organization of Content



Utility

Value

What is Benefit for User?

Remember Site

Return Visitors



Engagement

User Awareness

Types of Visitors Site Hopes to Engage

Anticipate What Users Want & Expect

Clearly Recognize Benefits



Engagement

User-Centered Purpose

Does the Site Have a Purpose?

Knowledge

Decision Support

Accomplishing Tasks

Interconnectedness

Enjoyment

Is Purpose Immediately Apparent?



Engagement

Interpersonal Rapport

Visitors Feel

Comfort

Trust

Understanding

Duration

Return to Site?


Typography (Sans Serif v. Serif)Typography (Sans Serif v. Serif)

Lorem IpsumLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est.



Heading / Body Size ContrastHeading / Body Size Contrast

Lorem IpsumLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. Nam faucibus nulla nec nulla.

Lorem IpsumLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. Nam faucibus nulla nec nulla.


Headings (Fewer & Larger)Headings (Fewer & Larger)

Lorem Ipsum Dolor Sit AmetLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est.



Subheads As Named AnchorsSubheads As Named Anchors

Lorem IpsumLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede.

Dolor Sit AmetNam faucibus nulla nec nulla. Praesent porttitor ultricies eros. Nam mauris. Proin augue libero, convallis non, hendrerit sed, condimentum at, magna. In convallis, ligula ac interdum adipiscing, lorem leo ultrices dolor, id tincidunt odio dolor at nibh. Aliquam nisl ante, vestibulum sed, ultricies a, ullamcorper id, turpis. Pellentesque quam lacus, dapibus vitae, interdum at, viverra non, orci.


LeadingLeading

Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede.

Lorem ipsum

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

Nunc placerat ante in libero.

Vivamus sed enim. Nunc

malesuada. Sed facilisis.

Pellentesque et odio. Cras

tortor. Etiam consequat diam

at ligula. Sed vestibulum diam

sed pede. In hendrerit nulla et

justo. Donec ullamcorper

mattis pede. http://www.typetester.org/


White SpaceWhite Space

Space Between Visual Elements

The Part of the Design that “Isn’t” There

Just as Important as the Elements that are There


Graphic PlacementGraphic Placement

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et.


Graphic Cropping (Visual Impact)Graphic Cropping (Visual Impact)


Layout (Conservative / Dynamic)Layout (Conservative / Dynamic)

Well-defined, rectangular areas on the page

Warm greens accompanied by cool blues

Balance intimacy with professionalism

Overlapping panels

Imagery evokes customer service & technology

Entertain the eye & communicate innovation


Balance (Symmetrical / Asymmetrical )Balance (Symmetrical / Asymmetrical )

Provide Sense of / Lack of Equilibrium

Create Tension & Visual Weight

Use of Approximate Horizontal Symmetry

Imagery Incorporates Good Amount of White

Graphic Text is Thin & Unobtrusive

Elements Blend into Background

Not Dominant in Any One Place

Subtle Greens Used Sparingly


Diagonal BalanceDiagonal Balance

Upper Left to Lower Right

POA (Primary Optical Area) to TA (Terminal Anchor)

Natural Eye Movement

Use Color to Draw Attention

Guides the Eye

Creates Focal Area

LOGOLOGO

Button


DominanceDominance

Emphasis & Visual Weight in a Composition

Where the Eye is First Led to When Looking at a Design

Right-most Column is Dominant

Largest Area of Color

Uses Big, Reversed Text for Major Headings

Center Column is Subdominant

Uses Less Color & Smaller Text in Less Space

Left-most Column is Subordinate


Writing for the WebWriting for the Web

User-centric vs. Maker-centric Language

Focus on Benefits of Product / Service, Not Features

Avoid Industry & Business Jargon

Speak to Your Readers, Not at Them

“You” and “We” Instead of “Our Customers” or “Company X”

30-day money-back satisfaction guarantee entitles customer to a refund of installation fees and first month’s Cox High Speed Internet service fee and modem charge if purchased from Cox and excludes other Cox service fees. Customer must claim refund within 30 days of service activation. Other restrictions may apply.



Succinct

Reading Monitor 25% Slower than Paper

Web Content Should be About Half of Print Content

Start Sentences with Verbs

Shorter, More Impact

Spell Check / Grammar

Proofread

Other than Author



Satisficers

Settle for Something that Meets Our Essential Needs

Scannability

79% Scan v. Read

Visitors Average 27 Seconds on a Web Page

Visitors Average 1 Minute 49 Seconds on a Web Site

Average User Reads Only 20% of Page

Short Paragraphs < 5 Sentences

Short Sentences < 20 Words



Scannability

SubHeads

Bulleted Lists

Bullet List Read More Often than Without (70% vs. 55%)

Sorting

Highlighting & Emphasis

Don’t Confuse with Hyperlinks



Scannability

Occasionally Break Grammar Rules on Websites for Clarity

Use Sentence Fragments

Show Numbers as Numerals

For Numbers up to a Billion

One Sentence Paragraphs

Use Exclamation Points

Users Miss Subtle Enthusiasm in Content

Eyetracking Reveals Users are Attracted to Exclamation Points



Scannability

Paragraph # Visitors Viewing Paragraph

1 81%

2 71%

3 63%

4 32%



Plain Language

Inverted Pyramid

Start with Overview

One Idea per Paragraph

Only First Sentence Read

Most Important Point Within First Two Lines of Paragraph

Terminology

Consider User Demographics

FedStats.gov: Metropolitan Area v. City

G e n e r a l

Detail



Typeface

No More Than Three Different Fonts

No More Than Four Colors

10 – 12 Point

12-14 for Young Children & Seniors

Users Aged 65+ Are 43% Slower at Using Websites

Sans-Serif Easier to Read on Monitor

Verdana Most Readable Online Typeface

All Caps Reduce Reading Speed by 10%



High Contrast

Content / Background

Black on White Preferable

Use Grayscale to See if Content is Discernable

Color Blindness

8% Men, 5% Women

Subtle Background



Low Contrast

Legibility Suffers

Discoverability and Findability Are Reduced

Mobile Use Becomes Even More Difficult

Accessibility Is Severely Reduced

Users With Low Vision or Cognitive Impairments

Cognitive Strain Increases


ColorColor

Eye’s Response to Wavelengths of Radiation

Hue, Value, Saturation

All Hues Brought Down to a Mid-range Value

Surrounded by Red & Orange

Plays Off of Natural Complements

Very Warm, Very Rich Set of Tones

Feel Full & Vibrant

http://paletton.com/


ColorColor

Color Wheel Based Schemes

Monochromatic – Shades / Tints / Tones of a Color


ColorColor


Analogous – Adjacent Colors


ColorColor


Complentary – Opposite Colors


ColorColor


Triadic – Three Equidistant Colors


ColorColor


Tetradic – Two Complementary Sets of Colors


ColorColor

Psychological Response

Red

Power, Energy, Warmth, Passion, Aggression, Danger

Green

Nature, Health, Renewal, Good Luck, Jealousy

Problems in Global Market

Blue

Trust, Conservative, Security, Order


ColorColor


Yellow

Optimism, Hope, Cowardice, Betrayal

Sacred Color to Hindus

Purple

Spiritual, Mystery, Royalty, Arrogance

Orange

Energy, Balance, Warmth

Signifies a Product is Inexpensive in the US


ColorColor


Brown

Earth, Reliability, Comfort, Endurance

Successful Food Packaging in US

Poor Sales in Columbia

Gray

Intellect, Future, Modest, Sadness, Decay


ColorColor


White

Purity, Cleanliness, Precision, Innocence, Death

Signifies Marriage in the US

Signifies Death in India, Other Eastern Cultures

BlackBlack

Death, Mystery, Fear, Unhappiness

Packaging

Power, Sexuality, Sophistication, Elegance


ShapeShape

Psychological Response Rectangle

Order, Logic, Containment

Circle Connection, Community, Wholeness

Female Warmth, Comfort, Sensuality, Love

Triangle Energy, Power, Law, Science, Religion

Male Strength, Aggression, Dynamic


BrandingBranding

Signifies Goods/Services

Name

Slogan

Logo

Something That Won’t Come Off in the Wash


BrandingBranding

Functional — Objective, Logical, Practical

Communicate

Recognition & Recall

Differentiate

Emotional — Subjective, Emotive, Creative

Personality

Add Value

Attractive


BrandingBranding

General

Leo Burnett

Nike v. Adidas

Logitech

Michelin v. Firestone

FedEx


BrandingBranding

Web Principles

Consistency

Logo

Tagline

Navigation

Color Scheme


BrandingBranding

Web Principles

Characters

Simple Stylistic Trend

Permeates Site to Thematically Unite It

Element of Logo

Used Next to Header Text

Used as Bullet Marker


File SizeFile Size

Page Size = HTML + Objects

10 Second Threshold

Bailout — Users Who Don’t Wait For Full D/L

Slow or Broken Links

Unable to Find Data

Unable to Find Company Data

Limited Search Functionality

Poorly Labeled Links


File SizeFile Size

Setting Expectations

Indicate D/L Size When Greater Than 50Kb

Graphics

Use Colored Table Cells, CSS

Complex Tables

Use Smaller, Multiple Tables

Include Final Slash in URL

Differentiates Between Folder and Page


ResolutionResolution

Desktop Resolution

Other 1%

1024 x 768 6%

1024 x 768 + 93%

Optimize For 1440 Pixel Widescreen Monitors

Percentage v. Fixed Width

w3schools 1/14


Page Layout DesignPage Layout Design

Wireframe Layout of Web Page

Depict Containers for All Major Page Elements & Functionality

Navigation

Images

Content

Functional Elements (e.g., Search)

Footer

Created for Home Page Each Unique Second Level Page Any Other Significantly Different Page On Site


Page Layout DesignPage Layout Design

Techniques

Fixed

Fixed-width

Can Be Left Aligned or Centered

Configured with a Fixed or Percentage Width

Fluid

AKA Liquid

Expands to Fill Browser Window at All Resolutions


Mobile Web DesignMobile Web Design

Approaches

Develop Separate Site

Use .mobi TLD

Separate Site Hosted within Same Domain

m.domain.com

Use Responsive Design


Mobile Web DesignMobile Web Design

Considerations

Small Screen Size

Low Bandwidth

Font, Color, & Media Issues

Awkward Controls, Limited Processor & Memory

Functionality