important information this presentation was created by patrick crispen (crispen@netsquirrel.com)this...

Important InformationImportant Information

• This presentation was created by Patrick This presentation was created by Patrick Crispen (crispen@netsquirrel.com)Crispen (crispen@netsquirrel.com)

• You are free to reuse this presentation You are free to reuse this presentation provided that youprovided that you– Not make any money from this presentationNot make any money from this presentation– Give credit where credit is dueGive credit where credit is due– Invite your audience to subscribe to TOURBUS Invite your audience to subscribe to TOURBUS

(information about TOURBUS appears near the (information about TOURBUS appears near the end of this presentation)end of this presentation)

Web Page Design, Part One:Web Page Design, Part One:People Actually Get PAID To People Actually Get PAID To

Do This? Do This?

a presentation bya presentation by

Patrick Douglas CrispenPatrick Douglas CrispenNetSquirrel.ComNetSquirrel.Com

Pencils down!Pencils down!

• Instead of scribbling down everything I say, Instead of scribbling down everything I say, just visit just visit http://netsquirrel.com/ http://netsquirrel.com/ when you when you get home.get home.

• This is my personal Web site and it This is my personal Web site and it contains:contains:– A copy of this PowerPoint presentation and A copy of this PowerPoint presentation and

others that you are welcome to “creatively others that you are welcome to “creatively acquire.”acquire.”

– Information about TOURBUS, the ADV-HTML Information about TOURBUS, the ADV-HTML list, and some other neat stuff.list, and some other neat stuff.

– A really good chocolate chip cookie recipe.A really good chocolate chip cookie recipe.

Shameless self-promotionShameless self-promotion

• Web Page DesignWeb Page Design by Crispen, by Crispen, Barksdale, and Barksdale, and Stubbs Stubbs

• ISBN: 0538689978ISBN: 0538689978• List price: $33.95 List price: $33.95

(but schools get a (but schools get a discount)discount)

Our Goals ...Our Goals ...

• Discover the basics of Web page Discover the basics of Web page design.design.

• Learn the steps to creating a Learn the steps to creating a goodgood Web page and Web site.Web page and Web site.

• Talk about some simple design rules.Talk about some simple design rules.• Discover the best Web editor Discover the best Web editor

available.available.• TO DO ALL OF THIS IN ENGLISH!TO DO ALL OF THIS IN ENGLISH!

Question:Question:

How many Web How many Web pages are there in pages are there in

the World?the World?

Answer:Answer:

At least two billion At least two billion (and probably as (and probably as

many as 50 billion)many as 50 billion)

Question:Question:

Would there be this Would there be this many pages if this many pages if this

were difficult?were difficult?

Believe It or Not ...Believe It or Not ...

• You already know most of the stuff You already know most of the stuff needed to design a good web site needed to design a good web site (and the rest you can just pick up (and the rest you can just pick up along the way).along the way).

• What we’re going to do today is just What we’re going to do today is just remind you of the basics.remind you of the basics.

• This is This is easyeasy!!

Part One:Part One:The BasicsThe Basics

If you break Web design into its If you break Web design into its individual components, it individual components, it

becomes a heck of a lot easierbecomes a heck of a lot easier

Three Parts of a Web PageThree Parts of a Web Page

• The TextThe Text– This is simply the content you are This is simply the content you are

sharing with your audience.sharing with your audience.

• The MultimediaThe Multimedia– Usually, this is just pictures, but it could Usually, this is just pictures, but it could

also include sound files, movies, also include sound files, movies, animation, and stuff like that.animation, and stuff like that.

• The HTMLThe HTML

The TextThe Text

• The “text” is just another way of saying The “text” is just another way of saying “the content.”“the content.”

• A lot of Web content is just re-tasked A lot of Web content is just re-tasked Word documents and PageMaker files.Word documents and PageMaker files.– CTRL + C and CTRL + VCTRL + C and CTRL + V– CTRL + Shift + VCTRL + Shift + V– CTRL + ZCTRL + Z

• The danger with re-tasking is that no one The danger with re-tasking is that no one has ever read the original.has ever read the original.

Creating TextCreating Text

• You can use You can use anyany Word processor:Word processor:– Microsoft WordMicrosoft Word– WordPerfectWordPerfect

• You can also use You can also use any text editor:any text editor:– Notepad or Notepad or

Wordpad (PC)Wordpad (PC)– SimpleText (Mac)SimpleText (Mac)

The MultimediaThe Multimedia

• Usually just a Usually just a collection of collection of “compressed” “compressed” images.images.

• Could also be:Could also be:– Sound (Real Audio)Sound (Real Audio)– Animation (Flash)Animation (Flash)– Preformatted Files Preformatted Files

(PDF)(PDF)– And so on ...And so on ...

Creating GraphicsCreating Graphics

• Graphic creation Graphic creation ability is built into ability is built into hundreds of programshundreds of programs

• GIFs for drawings and GIFs for drawings and texttext

