EFFECTIVE WEB PAGE DESIGN
1)
The Technology in
Motion Program
2)
Web Resources
from the UA In-Service Center Site (www.inservice.ua.edu)
2—BEFORE YOU BEGIN
Questions to consider:
·
Do you have a
specific purpose for your website?
·
Does your school
provide free server space for teachers?
·
Do you want to
design your own, or are you comfortable using a free, online service that may
contain advertisements?
·
Do you have
access to software? If not, are you prepared to buy a web editor package?
·
Is it important
to you that you be able to access and update your web page from your home?
·
How important is
it to you that your website includes pictures & graphics?
·
Do you have
access to a digital camera or scanner?
Also, remember to:
·
Check your school
Internet or Acceptable Use Policy. Some districts even have design standards
for teacher websites.
·
Continue to work
closely with district technology coordinators and webmasters.
·
Never print the
last names of your students on your web pages. I may occasionally use first
names, but never last names.
·
Use a
photo-editing program to blur out the faces of students if permission has not
been given to display photos online.
·
Make it a habit
to avoid anything that might be controversial online. For instance, if a
teacher is disappointed with behavior and wishes to address it in his or her
newsletter, he or she should be careful to remember that it is being published
to the world.
3—useful lists
Top 10 things every website
needs from The School Webmaster: http://www.assortedstuff.com/webmaster/started/10needs.html
1)
A Reason To Exist
2)
Content, Content,
Content!
3)
Up To Date
Information
4)
Fast Download
Times
5)
Pages That Are
Easy To Read
6)
No Orphan Pages
or Dead Links
7)
Ease of
Navigation
8)
NO FRAMES!
9)
Very Little
Animation (or maybe none at all)
10)A
Designer With A Clear Understand Of Web Publishing vs. Paper Publishing
What Should a Teacher Site
Have on It?
1)
Class Calendar
2)
Relevant links
for students to learn more about content. Also, for you to learn more about the
subject matter. For help in this area, check our Teachers' "Subject
Matter" Section.
3)
Links that make
your subject more fun- For help, check our Teachers' "Sites To Use With
Students" Section.
4)
Contact
Information- This can include ways that students or parents can contact you.
However, you may not want to include your home phone or any personal
information. There are ways to set-up a separate e-mail account just for your
professional use. You can do that by clicking here.
5)
Materials-
Anything important that you hand out in class can be posted on-line.
6)
Class Rules and
Guidelines- In this section, you can explain what materials your students need
for your class and any other consistent information that students > need to
be successful in your class.
7)
Homework- Posting
of assignments helps to keep students on track. This section can also offer
students help with any assignments. This section can also be a depository for
what students need to accomplish and a reminder of what needs to be done.
8)
Biography- Tell
students about your academic and professional background. You can also include
interests, accomplishments, etc.
9)
Course
Description- Explain what students will be learning, goals, objectives,
procedures that will be used in teaching and learning, timelines, etc.
10)Your
Most Favorite Sites- Share the educational sites or student-centered sites that
you visit the most.
11)Information
for Parents- This is information you want parents to know that can help you to
achieve educational goals. It is a great way to get parents actively involved
in a partnership role.
12)Announcements/Events-
This is an efficient method of communicating anything that needs to be
publicized.
13)Links
to State or National Curriculum- This can supply curriculum information to
parents. It also helps in developing credibility as a professional. Another
important benefit is that you have this information available to you at any
given time.
4—Steps to creating an
effective website
1) Brainstorm
Brainstorm a list of all the
items you would like to have in your website. This list can include items that
will you will produce for your site and links from your site to other sites. As
you make this list think about your audience and the information that they are
looking for. Also, you should consider the information that you might already
have available. Remember that any documents or images that your already have in
the computer can be easily incorporated into the website. Consider all the
information that is already available on the Internet. You can host all this
information for your viewers. Frequently they have difficulty sorting through
all the stuff on line to find out what is valuable. Another list of ideas:
|
1) Homework 2) My email 3) Student work 4) Assignments 5) Textbook 6) Cool links 7) Book list 8) Syllabus |
9) Meeting dates 10)Club outings 11)Guide to writing Requirements 12)For parents 13)For students 14)Unit objectives 15)FYI 16)Activities |
17)Calendar 18)Supply list 19)What’s new? 20)Puzzles 21)Newsletter 22)Contact me 23)Test review |
2) Grouping
Try to group all your items
into 2 to 4 categories. See if you can come up with a name for each category.
It should be short and descriptive. You might think about dividing your
information according to the viewer. You could make a category for students and
another for parents or you might group by students in different classes or
grades. You might try putting each item on a sticky note or index card and
rearranging them into categories.
|
News Homework Puzzles Activities Calendar Test review Student work |
Class Info Guide to writing Syllabus Unit objectives Supply list Book list Cool links |
For parents Contact me Book list Student work Syllabus Homework |
3) Critique the
Categories
a. Who is my audience? What are they are
looking for?
Think
of the web sites that you have been to that quickly directed you to what you
were looking for. Think of others that took you on endless paths that
eventually forced you to leave the site.
b. What is most important to them? Will
it be easy to find?
The
most important information to your viewer should not be more than a couple of
clicks down into your site. Students want to quickly find their homework
assignment and parents might want quick access to your telephone number or
email address.
c. Will they have to jump between
categories to find what they need?
Ever
remodel a kitchen? You probably know that the stove, refrigerator and sink need
to be in close proximity. The same holds true for a website. If you intend to
post an assignment on line then the resources or reading that go along with it
should be closely linked, not three clicks away. Remember if you want your
students to be successive, you need to include explicit instruction and
guidelines that clearly spell out your expectations. That is even more
important when designing a website. If you want them to use a specific format
for an assignment then put a prominent link to the format guide right on the
assignment page.
d. Should some items be in more than one
category?
Both
parent and students may want to access the homework assignments. If you choose
to have homework appear in both categories remember you can build hyperlinks to
the same homework page from more than one category in your website.
e. What items will stay the same, or
will they need frequent updating?
This
is important since your website should make your life easier, not become a
project that demands constant attention. You might consider designing one
section of your site that will not need much updating, and another that will be
updated on a regular basis. This will help you to stay focused on the sections
of the site that will need revisions. Do yourself a favor and do not set overly
ambitions goals for yourself. The “Quote of the Day" may sound like a good
idea when you get started, but be sure you intend to keep it up. A weekly
"review guide" may be amore manageable task.
f. Do the categories make sense? Do they
describe what is in them?
You
will not be around to guide your audience through your website. You might think
that an image of an owl makes a good link to your resource list, but will the
viewer know that? It is great to use some artistic creativity, but your site
needs to be clear in its organization and navigation. Also, remember that you
may be reaching a diverse audience with special needs that can be addressed in
the design of your site.
4) Revise the Categories
Revise the categories and
items as needed. Stay focused on what it will be like for your audience to find
the information they want. Remember that when confronted with new information
people make their own assumptions about what information they will find and
where the will go to get it.
5) Create a
Flow Chart
Finalize the categories and
items in them and make them into an organizational flow chart. This chart will
become your roadmap for site design. It will enable you to design a clear
navigational structure, and help you to keep track of you pages. Example: http://www.janettaylor.net/webdesign/organize.htm
6) Design a
Navigational Plan
Now you need to think about
the navigational path that viewers will use to move around your site. Most
likely, they will begin on the start page and click to a second level page and
perhaps down to a third level page. Many will simple use the back button on the
browser to return to the start. However, you also need to develop a
navigational system to give them short cuts from one portion of the site to
another without have to use the back button. Once again, balance is the key.
You need to offer them enough short cut links to other areas of your site, but
not so many to confuse them or clutter the page. It is impractical to provide
links directly connecting every page in your site. I find that the best
approach is to put a navigation bar on every page that links to the start page
and each of the second level pages. This simplified navigational structure
gives the viewer a limited number of direct links to recognizable reference
point in the site. In the current example, I would use:
start | news | info | parents
Each of your pages in the site
can begin with this navigation bar. It is a clear guide the viewer to the start
page or any of the second level pages in the site. Notice that each of the
links is a short word. Remember that space is at a premium on each page. You
may have to use some creativity to develop short words for a navigation bar.
7) Page Layout
The home page is the entrance
to your web site. It introduces the site, with information and navigation links
to other pages. Planning this page is a very important step. Think about the content
links you want to provide for navigation, the information and images you want
on the page, and the overall look and feel of the web site. It may help to
create a storyboard for the home page and your other pages. Other pages should
include familiar items found on the home page and in the same area found on the
home page. The navigation bar, for instance, should be found in the same
vicinity and look the same on each page.
8) Create your
website using your desired program.
9) Upload to
your server. But don’t get smug,
remember that building and updating a web site is an ongoing project. And
please don’t add any cute “under construction” clip art to your site. They’re
always under construction.
5—website resources
If simple is what you are
looking for, this is the page for you! Using an online service is the best way
to get started quickly if you have little computer experience or wish to get up
and running quickly. Registration is usually required and many have recently
decided to charge a monthly fee. If you are comfortable with the interface and
don't mind the advertisements or clutter, then these sites are a tremendous
benefit for educators.
There are plenty of services that give you
the ability to design and maintain a web site for your classes. Some of these
services are educator-centered and others are for just about anybody. The best
thing about these services is that they provide you both with a means for
making a web page and provide you with space on an Internet server (so that you
can store your pages on the web and publish it for the world). As with anything
free, there is a catch. In return for the free tools and web space, these
services post advertising on your web site. The advertising is out of your
control. You cannot choose your own domain name. Let's say you want your web
address to be www.thelittleschoolonthehill.com. Free services will not support
this. You also lose a great deal of creative control because these services use
web layout templates. Your district site will look like the other 40,000
schools on their services.
My School Online ($29.95 annually)
·
A very complete
site, offers many options.
·
Fairly easy
registration, email sent to verify.
·
Pictures and
graphics can be included.
·
A very nice
tutorial leads you through all processes.
Teacher Web ($2.50 monthly or $25.00 for
year if paid in advance.)
·
Advertised as an
online bulletin board, has a lot to offer!
·
Not too cluttered
or detailed, easy to navigate.
·
Offers various
templates for various school job descriptions. (Librarian, counselor, etc.)
Also offers templates for creating a webquest - a neat feature!
·
Easy
registration, email sent to verify.
School Notes (Free Service)
·
Very basic format
but allows some personalization within that format.
·
Takes very little
time - good if you need something posted quickly.
·
Ideal for posting
homework and/or class information.
·
Example links
provided on homepage.
Your Homework (Free basic service
available)
·
Available for
teachers, students, parents, schools, fundraising, and libraries.
·
Asks that you
update regularly. Hides your name if not, but you are not removed from list.
·
Mainly designed
for posting assignments.
·
Design a
homepage, send & receive email, post homework.
·
Send assignment
alerts to local libraries.
·
Calls school to
verify employment and asks for email to send you occasional information
Some Additional Choices
Schoolplanner.com ($25.00
annually)
Think.com (Free Service)
The Educator's Network (Free
Service, mostly for posting favorite links)
The following is a link to a rubric
recommended by technology integration expert, Kathy Shrock:
http://www.uwstout.edu/soe/profdev/webpagerubric.html
Website Directories:
http://dmoz.org/Reference/Education/Educators/K_through_12/Personal_and_Class_Pages/
http://www.kinderkorner.com/teachersites.html
ACTIVITY: Evaluation
(15 Minutes)
1)
Divide into
groups of 3.
2)
Select a website
from the list above or a teacher website that you would like to evaluate.
3)
Use the rubric to
score the website.
Discussion & Good
Examples
7—avoiding the ugly
1)
This PowerPoint
from the Georgia Perimeter
College is an excellent guide to good web design practices. I will include
some personal tips and tricks as I attempt to help you avoid an ugly web site!
2)
Another excellent
resource can be found at Patrick
Crispen’s Netsquirrel site. According to Mr. Crispen, “The good news is
that anyone can create a Web page or a Web site. The bad news is that anyone
can create a Web page or a Web site. Regardless of whether you use Macromedia
Dreamweaver, Microsoft FrontPage, or simply code by hand, there are some
guiding principles you need to remember whenever you design anything for the
web.”
8—Useful resources
Cyberbee Web Construction: http://www.cyberbee.com/schoolpage/school.html
Tips & Tricks for Web
Design: http://www.tips-tricks.com/index.asp
Web Backgrounds: http://www.teach-nology.com/web_tools/web_site/backgrounds/
ClipArt for the Web: http://www.teach-nology.com/web_tools/web_site/clip_art/
The School Web Master: http://www.assortedstuff.com/webmaster/index.html
Web Page Design: http://www.essdack.org/webdesign/
Internet4Classrooms Web Page
Assistance: http://www.internet4classrooms.com/web.htm
Tuscaloosa City Schools Web
Leaders’ Resources: http://www.webtech.tusc.k12.al.us/tutorials.htm
Back to UA Technology in Motion