basic web design robby seitz um webmaster [email protected] 915-7822 121 powers hall
TRANSCRIPT
Basic Web DesignHow 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 DesignWhat is a web site?
• Text & GraphicsPrintable 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 & SoundCall in the professionals!
• Podcastspodcast.olemiss.edu
Basic Web DesignWho 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 DesignTake 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 DesignWhat 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 DesignWhat 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 DesignBad 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 DesignBad 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 DesignWeb Page Elements
• StructureThe arrangement of content
• NavigationThe means by which content may be found
• ContextThe connection between menu and content groupings
• ContentThe goal of Web browsing
Basic Web DesignStructure• 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 DesignStructure• Layout is not just decorative – it can also
provide visual organization for your content.
Ole Miss
www.olemiss.edu
Basic Web DesignStructure• Layout is not just decorative – it can also
provide visual organization for your content.
The New York Times
www.nytimes.com
Basic Web DesignNavigation• Links and menus – Methods for moving
from page to page
Information Technologywww.olemiss.edu/depts/it/
Using both horizontal
and vertical menus
Note: Right navigation
can sometimes be cut
off in narrow browser
windows.
Basic Web DesignNavigation• Links and menus – Methods for moving
from page to page
“Mystery Meat Navigation”www.art.northwestern.edu/welcome.html
Basic Web DesignContext• The grouping relationship between
elements
Students Page www.olemiss.edu/students
Basic Web DesignContext• The grouping relationship between
elements
Apple Downloadswww.apple.com/downloads
Basic Web DesignContext• The grouping relationship between
elements
Microsoft Downloadswww.microsoft.com/downloads
Basic Web DesignContent• The goal of Web browsing
Upcoming UM Newsdesk
Basic Web DesignThings 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 DesignThings you can’t control
User’s Language
Basic Web DesignWeb 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 DesignWeb 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!