• JPEGs for photosJPEGs for photos• This is covered in-This is covered in-

depth in Web Page depth in Web Page Design, Part Two: Design, Part Two: Internet Graphics for Internet Graphics for the Artistically the Artistically ChallengedChallenged

The HTMLThe HTML

• HHyperyperttext ext MMarkup arkup LLanguage (anguage (HTMLHTML))

• Tells the software Tells the software (Web “browser”) (Web “browser”) how to display a how to display a Web Page.Web Page.

• Should you learn Should you learn HTML? HTML? YES!YES!

Simple HTML basicsSimple HTML basics

• HTML works a lot like an old processor – HTML works a lot like an old processor – you have to turn formatting on and off by you have to turn formatting on and off by hand.hand.

• To make something bold:To make something bold:<BOLD><BOLD>This text is boldThis text is bold</BOLD></BOLD>

• There are some great sites out there that can There are some great sites out there that can teach you HTML:teach you HTML:– http://www.builder.com/http://www.builder.com/

– http://www.webmonkey.com/http://www.webmonkey.com/

Creating HTMLCreating HTML

• Text EditorsText Editors– NotepadNotepad

• Word ProcessorsWord Processors– Word or Word or

WordPerfectWordPerfect– File File Save As Save As

HTMLHTML

• HTML EditorsHTML Editors– GomerGomer– Adobe PagemillAdobe Pagemill– Claris HomepageClaris Homepage– Microsoft Microsoft

FrontpageFrontpage– Macromedia Macromedia

Dreamweaver / Dreamweaver / Allaire Homesite *Allaire Homesite *

Part Two: Part Two: Creating GOOD Web SitesCreating GOOD Web Sites

It is easy, as long as you follow It is easy, as long as you follow a few basic stepsa few basic steps

The “Paper” RuleThe “Paper” Rule

• The first step to good web design is The first step to good web design is to to turn off your computerturn off your computer and pull and pull out a couple of pieces of paper.out a couple of pieces of paper.

• Most poorly designed sites are Most poorly designed sites are poorly designed from the start.poorly designed from the start.

The Three Parts of Web DesignThe Three Parts of Web Design

• Information Information designdesign

• Interaction Interaction designdesign

• Presentation Presentation designdesign

Information DesignInformation Design

• MessageMessage: what information do you : what information do you want to share?want to share?

• AudienceAudience: with whom do you wish to : with whom do you wish to share your message?share your message?

• PurposePurpose: how and why do you want : how and why do you want to share this information with this to share this information with this audienceaudience

Information DesignInformation Design

• BackgroundBackground: what does your : what does your intended audience already know intended audience already know about the subject you are about the subject you are discussing?discussing?

• StructureStructure: how can your message be : how can your message be organized most effectively?organized most effectively?

Look Familiar?Look Familiar?

• MessageMessage

• AudienceAudience

• PurposePurpose

• BackgroundBackground

• StructureStructure ??

The Audience Is KeyThe Audience Is Key

• Once you identify your audience, Once you identify your audience, designing the web page or web site designing the web page or web site is a snap!is a snap!

• Example: the Bertrand Russell Example: the Bertrand Russell Intermediate High School Concert Intermediate High School Concert ChoirChoir

Part Three:Part Three:Basic Design RulesBasic Design Rules

Stuff that no one ever tells youStuff that no one ever tells you

Oh sure, it LOOKS good ...Oh sure, it LOOKS good ...

• Reading from a computer screen is Reading from a computer screen is about 25% slower than reading from about 25% slower than reading from paper.paper.

• Write 50% less text than you would Write 50% less text than you would normally write for a brochure or normally write for a brochure or paper.paper.

Serif versus sans-serifSerif versus sans-serif

• On paper, we are all used to reading serif On paper, we are all used to reading serif fonts – fonts with a “tail” (like Times New fonts – fonts with a “tail” (like Times New Roman)Roman)

• On screens, however, sans-serif fonts are On screens, however, sans-serif fonts are easier to readeasier to read

• The most readable screen font is Verdana The most readable screen font is Verdana (which is free from Microsoft)(which is free from Microsoft)

• http://microsoft.com/typography/fontpackhttp://microsoft.com/typography/fontpack

The basic schemeThe basic scheme

• Always use black text on a white Always use black text on a white background.background.

• If you have to change fonts, use a If you have to change fonts, use a sans-serif font like sans-serif font like VerdanaVerdana, , HelveticaHelvetica, or Arial, or Arial

• Don’t change the link colors!Don’t change the link colors!

How wide?How wide?

• While bigger monitors continue to While bigger monitors continue to pop-up, most people are still using pop-up, most people are still using 640 by 480640 by 480

• You have to account for the scroll You have to account for the scroll barsbars

• Stay under 600 pixels wide, Stay under 600 pixels wide, especially with your graphicsespecially with your graphics

How big?How big?

