5 web design
DESCRIPTION
5 Web Design. Learning 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 - PowerPoint PPT PresentationTRANSCRIPT
CIS 1310 – HTML & CSS
5
Web Design
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
W3C WAI GuidelinesW3C WAI Guidelines
CIS 1310 – HTML & CSS
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
W3C WAI GuidelinesW3C WAI Guidelines
CIS 1310 – HTML & CSS
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
W3C WAI GuidelinesW3C WAI Guidelines
CIS 1310 – HTML & CSS
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
W3C WAI GuidelinesW3C WAI Guidelines
CIS 1310 – HTML & CSS
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
W3C WAI GuidelinesW3C WAI Guidelines
CIS 1310 – HTML & CSS
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
W3C WAI GuidelinesW3C WAI Guidelines
CIS 1310 – HTML & CSS
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 WAI GuidelinesW3C WAI Guidelines
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
W3C WAI GuidelinesW3C WAI Guidelines
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
CIS 1310 – HTML & CSS
W3C WAI GuidelinesW3C WAI Guidelines
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
CIS 1310 – HTML & CSS
Three Levels of Emotional DesignThree Levels of Emotional Design
Behavioral
Usability
Visceral
Appearance
“Hardwired”
Reflective
Branding
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Subjective
Communication
Visual Appeal
Objective
Utility
Engagement
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
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
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
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
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Communication
Legibility
High Contrast
Color
Text Size
Typeface
Density
Use Headings & Lists
Images
Meaningful Relationship to Content
White Space
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Communication
Readability
Understanding
Familiar Terms & Phrases
Language
Vivid
Active
Personable
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Visual Appeal
Richness
Uncluttered
White Space
Balance
Images Complement Content & Each Other
Images
High Quality
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Visual Appeal
Style
Suitable for Purpose
Convey Mood or Tone
Formal/Informal, Youthful/Mature, Playful/Serious
Stylistic Elements Fit Together
Color Combinations
Typefaces
Images
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
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
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Utility
Intuitive Interface
Easy to Use
Clear as to How to Perform Tasks
Predictable
Lack of Frustration
Successful Accomplishment of Tasks
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
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
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Utility
Value
What is Benefit for User?
Remember Site
Return Visitors
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Engagement
User Awareness
Types of Visitors Site Hopes to Engage
Anticipate What Users Want & Expect
Clearly Recognize Benefits
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Engagement
User-Centered Purpose
Does the Site Have a Purpose?
Knowledge
Decision Support
Accomplishing Tasks
Interconnectedness
Enjoyment
Is Purpose Immediately Apparent?
CIS 1310 – HTML & CSS
Underlying Principles of DesignUnderlying Principles of Design
Engagement
Interpersonal Rapport
Visitors Feel
Comfort
Trust
Understanding
Duration
Return to Site?
CIS 1310 – HTML & CSS
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.
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.
CIS 1310 – HTML & CSS
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.
CIS 1310 – HTML & CSS
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.
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.
CIS 1310 – HTML & CSS
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.
CIS 1310 – HTML & CSS
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/
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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.
CIS 1310 – HTML & CSS
Graphic Cropping (Visual Impact)Graphic Cropping (Visual Impact)
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Legibility See, Distinguish, Recognize Characters/Words in Text
Typeface
No More Than Three Different Fonts
No More Than Four Colors
Use a Reasonably Large Default Font Size
Even Larger 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
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Legibility
Contrast
Black on White Preferable
Use Grayscale to See if Content is Discernable
Subtle Background
Color Blindness
8% Men, 5% Women
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Legibility
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
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Readability
Complexity of Words/Sentence Structure in Content
Use Plainspoken Words
Use Short Sentences
Reading Monitor 25% Slower than Paper
Web Content Should be About Half of Print Content
Start Sentences with Verbs
More Impact
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Readability
Write in Active Voice
Aim at an 8th-grade Reading Level
If Targeting Broad Consumer Audience
Aim at a 12th-grade Reading Level
For Educated or Specialized B2B Audience
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Comprehension
Understand Intended Meaning & Draw Correct Conclusions
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.
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Comprehension Use Specialized Terminology for Specialized Audience
Terminology
Consider User Demographics
FedStats.gov: Metropolitan Area v. City
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”
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Comprehension Plain Language
Inverted Pyramid
Start with Overview
One Idea per Paragraph
Only First Sentence Read
Most Important Point Within First Two Lines of Paragraph
Spell Check / Grammar
Proofread Other than Author
G e n e r a l
Detail
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
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
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Scannability
SubHeads
Bulleted Lists
Bullet List Read More Often than Without (70% vs. 55%)
Sorting
Highlighting & Emphasis
Don’t Confuse with Hyperlinks
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
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
CIS 1310 – HTML & CSS
Writing for the WebWriting for the Web
Scannability
Paragraph # Visitors Viewing Paragraph
1 81%
2 71%
3 63%
4 32%
CIS 1310 – HTML & CSS
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/
CIS 1310 – HTML & CSS
ColorColor
Color Wheel Based Schemes
Monochromatic – Shades / Tints / Tones of a Color
CIS 1310 – HTML & CSS
ColorColor
Color Wheel Based Schemes
Analogous – Adjacent Colors
CIS 1310 – HTML & CSS
ColorColor
Color Wheel Based Schemes
Complentary – Opposite Colors
CIS 1310 – HTML & CSS
ColorColor
Color Wheel Based Schemes
Triadic – Three Equidistant Colors
CIS 1310 – HTML & CSS
ColorColor
Color Wheel Based Schemes
Tetradic – Two Complementary Sets of Colors
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
ColorColor
Psychological Response
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
CIS 1310 – HTML & CSS
ColorColor
Psychological Response
Brown
Earth, Reliability, Comfort, Endurance
Successful Food Packaging in US
Poor Sales in Columbia
Gray
Intellect, Future, Modest, Sadness, Decay
CIS 1310 – HTML & CSS
ColorColor
Psychological Response
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
BrandingBranding
Signifies Goods/Services
Name
Slogan
Logo
Something That Won’t Come Off in the Wash
CIS 1310 – HTML & CSS
BrandingBranding
Functional — Objective, Logical, Practical
Communicate
Recognition & Recall
Differentiate
Emotional — Subjective, Emotive, Creative
Personality
Add Value
Attractive
CIS 1310 – HTML & CSS
BrandingBranding
General
Leo Burnett
Nike v. Adidas
Logitech
Michelin v. Firestone
FedEx
CIS 1310 – HTML & CSS
BrandingBranding
Web Principles
Consistency
Logo
Tagline
Navigation
Color Scheme
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Mobile Web DesignMobile Web Design
Approaches
Develop Separate Site
Use .mobi TLD
Separate Site Hosted within Same Domain
m.domain.com
Use Responsive Design
CIS 1310 – HTML & CSS
Mobile Web DesignMobile Web Design
Considerations
Small Screen Size
Low Bandwidth
Font, Color, & Media Issues
Awkward Controls, Limited Processor & Memory
Functionality