Basic Web Design

Download Report

Transcript Basic Web Design 

Basic Web Design
Robby Seitz
UM Webmaster
[email protected]
915-7822
121 Powers Hall
Basic Web Design
How to build a Web site:
1. Open Notepad and type the following:
<html>
<head>
<title>Robby's Page</title>
</head>
<body>
This is a picture of my cat, Lou.<br />
<img src="cat.jpg“ />
</body>
</html>
2. Save the file as test.html on your desktop.
3. Double-click the file’s icon on the desktop
and, if you have a picture called cat.jpg,
you should see a page similar to this one.
Thanks for coming!
Basic Web Design
What is a web site?
• Text & Graphics
Printable information available at user’s pace
• Animation (Flash)
Only for animations and video, not for Web site building
(www.clickz.com/showPage.html?page=3419561)
• Video & Sound
Call in the professionals!
• Podcasts
podcast.olemiss.edu
Basic Web Design
Who is your audience?
• What do they want?
• How do they expect to get it?
• How do you know?
Consider surveying your current visitors.
Basic Web Design
Take inventory:
• What information do you already have
and what do you have to create?
• Graphics... create, steal, or borrow?
• How much information should you
give? Any security issues?
Basic Web Design
What are your resources and
limitations?
• Hardware
(Build on whatever platform you like,
but test thoroughly on both PC and Mac.)
• Software
(Build on whatever software you like,
but test thoroughly with every browser.)
• Bandwidth
(I try to find the worst Internet connection in town
and test the site through that.)
Basic Web Design
What are your resources and
limitations?
• Accessibility
(Build the page with handicapped accessibility
in mind.)
• Maintainability
(Build the page knowing that you won’t be
the only person updating it.)
• Static or dynamic?
• Web page or web application?
Basic Web Design
Bad
Examples
(Don’t try this at home!)
jones, partners: architecture
www.jonespartners.com/
"If architects built
buildings the way they
build their Web sites,
then the first
woodpecker to come
along would destroy
civilization."
More examples available at
www.webpagesthatsuck.com
Basic Web Design
Bad
Examples
(Don’t try this at home!)
Association of International
Glaucoma Societies
www.globalaigs.org
Just because you can do
something doesn’t
necessarily mean you
ought to.
Basic Web Design
Web Page Elements
• Structure
The arrangement of content
• Navigation
The means by which content may be found
• Context
The connection between menu and content groupings
• Content
The goal of Web browsing
Basic Web Design
Structure
• Layout is not just decorative – it can also
provide visual organization for your
content.
Google News
news.google.com
Fairly simple structure
and easily understood
Basic Web Design
Structure
• Layout is not just decorative – it can also
provide visual organization for your
content.
Ole Miss
www.olemiss.edu
Basic Web Design
Structure
• Layout is not just decorative – it can also
provide visual organization for your
content.
The New York Times
www.nytimes.com
Basic Web Design
Navigation
• Links and menus – Methods for moving
from page to page
Information Technology
www.olemiss.edu/depts/it/
Using both horizontal
and vertical menus
Note: Right navigation
can sometimes be cut
off in narrow browser
windows.
Basic Web Design
Navigation
• Links and menus – Methods for moving
from page to page
“Mystery Meat Navigation”
www.art.northwestern.edu/welcome.html
Basic Web Design
Context
• The grouping relationship between
elements
Students Page
www.olemiss.edu/students
Basic Web Design
Context
• The grouping relationship between
elements
Apple Downloads
www.apple.com/downloads
Basic Web Design
Context
• The grouping relationship between
elements
Microsoft Downloads
www.microsoft.com/downloads
Basic Web Design
Content
•
The goal of Web browsing
Upcoming
UM Newsdesk
Basic Web Design
Things you can’t control
•
•
•
•
•
•
•
•
•
User's browser (type, version, plug-ins, etc.)
User's computer type
User's network speed
User's monitor
Browser window size
Image loading
Color
Fonts (type, size, character set)
User’s Scripting and CSS settings
Basic Web Design
Things you can’t control
User’s
Language
Basic Web Design
Web Site Design Tips
•
•
•
•
Remember your audience.
Keep it short, simple, consistent, and conventional.
Steal good ideas.
Organize your navigation– Lead users to your content
using the most natural choices and the fewest links.
• Use CSS to lay out your page if you know CSS.
• If you don’t know CSS, learn CSS! (www.w3schools.com)
• Test your pages! (validator.w3.org)
Basic Web Design
Web Site Design Tips
•
•
•
•
•
•
•
•
Consider accessibility limitations. How does your site look to
someone who can’t see?
Location, location, location! (www.poynterextra.org/eyetrack2004)
Use Dreamweaver.
Keep all your images in one folder.
Create only a “handful” of templates for site consistency.
Provide a search engine if you have a large number of pages or
complex content. (Try using Google!)
Make backups of the old site before writing over it!
If you are using the color red on an Ole Miss site, make sure it’s
RED and not red!