Home , IBrowse, ICab, Lynx (web browser), Mosaic (web browser), Voyager (web browser)

Understanding Web Design Overview

Big ideas

Goals & Audience Theme Navigation

Technical Overview Conceptual Web Design Tables vs. CSS

Jon Kolko Savannah College of Art & Design

IDUS315 - Human Computer Interaction | 1 IDUS315 - Human Computer Interaction | 2

Big Ideas Goals & Audience

Designing for the web is different than designing other types of software. Consider designing an automotive parts website & an interaction design portfolio website. Why? What’s the difference? Automotive Interaction Parts Design Portfolio • Infinite complexity What is the purpose of your ? ? • No boundaries website? • No beginning – no ending Who is your intended ? ? audience? • Who is the user? How can you be sure? What is their domain ? ? knowledge?

What kind of ? ? vocabulary do they use? How advanced are their ? ? computer skills? What are their ? ? goals?

IDUS315 - Human Computer Interaction | 3 IDUS315 - Human Computer Interaction | 4

Theme Theme

ashford.com alloy.com

Who is the intended audience? Who is the intended audience?

How can you tell? How can you tell?

What is the goal of the website? What is the goal of the website?

What is the goal of the user? What is the goal of the user?

IDUS315 - Human Computer Interaction | 5 IDUS315 - Human Computer Interaction | 6

1 Theme Theme

marthastewart.com Theme is the emotional quality produced by the content, layout, colors and style of a site. Who is the intended audience?

How can you tell? Which theme is most successful? What is the goal of the website? What makes it What is the goal of the user? successful?

Which is least successful?

Why?

IDUS315 - Human Computer Interaction | 7 IDUS315 - Human Computer Interaction | 8

Navigation Navigation : Common Elements

Rules of thumb:

People have no clue where they are on a website

People have no clue how they got where they are on a website

People generally “wander around” on the web, totally confused about what’s going on

Why? What is it about the world wide web that is so disorienting for people?

IDUS315 - Human Computer Interaction | 9 IDUS315 - Human Computer Interaction | 10

Navigation : Common Elements Navigation : Common Elements

IDUS315 - Human Computer Interaction | 11 IDUS315 - Human Computer Interaction | 12

2 Navigation : Site Maps Navigation : Site Maps

4 steps to a successful site map: Stuff Stuff and Stuff and things and things

Stuff things and things

Stuff 1: Brainstorm the content that the site will and Stuff things and

Stuff Stuff things and Stuff and have, using sticky notes. Write one piece of things and things Stuff things and content on each sticky note; put the notes things on the wall.

2: Organize the sticky notes into logical header header header header groupings, based on the content of the

Stuff Stuff Stuff Stuff notes (not on preconceived notions of what and and and and things things things things the groupings should be) Stuff Stuff Stuff and and and

things things Stuff things and things

Stuff and 3: Within a grouping, stack-rank the content things based on priority. Merge content that is very similar.

header header header header 4: Create a visual tree to show how content item 1 item 1 item 4 item 4 item 2 item 5 item 5 relates to the groupings. item 3 item 6

IDUS315 - Human Computer Interaction | 13 IDUS315 - Human Computer Interaction | 14

Navigation : Site Maps : Let’s Do One Navigation : Takeaways

Create a site map for an online, multi-disciplinary design firm. Assume your users are lost

What types of content will live on the site? Provide a map, but assume they won’t use it

What section names make sense for this content? Give your users as many navigation cues as possible

Select a navigation scheme that relates to your intended audience

IDUS315 - Human Computer Interaction | 15 IDUS315 - Human Computer Interaction | 16

Technical Overview Typical Web Design Process

Routers & Servers. $$ Scattered all around the world. $$ You, at home, Packets of data, Internet Service Provider. looking at porn. being sent over the SCAD, America Online, MSN, A single designer phone line, cable, AT&T .. cellular, etc. Executives make a does lots of good A team of software strategic decision research, process, developers spend and assign a new drawing, and many months project prototyping and creates several implementing the photoshop screens screens

The designer is sad because the end result looks nothing like what was intended, but (More people Root Server. 13 of looking at porn) there is no them in the world. time to fix it. IDUS315 - Human Computer Interaction | 17 IDUS315 - Human Computer Interaction | 18

3 Typical Web Design Process Agents & Browsers: What They Do

How can we fix this? What is markup? To understand markup, we need to understand agents. The “backend” of a website is the What is an agent? stuff that makes it work. The “frontend” of a website is the Your web browser is an Agent. stuff that the user interacts with. Your cellphone is an Agent. Your tv can be an Agent. Our goal is to never let the software developers touch the frontend. An Agent is a program that accepts data from a webserver and attempts to display it.

We do this by learning markup.

All web pages are just data.

Markup informs the agent about the data, enhancing it.

IDUS315 - Human Computer Interaction | 19 IDUS315 - Human Computer Interaction | 20

Agents & Browsers: What Markup Looks Like Agents & Browsers: What Markup Looks Like

If your code looks like this: It will print out like this: Markup: This is some data This is some data without without markup. It’s markup. It’s rather plain. • Always starts with a less then sign < rather plain. • Always ends with a greater than sign > • Always comes in pairs If your code looks like this: It will print out like this:

Your agent can read various types of

This is some data This is some data with

This is some data markup. If it can’t read it, it ignores it. with markup. It’s markup. It’s really with markup. It’s really really great.

great. great. The same data can then be shown on a webpage, a cell phone, and a television set, and the agent can format it to suit the display.

IDUS315 - Human Computer Interaction | 21 IDUS315 - Human Computer Interaction | 22

Agents & Browsers: Making Markup Agents : Key Points

Dreamweaver, Homesite, In theory: goLive, Pagemill and Designers write markup using a common set of guidelines Frontpage are software packages that write Browsers (agents) read that markup using a common set of guidelines markup for you. The user sees the same thing regardless of which browser they choose

But they don’t always do a good job.

Software developers are people that write markup for you.

But they don’t always do a good job.

Markup is becoming as ubiquitous as English. You need to know how to read it.

IDUS315 - Human Computer Interaction | 23 IDUS315 - Human Computer Interaction | 24

4 Agents : Key Points Languages : Brief Overview

Older browsers render markup in very, very different ways.

< client servers > Newer browsers are much more flexible about how they display your markup. Runs a web browser Runs software called a Web (Internet Explorer, Server (Apache, IIS, etc) Internet Explorer, Netscape, WebTV, Konqueror, Mozilla, Opera, Mosaic, OmniWeb, Lynx, Voyager, iCab, iBrowse, Netscape, etc) NetCruiser . . . Developers write code in Java, Receives the data and PHP, Perl, etc. It is very, very, very hard to force even moderately markup; translates complicated designs to look the same in every browser. that into a visual representation (what Application Server compiles code Make an explicit decision about what browsers you intend you see on the and creates a document with to design for, based on: screen). data and markup.

•Your audience • The complexity of your designs Web Server serves the data to • The purpose of your site the client upon request.

IDUS315 - Human Computer Interaction | 25 IDUS315 - Human Computer Interaction | 26

Languages : Brief Overview Languages : Brief Overview

Java looks like this: Perl looks like this:

IDUS315 - Human Computer Interaction | 27 IDUS315 - Human Computer Interaction | 28

Languages : Brief Overview Languages : Takeaways

Javascript looks like this: They are all similar They are scary, but not that scary If you want to learn them, it’s really not that hard, and I will be happy to teach you.

The more technical things you know, the more you can do yourself.

If you do it yourself, you know it will be right.

IDUS315 - Human Computer Interaction | 29 IDUS315 - Human Computer Interaction | 30

5 Conceptual Web Design Conceptual Web Design

All web pages are Up until very recently, content, function and broken into three layout were not separate. conceptual sections: Most web sites you currently use do not separate these items. • Content • Layout • Function The old method was the “table method”. The new method is the “css method”.

Our goal is to keep these separate. We are going to learn the “css method”.

Why? You need to understand the tradeoffs of the two methods.

IDUS315 - Human Computer Interaction | 31 IDUS315 - Human Computer Interaction | 32

Tables vs. CSS Tables vs. CSS

Tables Cascading Style Sheets [css] Cascading Style Sheets [css]

+ Can visualize any design you can - Can visualize moderately • You need to create much simpler layouts - Can visualize moderately make in Photoshop, regardless of complicated designs; complex complicated designs; complex complexity designs are very hard to create • Your layouts needs to be lenient and designs are very hard to create forgiving + Work the same in any web - Work differently in various - Work differently in various browser browsers • You need to give up some control browsers

- Download very slowly (are much + Download very quickly (are + Download very quickly (are bigger) generally quite small) generally quite small) • You are designing a system, or framework, for the visualization - Don’t work on any advanced + Work very well on advanced rather than the visualization itself + Work very well on advanced agents (cellphones, webTV, digital agents, allowing the content to take agents, allowing the content to take cameras, etc) precedence over layout precedence over layout

- Very hard to update + Incredibly easy to update + Incredibly easy to update

- Reject the separation of content, + Embrace separation of content, + Embrace separation of content, layout and function layout and function layout and function

IDUS315 - Human Computer Interaction | 33 IDUS315 - Human Computer Interaction | 34

Getting Set Up Getting Set Up

1. Create a folder to store your files. (right click => New => Folder) 3. Make sure file extensions are not hidden. Call it html. (Tools => Folder Options => View)

2. Within the html folder, create two new folders; call one images and the Uncheck this box other css.

IDUS315 - Human Computer Interaction | 35 IDUS315 - Human Computer Interaction | 36

6 Getting Set Up Getting Set Up

4. Within the html folder, create a new text 7. The resulting screen is your code window. document, and call it index.html. (Right click => New => Text Document)

5. Open index.html by double clicking it, and it Anything you type in the code window will be opens in Internet Explorer. displayed in the browser. 6. View the source of the document in Internet Explorer (View => Source) 8. To see your webpage in the browser, press CTRL-S to save, Alt-Tab to switch, and F5 to reload.

IDUS315 - Human Computer Interaction | 37 IDUS315 - Human Computer Interaction | 38

