lynx picture  

CancerLynx - we prowl the net
July 2, 2007

ASCII, Colors, Fonts, Graphics
Website Creation Tips and Tricks for Publishing.
Alexandra Andrews and Lydia Idem

Introduction
ASCII

Colors
Fonts
Generic Font Families

Graphics


Introduction
Back to the Table of Contents


Websites are the new modern media. There is an age gap between younger users who learned computers as a first language and older users who learned computers as a second language. Nowhere is this age gap more apparent than the Internet web designer to be. Unfortunately many paper designers trained before computers feel they must apply the same skills from a flat piece of paper to a web page. This is wrong! Flat paper media is looked at very few times. Grabbing the user's eye and attention with arresting fonts and color matter in this paper-limited world. But like the camel going through the eye of a needle, most paper designers are unable to make the leap between paper and Internet. Over and over you see great graphic artists try to force and to apply the old rules of paper. Think of the image of the scribe when confronted with the printing press.

We are in the age of a new media of the web. Like the printing press there are profound changes. A website can be viewed anywhere, anytime, anyplace. A new information world is blossoming. Age, sex, looks, skin color are unimportant. Just as in aviation, English is the language of the web.

The ideal web page seeks to have return users. Now we ask you - would you watch a cartoon or movie 10 times, 100 times, 1000 times over and over?


Our two rules for websites and Internet media are:
1. KISS (Keep It Simple Stupid)
2. Never assume (makes an ass out of u and me)

ASCII (American Standard Code for Information Interchange)
Back to the Table of Contents


It is very important that you know about ASCII. Have you ever been on a web page that is littered with question marks? The reason why is that the designer used special characters that the browser cannot understand or render. Fancy quotes beloved of paper-trained designers, are frequent culprits. Another reason is that the designer used a program which inserted special characters. A common cause is the perceived need to have an mdash. There is no mdash for the web. We have seen those trapped in the old paper-trained way trying the following: a graphic of an mdash, two hyphens together, using this unsupported html code —, or using —. ASCII is the built-in binary code (read by the computer) for representing the characters of the keyboard (you the user can read). Look carefully at your keyboard. Do you see any mdashs or decorative quotation marks?

If you want your website to be used by anyone, anywhere, anyplace without any concern for platform, browser, monitor, computer, use ASCII. Using ASCII code means that text of your web page can be read by most computer systems. There are several charts that convert ASCII to html hex code available on the web. Bookmark the one you find most usable. Be aware! If you choose invalid character codes with a number higher than 127, you are on the road to sloppy looking webpages. Your code validator will give error messages such as the following: replacing invalid character code 128, replacing invalid character code 147, replacing invalid character code 156 and more.


Colors
Back to the Table of Contents


Now we come to colors and the myths that abound. Yes, there are millions of colors available. In reality, if you want stable colors that can be read on any machine/device anywhere, you are limited to about 160. It is a sad moment when you have spent so much time creating a web color scheme that looks like trash on another machine/monitor. If you are not on an intranet where you know what each machine is, you must take into account variations, especially if you are aiming for the cell phone and small portable Internet devices. Always choose colors that are web safe. Most color picker programs offer this option.

You are asking why?

The display resolution for Macintosh monitors is 72 pixels but for PC's it is 96 pixels.

We warn you! Never, never use a color that ends in the hex number of 33. Look at the following example of dark navy blue, #000033:
     

On a MAC you will see dark navy blue, but on a PC it will be black. Test this out for yourself.

Avoid the color of the year. Websites can be dated by the color schemes they use.
Shades of brown, 2005-2006
Hot southwest colors of oranges and reds with lime touches, 2004-2005
Blues, oranges and pinky reds, 2006-2007
Choose colors you like. Follow your design vision

Fonts
Back to the Table of Contents


Keep your fonts scalable. Keep in mind older readers wearing bifocals or those who are colorblind. Grey text on white may be aesthetically pleasing to you but frankly, is unreadable. Users will leave your website if they cannot read the information.

