Universal access: making sure in the first place that the audience can receive the media files, then making the graphics usable.
- Online communications improve access to information by minimizing time and space constraints. However, the complete dependency on technology raises the issue of "technological disabilities". Internet users rely on computers and networks as surrogate senses. Providing information in formats that are not widely compatible means that part of the audience will not be able to see or hear what is being presented. In the context of online instruction, this is functionally identical to being blind or deaf in the classroom, and just as discriminatory if not remedied.
- Criteria for choosing graphics
- Compatible
- Is the type of graphic you use widely compatible now?
- Consider not only the variety of computer systems and versions, but also the increasing number of other devices (handhelds, cell phones, etc) that connect to the Internet. How many have support for the file formats you use?
- Will your graphic continue to be compatible?
- You own your image, you do not own the image file format (i.e., the means to show the image to others).
- Who owns image file formats.
- Undocumented formats.
- Documented, proprietary formats.
- Standard, patent-encumbered formats.
- Open formats.
- Short download time
- Download times vary greatly with connection speed. A baseline modem will be capable of downloading, under ideal conditions, about 3.5 KB per second.
- When computing the size of your page, make sure to add in all the elements it loads (text, stylesheets, external scripts, images, etc.)
- If you have a choice, pick subject matter that will compress more efficiently. The specifics are dependent on the type of media, but in general redundancy (solid colors, uniform lighting, etc.) will yield better results.
- Adequate representation of content
- Attention grabbing
- Information design
- Accessibility
- Compatibility is a prerequisite for accommodating the disabled, but additional action is then required.
- Resources
- User experience
- After attracting an audience, the next challenge is retaining it.
- Avoiding user fatigue
- Avoid forcing users to scroll both horizontally and vertically by making at least one image dimension (possibly both) fit entirely on screen.
- The baseline display size, in pixels, is 640 x 480 (a.k.a. VGA). If you need more space, the next size up is 800 x 600 (a.k.a. SVGA). As you make your pictures bigger, more of your audience will be left looking at them "through a keyhole"
- The actual available space on screen is reduced by other features in your page (borders, indents, frames or tables, etc.) and user interface elements (menu bars, scroll bars, button bars, etc.) This varies widely with each user's personal preferences. For a VGA screen, try using 550 width and 350 height as maximum measurements, then do some testing.
- Note that we never talked about inches or dpi or any other units. On the web all that matters is pixels, eliminating the need for awkward computations.
- Finally, if you are working with raster images (e.g., GIF or JPEG), reducing pixel size also lowers file size and download time.
- Maintain a consistent graphic look--this helps create a "frictionless" site. It's also the only way to make variety stand out when it matters.
- Make allowances for a variety of browsing styles. For instance, simpler HTML will usually yield "fluid layouts" (type reflows when the browser window shrinks, keeping the text in view). This lets viewers run a note-taking program alongside your web page.
- Navigating the hypermaze
- Being able to jump from link to link is liberating--but it can also leave your audience utterly disoriented. Provide "signposts" and "escape hatches" leading back to major "landmarks" on your site. Here too, consistent graphics help.
- Letting your pages stand on their own
- Keep in mind that you won't be watching over your viewers' shoulders, talking them through the rough spots. Design your site for self-sufficiency.
- Multimedia: multiple routes to the viewers' attention
- Text
- Samples
- A sampler of HTML features
- Note that this variety of items was already possible with HTML 3.2 (approved Jan 14, 1997). Stick with the fundamental standards to take advantage of their inherent stability. Stability allows you to use your time improving the content of your pages instead of having to fix their appearance.
- Same HTML, with the addition of stylesheets
- Now our simple page can get really wild (yikes!)--without losing compatibility. Browsers lacking stylesheet support would simply show the unstyled version (this is known in the business as "graceful degradation").
- Still, fixed-size images (raster graphics)
- Still, scalable images (vector graphics)
- Instrumental music
- Speech
- No online sample possible for lack of standards. Text reader programs may be available on your audience's computers, but you won't have control over the synthesized speech.
- Arbitrary sound
- Sample
- Whistling
- Saved as a uLaw file (44.1 KHz, 16 bits), 250,072 bytes.
- Motion graphics without synchronized sound
- Samples
- Pencil logo
- Saved as a Director Shockwave file, would also work as an animated GIF.
- Inchworm
- Saved as a Flash Shockwave file. Note how this animation, unlike the previous one, can be resized (just enlarge or shrink the browser window).
- Motion graphics with sync soundtrack
- Samples
- Spacy ship
- Saved as a Director Shockwave file (image priority).
- Captioned Greeting
- Saved as a QuickTime video file (sound priority). Additional media tracks (such as text captions) can be synchronized to the image.
- Navigable panoramas and pre-rendered 3D
- Real-time 3D
- Interactivity (games, simulations)
- Copyright issues
- TEACH Act
- Technology Education and Copyright Harmonization Act of 2002
- revised existing exemption in Copyright Act to take online education into account.
- DMCA
- Digital Millennium Copyright Act of 1998
