- •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
166 WHO: Riding the Project Life Cycle: We Never Forget a Phase
For you, this means titling the logo image “logo.gif” instead of “uglyswirlwithstupidbevel.gif,” calling the November header graphic “nov_head.gif,” and so on. For the web technician (or you, if you write your own HTML), this means naming the disclaimer page “disclaimer.html,” storing images in a single directory labeled “Images,” and so on.
If care is taken throughout the development process, then updating and maintaining the site will be easy and logical, whether updates are performed by you, a production person, or your client.
Testing
Though a web development team will test its product throughout the project life cycle, many web projects plan for a distinct testing phase. In this phase, the development team has the opportunity to test the deliverable against the design and functionality specifications.
In some cases, real users may test a site. In other cases, a specially trained testing team will do the job. Testing by real users usually tells you more about the site. We often get the most useful feedback by showing work to the guys who deliver sandwiches. Be elitist in choosing typefaces but democratic in designing interfaces. The Web is for people, not for experts.
Regardless of the testing technique involved, team members must work together to track down the source of problems and implement solutions.
We guarantee that there will be problems. For one thing, no two web browsers interpret code and markup exactly the same way (see Chapter 2). For another, what seems clear to you may be baffling to the people who use your site. Web designers tend to live two years ahead of the curve; web users, who actually have lives, tend to live behind the curve. You know that little rotating box takes visitors back to the home page; visitors may not. Testing will reveal problems in browser compatibility and user acceptance; then it’s up to you and your team to solve those problems.
Deployment
You’ve completed the site. The client has signed off on it. The files have been transferred to the web server. Think you’re finished? Not quite yet. Successful projects demand a smooth transition from the web team to the client.
Taking Your Talent to the Web |
167 |
The updating game
In the early days, clients viewed the web designer as a species of magician. They knew they had to have a web presence, whatever that meant, and they felt that you held their fate in your hands. Not only were they eager to approve what you created (because it was all magic to them), they also were more than willing to retain you as the perpetual updater and refresher of their online identity.
Then came FrontPage, GoLive, and Dreamweaver—tools that theoretically let “anybody make a website,” whether they knew what they were doing or not. Now, the possession of FrontPage does not turn your client into a web designer any more than ownership of a Roland Drum Machine turns the neighbor’s kid into Keith Moon. But the ability to generate HTML, the language with which web pages are created, has convinced too many clients that they can save a buck or two by purchasing one of these web-editing tools and updating their sites themselves. The results are often disastrous, for reasons that will be obvious to any creative professional, but incomprehensible to many clients, whose esthetic sensibilities have been shaped by cooking up pie charts in PowerPoint. Not that we’re bitter.
There are several ways to manage the transition. In one of the better scenarios, you’ve designed a database-generated site for a large client with much money and created a custom publishing tool enabling them to add fresh content to the mix without befouling the site.
Alternatively, instead of providing clients with a custom publishing tool, you might hook them up with an existing product, such as Zope (www.zope.org) or Allaire Spectra (www.allaire.com). Some of these tools use standard web languages such as HTML and XML; many use custom markup and are part of larger proprietary product families. Some are simple enough for a client to use; others require considerable developer involvement, which is one way of keeping your finger in the pie—if that’s your idea of fun. What you gain in billings you may lose in IT people, who quit from the frustration of continually guiding clients through complex processes requiring specialized knowledge. This, however, is your boss’s worry, not yours (unless you own the web agency).
168 WHO: Riding the Project Life Cycle: We Never Forget a Phase
In still other cases, your client will assign an in-house person or team to take over the site. Sometimes these folks are in-house designers with solid web experience. Sometimes they’re overworked marketers with a copy of FrontPage.
Regardless of how the site is updated and by whom, in this final phase of development, you get one more opportunity to preserve your work and serve your client by creating documentation, providing client training, and maintaining contact on a consulting basis.
Create and provide documentation and style guides
“Care and Feeding” instructions accompany everything from puppies to houseplants, and websites demand the same loving attention. It is important to provide the client with detailed notes on the location of files, the fonts and color palettes used, photographers or illustrators involved, and so on.
As more and more clients plunge into the business of updating their own sites, it is vital to provide them with every possible scrap of information. If you don’t take pains with this postpartum part of the process, your client may paint a moustache on your Mona Lisa or send visitors running for their lives when a Style Sheet or JavaScript file is accidentally deleted.
Remember: A book design is a book design, a finished ad is a finished ad, but a website is never finished, and the client can always louse it up. Do everything in your power to save your clients from themselves.
By the way, such documentation should be created even if the web agency retains control of the project (including updating and maintenance). After all, six months from now, do you really want to scratch your head trying to remember which font you used, where your navigational menu graphics were stored, or which script was responsible for a given function? Of course not. This documentation will be easier to create, and the site will be easier to update if you’ve followed the advice given earlier in this chapter and designed for easy maintenance by establishing and following logical naming and structural conventions.
Taking Your Talent to the Web |
169 |
Provide client training
Sometimes it is enough to tell your clients which fonts and colors you used. Sometimes it is enough to tell your children not to play with matches. Usually, it is not enough. That’s why, whenever possible, the designer and other team members should have after-meetings to discuss the site in detail and provide as much client training as possible.
Besides helping the client avoid ruining a beautiful site, in-house training also sends the message that your company cares. Clients who know you care will come back with additional projects and will tell their friends on the golf course about the integrity of your company.
If your clients are going to be writing HTML or (bless us) creating new images, it is worth sitting down with them, at their computer or yours, and pointing out the fine nuances of what you’ve done. You might even buy fonts for them (matching the fonts you used), install the fonts on the client’s computer, and show them how to work with Extensis Suitcase or Adobe Type Manager Deluxe.
You may feel ludicrous doing this, especially if the client is not a graphic designer, but it’s foolish to underestimate other people’s creative potential. Besides, if they’re going to do the work anyway, you owe them and yourself every possible assistance.
This whole thing is fairly unsavory, we’re afraid. It’s rather like a dentist training patients to extract their own teeth, but it is an aspect of the business, and coping is better than lamenting.
Learn about your client’s methods
Training is often bi-directional. While explaining your methods to an inhouse peer (or turning a client into a junior web designer of sorts), you also should learn as much as you can about the way your client will work with the site. If possible, you should learn about the software your client will be using. It’s highly unlikely that your client will create HTML and other web markup by hand. Fortunately, the number of WYSIWYG web editors considered good enough to use is fairly limited, so you can learn the basics and pitfalls of your client’s software of choice even if you never touch the stuff yourself.