- •Taking Your Talent to the Web
- •Introduction
- •1 Splash Screen
- •Meet the Medium
- •Expanding Horizons
- •Working the Net…Without a Net
- •Smash Your Altars
- •Breath Mint? Or Candy Mint?
- •Where’s the Map?
- •Mars and Venus
- •Web Physics: Action and Interaction
- •Different Purposes, Different Methodologies
- •Web Agnosticism
- •Point #1: The Web Is Platform-Agnostic
- •Point #2: The Web Is Device-Independent
- •The 18-Month Pregnancy
- •Chocolatey Web Goodness
- •’Tis a Gift to Be Simple
- •Democracy, What a Concept
- •Instant Karma
- •The Whole World in Your Hands
- •Just Do It: The Web as Human Activity
- •The Viewer Rules
- •Multimedia: All Talking! All Dancing!
- •The Server Knows
- •It’s the Bandwidth, Stupid
- •Web Pages Have No Secrets
- •The Web Is for Everyone!
- •Swap text and code for images
- •Prune redundancy
- •Cache as Cache Can
- •Much Ado About 5K
- •Screening Room
- •Liquid Design
- •Color My Web
- •Thousands Weep
- •Gamma Gamma Hey!
- •Typography
- •The 97% Solution
- •Points of Distinction
- •Year 2000—Browsers to the Rescue
- •Touch Factor
- •Appropriate Graphic Design
- •User Knowledge
- •What Color Is Your Concept?
- •Business as (Cruel and) Usual
- •The Rise of the Interface Department
- •Form and Function
- •Copycats and Pseudo-Scientists
- •Chaos and Clarity
- •A Design Koan: Interfaces Are a Means too Often Mistaken for an End
- •Universal Body Copy and Other Fictions
- •Interface as Architecture
- •Ten (Okay, Three) Points of Light
- •Be Easily Learned
- •Remain Consistent
- •Continually Provide Feedback
- •GUI, GUI, Chewy, Chewy
- •It’s the Browser, Stupid
- •Clarity Begins at Home (Page)
- •I Think Icon, I Think Icon
- •Structural Labels: Folding the Director’s Chair
- •The Soul of Brevity
- •Hypertext or Hapless Text
- •Scrolling and Clicking Along
- •Stock Options (Providing Alternatives)
- •The So-Called Rule of Five
- •Highlights and Breadcrumbs
- •Consistent Placement
- •Brand That Sucker!
- •Why We Mentioned These Things
- •The year web standards broke, 1
- •The year web standards broke, 2
- •The year web standards broke, 3
- •The year the bubble burst
- •5 The Obligatory Glossary
- •Web Lingo
- •Extranet
- •HTML
- •Hypertext, hyperlinks, and links
- •Internet
- •Intranet
- •JavaScript, ECMAScript, CSS, XML, XHTML, DOM
- •Web page
- •Website
- •Additional terminology
- •Web developer/programmer
- •Project manager
- •Systems administrator (sysadmin) and network administrator (netadmin)
- •Web technician
- •Your Role in the Web
- •Look and feel
- •Business-to-business
- •Business-to-consumer
- •Solve Communication Problems
- •Brand identity
- •Restrictions of the Medium
- •Technology
- •Works with team members
- •Visually and emotionally engaging
- •Easy to navigate
- •Compatible with visitors’ needs
- •Accessible to a wide variety of web browsers and other devices
- •Can You Handle It?
- •What Is the Life Cycle?
- •Why Have a Method?
- •We Never Forget a Phase
- •Analysis (or “Talking to the Client”)
- •The early phase
- •Design
- •Brainstorm and problem solve
- •Translate needs into solutions
- •Sell ideas to the client
- •Identify color comps
- •Create color comps/proof of concept
- •Present color comps and proof of concept
- •Receive design approval
- •Development
- •Create all color comps
- •Communicate functionality
- •Work with templates
- •Design for easy maintenance
- •Testing
- •Deployment
- •The updating game
- •Create and provide documentation and style guides
- •Provide client training
- •Learn about your client’s methods
- •Work the Process
- •Code Wars
- •Table Talk
- •XHTML Marks the Spot
- •Minding Your <p>’s and q’s
- •Looking Ahead
- •Getting Started
- •View Source
- •A Netscape Bonus
- •The Mother of All View Source Tricks
- •Doin’ it in Netscape
- •Doin’ it in Internet Explorer
- •Absolutely Speaking, It’s All Relative
- •What Is Good Markup?
- •What Is Sensible Markup?
- •HTML as a Design Tool
- •The Frames of Hazard
- •Please Frame Safely
- •Framing Your Art
- •<META> <META> Hiney Ho!
- •Search Me
- •Take a (Re)Load Off
- •WYSIWYG, My Aunt Moira’s Left Foot
- •Code of Dishonor
- •WYS Is Not Necessarily WYG
- •Publish That Sucker!
- •HTMHell
- •9 Visual Tools
- •Photoshop Basics: An Overview
- •Comp Preparation
- •Dealing with Color Palettes
- •Exporting to Web-Friendly Formats
- •Gamma Compensation
- •Preparing Typography
- •Slicing and Dicing
- •Rollovers (Image Swapping)
- •GIF Animation
- •Create Seamless Background Patterns (Tiles)
- •Color My Web: Romancing the Cube
- •Dither Me This
- •Death of the Web-Safe Color Palette?
- •A Hex on Both Your Houses
- •Was Blind, but Now I See
- •From Theory to Practice
- •Format This: GIFs, JPEGs, and Such
- •Loves logos, typography, and long walks in the woods
- •GIFs in Photoshop
- •JPEG, the Other White Meat
- •Optimizing GIFs and JPEGs
- •Expanding on Compression
- •Make your JPEGS smaller
- •Combining sharp and blurry
- •Animated GIFs
- •Creating Animations in ImageReady
- •Typography
- •The ABCs of Web Type
- •Anti-Aliasing
- •Specifying Anti-Aliasing for Type
- •General tips
- •General Hints on Type
- •The Sans of Time
- •Space Patrol
- •Lest We Fail to Repeat Ourselves
- •Accessibility, Thy Name Is Text
- •Slicing and Dicing
- •Thinking Semantically
- •Tag Soup and Crackers
- •CSS to the Rescue…Sort of
- •Separation of Style from Content
- •CSS Advantages: Short Term
- •CSS Advantages: Long Term
- •Compatibility Problems: An Overview
- •Working with Style Sheets
- •Types of Style Sheets
- •External style sheets
- •Embedding a style sheet
- •Adding styles inline
- •Fear of Style Sheets: CSS and Layout
- •Fear of Style Sheets: CSS and Typography
- •Promise and performance
- •Font Size Challenges
- •Points of contention
- •Point of no return: browsers of the year 2000
- •Absolute size keywords
- •Relative keywords
- •Length units
- •Percentage units
- •Looking Forward
- •11 The Joy of JavaScript
- •What Is This Thing Called JavaScript?
- •The Web Before JavaScript
- •JavaScript, Yesterday and Today
- •Sounds Great, but I’m an Artist. Do I Really Have to Learn This Stuff?
- •Educating Rita About JavaScript
- •Don’t Panic!
- •JavaScript Basics for Web Designers
- •The Dreaded Text Rollover
- •The Event Handler Horizon
- •Status Quo
- •A Cautionary Note
- •Kids, Try This at Home
- •The Not-So-Fine Print
- •The Ever-Popular Image Rollover
- •A Rollover Script from Project Cool
- •Windows on the World
- •Get Your <HEAD> Together
- •Avoiding the Heartbreak of Linkitis
- •Browser Compensation
- •JavaScript to the Rescue!
- •Location, location, location
- •Watching the Detection
- •Going Global with JavaScript
- •Learning More
- •12 Beyond Text/Pictures
- •You Can Never Be Too Rich Media
- •Server-Side Stuff
- •Where were you in ‘82?
- •Indiana Jones and the template of doom
- •Serving the project
- •Doing More
- •Mini-Case Study: Waferbaby.com
- •Any Size Kid Can Play
- •Take a Walk on the Server Side
- •Are You Being Served?
- •Advantages of SSI
- •Disadvantages of SSI
- •Cookin’ with Java
- •Ghost in the Virtual Machine
- •Java Woes
- •Java Woes: The Politically Correct Version
- •Java Joys
- •Rich Media: Exploding the “Page”
- •Virtual Reality Modeling Language (VRML)
- •SVG and SMIL
- •SMIL (through your fear and sorrow)
- •Romancing the logo
- •Sounds dandy, but will it work?
- •Promises, Promises
- •Turn on, Tune in, Plug-in
- •A Hideous Breach of Reality
- •The ubiquity of plug-ins
- •The Impossible Lightness of Plug-ins
- •Plug-ins Most Likely to Succeed
- •Making It Work: Providing Options
- •The “Automagic Redirect”
- •The iron-plated sound console from Hell
- •The Trouble with Plug-ins
- •If Plug-ins Run Free
- •Parting Sermon
- •13 Never Can Say Goodbye
- •Separation Anxiety
- •A List Apart
- •Astounding Websites
- •The Babble List
- •Dreamless
- •Evolt
- •Redcricket
- •Webdesign-l
- •When All Else Fails
- •Design, Programming, Content
- •The Big Kahunas
- •Beauty and Inspiration
- •Index
212 HOW: Visual Tools: Color My Web
GIF Animation
On the Web, images need not be static. Animated GIFs create the illusion of motion without requiring visitors to download and install third-party add-ons such as Flash, Shockwave, or the Adobe SVG plug-in (not that there’s anything wrong with Flash, Shockwave, or SVG, all of which are discussed in Chapter 12, “Beyond Text/Pictures”).
GIFs can contain more than one image, and the format was originally prized for its utility as a kind of multiple image storehouse. In the mid1990s, some smart soul figured out that these multiple images could be
“played” in sequence, creating the illusion of motion. The animated GIF was born, and the Web has never fully recovered. Photoshop’s ImageReady module enables you to easily create GIF animations. These can be freestanding, but might just as easily be incorporated into rollovers.
Create Seamless Background Patterns (Tiles)
These patterns or tiles formed a staple of web design in its early years. Many were downright ugly, and few appear in today’s sophisticated sites, but the technique can still prove useful when creatively reimagined by web designers with taste.
From this brief overview, it should be clear that the Photoshop/ImageReady combo is a powerful tool for web designers. Basically, with Photoshop and your HTML editor of choice, you can perform almost any web task.
Now let’s look at some problems peculiar to web design and see how you can solve them with Photoshop and ImageReady.
COLOR MY WEB: ROMANCING THE CUBE
Glance back at Chapter 2 for a refresher on the 216 color palette—or the Netscape Color Cube.
Designers work with computers that support millions of colors. But most web users are limited to thousands (or hundreds) of colors, and your design must work well in these environments.
Taking Your Talent to the Web |
213 |
Monitors limited to thousands of colors (16 bits) might seem to display realistic color, but it is never the actual color specified by the web designer. For mathematical reasons, colors shift slightly “off” in the 16-bit color space. This problem is insoluble and will haunt you like Jacob Marley’s ghost until cheap 24-bit graphics cards find their way into most PCs and vendors ship them configured to use the higher resolution and bit depth. (One of the tragic stupidities of the computer industry is that computers that can display millions of colors come configured to show thousands; those that can show thousands come configured to show hundreds, and so on. It’s tragic because ordinary citizens rarely realize that they can increase their PC’s graphic power with a quick trip to the appropriate control panel.)
Eight-bit (256 color) systems face an additional problem in that up to 40 of these 256 colors are “used up” in advance by the operating system itself. For instance, Windows reserves 40 (count ‘em) Windows system colors for its own display purposes. Knowing Windows, we should be glad it’s only 40. Nevertheless, that leaves exactly 216 colors at your disposal. (And GIF, as an “indexed” file format, only supports 255 colors anyway, two of which— black and white—are always present.)
What happens to viewers with lower-end graphics capabilities when you design with millions of colors they can’t see? The browser tries to simulate your color choices by combining adjacent pixels of color the visitor can see. This visual side effect is known as dithering, a verb that also means “babbling inconsequentially,” which is kind of what we’re doing here.
Dither Me This
You’ve chosen a subtle shade of off-white for your typography. The viewer’s graphics processor cannot reproduce that exact color, so the web browser breaks up your type into a series of adjoining pink and white pixels. If the viewer squints, she will get an approximation of the color you intended to use (see Figure 9.1).
214 HOW: Visual Tools: Color My Web
Figure 9.1
The toothpaste may get teeth their whitest, but it doesn’t do much for
this off-white typographic headline. On 8-bit systems, the type gets pixellated, and we suspect the web designer will, too. (Image enlarged 200%.)
Figure 9.2
With the typography recast in web-safe white (#ffffff), the headline is no longer pixellated, increasing the chances that it will actually be read. The background image is still dithered, but users of 8-bit systems will accept that. (Image enlarged 200%.)
In small, transitional areas, dithering is okay. But when it occurs across large areas of solid color—or when it is visible in the primary letterforms of typography—the result will be visually hideous, and legibility can be seriously impaired. (Usability experts and web artists alike can agree that hideous, illegible type is not a good thing.)
Because the discrepancy between computers’ graphic capabilities is so enormous, it initially seems as though it would be impossible for a designer to create web pages that do not dither and degrade on most viewers’ monitors. The Color Cube saves the day (see Figure 9.2).
For typography, CSS or HTML background colors, or any other area of large,
flat color, if you stick to the web-safe color palette, you will avoid causing dithering and its resulting illegibility and aesthetic problems on 8-bit systems. As explained in Chapter 2, the practice will not help those with 16bit systems, but nothing can save those folks except a graphics card upgrade in their future.
Taking Your Talent to the Web |
215 |
Death of the Web-Safe Color Palette?
Creative people complain about everything. Web designers certainly complain about being limited to 216 web-safe colors, but to us this is like griping about the nip in the air while enjoying the scenic beauty of rustic New England. You want fall foliage, so put on an extra sweater.
Lulled by the music of these constant complaints, pundits perennially proclaim the death of the web-safe color palette, usually on the grounds that 16-bit systems enjoy a major market share. That 16-bit systems are widely used is undeniable: They are installed in 46% of PCs as of this writing. That the web-safe color palette is therefore dead is wishful thinking.
The web-safe color palette cannot die as long as it continues to solve problems for millions of web users. It does not solve every problem, but neither does penicillin, and nobody talks about the death of penicillin. We bring this up now because you will hear about it at the office and read about it in web design newsletters, mailing lists, and bulletin boards.
Who spreads these obituaries? Sometimes it’s information architects and interface developers who conduct meaningful research but draw debatable conclusions from their data. The Webmonkey article, “Death of the Web Safe Color Palette?" (http://hotwired.lycos.com/webmonkey/00/37/ index2a.html), proves beyond all doubt that 16-bit systems are hopelessly inadequate and invariably reveal the rabbits hiding in a web magician’s hat. But the article nihilistically concludes that all color palettes and traditional methods are meaningless in the chaos of the Web; whereas we judge simply that 16-bit users are hosed until they upgrade. Not long ago, 16-bit color was considered luxurious; cheap graphics cards changed the market, and the next generation of cheap 24-bit cards will change it again.
Few discussions of the topic have been as carefully researched as Webmonkey’s. The death of the web-safe color palette is generally announced by the same people who tell us that bandwidth no longer matters because
“everybody” will “soon” enjoy high-speed access. These folks often go on to proclaim that presently every site will be pumping out full-screen video productions to rival Hollywood blockbusters.