Webdesign: The Good, The Pretty, and the Really, Really Ugly

1. Background Information
   
   1. HTML- Hypertext Markup Language
      
   2. Text-
      
      1. Fonts- Keep it simple!
      2. Sizing
      3. Formatting- You’ll lose it!
      4. Indenting, aligning, and arranging
      5. Numbering and bullets
         
   3. Background-
      
      1. Dark on light or Light on Dark
      2. Keep it simple
      3. Tileing-What does it mean to you!?!
         
   4. Links
      
      1. Internal
      2. External
      3. Anchors
      4. e-mail
         
   5. Graphics
      
      1. GIF- simple pictures without many colors: drawings, titles, etc.
         
         1. interlacing- gives people something to watch while they wait for it to load
         2. transparency- the ability to make 1 or more colors transparent so graphics don’t have a square box around them
            
      2. JPEG- lots of colors: photographs
         
         1. no interlacing
         2. no transparency
            
      3. PNG- New and exciting! The best of both worlds
         
         1. lots of colors
         2. interlacing
         3. transparency
         4. Not supported except by 4.0 browsers.
            
   6. Tables
      
      1. Why!
         
         1. layout
         2. formatting
         3. make things stay where they are!
         4. CONTROL
            
            
2. File Organization
   
   1. Do this from the start!
      
      1. Folders
         
         1. one for every different file type you have: images, html, pdf, Source files, etc.
            
      2. Naming
         
         1. lowercase
         2. letters and numbers only! No special characters
         3. ~ _ - . are the only characters that will work
         4. NO SPACES
         5. Short, short, short!
         6. Name the first page (or directory page) of every site and folder index.htm.
            
            
3. Browsers
   
   1. HTML tells the browsers where to find graphics, animations, movie clips, sounds etc.
      
   2. A webpage does not actually have graphics elements in it, it just links to them, ALWAYS KEEP GRAPHIC FILES IN A FOLDER INSIDE YOU WEBSITE FOLDER.
      
   3. After you put an image in a page you can’t rename or move it out side of your program- the browser will not find it!
      
      
4. Planning
   Target Audience
   What do you want to accomplish.
   
   1. Outline or Storyboard idea before you even start!
      
      1. State your objective. Ask yourself what is the purpose of goal of the site and is it worth publishing?
         
   2. Name the site!
      
      1. If someone bookmarks the site the site’s title appears on that person’s bookmark list. Be sure that the subject is easy to recognize based on the title selected.
         
   3. Use Headlines that are eye catching, short and descriptive.
      
   4. Check Spelling and Punctuation!
      
   5. Organize, Organize, Organize!
      
   6. Source Files
      
      1. It’s always a good idea to keep copies (hard and on disk) of all information that you will need to create your webpage.
      2. Keep original copies of electronic copies of your source files. For example, titles, graphics, text, etc. in a folder called Source Files
         
   7. Plan your site to take advantage of the attributes of the system.
      
      1. Instant updates
      2. Tons of Space
      3. Color
      4. Linking
      5. Graphics
      6. Sound and Animation
         
5. Design Principles
   
   1. Alignment
      
      1. This means left, center, or right justified.
      2. Choose one alignment and stick with it!
      3. Keep text and graphics away from the edges of the screen.
      4. Keep an eye out for vertical alignment (top, middle, or bottom) not just horizontal alignment.
         
   2. Proximity
      
      1. This means how close are the objects.
      2. Objects and/ or text that are located close together will appear to belong together or have some relationship.
      3. Use proximity to your advantage.
      4. Always think about how close items are on a page and if they have a relationship
         
   3. Repetition
      
      1. Repeat certain elements from page to page.
      2. Navigational buttons, colors, style, illustrations, format, layout, typography, etc.
      3. Repeating a color throughout a page is always a good thing to tie a page together.
         
   4. Contrast
      
      1. This is very important! Make sure you can actually read the text especially for a presentation!
      2. If you want people to actually be able to sit and read the information on the screen make sure there is a lot of contrast.
      3. Rule of thumb is to make a dark background behind light text or dark text on top of a light background. The best for readability is always dark on light!
      4. Contrasting elements, colors, graphics, different sizes, etc., can be used to guide your eye around the page. Look at the screen and see what catches your eye in what order.
      5. Watch for and create your own focal points.
         
   5. Interface and Navigation
      
      1. The most common screen size is 640X480 or 15” monitor.
      2. The first page should always fit in this space.
      3. The two best navigational systems are:
         
         • Top- because they are always visible and easy to use
         • Left side- if you have too many for a top navigation.
           
      4. Any time you use an image for anything make sure you give it an alternate label. This is what will appear if a person has their graphics turned off or if they are using a “reader”.
      5. Frames
         
      • Can be used effectively but in general it is a good idea to stay away from these.
      • Only use them for a really good reason and make sure you do it right!
        
      6. Always make sure you provide more than one way to navigate your site.
         
         • provide an index
         • sitemap
         • bottom of the page text links
           
   6. Links
      
      1. When you create external links make them open into a new window so that users won’t lose your page.
      2. Check your links fairly often to make sure they work.
      3. Make sure a link is worth linking to- don’t just do it for the fun of it!
      4. It’s always nice to provide a brief description of a link so a user knows whether it’s worth actually visiting.
         
   7. Graphics
      
      1. Keep in mind that graphics, sound, video clips, Quicktime VR all take time to load on a webpage.
      2. Do you need permission from the current owner to use the graphics?
         
         1. If the graphics are from a CD or application program, check the license agreement and restrictions on the package. If a graphic has been downloaded from the Internet, you must first seek permission from the artist who created the image to use it on a Web page. To request permission, send an e-mail to the Webmaster, author or artist. usually this information is at the bottom of the site’s home page. Inform the contact that you would like permission to place the picture on a school Web site. If there is no address to write for permission, or no response from the e-mail, do not use the picture: it is illegal to take a graphic image from the Internet without Permission. (Apple Computer, Webdesign Checklist)
            
            
6. BAD, BAD, BAD
   
   1. Text that is in ALL CAPS! Yuck! Considered SHOUTING on the internet. Don’t use them unless you really want to shout!
   2. Always check your links.
   3. Don’t make graphics that look like buttons and aren’t!
   4. Never underline text unless it’s a link!
   5. Never make users scroll sideways!
   6. Don’t make “orphan” pages. These are pages that you can get to but have no way of getting anywhere else from.

Great Books:

Williams, Robin & Tollet, John (1998). The Non-Designer’s Web Book. Peachpitt Press, Berkeley, CA. ISBN 0-201-68859-X
Williams, Robin, Tollet, John & Rohr, David (2002). Web Design Workshop. Peachpitt Press, Berkeley, CA. ISBN 0-201-74867-3

 

©Christi Boggs 2002