• Try to follow the “30/30 rule”: keep Try to follow the “30/30 rule”: keep your main homepage – graphics and your main homepage – graphics and everything – to under 30 kilobytes in everything – to under 30 kilobytes in size. That way it will load in under 30 size. That way it will load in under 30 seconds over a slow dial-up.seconds over a slow dial-up.

• Your secondary pages can be larger.Your secondary pages can be larger.

• I break this rule I break this rule ALLALL the time. the time.

http://websitegarage.com/http://websitegarage.com/

• Free site that Free site that checks:checks:– Browser Browser

compatibilitycompatibility– Meta tag useMeta tag use– Load timeLoad time– And other stuff.And other stuff.

http://validator.w3.org/http://validator.w3.org/

• Free site that Free site that checks your pages checks your pages for conformance to for conformance to W3C HTML and W3C HTML and XHTML XHTML recommendations recommendations and other HTML and other HTML standards.standards.

Your “home” page needs:Your “home” page needs:

• A directory of the site’s main content A directory of the site’s main content areas (navigation)areas (navigation)

• A summary of the most important A summary of the most important news or promotionsnews or promotions

• A search feature (if possible)A search feature (if possible)

Adding searchesAdding searches

• Google offers a Google offers a freefree site search that you site search that you can just plug into can just plug into your pages!your pages!

• http://http://www.google.com/www.google.com/services/services/free.htmlfree.html

• Just fill out a formJust fill out a form

Your other pages need:Your other pages need:

• Easy-to-understand navigation Easy-to-understand navigation features that show:features that show:– Where I am (relative to the Web as a Where I am (relative to the Web as a

whole AND relative to the site’s whole AND relative to the site’s structure)?structure)?

– Where I have been?Where I have been?– Where I can go.Where I can go.

Stay away from frames ...Stay away from frames ...

• Many browsers cannot print framed pages Many browsers cannot print framed pages appropriately.appropriately.

• Frames are so hard to learn that many Frames are so hard to learn that many authors write buggy code when they try to authors write buggy code when they try to use them.use them.

• Search engines have trouble with frames Search engines have trouble with frames because they don’t know what composites because they don’t know what composites of frames to include in their index.of frames to include in their index.

Stay away from frames ...Stay away from frames ...

• Some browsers make it difficult to Some browsers make it difficult to bookmark frames.bookmark frames.

• Many Websites that offer users a Many Websites that offer users a choice between regular and framed choice between regular and framed versions have found that most users versions have found that most users prefer frames-free designs.prefer frames-free designs.

Part Four: WYSIWIG EditorsPart Four: WYSIWIG Editors

Or, to put it another way, Or, to put it another way,

““why Dreamweaver kicks why Dreamweaver kicks ALLALL the butt” the butt”

Macromedia DreamweaverMacromedia Dreamweaver

• 70% of 70% of professional Web professional Web designers who use designers who use a WYSIWYG editor a WYSIWYG editor use Dreamweaveruse Dreamweaver

• ““Frontpage isn’t a Frontpage isn’t a handicap, it is a handicap, it is a disability”disability”

Dreamweaver DemoDreamweaver Demo

Let’s take a look at what makes Let’s take a look at what makes Dreamweaver so coolDreamweaver so cool

Getting your own copyGetting your own copy

• Free 30 day trial at Free 30 day trial at macromedia.commacromedia.com

• Dreamweaver’s street Dreamweaver’s street price is $299price is $299

• DW/FW is $449DW/FW is $449• BUT, Macromedia has BUT, Macromedia has

some great some great educational discountseducational discounts– DW is $99DW is $99– DW/FW is $149DW/FW is $149– Volume discounts are Volume discounts are

available tooavailable too

Quittin’ time!Quittin’ time!

• Again, this and many other PowerPoint Again, this and many other PowerPoint presentations are available at presentations are available at http://netsquirrel.com/http://netsquirrel.com/

• Look in the “Classroom Resources” Look in the “Classroom Resources” sectionsection

• Two small differences between the online Two small differences between the online presentations and what you saw today:presentations and what you saw today:1.1. No transitionsNo transitions2.2. Different fontsDifferent fonts

If You Liked This Presentation ...If You Liked This Presentation ...

• You’ll You’ll LOVELOVE the the Internet TourbusInternet Tourbus

• Free, semi-weekly Free, semi-weekly email newsletter email newsletter written by the same written by the same guy who created this guy who created this presentation.presentation.

• Go to tourbus.com to Go to tourbus.com to subscribesubscribe

• Did I mention it is Did I mention it is absolutely absolutely FREEFREE? ?

Our Goals ...Our Goals ...

• Discover the basics of Web page Discover the basics of Web page design.design.

• Learn the steps to creating a Learn the steps to creating a goodgood Web page and Web site.Web page and Web site.

• Talk about some simple design rules.Talk about some simple design rules.• Discover the best Web editor Discover the best Web editor

available.available.• TO DO ALL OF THIS IN ENGLISH!TO DO ALL OF THIS IN ENGLISH!