Creating Web Sites An introduction to the basics.

Creating Web Sites

An introduction

to the basics

Creating web sites is…

Content50%

Style5%

Presentation20%

Programming25%

Step One: Content

Step One: Content

Brainstorm Your Objective

Step One: Content

Brainstorm Your Objective– What do you want to accomplish?

Step One: Content

Brainstorm Your Objective– What do you want to accomplish?– How can you make your site unique, special and

useful?

Step One: Content


useful?– What elements and features do you want on your

site?

Step One: Content


useful?– What elements and features do you want on your

site?– What potential problems do you see between you

and your goal?

Step One: Content (cont.)

Research Your Target Group


Research Your Target Group– Find out about your potential audience


Research Your Target Group– Find out about your potential audience– Talk to them!


Research Your Target Group– Find out about your potential audience– Talk to them!– Continue to get feedback from them throughout the

design process


Research Your Target Group– Find out about your potential audience– Talk to them!– Continue to get feedback from them throughout the

design process– Make revisions

Step Two: Programming


HTML is tedious, but not complex


HTML is tedious, but not complex Learn how it works


HTML is tedious, but not complex Learn how it works View Page Source


HTML is tedious, but not complex Learn how it works View Page Source When using an HTML editor, always check the

code before publishing

“Ugly” HTML from an HTML editor

<HTML>  <HEAD> <META name=GENERATOR content="Claris Home Page 3.0"> <X-CLARIS-WINDOW top=42 bottom=757 left=4 right=534> <X-CLARIS-TAGVIEW mode=minimal> </HEAD> <BODY bgcolor="#FFFFFF"> This is really small text that turns red and then black

again. </BODY> </HTML>

“Clean” HTML created by hand

<HTML>

<HEAD></HEAD>

<BODY bgcolor="white" text="black">



This is really small text that turns red and then black again



</BODY>

</HTML>

Step Two: Programming (cont.)

Program for multiple browsers


Program for multiple browsers Program for non-graphical users


Program for multiple browsers Program for non-graphical users Avoid using frames


Program for multiple browsers Program for non-graphical users Avoid using frames Use 3.x HTML for highest accessibility


Program for multiple browsers Program for non-graphical users Avoid using frames Use 3.x HTML for highest accessibility

The Bottom Line:

Bad design can prevent users from accessing your web site.

Step Three: Presentation


Make sketches of your site


Make sketches of your site Make flowcharts of your site


Make sketches of your site Make flowcharts of your site Keep it simple and streamlined


Make sketches of your site Make flowcharts of your site Keep it simple and streamlined Rule of thumb: 30 seconds on 28.8 connection


Make sketches of your site Make flowcharts of your site Keep it simple and streamlined Rule of thumb: 30 seconds on 28.8 connection Use “browser-safe” colors

Step Three: Presentation (cont.)

Context is everything!


Context is everything! NO: blinking text


Context is everything! NO: blinking text NO: moving parts (except for multimedia)


Context is everything! NO: blinking text NO: moving parts (except for multimedia) NO: music

Step Four: Style

Step Four: Style

Add your own personality

Step Four: Style

Add your own personality Give it a signature look with subtle use of

matching graphics and fonts

Step Four: Style

Add your own personality Give it a signature look with subtle use of

matching graphics and fonts Change and update the content

Practice, Practice, Practice!

Links on the handout can be found on the web at:

http://www.seemore.mi.org/webpages/

Enjoy!

Creating Web Sites An introduction to the basics.

Documents

Transcript of Creating Web Sites An introduction to the basics.