- •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
124 WHO: The Obligatory Glossary: Web Lingo
Some companies have a dozen different titles for designers with slightly different jobs; other companies slap one title on everybody, and often enough the title makes little intuitive sense. Orange you Grey we’ve provided this little chapter to help you navigate the twin minefields of Internet buzzwords and ever-changing job titles? You bet you are. (Our apologies to Grey Advertising, consultants everywhere, and People for the Ethical Treatment of Animals, whom we haven’t offended but just felt like mentioning because it’s a good cause. Besides, if we don’t mention it here, our cats will claw our eyes out—and they can do it.)
WEB LINGO
Extranet
An extranet is a private network of computers that is created by connecting two or more intranets or by exposing an intranet to specific external users and no one else. Business-to-business collaboration often uses extranets.
In English: Extranets are websites that allow Company A to interact with Company B, and Special Customer C to interact with either or both—pretty kinky stuff. As a web designer, you may never be called upon to design an extranet. (If you are, it’s the same thing as designing a website. We’re sorry to bore you with these tedious distinctions, but that’s our job in a section like this. We hear the American Movie Classics cable network is hosting an Alfred Hitchcock retrospective. Maybe you should go watch it until this chapter blows over.)
On the other hand, the Business-to-Business (B2B) category is one of the largest growth areas of the Web, so you may find yourself stuck, er, asked to design extranet sites anyway.
Websites are websites whether they’re designed for the general public or for private businesses. However, because extranets are business-oriented, they tend to be more like software and less like magazines or television. In other words, the challenges are closer to industrial design and technical design and further from the consumer-oriented design many of us are used
Taking Your Talent to the Web |
125 |
to. In still other words, this type of design work is not for everybody, though some designers adore and excel at it. (Excel is a trademark of Microsoft, and even though we didn’t use it in that context in the preceding sentence, their lawyers read everything.)
HTML
Hypertext Markup Language (HTML) is an application of Standard Generalized Markup Language (SGML) and is used to construct hypertext documents (web pages).
In English: HTML is to web pages what PostScript is to print. But while PostScript is a complex programming language, best handled behind the scenes by software such as Illustrator and Quark XPress, HTML is a simple markup language best written by human beings. HTML breaks content down into structural components, much as an outline does.
The simplicity of HTML makes it easy to learn, but that simplicity also can be limiting. Soon, many sites will be built with more advanced tools, such as Extensible Markup Language (XML). You need not concern yourself with that now. Later on in this book we will show you what HTML is, how to use it correctly, and how to employ it creatively. See Chapter 8, “HTML: The Building Blocks of Life Itself.”
Hypertext, hyperlinks, and links
For additional information, refer to the section titled, “Website” later in this chapter.
Internet
The Internet is a worldwide networking infrastructure that connects all variety of computers together. These connections are made via Internet protocols including (surprise, surprise) Internet Protocol (IP), Transport Control Protocol (TCP), and User Datagram Protocol (UDP). IP is used for addresses, TCP is used to manage sockets (and hence the Web), and UDP is used to manage Domain Name Servers (DNSs). See Chapter 4, “How This Web Thing Got Started,” for further explanation.
126 WHO: The Obligatory Glossary: Web Lingo
In English: The Internet is to the Web as cable networks are to television or as phone cables and switching stations are to your Uncle Marvin, who always phones while you’re away on vacation and then resents you for not returning his call the very next day. The Internet is a combination of hardware (computers linked together) and software (languages and protocols that make the whole thing work).
As a web designer, all you need to keep in mind is that you’re not only communicating with readers and viewers (“users” if you must), you’re also creating work that must fit into formats appropriate to Internet technology. In other words, it’s not your job to manage networks (for instance) as long as you understand their implications for your work—such as bandwidth and cross-platform issues. See Chapter 2, “Designing for the Medium.”
Intranet
An intranet is an internal or private networking infrastructure that uses Internet technologies and tools. Unlike what occurs on the Internet, only computers on the private physical network can access an intranet.
In English: As a web designer, in addition to creating sites for the public, you also might be called upon to create intranet sites, which are nothing more than websites for private companies. For instance, AT&T not only has websites for the public, it also has thousands of private intranet sites where its employees can communicate with each other, schedule appointments, keep track of company policies, and so on.
One other difference worth noting is that when you’re designing an Internet site, it has to be usable by anyone in the world—Netscape, Opera, IE, and iCab users; 6.0 browser users as well as 2.0 browser users; the blind and the not-blind; WebTV users and AOL users alike. You get the picture. On an intranet site, by contrast, all visitors may be using the same web browser and computing platform, which can simplify some of your design choices.
Of course, even in such circumstances, it is best to design with open standards so that your client will not be locked into restrictive choices. For instance, if you had designed an intranet for a network of Netscape 4 users
Taking Your Talent to the Web |
127 |
in 1998, you might have built the entire site using Netscape’s proprietary LAYERS technology. But with Navigator 6, Netscape stopped supporting LAYERS in favor of W3C standards. Had you designed specifically for Netscape’s previous browser, your site would not work when the client upgraded browsers. Clients dislike that sort of thing, even when they are the ones who insisted on using a specific technology. Proceed with caution.
Additionally, if all the site’s users are connected via a local network, you can make bold use of bandwidth-intensive technologies such as streaming video. When designing for the Web, you need to worry about bandwidth. Full-screen video is out; smaller video images and heavily compressed audio might be okay. For more on this fascinating topic, see Dave Linabury’s
“The Ins and Outs of Intranets” at www.alistapart.com/stories/inout/.
JavaScript, ECMAScript, CSS, XML, XHTML, DOM
In English: Additional languages of the Web.
Briefly: JavaScript is a programming language that enables designers or developers to build dynamic interactivity into their sites, further separating the Web from print. ECMAScript is a standardized version of JavaScript. See Chapter 11, “The Joy of JavaScript,” for more particulars on this topic.
Cascading Style Sheets (CSS) is a standard that enables designers to control online layout and typography. Like HTML, its basics are extremely easy to learn, though its subtleties elude many designers (as well as many browsers). See Chapter 10, “Style Sheets for Designers.”
XML is a simplified version of SGML, designed for use on the Net. As of this writing, it is most often used to deliver database-independent query results between incompatible software applications. It is not yet universally supported in web browsers, though XML 1 is fully supported in Netscape 6, and much of it is supported in IE5 and Opera 5. As a web designer, at least for the next few years, you will hear about and see XML, but you will not be called upon to create it—unless you begin marking up your web pages in
Extensible Hypertext Markup Language (XHTML).