Basic Web Design
advertisement
Basic Web Design Robby Seitz UM Webmaster rseitz@olemiss.edu 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!
