1. Basic Web Design Robby Seitz UM Webmaster rseitz@olemiss.edu 915-7822 121 Powers Hall

2. Basic Web Design How to build a Web site: 1. Open Notepad and type the following: Robby's Page This is a picture of my cat, Lou. 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!

3. 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)www.clickz.com/showPage.html?page=3419561 Video & Sound Call in the professionals! Podcasts podcast.olemiss.edu podcast.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 won’t be the only person updating it.) Static or dynamic? Web page or web application?

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

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

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

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 Technology www.olemiss.edu/depts/it/ www.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 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

22. Basic Web Design Things you can’t control User’s 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 don’t know CSS, learn CSS! (www.w3schools.com)www.w3schools.com Test your pages! (validator.w3.org)validator.w3.org

24. 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)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!