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

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

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>

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

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

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.

Basics of creating a professional linkedIn profile

Basics of creating a Virtual Patient

Creating User-Focused Web Sites

The Basics of Creating a Public Face For Your Company.

Creating Mesg Basics

RefWorks Basics - Creating A Custom Output Style List Basics Creating a Custom...RefWorks Basics - Creating A Custom Output ... need in your Favorites list by using the Output Style

Basics of creating accessible code for websites

In-Depth Guide Database Basics Creating and Populating · In-Depth Guide – Database Basics Creating and Populating Learning Objectives By reading and completing the activities in

Basics of eportfolios and class sites

Visual Design Basics Creating Effective Handouts, Flyers and Brochures.

Basics of Creating a Scroll Kit Narrativemiriamposner.com › ... › 2014 › 01 › Basics-of-Creating-a-Scroll-Kit-Nar… · Just as in Photoshop, Scroll Kit organizes elements

Creating and Managing Sites Module 7. Overview Creating Standard Sites Customizing Look and Feel Saving Sites as Templates.

The basics of creating a gif animation

Creating a new shapefile and digitizing basics in ArcMapgif.berkeley.edu/documents/Creating a new shapefile and digitizing... · Creating a new shapefile and digitizing basics in

LeverX SAP ABAP Basics - Creating Custom Screen Via Screen Painter

Tutorial Creating Comics (Basics) Playcomic and Garfield

Creating Visually Appealing Web Sites

Creating R Packages - Meetupfiles.meetup.com/1685538/Rpackages.pdf · Creating R Packages Rory Winston Outline Basics Creating a Simple Package Interfacing With Native Code Creating

ArcGIS Basics: Somerville Creating a Map with ArcMap · ArcGIS Basics: Somerville Creating a Map with ArcMap ... folder called ArcGIS Basics. Open the GIS_Tutorial_Data folder you

Basics for creating an iMovie trailer