 |
Web Site Design Guide
|
 |
Michael Scaramozzino’s Interview for
|
|
|
The best way to make a site universally recognized, across multiple platforms and multiple browsers, is to keep it simple. Try to stick with the most basic HTML that you can. Use simple tables for layout purposes rather than layers which are not currently uniformly implemented. Use level 1 cascading style sheets to define the look of the page elements. Use the CSS style sheet to define exactly how each HTML element should look, including what font and font sizes they should be rendered with.
When first learning to create Web pages, I recommend writing them by hand in HTML. That’s the only way to really understand what’s going on behind the scenes. Once you have a good grasp of the underlying HTML however, I then recommend moving up to a Web page editor which takes most of the drudgery out of the process, but still allows you to edit the underlying HTML when necessary. At DreamLight, we create all our Web sites with Macromedia Dreamweaver and BBEdit on the Macintosh. We then test the sites in Netscape Navigator and Internet Explorer on both Macintosh and Windows systems. We use Dreamweaver to help manage a site by using templates, library items and cascading style sheets. Dreamweaver’s round trip HTML is fantastic. It enables us to freely edit and change the HTML when necessary, without worrying about Dreamweaver rewriting our changes. Some WYSIWYG editors don’t allow you to edit the code and some let you edit it but then they remove your changes if you feed the page back into the editor. With Dreamweaver we can be confident that our HTML changes will remain intact.
If you wish your colors to remain smooth and undithered when viewed on monitors set to 256 colors, then you should stick to colors that are part of what’s called the Web palette. Any Web page editor should include a Web palette for easy reference. Our DreamLight PixelPalettes also include a Web safe palette for use with most image editing software. If your page is intended to be printed, then you should stick with a white or very light background with very dark text. If you instead use light text on a dark background, users will have to enable background printing in their browser to be able to read the printouts and end up wasting a lot of ink or toner. Dark text on a light background is also much easier to read than light text on a dark background which is why modern computers use black on white for word processing rather than light type on black, the way old fashioned computer terminals did. If you are defining your own link colors, I suggest using a more noticeable color for the active link color and a more subtle color for the visited link. Once a user visits a link, it is no longer as important as an unvisited link. Also avoid any subtle color variations and stick with high contrast. No two computer monitors or viewing conditions are exactly the same. Something that looks nice and subtle on your monitor may be completely invisible on someone else’s monitor.
As a starting point for a large photograph or illustration, I’d keep it about 400x300 pixels and save it as a JPEG file with about 75% quality. Then adjust the size and/or quality until you are satisfied. If the image is more graphic in nature and uses a more limited palette, then I’d save it as a GIF image. Photoshop has an excellent Web export feature which lets you view and compare the same image in multiple formats and settings to decide which to use. I generally try to keep most images under 100K and keep the number of large images per page to a minimum. If you have many large images to show, then use a thumbnail page where the user can see small thumbnails of the images and then select which one they’d like to view larger. The user will generally be more patient waiting for an image to load that they specifically chose to view. Images that automatically download with a page should be kept as small as possible since the user must wait for them to download before they can go on. Also, use interleaved or progressive images whenever possible for large images. That way, the user can often tell what they are looking at before the image has completely loaded, giving the appearance of faster loading.
The video gamma (value scale of brightness) of the Macintosh and Windows is completely different. The Macintosh video gamma is 1.8 which allows good shadow detail. Windows video gamma is 2.2 which does not provide good shadow detail. So if you have subtle detail in the dark range of your image on a Mac, it will appear completely black under Windows. The PNG graphics format can include gamma information so that the same image looks as intended across platforms. But to date, it has not been widely supported or used. Some browsers partially support it, some don’t. In the future, if all browsers fully support PNG then that would be the perfect solution. Until that time, the best approach is to compromise and adjust all your images to use a gamma midway between the Macintosh and Windows. That way your images will look slightly light on a Mac and slightly dark under Windows, but generally OK on both. You can use JPEG if the image is photographic in nature or GIF if it’s more graphic in nature. For more in-depth discussions of all the possible Web image formats and their uses, please refer to the WWW Graphics page of this DreamLight Insight.
Keep your fonts to the basics. Stick with Helvetica/Arial for sans serif and Times/Times Roman for serifs. Rather than tagging individual portions of your HTML page with FONT tags, you should instead define all your font styles in a CSS style sheet. This way they are easier to adjust and control, site wide, from one single place and your pages will load much faster. Any titles that you wish to use a more distinctive font, should be created as a graphic in a program like Photoshop. One thing that many people don’t realize is that font sizes are completely different between the Macintosh and Windows. The Macintosh display system was designed around the graphic arts convention of a typesetter’s point which is roughly 1/72 of an inch. Apple (also Adobe for PostScript) rounded off the typesetter’s point to exactly 1/72 of an inch. Therefore there is conveniently an exact 1:1 relationship between one PostScript point and one pixel on the Macintosh screen. This means that 12 point type on the Mac is exactly 12 pixels tall on a Mac monitor. Windows however, does not follow this convention. So, 12 point type in Windows is more than 12 pixels tall. Unfortunately this often means the default browser type size of 12 points, looks too large when viewed under Windows. So, many people designing Web pages under Windows mistakenly use a font tag of SIZE=-1 or SIZE=-2 for everything, which makes the type look OK under Windows, but much too small on the Macintosh. The correct way to solve this problem is to use cascading style sheets which allow you to specify font sizes in pixels rather than points. That way, if you set a font to 12px it will be 12 pixels tall on both the Macintosh and Windows. Therefore, for your Web pages to be universally consistent across platforms and browsers you should never apply font tags to the pages themselves and instead define fonts in your cascading style sheet and only in pixels rather than points. Here is an excerpt from the cascading style sheet for the DreamLight WebSite that specifies how all level 2 headings should appear. h2 { font-family: Times, "Times New Roman", serif;
font-style: italic;
font-size: 24px;
line-height: 24px;
font-weight: bold;
margin-top: 6px;
margin-bottom: 3px;
padding-top: 0px;
padding-bottom: 0px }
Again, the basic rule is keep it simple! The first question you should ask about adding animation and other features is not “how” do I add such features, but rather, “why” should I add such features. If the only reason you’re adding an animation or an applet is that it’s “neat” then don’t do it. I’d have to say that nine out of ten animation and Java applets I’ve seen on the Web are not necessary and would be best left off. If you do have a justified reason to add animation, then you basically have five main options.
A simple way is to include a line directly beneath the content similar to the following The video requires QuickTime! Where the word QuickTime is linked to: http://www.apple.com/quicktime and has a target set, so that it opens in a new browser window without closing the existing window. We use such a blatant approach because there are many people out there on the Web that may not have all the plug-ins installed and really need everything spelled out for them. Sometimes this is also easier for user’s to understand than the somewhat cryptic dialog boxes that the browser may throw up to automatically download a plug-in. Above is a sample of how you can play a video in a separate window which has a link to the necessary plug-in. For an even more advanced example of video content which uses a JavaScript/VBScript to check if the user has QuickTime and then launches the appropriate QuickTime or Windows Media version of the video, visit our 3D Logo Animation page.
Not really. The only way to thoroughly test a Web site, is actually to test it on both a Macintosh and a Windows PC, under both Netscape Navigator and Internet Explorer on both platforms. If you follow the gamma and type tips I’ve given, and don’t have both platforms, you can get away with testing on one platform only, for a personal Web site. But for professional Web design, there really is no substitute for testing on both platforms in as many different browsers (and versions) as possible. As a minimum, I recommend testing in the last two versions of Netscape Navigator and Internet Explorer. One neat trick I’ve used in the past, is to run the Mac version of Navigator and Explorer on the Mac, and the Windows version of Navigator and Explorer under SoftWindows or Virtual PC on the same Mac. That way I can test the same web page in all four browsers all on one system.
|
|||||||||||||||||||||||||||||||||||||||||||||
To view this site properly, please upgrade to a browser that supports current Web standards.
|
|
 |
 |
 |
 |
 |