Alexandra: When I first did the pages of CancerSupportiveCare.com I set the font size. Little did I realize that on flat screen monitors the text size is rendered about 1-2 points smaller. While you might think the size is 12 points, it is actually rendered about 10-11 points in size. I sat up all night ripping out the font size from the pages. I recommend letting the browser set the size of the fonts. Use proportional sizing; for instance, font size=" +1" or font size="-1".

My acupuncturist Nancy Rakela, OMD, Lac, has the tale of going out for dinner with family and friends. No one could read the menu. The restaurant had chosen green text on a brown background.

Lydia: Let's first cancel this misconception or just plain misinformation about fonts and font use: The font you see may not be the font your end users (those individuals who will actually be using your website) will see. Fonts used on websites are entirely dependent on the fonts installed on that person's computer. So how do we get fonts anyway? Fonts are installed with the operating system on your computer but also with the various software packages that people will install on their computer. So, users of Microsoft Office suite of software will have the same fonts that come with Office. Unfortunately, there is no consistency between Windows, Macs, and UNIX. The best solution is to use the default font as set by each individual's own browser. But for you designers who absolutely must use a particular font or your design is ruined, use CSS which allows you to specify multiple fonts as well as a generic font family. To specify multiple fonts, you list your preferred font first and then list back up fonts so that if the user does not have your preferred font installed on his/her computer, you are instructing the browser to use another font that he/she may have which will still render your design beautiful.

Generic Font Families
Back to the Table of Contents


Generic font families are built into CSS, not HTML unfortunately. All compatible browsers will automatically match an appropriate font to each generic family. Even older browsers have a default font so even if they do not support generic font families they will support a default font: Times New Roman. Using generic font families is not a requirement when using fonts but is a good rule of thumb for those of you who are true designers and want to be sure that your design is rendered for each user as you intended. So be sure to test your design with the generic and default fonts to ensure that it is acceptable to you for your users.

The five generic font families are:
serif
sans serif
monospace
cursive
fantasy

Graphics
Back to the Table of Contents


Monitors are coming in all sizes and types of CRT (Cathode Ray Tube) and LCD (Liquid Crystal Display). The days of writing a website to a 15" CRT are over. If you are using a 27" monitor to design, test out the website using different monitors and resolutions.