Basic HTML Page Basic HTML Page

Here is a basic webpage: It’s pretty hard to read, so we use indenting to format the text visually.

<title> Your Page Title Your Page Title

This is a header

This is a paragraph

IDUS315 - Human Computer Interaction | 39 IDUS315 - Human Computer Interaction | 40

Basic HTML Page Basic HTML Page

The markup describes, or enhances, the content. The markup describes, or enhances, the content.

..

defines a Header, Level One <title> Your Page Title Your Page Title

defines a document division, or container of content

This is a header

defines a paragraph

This is a paragraph

IDUS315 - Human Computer Interaction | 41 IDUS315 - Human Computer Interaction | 42

7 Basic HTML Controls Basic HTML Page Revisited

Chunks of content: Jon's Homepage

..

defines a Header, Level One (most important)

..

defines a Header, Level Six (least important)

Jon's Page | welcome .. portfolio .. links

defines a document division, or container of content

.. defines a text division

welcome to my page

defines a paragraph

Overview

This is some text discussing the various aspects of the page you are currently visiting.

Portfolio Discussion

Special items:

You can view some of my projects, download my resume, or contact me

defines an image with a particular source

(c)2003 Jon Kolko

defines a line break

.. defines an anchor, with a hypertext reference to a particular page; this is also known as a link! Eek that’s ugly!

IDUS315 - Human Computer Interaction | 43 IDUS315 - Human Computer Interaction | 44

Basic HTML Page Revisited Basic HTML Page Revisited : type.css

Jon's Homepage Jon's Homepage

Jon's Page | welcome .. portfolio .. links

welcome to my page

Overview

This is some text discussing the various

This is some text discussing the various aspects of the page you are currently visiting.

aspects of the page you are currently visiting.

Portfolio Discussion

You can view some of my projects, download my

You can view some of my projects, download my resume, or contact me

resume, or contact me

(c)2003 Jon Kolko

That’s much nicer. How did we do it?

IDUS315 - Human Computer Interaction | 45 IDUS315 - Human Computer Interaction | 46

Basic HTML Page Revisited : layout.css Basic CSS control

• Each line that makes up a style sheet is called a "rule". Jon's Homepage body {

Jon's Page | welcome .. portfolio .. links

background-color: #000000;

}

welcome to my page

Overview

This is some text discussing the various aspects of the page you are currently visiting.

Portfolio Discussion

You can view some of my projects, download my resume, or contact me

rule

(c)2003 Jon Kolko

IDUS315 - Human Computer Interaction | 47 IDUS315 - Human Computer Interaction | 48

8 Basic CSS control Basic CSS control

• Each line that makes up a style sheet is called a "rule". • Each line that makes up a style sheet is called a "rule". • Each rule consists of a "selector" and one or more "declarations". • Each rule consists of a "selector" and one or more "declarations". • Each declaration consists of a "property" and a "value”

body { body { background-color: #000000; background-color: #000000; } }

selector property value declaration

IDUS315 - Human Computer Interaction | 49 IDUS315 - Human Computer Interaction | 50

Basic CSS control Summary

• Each line that makes up a style sheet is called a "rule". We have achieved separation of layout and content. • Each rule consists of a "selector" and one or more "declarations". • Each declaration consists of a "property" and a "value” content (html) + Presentation (css) = Philosophically correct (and body { pretty) webpage background-color: #000000; } Jon's Homepage • A selector can be any html element (img, h1, h2, p, div, body, etc) These are automatically applied to html.

Jon's Page | welcome .. portfolio .. links

• A selector can also be a specific, made up name (fred, headerPane,

welcome to my page

Overview

navBar, etc). These are not automatically applied to html, unless:

This is some text discussing the various aspects of the page you are currently visiting.

Portfolio Discussion

You can view some of my projects, download my

resume, or contact me

Jon's Page | welcome .. portfolio .. links

(c)2003 Jon Kolko

IDUS315 - Human Computer Interaction | 51 IDUS315 - Human Computer Interaction | 52

Summary : Basic HTML Page Again Summary : Basic HTML Page : type.css

Jon's Homepage Jon's Homepage

Jon's Page | welcome .. portfolio .. links

welcome to my page

Overview

This is some text discussing the various

This is some text discussing the various aspects of the page you are currently visiting.

aspects of the page you are currently visiting.

Portfolio Discussion

You can view some of my projects, download my

You can view some of my projects, download my resume, or contact me

resume, or contact me

(c)2003 Jon Kolko

That’s much nicer. How did we do it?

IDUS315 - Human Computer Interaction | 53 IDUS315 - Human Computer Interaction | 54

9 Summary : Basic HTML Page : layout.css Summary

Big ideas Jon's Homepage Goals & Audience Theme Navigation

Jon's Page | welcome .. portfolio .. links

Technical Overview

welcome to my page

Conceptual Web Design

Overview

This is some text discussing the various Tables vs. CSS aspects of the page you are currently visiting.

Portfolio Discussion

You can view some of my projects, download my resume, or contact me

(c)2003 Jon Kolko

IDUS315 - Human Computer Interaction | 55 IDUS315 - Human Computer Interaction | 56