TBT – This throwback Thursday post reviews our basic web design tips that stand the test of time.
These are some basic web design tips we offered when interviewed for magazine articles over a decade ago that are still often relevant today. These time proven basic web design tips originated from early Web design practices back when we had to hand code Web sites in HTML and later when using intermediate Web design systems like DreamWeaver. They should be considered rather obvious by today’s standards. However, these basic web design tips are still sometimes forgotten in the more complicated, multi-layered, process of modern Web site design in database driven CMS platforms. This includes the most popular CMS platform, WordPress, as well as other CMS platforms like Joomla, Drupal, etc. Sometimes current Web designers or content creators focus so much on the more complicated systems used today that they forget about the well established basics.
From Smart Computing’s Super Web Tips Magazine Article
Basic Web Design Tips Regarding Font Sizes
As for size, a font that’s too big or small will be difficult for visitors to read. A font size of 12 or 14 is best for viewing through all browsers. Once you decide which size is best, specify it in a style sheet rather than on each page of your site. Not only does this maintain a universal appearance throughout your Web site, says Michael Scaramozzino, president and creative director of DreamLight (https://www.dreamlight.com), but it also eliminates discrepancies that exist when the site is viewed on Windows and Macintosh computers.
“The Macintosh display system was designed around the graphic arts convention of a typesetter’s point, which is roughly 1/72 of an inch,” Scaramozzino explains. “Windows, however, does not follow this convention…. Unfortunately this often means the default browser type size of 12 points looks too large when viewed under Windows…. The 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-size:12px,” it will be 12 pixels tall on both the Macintosh and Windows.”
Basic Web Design Tips Regarding Images and Animations.
Though today’s computers and bandwidth can often allow much larger images, the basic principles still apply, especially for today’s mobile users as well as when adding video or animation.
To get the full benefit from the graphics you put on your Web site, it’s imperative that you know how to choose graphics that can be viewed by all browsers. Scaramozzino recommends keeping graphics smaller than 400×300 pixels in dimension and less than 100KB in size. It’s even better if you can go smaller than that, he says.
“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,” Scaramozzino says. “Images that a user has specifically selected to view can be larger since the user will generally be more patient because they are interested in the image. 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 they’d like to view.”
The most important content on the Web is information, primarily in the form of text and still images. But the most amusing content on the Web comes in the form of a gimmick, such as those cute animations and whiz-bang applets that catch your eye and make you say “wow” when you visit a site. As tempting as it might be to indulge your site with a little techno-fun, you may want to abstain in the interest of creating a site that can be viewed by all.
“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,” Scaramozzino says. “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 10 animation and Java applets I’ve seen on the Web are not necessary and would be best left off.”
Full Interview for Smart Computing’s Super Web Tips Magazine Article
What is the best way to create a universally recognized Web site?
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. [These days we use layers and current versions of HTML/CSS that are new fully supported.]
Is it best to use a Web editor, such as FrontPage or HoTMetaL PRO? Or is HTML the only way to go?
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. [These days we use WordPress, Atom and other tools.]
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.
What colors should/should not be used in developing a Web site? What about color combinations?
If you wish your colors to remain smooth and un-dithered 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. [Unless you include a print specific CSS stylesheet.] 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 un-visited 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.
Are there size restrictions for graphics?
As a starting point for a large photograph or illustration, I’d keep it about 400×300 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.
[These days we use JPEG and PNG files with appropriate sizes for modern broadband/WiFi connections.]How do you ensure your graphics will appear as they’re supposed to?
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.
[Today we often design with a 2.2 gamma on the Mac and include a gamma profile for cross-platform viewing.]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.
What about text? What fonts should an individual use or not use?
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. [These days we sometimes use embedded Google fonts for a wider range.]
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 [this is from a previous version of the DreamLight website that was used at the time of the interview.] 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 }
How do you handle other content features, such as animation, Java applets, etc.?
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.
- GIF animation is the most universal and usually the easiest to add. No plug-ins are required, but the files can get large if the animation is long. You can apply an HTML link to an entire GIF animation, but not to individual frames or buttons within the animation.
- Flash animation is widely available since the plug-in often comes preinstalled. Flash animation can be very small and efficient and can also be fully interactive. [Flash is being phased out on many sites since it is now obsolete.]
- Shockwave animation can be the most interactive and elaborate but is more involved to create with Macromedia Director. The Shockwave plug-in is required. [Shockwave is no longer in wide use.]
- Video can also be included in a variety of formats. QuickTime is the highest quality, can stream live or on-demand and can even be fully interactive. RealPlayer and Windows Media are also available options. All require browser plug-ins, but the plug-ins are often pre-installed or widely available. [These days we tend to use MP4 HTML5 video and/or YouTube/Vimeo videos.]
- Any Java applet worth using will come with complete instructions on how to add it to your page. Simply follow the included instructions and you should be fine. But again, before adding any Java applet, first ask yourself, do I really need this on my site and if so why?
How do you set up links for required plug-ins?
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.
[These days we often embed YoutTube/Vimeo videos directly in pages.]Can you test a site before publishing without installing all the browsers on your computer?
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. [Obviously use current versions of the most popular browsers available today, such as FireFox, Chrome, Safari, Explorer, etc.]
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.
From PC Novice’s Enhancing WebSites Magazine Article
Basic Web Design Tips Regarding Audience Targeting
Research the operating system, monitor, browser, and type of Internet connection your audience will have. Then, think more theoretically about what they want from your site. Will they want it to be fancy, or will they just want the facts? Will they be disappointed if the site is plain, or upset if they have to download special plug-ins? The trick isn’t optimizing your site for everyone; it’s matching the technology of your site to the needs of your audience.
Suppose, for example, you’re targeting engineers, says Phillip Scaramozzino, vice president of DreamLight, a Web and multimedia design company in Massachusetts. They may not want to look at anything they don’t need, regardless of their computer setups. “They don’t care if the corporate logo on the Web page is spinning. The only thing that matters is that it took them 35 seconds longer than it should have to download,” he says. “You want to develop a site that gives users the information they perceive as important, as fast as possible.”
DreamLight Can Design a Custom WordPress Web Site for You
DreamLight can go well beyond these basic Web design tips and bring our decades of Web design expertise to bear on improving your Web site. We will work closely with your marketing team to update your existing Web site that may be outdated or to design a brand new custom WordPress Web site. All our custom WordPress Web sites are designed to be fully responsive. This means the overall design layout automatically re-flows on-the-fly to take best advantage of all modern mobile devices. We can also create a wide range of integrated branded marketing content for your Web site to help it really stand out, including; 2D/3D digital design, illustration, animation, interactive multimedia or application development.
Contact us for more information about designing a custom WordPress Web site or to explore your specific needs.
Leave a Reply