Lydia: As monitors become larger (those greater than 15"), the resolution increases, which means that more pixels can be squeezed onto the screen than ever before and this is beginning to affect graphics (and consequently graphic web design). The graphics are rendered differently because graphics are measured by the screen in terms of pixels - the same measurement used to size monitor screens. So if we can now fit more pixels on the screen, then graphics and images begin to appear smaller on larger screens because of the increased screen resolution even though the actual image size remains constant. Thus, graphics and images appear larger on smaller screens because of the decreased screen resolution even though the actual image size remains constant. If you don't believe me, open this article on a computer with a larger 21" monitor if you have access to one. You will see the difference.

Also keep in mind, that monitors include computer monitors, televisions, plasma televisions, high-definition (HD) televisions, cell phones, laptops, PDAs, car navigation systems, and kiosks. As Alexandra said, "The days of writing a website to a 15" CRT are over."

In creating a graphic for the web, you want to have the size as small as possible. At one point one could trust the Adobe save for the web option to create a compressed graphic that would be smaller and load quickly. However, we have discovered this is no longer true. Because of Adobe's many extra comments in the file info, graphics are now bloated and huge. Using the GIMP (GNU Image Manipulation Program) one can get a smaller, leaner graphic that loads quickly.

Examples

For the following we used, Adobe Photoshop CS2 on a Power Mac G5 and GIMP 2.2.10 on SUSE Linux Enterprise 10. We saved the original graphic as a PSD(Photoshop Document).
Now look!

Graphic sample saved as a  gif using Adobe CS2 on a Power Mac G5
First saved as a CompuServe GIF (Graphics Interchange Format) an 8-bit-per-pixel bitmap image format, using Adobe Photoshop CS2 on a Power Mac G5
File size 171KB
Graphic sample gif using Adobe save for the web option
Graphic sample gif using Adobe save for the web option
File size 398 Bytes
Graphic sample gif using the GIMP
Graphic sample gif using the GIMP
File size 388 Bytes
Adobe save for the web requires a two step process. The GIMP is a one step graphic creation. Both of these samples are similar in size.

Next, the same example using JPG/JPEG (Joint Photographic Experts Group)

Graphics Sample using Adobe Photoshop CS2 saved as a jpg
Graphics Sample using Adobe Photoshop CS2 saved as a jpg
File size 36.0 KB
jpg graphic example using the save for the web option
jpg the save for the web option
File size 5.23 KB
jpg graphic example using the GIMP
jpg example using the GIMP
File size 2.21 KB

The Adobe graphic is 42% larger in size than the comparable GIMP graphic

Next example, an original jpg desert photograph, 2597x1900 pixels, file size 1.48 MB.

jpg Desert photograph saved in Adobe Photoshop size  200x150 pixels file size 59.9 KB
200x150 pixels jpg desert photograph saved with Photoshop
File size 59.9 KB
Same desert scene saved in Photoshop using the save for the web option file size 11.7 KB
200x150 pixels desert scene saved with Photoshop using the save for the web option
File size 11.7 KB
jpg desert scene example  using the GIMP  file size 9.20 KB
200x150 pixels jpg desert scene saved with the GIMP
File size 9.20 KB

There is an 8% difference in the above examples.

We also ran the following tests saving the original desert photograph of 2597x1900 pixels as 400x300 pixels with the following results.

Desert scene saved in Photoshop
400x300 pixels desertorig_400.300.jpg RGB File Size 117KB

Desert scene saved in Photoshop using the save for the web option
desert400.300_saveweb.jpg RGB 1 layer File size 76.7 KB

Saved using the GIMP
desertgimp400.300.jpg File size 21.9 KB

In the larger graphic comparison the difference in file size is 29% between the Adobe save for the web option and using the GIMP. Clearly, GIMP is the tool to use for web graphics that load quickly and speedily.

Alexandra - Having just spent days trying to make decent looking buttons for CanceSupportiveCare.com/5index.html - take this advice. I had been told, when doing lettering it is a good idea to use a vector based program. This avoids the jagged bitmap problem. Too True!

You might ask why we are not discussing saving in PNG (Portable Network Graphics) a bitmapped image format that employs lossless data compression. This option is great, if you are certain about your users, platforms, browsers and OS (operating system) - an intranet. Not all devices support png. Thus for the largest audience where you do not know what device is being used to view your website, the older graphic extensions of jpg and gif are safest.

Lydia: I just finished working with PNG. If you haven't noticed by now, though Alex and I agree on most issues, I tend to be more liberal in web design. So I decided to give PNG a try. It does produce much nicer looking graphics than GIF especially if you want to use a transparent background (which is only supported by GIF and PNG). With these great attributes, I decided to try it for this new website I am working on. I thought it would be fine because the website uses a lot of Flash and video so I figured the audience will be using the latest browsers that support the most recent version of Flash Player.

I created the graphic header which looked terrific as a PNG file because I needed the background to be transparent. HA! I was so surprised when my client viewed the website and called me asking me if I had put a background color on the graphic. He viewed it once before on Firefox but was viewing it again from work on Internet Explorer. He said he saw a light blue background (and keep in mind the website colors are orange and yellow and he saw the Flash video playing just fine). Needless to say I changed the file format of that graphic from PNG to a GIF immediately after he told me. When he saw it again, he was pleased.

I like the graphic quality and size that PNG produces. Unfortunately, it is not widely supported enough by the browsers to be considered seriously for effective web design.

Have you read the previous Website Creation Tips and Tricks for Publishing articles to prepare for your website?
Getting Started with Websites
cancerlynx.com/webhost.html
Accessibility, Usability, and Navigation
cancerlynx.com/navigate.html

Alexandra Andrews is a Linux Webmaster for many websites including CancerSupportiveCare.com, CancerLynx.com, and CancerLinks.com
Lydia Idem is currently a professor at California Design College and Webmaster for BlackTree Media (www.blacktreemedia.com and www.blacktree.tv).



You are welcome to share this © article with friends, but do not forget to include the author name and web address. Permission needed to use articles on commercial and non commercial websites. Thank you.

one pawprintCancerLynx.com one pawprintWhat do you think? one pawprint

lynx kitten picture