((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) December 14, 2000
_____________________________SPONSORS_____________________________
This newsletter sponsored by: Inktomi, NetMechanic and BOT 2001 Seminar __________________________________________________________________
****************************************************************** Looking for a search solution for your corporate Intranet, public site, or portal? Put Inktomi's search solutions to the test by downloading a FREE 30-DAY TRIAL of the Inktomi Search Software at http://www.inktomi.com/search and find out why sites like Sun Microsystems, Hewlett Packard, IDG, CNN, AOL, MSN, and Excite@Home chose Inktomi. With Inktomi's Search solutions, you can outsource your search functionality or bring it in-house. ******************************************************************
http://www.webreference.com <- link to us today http://www.webreference.com/new/ <- newsletter home http://www.webreference.com/new/submit.html <- submit article
New this week on WebReference.com and the Web:
1. TWO CONTESTS: Signup & Win, Submit & Win! 2. FEATURED ARTICLE: Fonts and Style Sheets 3. NET NEWS: * RSS 1.0 Released * Remaking the Peer-to-Peer Meme * AIM Flaw Could Open Users' Computers to Attack * FTC approves AOL, Time Warner merger * Scour: Going, Going, Gone
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. TWO CONTESTS: Signup & Win, Submit & Win!
>Signup & Win!
Sign up for the Webreference Update newsletter, and you could win a killer software bundle from BoxTop Software and Insider Software including ProJPEG, SuperGIF, and SpaceAgent. Each week we'll draw new winners from our new subscribers - you could be next. Already a subscriber? Not a problem - just fill out the form, and you'll be automatically entered to win. Tell your friends!
http://www.webreference.com/new/contest.html
>Submit & Win Macromedia Dreamweaver 4 Fireworks 4 Studio!
Our Flash 5 Freehand 9 contest has come to an end, but don't worry! We still have more great software for all of the future authors out there. Submit your article today and you could win Macromedia's powerful Web development software, Dreamweaver 4 Fireworks 4 Studio. If your article makes the cut, and we publish it in this newsletter, you win! See the submission page for details:
http://www.webreference.com/new/submit.html
This week, Wes Reimer tells us about the very important difference in font displays on differing operating systems and browsers. A solution is easier than you might think, just follow this article and you'll be on your way!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. FEATURED ARTICLE: Achieving A Consistent Look and Readable Type Across Platforms
Any designer who's tested their site on another platform should know that different operating systems and browsers render fonts differently on the screen. If you aren't testing this way, you may not realize that what may look great on Internet Explorer 5 Windows, might look like hell on Netscape 4 for the Mac. Yes, the world is dominated by Windows, but around 20% of visitors to your site are probably using a different system.
When I first started designing Web sites on the Macintosh, I was often surprised at how big the text was when viewing my work on Windows. I never understood why until I discovered that Windows renders fonts at 96 dots per inch (dpi), whereas the Mac OS uses the standard 72 dpi. This means that a "12-point" font is 12 pixels high on a Mac screen (as it should be), but 16 pixels high on a Windows-based display. Thus, Web sites designed on Windows are often hard to read on the Mac, and sometimes even illegible.
This is not just a Mac issue. In Windows, Netscape Navigator displays text smaller than IE, even when you try to use absolute sizing with style sheets. To further complicate matters, the latest version of Internet Explorer for the Mac (5.0) compensates for the different dpi standards by automatically upsizing the text to match Windows!
If you're like me, you like to have absolute control over the look of your site. So how can you achieve a consistent look with legible type across platforms? The best solution I've found is to use a combination of style sheets, absolute-size TrueType fonts and server side includes or JavaScript redirect. It's easier than you think! Read on, and I'll explain. [Ed. note: Some usability experts discourage the use of fixed fonts and instead encourage relatively sized fonts that allow users, especially those with reading disabilities and on varying platforms, to increase font size for legibility.]
>Why TrueType?
In general, TrueType fonts are easier to read on the screen because they have built-in kerning and hinting which optimizes the type at almost any size. In contrast, PostScript Type 1 fonts are optimized for PostScript printers. The Type 1 version of "Times" at 12 points is the default font on Mac versions of Netscape, which can get pretty ugly and unreadable, especially in italics and small sizes.
Thankfully, certain TrueType fonts (such as Arial and Verdana) are now standard on both Mac and Windows. But you should always specify an alternative to the default font, and it should be TrueType. And if you like Times, specify "Times New Roman" so that you get the TrueType version. But don't use FONT tags! Instead, use Cascading Style Sheets (CSS). Not only is this the HTML 4.0 standard, but it paves the way for XML, separating content from style. Using CSS can also greatly reduce your file sizes and download times, because
<big class="red"></big>
is a lot shorter than
<big><b><font color="red" face="Arial, Helvetica, sans-serif"> </font></b></big>. ****************************************************************** NetMechanic Webmaster Tip: Create a Custom Error Document Do you rent space on someone else's Web server? Even if you do, you can still customize much of the server's behavior. It's easier than you might think. Learn how to change your Web server to use a custom error page. You can serve a page that has your Web site's look and feel, instead of the generic "404 - File Not Found" page. Learn How at: http://www.netmechanic.com/news/vol2/server_no6.htm ***********************************************************adv.***
>What's the best way to implement style sheets?
You should create a separate style sheet for each platform and/or browser, according on how much control you want to have. This is much easier than creating a different HTML file for each platform. Plus, if you want to quickly change the look of your site, you simply change the style sheet(s).
Here is an example of two different style sheets for Windows and Mac OS, stored in text files called "win.css" and "mac.css." These are simplified versions of style sheets I use on my site at http://www.stevestv.com
-- win.css --
td, th, p { font-family: Arial, Helvetica, sans-serif; font-size: 10pt }
.red { color: #CC0033 }
h2, big { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-weight: bold }
small { font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: #666666 }
-- mac.css --
td, th, p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt }
.red { color: #CC0033 }
h2, big { font-family: Arial, Helvetica, sans-serif; font-size: 18pt; font-weight: bold }
small { font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: #666666 }
There are several things you should take note of about these style sheets.
1. Different font sizes for Windows and Mac. The sizes are optimized for each platform. For example, the
<h2> tag is defined as 18-point Arial or Helvetica because 18 pt on the Mac is approximately equivalent to 14 pt in Windows. Plus, in case Arial isn't installed on the Mac, Helvetica (or the default font) will look half decent at 24 points because on the Mac, certain sizes of Type 1 fonts are optimized for the screen (usually 9, 10, 12, 14, 18, and 24).2. The font sizes are absolute (fixed). Specifying "24pt" or "24px" (pixels) means the user can't change the font size, unless they choose to override it in their browser settings or use their own style sheet.
3. Where possible, the style sheets redefine existing tags for compatibility with browsers that don't support CSS (such as iCab). For example, I use
<big> and<small> because those are relative tags which older browsers support (the text will be bigger or smaller, but not necessarily the ideal size).Finally, here's how to tell your page to use a different style sheet depending on the browser or platform. This can probably be done with JavaScript, but I found it easier to do with Server Side Includes, supported by most Web servers.
In the
<head> of your document, put something like this:
< !--#if expr="$HTTP_USER_AGENT = /Mac/ && $HTTP_USER_AGENT != /MSIE5/" --> < link rel="stylesheet" href="/includes/mac.css"> < !--#else --> < link rel="stylesheet" href="/includes/win.css"> < !--#endif --> Note: This example assumes your CSS files are in a directory called "includes."
Remember, IE 5 for Mac renders fonts at 96 dpi by default. So this SSI essentially says, "If this is a Mac, but not IE 5, load the Mac style sheet. Otherwise, load the Windows style sheet." If you wanted to load a different CSS file for Netscape, you would add another line that says, "If this is Windows and Netscape 4, load 'netwin.css'" (or whatever filename you gave it).
In a world dominated by Windows and Internet Explorer, it's tempting to just design for one platform and not bother with the rest. By doing that, however, you not only reinforce Microsoft's monopoly, but you risk alienating visitors to your site, and potential customers of your business. At a minimum you should test your site regularly on other platforms. I currently design on Windows and test my site using an excellent Mac emulator, Basilisk II. And if you've never tried style sheets, it's worth experimenting. The principles I've outlined can also be applied to other situations, such as making your site more compatible with wireless devices or WebTV.
For the full version of this article, including more examples, visit http://webreference.com/new/font/
****************************************************************** BOT 2001 Seminar* January 25th at The Fairmont, San Francisco Expert bot/intelligent agent developers, researchers and academics present the latest happenings and give specific information for cost effective solutions to improve business. A rare opportunity to network, share ideas, and put theory and research into practice. Register today - Save $100 if you sign up by December 20th! http://seminars.internet.com/bot/sf01/registration.html ***********************************************************adv.***
About the author:
Wes Reimer has been designing Web sites since 1996. He is currently the Webmaster at Steve's TV (http://www.stevestv.com ), an electronics retailer in Ontario, Canada. He loves to talk about fonts! Drop him a line at wes@stevestv.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3. NET NEWS: RSS 1.0 Released, Remaking the Peer-to-Peer Meme, AIM Flaw Could Open Users' Computers to Attack, FTC approves AOL, Time Warner merger, Scour: Going, Going, Gone
>RSS 1.0 Released
The RSS-DEV Working Group has released RDF Site Summary (RSS) 1.0. RSS is an XML-based lightweight multipurpose extensible metadata description and syndication format. RSS 1.0 features extensibility via modules based on XML-Namespace technology which lets content providers plug functionality into a basic syndication platform, saving time and effort, and ensuring compatibility. The RSS 1.0 Working Group consists of 12 members including our own Jonathan Eisenzopf. http://www.oreillynet.com/pub/a/mediakit/pressrelease/20001214.html http://www.egroups.com/files/rss-dev/specification.html http://www.egroups.com/group/rss-dev http://www.webreference.com/perl/ O'Reilly Network/Various, 001214
>Remaking the Peer-to-Peer Meme
An excerpt from the forth-coming book "Peer-to-Peer: Harnessing the Disruptive Potential of Collaborative Networking." Tim O'Reilly himself summarizes what was discussed at the recent Peer-to-Peer summit. He is attempting to reshape how people think about open source and P2P with innovative "meme maps" that help shape what outsiders think of these technologies. http://www.oreillynet.com/pub/a/p2p/2000/12/05/book_ch01_meme.html O'Reilly Network, 001205
>AIM Flaw Could Open Users' Computers to Attack
Security consulting and research firm @stake issued an advisory about a vulnerability in AOL Instant Messenger that could allow an attacker to take control of a user's computer. http://www.internetnews.com/wd-news/article/0,,10_534531,00.html InternetNews.com, 001213
>FTC approves AOL, Time Warner merger
The Federal Trade Commission on Thursday voted unanimously to approve the $109 billion merger between America Online and Time Warner. http://news.cnet.com/news/0-1005-200-4149427.html CNet.com, 001214
>Scour: Going, Going, Gone
The assets of Scour Inc., the bankrupt online search engine and file-sharing company, were auctioned off Tuesday in federal bankruptcy court. CenterSpan Communications walked off with the prize on its winning bid of $9 million. http://www.wired.com/news/business/0,1367,40632,00.html Wired.com, 001212
****************************************************************** WHERE IS THE MOST COMPREHENSIVE ADMINISTRATOR SITE ON THE WEB? Swynk.com - It provides the single largest independent resource for Microsoft-related BackOfficeä and Windows DNA Server Technologies. You'll find information on SQL Servers. Exchange, SMS, Windows 2000 and more. Sign up for FREE newsletters or join a discussion forum. http://www.swynk.com/ ******************************************************************
That's it for this week, see you next time.
Andrew King Managing Editor, WebReference.com update@webreference.com
Catherine Levy Assistant Editor, WebReference.com clevy@internet.coml.©..
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ For information about advertising in this newsletter, contact Frank Fazio, Director of Inside Sales, Jupitermedia Corp. Call (203)662-2997 or write mailto:ffazio@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a internet.com Commerce Partner, contact, David Arganbright, Vice President, Commerce and Licensing, (203)662-2858
mailto:commerce-licensing@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
This newsletter is published by Jupitermedia Corp. http://internet.com - The Internet Industry Portal ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ To learn about other free newsletters offered by internet.com or to change your subscription - http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ internet.com's network of more than 100 Websites are organized into 14 channels... Internet Technology http://internet.com/sections/it.html E-Commerce/Marketing http://internet.com/sections/marketing.html Web Developer http://internet.com/sections/webdev.html Windows Internet Technology http://internet.com/sections/win.html Linux/Open Source http://internet.com/sections/linux.html Internet Resources http://internet.com/sections/resources.html Internet Lists http://internet.com/sections/lists.html ISP Resources http://internet.com/sections/isp.html Downloads http://internet.com/sections/downloads.html International http://internet.com/sections/international.html Internet News http://internet.com/sections/news.html Internet Investing http://www.internet.com/sections/stocks.html ASP Resources http://internet.com/sections/asp.html Wireless Internet http://internet.com/sections/wireless.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Copyright (c) 2000 Jupitermedia Corp. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~