Chapter 6: Multimedia and Interactivity

Chapter Objectives

  • Explain webpage multimedia and animation issues.
  • Discuss adding and editing webpage audio and video elements.
  • Describe types of webpage animation.
  • Identify ways to effectively use interactive elements.

Multimedia and Animation Issues

  • Definition: Multimedia and animated elements combine text, images, animation, audio, and video to enhance website functionality.
  • Benefits: Can inform and educate users, engaging them more effectively than text alone.
  • Considerations:
    • Compatibility issues with different browsers and devices.
    • Importance of adding credits and captions.

Usage Guidelines

  • Multimedia should support the website's goals.
    • Costs: Longer download times; compatibility issues may require plug-ins.
    • Alternatives: Consider embedding content from platforms like YouTube, Flickr, or Spotify.
  • Guidelines:
    • Choose between low or high bandwidth options.
    • Alert users about required plug-ins and provide download options.
    • Offer full-screen viewing options and include text equivalents for accessibility.
    • Break content into short segments for easier consumption.

Audio and Video Elements

  • Two main types: downloadable and streaming content.
    • HTML5 Tags: Use <audio> and <video> for embedding these elements.
  • Streaming: Begins immediately as files are delivered (e.g., via progressive streaming) versus full downloads.

Audio Usage

  • Purpose:
    • Enhance with sound effects and background music.
    • Deliver personal messages or testimonials effectively.
  • Record high-quality audio using audio-recording and editing software.
  • Podcasts as a popular form of digital audio or video, named post-Apple iPod.

Editing Audio Files

  • Best practices for web audio:
    • Keep clips brief.
    • Be mindful of audio channel types (Mono: smaller file size, Stereo: higher quality).
    • Sampling Rate: Number of samples taken per second during recording.
    • Bit Depth: Affects audio quality, determining the fidelity of the sound.

Video Elements

  • Video delivery methods:
    • Downloadable content (risk of larger file sizes) and streaming.
  • Recording: Use digital cameras or smartphones for capturing.
  • Editing Considerations:
    • Frame size (dimensions in pixels) and frame rate (number of images per second).
    • File size influenced by bit rate; compressing files can improve loading times.

Animation

  • Purpose: To capture attention, illustrate processes, and guide users on interaction through UX-driven animations.
  • Types of Animation:
    • Frame-by-frame: Changes made manually for each frame.
    • Tweening: Creates animations from initial and target frames automatically.
  • Tools:
    • Software examples include HTML5 Maker, Adobe Animate CC, and frameworks like GreenSock.

Animated GIFs

  • Definition: Single files with multiple image frames to create movement.
  • Usage: Popular for creating engaging content on platforms like Tumblr and Giphy.
  • Creation Steps:
    • Identify image sequences
    • Specify timing and looping settings.
    • Test for accessibility, avoiding flashing lights.
  • Optimization Techniques:
    • Plan effects and limit frames, reduce colors, and crop unnecessary pixels.

Interactivity

  • Definition: Facilitating two-way communication between publishers and visitors.
  • Key Features:
    • Include buttons, hidden menus, calls-to-action, and sticky content to encourage revisits.
    • Incorporate micro-interactions for feedback on actions taken.

UX-Driven Interactivity

  • Prioritize visitor needs through engaging design and simple navigation.
  • Ensure designs are optimized for touch screens and responsiveness.

Web-Based Form Guidelines

  • Forms enable user information submission through email or direct database entry.
    • Features: Text boxes, check boxes, option buttons, drop-down lists.
  • Best Practices:
    • Structure logically with clear labeling of required fields.
    • Use input masks for consistency.
    • Always send confirmation feedback post-submission,

Interactive Content Elements

  • Utilize scripting languages (JavaScript, PHP) to enhance engagement.
  • Widgets: Add small interactive objects (e.g., clocks, news feeds) to webpages.

Blogs and Comments

  • Monetization: Blogs can profit through ads and product links; track success using analytics.
  • Comments foster community interaction, requiring moderation and spam control to maintain quality.

Avatars and Live Chat

  • Avatars: Used for personalization across various web experiences from gaming to e-commerce.
  • Live Chat: Facilitates real-time interaction through text, voice, or video. Offers reactive and proactive support mechanisms.