© Anselm Spoerri

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

© Anselm Spoerri

Narrative Structures

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

Web Design Overview

Sources– Steve Krug’s “Don't make me think!”– Alison Head’s “Design Wise”– Yale Web Style Guidelines

Guiding Principles

User Behavior

Basics

Home Page

Lack of Control

Search & Testing

© Anselm Spoerri

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

© Anselm Spoerri

Web User Behavior

© Anselm Spoerri

Web User Behavior (cont.)

© Anselm Spoerri

Web User Behavior (cont.)

© Anselm Spoerri

Web User Behavior (cont.)

© Anselm Spoerri

Web User Behavior (cont.)

© Anselm Spoerri

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

© Anselm Spoerri

Web Design - Basics

Stay above the fold800 X 600 good

© Anselm Spoerri

Web Design – Basics (cont.)

© Anselm Spoerri

Web Design – Basics (cont.)

© Anselm Spoerri

Web Design – Basics (cont.)

© Anselm Spoerri

Web Design – Basics (cont.)

© Anselm Spoerri

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 ½.

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

Web Site Navigation 1

"Back" clicked 30-40%

Easy to figure out“You are here”Things at current levelReturn to higher-levels and home page

Easy search and indexes

Easy feedback

Persistent navigation creates comfort – “Home” and “forms” pages can be exemption

© Anselm Spoerri

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 > Information Library Studies > Courses > Graduate

Novel Navigation Metaphors– TheBrain– Star Tree for FlashKit by Inxight Software

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

Evaluation – Task

Support tasks users need to accomplish?

Support both experienced and inexperienced users?

User expectations meet?

© Anselm Spoerri

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?

© Anselm Spoerri

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?

© Anselm Spoerri

Evaluation – Navigation (cont.)

© Anselm Spoerri

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?

© Anselm Spoerri

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?

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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 </p> tag.

Dreamweaver includes required tags & declarations.

Naming Elements• id=“name” or class=“name” Useful with div (content blocks) and span (inline text) elements

Breaking up a Page into Divisions (DIV)

Creating a Line Break: <br />

Hierarchical Structure of Web pages• Elements contained inside another element (latter = parent, former = child)

© Anselm Spoerri

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.

© Anselm Spoerri

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

© Anselm Spoerri

Mechanics – Web Basics: CSS (cont.)

CSS Style Sheet stored

a) External CSS style sheet (.css file linked to page and using a link or an @import rule in the head section of a document).

b) Internal (or embedded) CSS style sheet (included in style tag in head portion of an HTML document).

c) 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;

© Anselm Spoerri

Mechanics – Web Basics: CSS (cont.)

CSS

• Control Text propertiesSpecific 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

© Anselm Spoerri

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 => 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 :).

© Anselm Spoerri

Mechanics – Color

Large Areas = Low Saturation = Subtle colorBackground / minor elements = Subtle pastel colors

Small Areas = High Saturation = Bold colorMaximum emphasis = Bold, saturated primary colors

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

Mechanics – Save Image for Web

RGB Mode

72 ppi

Indexed Color Mode

Reduced Color Palette– Adaptive Palette

Interlaced

© Anselm Spoerri

Dreamweaver - Introduction

Three ViewsDesign 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"

© Anselm Spoerri

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

© Anselm Spoerri

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!

Formatting Precedence – “Table Rules”

© Anselm Spoerri

Demo – Specify Default Text Format & Visual Guides

Specify Default Text Format

– Modify > Page Properties

– Use Sans Serif Typeface

– Creates Internal CSS style sheet

Visual Guides

– Ruler– View > Ruler

– Visual Grid– View > Grid > select “Show Grid” and “Snap-to-grid”

– View > Grid > Edit Grid (to edit grid)

© Anselm Spoerri

Demo: Create and Edit Standard Table

Select “Standard Mode”– View > Table Mode > select “Standard Mode”

or Select “Layout” in Insert bar and click “Standard” icon

Insert Table– Insert > 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 > Table > Merge Cells

Insert Row / Column– Modify > Table > “Insert Row” or “Insert Column” or “Insert Row or Column”

(latter gives you most control)

© Anselm Spoerri

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

© Anselm Spoerri

Tag Bar (bottom border of selected file)

Use it to select specific layout elements

Clicking on <table> selects table

Clicking on <tr> selects row

Clicking on <td> selects cell

Expanded ModeTemporarily adds cell padding and spacing to tables

and increases the tables’ borders to make editing easier.

Select View > Table Mode > Expanded Tables Mode

or

In Layout category of the Insert bar, click Expanded Tables button

Demo: Table Management

© Anselm Spoerri

Demo: Site Management

Create folder “mpcourse”

Open “mpcourse” folder

Create folders “ex1” … “ex5”

Launch Dreamweaver

© Anselm Spoerri

Demo: Site Management in CS4 (cont.)

– Site > New Site– Select “Advanced” Tab– Select “Local Info” Category

– Local Info > Site Name = “MPcourse” for this demo

– Local Info > 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 > 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

© Anselm Spoerri

Demo: Site Management in CS5 (cont.)

– Site > New Site– Select “Site”

– Site > Site Name = “MPcourse” for this demo

– Site > Local Site Folder = “MPcourse” in “My Documents”

– Select “Servers" Category in New Site Dialog– Click on + (Add new server)– Specify Server Name– Select “SFTP" in pull-down “Connect using” menu

– SFTP Host =“eden.rutgers.edu”– Login = “yourusername”– Password = “yourpassword”– Root Directory = “public_html”Test and if successful Save

– Connect to Server– Select "Connect to Remote" icon

– 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