Lecture 2 Overview

1
Lecture 2 - Overview

• Meaning
• Planning
• Web Design
• Navigation
• Evaluation
• Mechanics
• Web Basics
• XHTML, CSS, URLs, Color Image Formats
• Dreamweaver
• Introduction
• Explore Dreamweaver Basics (view also suggested
  Tutorials Videos)
• Demo Setting Stage Intro
• Demo Tables and Simple CSS
• Demo Set up Local / Remote Site and Setting
  Permissions
• Demo slides are not narrated ? see Video Demos

2
Narrative Structures
3
Planning 1

• Define Web Audience
• Who is your target audience?
• What do you want the site to accomplish?
• Break Site into Categories
• Create Outline - Goal, Organization

• Create Simple Web Site Plan
• Hierarchy hyperlinks
• Use sticky notes or Flowchart

4
Planning 2

• Collect Organize Material
• Organizing files by folders
• Asset folder for images, sounds, videos,
  animations etc.
• Save source files
• File Name - lowercase, short, no spaces or
  special characters
• myinterests vs. my_interests vs. my
  interests
• Title web pages
• Local Structure Remote Structure
• Same folder and file structure on local remote
  machines
• Home page "index.html
• index.html stored in folder main
• http/www.site.com/main/ will display
  index
• If home page has different name, then it needs to
  be named

5
Web Design Overview

• Sources
• Steve Krugs Don't make me think!
• Alison Heads Design Wise
• Yale Web Style Guidelines
• Guiding Principles
• User Behavior
• Basics
• Home Page
• Lack of Control
• Search Testing

6
Web Guiding Principles

• Diversity of Users Rapid Change
• Diverse users, diverse computers, diverse skills,
  diverse
• Rapid evolution of technology and expectations
• Short attention span
• Common Sense
• No right way to design
• Make it short
• More likely to be used and remembered
• Don't make me think
• Get rid of question marks - each item has clear
  purpose
• Make it work at a glance
• People have little time
• Support intented task - manage expectations

7
Web User Behavior
8
Web User Behavior (cont.)
9
Web User Behavior (cont.)
10
Web User Behavior (cont.)
11
Web User Behavior (cont.)
12
Web User Behavior (cont.)

• Scan pages - don't read them
• Look for anything Search Interest
• Decide quickly
• Eye-tracking studies
• Choose first reasonable item
• Muddle through
• Don't figure out how things work
• Resist forming models
• Stick to what works

13
Web Design - Basics
? Stay above the fold800 X 600 good
14
Web Design Basics (cont.)
15
Web Design Basics (cont.)
16
Web Design Basics (cont.)
17
Web Design Basics (cont.)
18
Web Design Basics (cont.)

• Design for scanning, not reading
• Visual Hierarchy
• Visual contrast - size, bold, color
• Important things Visually prominent
• Related things Spatially close, Nested
• Avoid noise"
• Leverage Conventions
• Clear what's clickable
• Use underline and/or color coding
• Less is more
• Cut ½ of words, then cut ½.

19
Home Page Design

• Home Page
• Identity Mission, Hierarchy, Search, Timely
  Content, Short-cuts, Registration.
• Everybody wants a piece
• Answers Easily
• What can I do here?
• Why should be here?
• Where do I start?
• Tagline is Important
• Clear, informative, concise
• Differentiated, clear benefits
• Personable, lively, sometimes clever
• Problems with Pull-downs
• Hard to scan, Twitchy
• Have to seek them out

20
Web Design Lack of Control

• Experience not the same
• Limited Control over Web Display
• Visual Appearance depends on
• Type of computer - Windows vs. Mac
• Monitor color resolution
• Speed of Internet connection
• Browser Microsoft vs. Firefox vs. Safari - don't
  support same features
• Default font may be different
• Styles may differ

21
Web Design Search Testing

• Search Options
• Confuse and increase chances for failure
• Seldom worth the additional cognitive cost
• Amazon has no options at first - first experience
  is successful.
• Typical Problems
• Users are unclear on the concept
• Words users are looking for aren't there
• There is too much going on
• Great Site requires Testing

22
Web Site Navigation 1

