Chapter 0 • Outline

Chapter 1 • Introduction

• What is a Screen Image?
  • Bitmapped image—pixels, resolution (Figure 1-1)
  • Resolution for screen—Common screen sizes
    • 1920×1080 is maximum size and used by 20% of viewers
    • 1024px looks like letter-sized paper viewed at 30cm
• How do photographs appear on screens?
  • News sites
  • Catalogs sites
  • Marketing sites
  • Ebooks
• How to Think About Screen Images
  • photos and text—which is more important?
  • text heavy documents—marketing, history, novels, non-fiction
  • photo-heavy documents—photo sites, travel, recipes

Chapter 2 • Text and Photos

• Types of web sites
  • fixed-width site—looks like paper, book, magazine; easy to read (Figure 2-1 )
  • variable-width site—expands to fill screen, dramatic (Figure 2-2)
• Types of eBooks
  • reflowable ePub (Figure 2-3)
    • text reflows to adapt to screen size and orientation
    • readers can select type style and size for legibility/accessibility
    • best for text-heavy documents
    • photos and design effects (ornaments, drop-caps, sidebars, callouts) are a bonus
    • photos are limited to page width but can be linked to be expandable
  • fixed-layout ePub (Figure 2-4)
    • not reflowable, potentially less legible/accessible
    • best for eBooks where photos and layout are equally important

Chapter 3 • Designing a Web Site

• Fixed-width (Figure 3-1)
  • widths in pixels (px)
  • accessibility/responsive design: max-width
• Variable width (Figure 3-2)
  • widths in %, vw (viewport width), vh (viewport height)
  • image as background
• Design exercise
  • notes from Google Drive

Chapter 4 • Designing an ePub

• Reflowable (ePub-RFL) (Figure 4-1)
• Fixed Layout (ePub-FXL) (Figure 4-1)
• Design exercise
  • notes from Google Drive