IDCC 370: Web Design I   Spring 2008

Check this out:

Top Ten Mistakes in Web Design (Jakob Nielsen's Alertbox)

"9. Opening New Browser Windows
Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's 'open in new window' command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior."

Check this out:

In helping you correct assignment one during our last class session, I noticed that a number of you were having difficulty in troubleshooting your HTML-- mainly because the lines of code shot off in a long stream to right of the page and ultimately out of sight. The screenshot to your right (click to enlarge) shows you the menu traversal to set "wrap text" so you won't have this code viewing difficulty. Ultimately, for the best effect, select all code view options, as shown. To make these selections, you will need to be in either "code" or "split" view and not in "design" view. In "design" view, the options will be grayed out and inaccessible.

On another note, the grades have been updated (available on the grade gallery page of the site). If you have any questions about your performance in the course to date, just e-mail me at wbuchholz@bentley.edu.

Keep working on your corrections to assignment one, and remember to plug away at assignment two, due Thursday, November 17, 2005, at class time.

Check this out:

As a group, you created some wonderful Web sites for Assignment One. Congratulations to you all. Before I share with you a number of the sites that are particularly noteworthy, I want to highlight some areas to watch out for when creating a Web site. Here goes:

1. Writing and proofreading: The Web is both a graphic and a written medium. In Web design, you must be very careful on both fronts, as you are publishing to the world. Make sure that your writing is concise and correct. Watch your phrasing (how you say something), punctuation, spelling, and proofreading (shift/F7 in Dreamweaver results in the spellcheck utility, pictured at right). Good writing is critical in the design of Web sites. If your site is riddled with errors, your credibility and professionalism plummet. People will not trust the information you are trying to convey. A site that is untrustworthy is just taking up cyberspace. Don't let that be you.
   
2. ALT: Be sure that all graphics contain Alternative Text (ALT); remember to end all alts with a period. Do you recall why?
3. Global navigation: For Assignment Two, make sure that your global navigation bar and signature appear on all pages of the site. Some of you included a global navigation bar on all pages, which was great to do, but in so doing, you need to make sure that your hyperlinks are not self-referential (where a page links to itself). And once you make a navigation bar, keep it the same on all pages. Review the global navigation of the Web model we studied on our second day of class.
4. Page spread: Some of your pages spread the text in a single line across the entire screen. On a small monitor, your page probably looks okay. On a large monitor, or at high resolution, it looks funny…and is very difficult to read. Consider designing in jell-o if you want a “liquid” effect. Your matrix table or matrix layer could range from 60-75% or so. Even if you want to set your table or layer at 100%, you should divide your page into two or three columns (that can be jell-o) so the discourse elements (the text) are easier to read. A good example of this type of design is the World Wide Web Consortium home page.
5. Contrast: In Web design, when setting text against a background color or layer, you must be very careful to create high contrast, otherwise the text will not be visible. The extreme, as I’ve mentioned, is black text on a black background or white text on white. It just doesn’t work. In some of your pages, you put dark text against a dark background: no go. Note too that when you use a black page background, your visitors will have a difficult time reading blue and maroon hyperlinks. You need to change the color of the background, hyperlink, or text.
6. Vertical spacing: Some of you have too much space vertically—usually extra enters. Kill them.
7. Padding, vspace, and hspace: Don’t squeeze elements in tables and don’t run text too close to graphics. Use white space to the best effect.
8. Meta tags: be sure to place meta tags for key words and page description on all your pages. Make these count, as search engines often use them in their results pages.
9. Page title tags: Use solid information, key terms to the left, in naming pages. Rather than “About Me” in the title tag, you should have “About William Buchholz, Bentley College, Waltham, MA”. Instead of “Assignment Two,” it would be much better to have “Assignment Two, IDCC 370 Web Design, Bentley College, Waltham, MA”.
10. Click here: Avoid this. Remember, you should always make inline hyperlinks descriptive of their destination. Rather than “William Buchholz resume, click here,” you should set the link descriptively: “William Buchholz resume.”
11. Quoting and paraphrasing: Some of you are still confused about how to handle quotes and paraphrases. The easiest rule of thumb is this: if you use three words or more in a row from your source, be sure to put quotations around this material. You can intersperse your commentary with quotes, but be very careful about this.
12. Graphics: If you borrow a graphic from a site, you should source it and/or link to the page where the graphic originated. Using clip art and photos in the public domain (as supplied, for example, by Microsoft) is perfectly fine for this course, but when using graphics not in the public domain, you must remember to give credit.
    

Be sure to let me know if you have any questions about the points listed above. In the meantime, here are some student sites I think you will find visually very interesting. They aren’t perfect (yet), but in general they exhibit a good sense of design for the Web (keep stretching; it's great to see):

• Julia Johns: http://web.bentley.edu/students/j/Johns_juli/
• Roberto Soto: http://web.bentley.edu/students/s/soto_robe/
• Nicholas Hausammann: http://boyce.catastrobat.com/
• Pasit Leesakul: http://web.bentley.edu/students/l/leesaku_pasi/
• Jason Pappas: http://web.bentley.edu/students/p/Pappas_Jaso/pappas370/
• Kaitlin Anelauskas: http://web.bentley.edu/students/a/Anelaus_Kait/
• Korakot Phadungsittiphol: http://web.bentley.edu/students/p/phadung_kora/
• Cindy Chou: http://web.bentley.edu/students/c/chou_cind/
• Brian Clark: http://web.bentley.edu/students/c/clark1_bria/

If your site is not yet listed here, don’t feel bad. Just keep at it. I have a feeling that next time you will make this page.

Check this out:

Remember to check out the tutorial on vector and raster graphics and print it out for class on Tuesday.

Continue to work with your vector designs so that you get comfortable with the tools and the theory behind VML (especially the marriage of CSS and VML). Remember that vectors allow you to edit graphics easily and design materials that will render in all modern browsers. Vectors form the basis of CAD/CAM, 3-D, and industrial design using wireframes. You might want to visit the specification note for the Vector Markup Language at W3C.org.

Here are some of the terms and concepts that you should be comfortable with regarding vector graphics:

1. VML = XML application (think XHTML)
   
2. CSS Level 2 for styling VML objects
   
3. VML takes advantage of "geometric modeling using primitives such as points, lines, curves, and polygons" in computer graphics (Wikipedia)
   
4. Bézier curves
5. x and y coordinates
6. graphic depth, perspective, and animation
   
7. rotation left and right, up and down from the center
   
8. scale up and scale down without degradation (anti-aliased, smoothing of curves)
9. modeling
10. fill (color, texture, pattern, picture)
11. color gradient
12. wireframe
13. layers and z-index (send to back, bring to front, etc.; overlap layers)
    
14. Flash as an application of vectors (ShockWave Flash (SWF) format)
    
15. Scalable Vector Graphics (SVG) specification
    

Remember, if you have any questions about this material, e-mail me at wbuchholz@bentley.edu.

Check this out:

The first screenshot shows the "Washout" button on the picture toolbar in Word. (For a larger view, click the thumbnail. To return to this page, click your browser's "back" button.) Remember that you can combine "Automatic" with "Washout" or "Grayscale" with "Washout" for quite different effects. Ultimately these washouts are suitable as "watermarks" for Web pages, table backgrounds, and cell backgrounds (they are also very useful in PowerPoint slide presentations). In Web pages and tables, the watermarks, having their own layer, act as transparent images upon which you can write or place other images. Some really nifty design possibilities are curtailed only by the limits of your imagination.

The second screenshot (above right) shows you the resize taskbar in the Microsoft Office Picture Manager. Don't underestimate this little utility for some "quick and dirty" cropping, color correction, and resizing for Web optimization, thumbnailing, or e-mailing when you do not have access to one of the heavy duty graphics applications such as Photoshop or Fireworks.

Time permitting next class meeting, we will begin to explore some of the interesting vagaries of vector graphics (what we've looked at thus far is the bitmapped graphic format known as raster). Please be sure to locate the PowerPoint tutorial on Web Graphics: Vector & Raster, on the Web design tutorial page in the class site. Before coming to class, you might want to print out the pdf on this tutorial so that you will be able to take notes during our discussion of this material. In class, you may want to follow along with the tutorial on your own desktop computer while I have the PowerPoint show projected on the screen. The graphic above is hyperlinked to the PowerPoint tutorial for you. (Always helpful.....)

Here are some of the key terms that arose in the demonstration:

1. browser chrome
2. tiling, tiles (page, table, cell)
3. layers: page, table, cell, graphic and text
4. bitmapped graphics:
• .tif
• .gif
• .bmt
  
• .jpg
• raw (photographic raw files from SLR cameras)
5. RGB monitor; designing with light and three admixtures of color: red, green, and blue
6. screen resolution maximum = @ 100 ppi (pixels per inch), ranging from 72 ppi to 130 ppi
   
7. print resolution goes from 200 ppi up to 1200+ ppi (huge!)
8. file conversion (when a utility converts a file from one format to another; e.g., from .tif to .jpg, as I did in Word)
9. compressed and uncompressed images; compression algorithm
10. z-index 0 (bottom-most layer; the page itself)
    

If you have any questions about any of this material, be sure to e-mail me at wbuchholz@bentley.edu.

Check this out:


Here is a list of the terms introduced in our class meeting on Thursday, October 13, 2005. Please make sure that you understand the meaning of all these terms and phrases:

1. detachable "picture" tool bar (graphic pictured at start of announcement post)
   
2. guerilla graphics using MS-OS
3. screenshot; screenshot callout
4. thumbnail; hyperlinked thumbnail
5. graphics formats: png, jpeg, gif
6. optimum page size = 30-50 KB; page should download in under 10 seconds
7. optimum graphics size = 2 KB to 35 KB generally; photographs web optimized at under 100 KB
8. washout image
9. grayscale versus black and white

If you have any questions about these terms, be sure to e-mail me at wbuchholz.

Remember, on Tuesday, October 18, from 11:30-1:30, Dr. Hubscher will hold open lab in Smith 110; I'll hold open lab on Friday, October 21, from 11:30-1:00. Please feel free to stop by for some help with Web design or just to use Dreamweaver.

Check this out: Some of you have been having a little difficulty using Dreamweaver's FTP utility. It can be a little confusing, so I hope this advice will help.

Remember to invoke the wizard to set your specs. The key screen in the wizard is the one where you actually hook to the server and your folder on the server. Here is a screen shot to refresh your memory:

If you need some help with this, just e-mail me at wbuchholz@bentley.edu.

Check this out: Here is a list of the terms introduced in our class meeting on Tuesday, October 4, 2005. Please make sure that you understand the meaning of all these terms and phrases:

1. context
2. title riding higher on the page
3. tabular buttons
4. piping or pipes in navigation bar
5. horizontal navigation (nav) bar
6. internal navigation system
7. page navigation functionality
8. functional test
9. anchor, named fragment
10. design options and tradeoffs
11. space constraints
12. local navigation; global navigation
13. full signature
    

If you have any questions about these terms, be sure to e-mail me at wbuchholz.

Remember, we will not be having class on Tuesday, October 11, due to the Columbus day weekend, so Assignment One is due Thursday, October 13. I will be available in Smith 110 on Tuesday, October 11, from 1:00-4:00, if you would like to stop by for some help with Assignment One or just to use Dreamweaver.

Check this out: Here is a list of the terms introduced in our class meeting on Thursday, September 29, 2005. Please make sure that you understand the meaning of all these terms and phrases:

1. helper application (Word and Word .doc file; Excel and .xls file; Adobe Acrobat and pdf file)
2. proprietary file format (e.g.: Word .doc)
3. light and heavy pages (referring to clean HTML and css markup)
4. Web optimization of text
5. Web optimization of graphics
6. Word bloat
7. bloated HTML files
8. separation of style from content in XHTML and XML markup
9. machine readable markup (vanilla, clean XHTML)

If you have any questions about these terms, be sure to e-mail me at wbuchholz.

Remember, we will have open labs this week on Tuesday and Friday, 11:30 to 1:30. I will also allow some time in class on Thursday, October 6, to work on your Assignment One, which is due Thursday, October 13, as we will not be having class on Tuesday, October 11, due to the Columbus day weekend.