• "Back" clicked 30-40
• Easy to figure out
• You are here
• Things at current level
• Return to higher-levels and home page
• Easy search and indexes
• Easy feedback
• Persistent navigation creates comfort
• Home and forms pages can be exemption

23
Web Site Navigation 2

• Top-level Navigation
• Top Row or Left Column
• Icons, image-maps, textual, pull-down
• Highlight or color currently selected
• To frame or not to frame?
• Second-level Navigation
• Below Top Line or Left Column
• Breadcrumbs
• SCILS gt Information Library Studies gt Courses gt
  Graduate
• Novel Navigation Metaphors
• TheBrain
• Star Tree for FlashKit by Inxight Software

24
User Behavior Summary
Scan pages - don't read them
Look for anything Search Interest Decide
quickly Choose first reasonable item
Muddle through Don't figure out how things work
Resist forming models
Stick to what works
25
Design Implications
Scan pages - don't read them

• Design for Scanning Make text short - cut
  words
• Make page work at a glance Sufficient left
  margin, 640x480 main message
• Create Visual Hierarchy

Look for anything Search Interest Decide
quickly Choose first reasonable item

• Make obvious what you can do on a page
• Make obvious what is clickable

Muddle through Don't figure out how things work
Resist forming models

• Don't make users think Get rid of question
  marks Each item clear purpose

• Stick to what works

• Repetition Consistency Grid Layout, Easy
  Navigation, Graphics,
• Color Coding, Typography

26
Evaluation Overview

• Sources
• Krug, S. - "Don't Make Me Think!"
• Head, A. - "Design Wise."
• Williams, R. Tollett, J. - "The Non-Designer's
  Web Book."
• Questions
• Audience
• Task
• Navigation
• Functionality

27
Evaluation Task

• Support tasks users need to accomplish?
• Support both experienced and inexperienced users?
• User expectations meet?

28
Evaluation Audience

• Who is the site for? Who are the intended users?
• What do users want to accomplish?
• What are the needed skills? Good fit with skills
  of intended users?
• What tasks are users trying to accomplish?

29
Evaluation Navigation

• What site is this? (Site ID)
• What page am I on? (Page name)
• What are the major sections of this site?
• Sections - tabs
• What are my options at this level?
• Local navigation
• Where I am?
• "You are here" indicators or breadcrumbs
• Easily find your way? back home? other sections?
• How can I search?

30
Evaluation Navigation (cont.)
31
Evaluation Functionality 1

• Instantly understand what site is about?
• Understand what you can do?
• "Look feel" enticing? Want to explore?
• Main functions easily accessible? Easy to use?
• Links clear where they will take you?

32
Evaluation Functionality 2

• Instant Visual Hierarchy?
• Or visually too busy?
• Text easy to read?
• Graphics easy to understand?
• Large site - site map, index or search?
• Help available and useful?
• Download times reasonable?

33
Evaluation Example Exercise 1

• Amazon Evaluation (of earlier version of site,
  but analysis still applies)
• Exercise 1
• Evaluate website of your choice.Choose a site
  that could serve as a model and/or contain
  relevant information for your final project.
• Be concise and insightful in your evaluations

34
Mechanics Web Basics XHTML

• XML Language for creating other languages
• Custom markup language that contains tags for
  describe the data that they contain.
• If a tag identifies the data, then the data
  becomes available for other tasks.
• Not as lenient as HTML.
• XHTML HTML rewritten in XML
• XHTML Keep code Consistent Well Structured
• Use Transitional XHTML in Dreamweaver
• Allows for the use of deprecated tags
• Notation Dreamweaver DW

35
Mechanics Web Basics XHTML (cont.)

• Body of (X)HTML document encloses Content of Web
  page.
• Required in XHTML
• The head and body tags and Closing lt/pgt tag.
• ? Dreamweaver includes required tags
  declarations.
• Naming Elements
• idname or classname
• Useful with div (content blocks) and span
  (inline text) elements
• Breaking up a Page into Divisions (DIV)
• Creating a Line Break ltbr /gt
• Hierarchical Structure of Web pages
• Elements contained inside another element (latter
  parent, former child)

36
Mechanics Web Basics XHTML (cont.)

