Basic Web Design

1
Basic Web Design
Robby Seitz UM Webmaster rseitz_at_olemiss.edu 915-78
22 121 Powers Hall
2
Basic Web Design

• How to build a Web site

1. Open Notepad and type the following lthtmlgt lth
eadgt lttitlegtRobby's Pagelt/titlegt lt/headgt ltbo
dygt This is a picture of my cat, Lou.ltbr
/gt ltimg src"cat.jpg /gt lt/bodygt lt/htmlgt 2.
Save the file as test.html on your desktop. 3.
Double-click the files 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!
3
Basic Web Design

• What is a web site?
• Text GraphicsPrintable information available
  at users pace
• Animation (Flash)Only for animations and video,
  not for Web site building(www.clickz.com/showPage
  .html?page3419561)
• Video SoundCall in the professionals!
• Podcastspodcast.olemiss.edu

4
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.

5
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?

6
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.)

7
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
  wont be the only person updating it.)
• Static or dynamic?
• Web page or web application?

8
Basic Web Design

• Bad Examples(Dont 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

9
Basic Web Design

• Bad Examples(Dont try this at home!)
• Association of International Glaucoma Societies
• www.globalaigs.org
• Just because you can do something doesnt
  necessarily mean you ought to.

10
Basic Web Design

• Web 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

11
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

12
Basic Web Design

• Structure
• Layout is not just decorative it can also
  provide visual organization for your content.
• Ole Miss
• www.olemiss.edu

13
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

14
Basic Web Design

• Structure
• Layout is not just decorative it can also
  provide visual organization for your content.
• Facebook
• www.facebook.com
• Fairly complex
• structure, but its
• audience responds
• well to it

15
Basic Web Design

• Navigation
• 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.

16
Basic Web Design

• Navigation
• Links and menus Methods for moving from page to
  page
• Mystery Meat Navigation
• www.art.northwestern.edu/welcome.html

17
Basic Web Design

• Context
• The grouping relationship between elements
• Students Page
• www.olemiss.edu/students

18
Basic Web Design

• Context
• The grouping relationship between elements
• Apple Downloads
• www.apple.com/downloads

19
Basic Web Design

• Context
• The grouping relationship between elements
• Microsoft Downloads
• www.microsoft.com/downloads

20
Basic Web Design

• Content
• The goal of Web browsing
• Upcoming UM Newsdesk

21
Basic Web Design

• Things you cant 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)
• Users Scripting and CSS settings

22
Basic Web Design

• Things you cant control
• Users
• Language

23
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 dont know CSS, learn CSS!
  (www.w3schools.com)
• Test your pages! (validator.w3.org)

24
Basic Web Design

• Web Site Design Tips
• Consider accessibility limitations. How does
  your site look to someone who cant see?
• Location, location, location! (www.poynterextra.or
  g/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 its RED and not red!