• Two methods for creating Web Page Layout
• Tables easy to create, modify and format in DW.
• CSS create, modify and maintain in DW.
• Structure Your Pages
• Divide logical sections of document into div
  elements
• ? Produces linear / natural flow of divs
• Use header elements (h1, h2 )
• Use comments / hello world /
• Ordered Unordered Lists easy to create in DW.

37
Mechanics Web Basics CSS

• CSS Cascading Style Sheets
• Collection of Formatting Rules
• Control Appearance of web page blocks and text
• Ensure a more Consistent Treatment of Page Layout
  and Appearance in Browsers
• Separation of Content from Presentation
• Easier to Maintain Appearance since Make Change
  in Single Location
• Simpler and Cleaner HTML code ? shorter loading
  times

38
Mechanics Web Basics CSS (cont.)

• CSS Style Sheet stored
• External CSS style sheet (.css file linked to
  page and using a link or an _at_import rule in the
  head section of a document).
• Internal (or embedded) CSS style sheet (included
  in style tag in head portion of an HTML
  document).
• Inline styles (defined within specific tag
  instance in HTML document) Using Inline styles
  is not recommended.
• CSS Rule Selector and Block of Declarations
• Enclosed by ... brackets and separated by
• Declaration Property Value

39
Mechanics Web Basics CSS (cont.)

• CSS
• Control Text properties
• Specific fonts and font sizes bold, italics,
  underlining, and text shadows text color and
  background color link color and link
  underlining etc.
• Control Format Position of Block-level Elements
  
• Set margins and borders for block-level elements
  position them in a specific location add
  background color float text around them etc.
• Liquid layouts expand/contract based on Browser
  width.
• Easy to apply Same Layout to Whole Site and only
  need to modify external CSS file.
• Minus Not all browsers support CSS the same way.
• ? DW helps to identify Compatibility Issues

40
Mechanics Web Basics URL

• URL - uniform resource locator
• "http//www.abc.com/aaa/bbb/ccc.html"
• "http//" - hypertext transfer protocol - scheme
• "www.abc.com/" - server name - domain name,
  owner, host
• "/aaa/bbb/ccc.html" - path through folder
  hierarchy
• URL Basics
• Absolute URL
• "http//www.abc.com/aaa/bbb/ccc.html"
• "Complete street address"
• Info located on external server
• Relative URL
• "../../../xxx/yyy.htm"
• "../" up 1 level gt up 3 levels, then subdir
  "xxx" to get to "yyy.htm"
• "Direction to neighbor's house"
• Anchor (same page), Internal (local)
• Default Home Page index.html
• Keeps out prying eyes out of directories (also
  instructor ).

41
Mechanics Color
Large Areas Low Saturation Subtle
color Background / minor elements Subtle pastel
colors Small Areas High Saturation Bold
color Maximum emphasis Bold, saturated primary
colors
42
Mechanics Color (cont.)

• RGB Color used by Monitor
• Direct Light, Not Reflected
• Indexed Color
• Limited Selection of Colors up to 256 colors
• To Reduce File Size
• Color not in the Palette is Approximated and
  Dithered
• Creating Web-Safe Colors
• All combinations of 0, 20, 40, 60, 80, 100
  for Red, Green and Blue
• 6to3 216 colors
• Affects Illustrations, Drawings more than
  Photographs
• Fireworks has Web-safe Palette

43
Mechanics Web Graphics

• Bitmapped or Raster Graphics
• Paint and Photo Programs
• Object or Vector-based Graphics
• Draw and Illustration Programs
• Use Mathematical Representation for Shapes
• Used to Create Original Artwork
• Artwork Converted into Bitmap using Fireworks
• Anti-aliasing (smoothing)
• Increases file size

44
Mechanics Image File Formats

• GIF
• Cross Platform Lossless Compression
• Indexed Colors few GIFs need all colors, reduce
  it manually
• Transparency (so no white box around graphic)
• Interlacing Progressive Download
• Create Animations
• Best for
• Images with Large Areas of Solid Color, Simple
  Illustrations
• Small Photos or thumbnails
• JPEG
• Cross Platform LOSSY Compression
• Progressive JPEG
• No transparency
• No Animation
• Best for
• Photos Millions of Colors and Subtle Changes

45
Mechanics Save Image for Web

• RGB Mode
• 72 ppi
• Indexed Color Mode
• Reduced Color Palette
• Adaptive Palette
• Interlaced

46
Dreamweaver - Introduction

• Three Views
• Design View Code View Design Code View
• Create Page Content Layout
• Enter and Insert Content
• Text, Images, Flash etc.
• Specify CSS (external and internal)
• Page Properties
• Standard Mode (and Expanded Mode)
• Edit Modify Tables
• AP Elements
• Interaction Behaviors
• Rollovers, Imagemaps, Navigation Bars
• Linking images and behaviors
• Site Management
• "Local site" mirrors "Remote site"

47
Dreamweaver Create Visual Hierarchy

• You can use in Standard Mode
• 1 Standard Table today
• Standard Mode
• Regular Columns and Rows
• 2 AP Elements
• Irregular Columns and Rows
• to create Layout and Visual Hierarchy

48
Formatting Precedence Table Rules

• Cell Format overwrites
• Column / Row Format overwrites
• Table Format
• BUT
• Table Width / Height constrains
• Column or Row or Cell Width / Height
• If Table Width unspecified, then column widths
  unconstrained!

49
Demo Specify Default Text Format Visual Guides

• Specify Default Text Format
• Modify gt Page Properties
• Use Sans Serif Typeface
• Creates Internal CSS style sheet
• Visual Guides
• Ruler
• View gt Ruler
• Visual Grid
• View gt Grid gt select Show Grid and
  Snap-to-grid
• View gt Grid gt Edit Grid (to edit grid)

50
Demo Create and Edit Standard Table

• Select Standard Mode
• View gt Table Mode gt select Standard Mode
• or Select Layout in Insert bar and click
  Standard icon
• Insert Table
• Insert gt Table in dialog box specify number of
  columns and rows
• Format Columns / Rows / Cells
• Select columns / rows / cells using dragging
• Edit entries in Property Inspector for selected
  items
• Table CellPad, CellSpace, Align, Border (which
  will apply for all cells)
• Merge Cells
• Select cells to be merged
• Modify gt Table gt Merge Cells
• Insert Row / Column
• Modify gt Table gt Insert Row or Insert Column
  or Insert Row or Column
• (latter gives you most control)

51
Demo Format Standard Table

• W and H fields
• Specify width height of table as pixels or of
  browser window
• If Width unspecified, then column widths are
  unconstrained!
• Usually don't need to set table height
• CellPad
• Amount of space between content of a cell and
  cell boundary
• CellSpace
• Amount of space between each layout cell
• Align
• Default Left
• Border
• Specify in pixels thickness of border

52
Demo Table Management

• Tag Bar (bottom border of selected file)
• Use it to select specific layout elements
• Clicking on lttablegt selects table
• Clicking on lttrgt selects row
• Clicking on lttdgt selects cell
• Expanded Mode
• Temporarily adds cell padding and spacing to
  tables and increases the tables borders to make
  editing easier.
• Select View gt Table Mode gt Expanded Tables Mode
• or
• In Layout category of the Insert bar, click
  Expanded Tables button

53
Demo Site Management

• Create folder mpcourse
• Open mpcourse folder
• Create folders ex1 ex5
• Launch Dreamweaver

54
Demo Site Management (cont.)

• Site gt New Site
• Select Advanced Tab
• Select Local Info Category
• Local Info gt Site Name MPcourse for this demo
• Local Info gt Local Root Folder MPcourse in
  My Documents
• Select "Remote Info" Category in New Site Dialog
• Select "FTP" in pull-down Access menu
• FTP Dialog
• FTP Host eden.rutgers.edu
• Host Directory public_html
• Login yourusername
• Password yourpassword
• Make sure to check the Use Secure FTP box
• Connect to Server
• Select "Connect to Remote" icon or "Site gt
  Connect"
• Transfer files to server
• Manually
• File drop onto file OR drop into
  folder that contains file you want to up/download
• Folders drop into folder that contains folder
  you want to up/download