 |
Modern Computer Grammar, Punctuation, Color and Fonts
|
Punctuation, Grammar, Colors and Fonts in the the new modern computer age have created a divide between how one writes for the Internet and how one writes for printed material. Too often those making decisions about web publishing are computer ignorant and try to apply what is acceptable for paper to website publishing. A document to be used as both printed material and web material should be written in two different formats. We present our ideas on how to write in the modern age.
Computer Punctuation
You must be aware of ASCII (American Standard Code for Information Interchange). 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 because the designer used a program which inserted special characters. Remember! You have no control over what browser, operating system, screen colors, screen resolution, or machine is being used to view an external website. Not everyone has the latest and greatest. Best is to write a website with backwards compatibility in mind.
Look carefully at your keyboard. Those punctuation marks are ASCII. ASCII is the built-in binary code (read by the computer) for representing the characters of the keyboard (you the user can read). If you want your website to be used by anyone, anywhere, anyplace without any concern for platform, browser, monitor, or computer, use ASCII. Using ASCII code means that the text of your web page can be read by all computer systems. There are several charts that convert ASCII to hex (Hexadecimal) code available on the web. Bookmark the one you find most usable.
Be aware! HTML (HyperText Markup Language) is not a word processing language. If you choose invalid character codes with a number higher than 127, you are on the road to sloppy looking web pages. 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. We combine the Lynx browser (lynx.isc.org) plus code validators, The W3C Markup Validation Service (validator.w3.org), Validome (www.validome.org) and HTML Tidy (tidy.sourceforge.net) to check each page. With Lynx we can check to see if the page can be used by the visually impaired or on any browser.
Examples and problems associated with special characters not on your keyboard
The Em Dash - there is no em dash for the web. We have seen designers trying to apply the following: a graphic of an em dash, two hyphens together, using this unsupported html code mdash, emdash, or using #8212.
Lydia: It's true folks. The best way to use an em dash if you must, is to use two hyphens so that it looks like this: --. It may not look as sexy but it works in all systems and it gets the point across. Remember, when we read from a screen, we care more about being able to read the content even more than how it looks. Users only care about how your content looks if it impairs their ability to read it.
Fancy quotation marks while beloved and usable for paper are dubious for the web. Once again your choices are graphics, special code such as ldquo, rdquo, #147, #148, but these may or may not be recognized by the browser displaying your page. Some use the convention of two backwards quotation marks `` setting off quoted text.
Lydia: Just to build on that point, your readers just want to read your content. Use characters that are familiar in writing so that comprehension is at its optimal. Remember, technology already creates its own intimidation so when you come across material you like you tend to want to go back to it. In one example, a website uses the ` character twice to imitate curly quotes. Use the quotation marks on the keyboard! This is a case of a designer choosing design over readability. We all know a quotation mark - regardless of how it looks. I don't even know the name of this `. And this is a decision being made by the editor of the printed publication. It just doesn't translate well on screen.
Alexandra: My decision with quotation marks for web pages is - if it is to set off text I italicize the text. If it is to make a point I make the word/text bold. If it is a direct quotation by a person then I use quotation marks around the quote.
Lydia: Even though there are many special characters available for web pages, the only ones that are universal are the ones for characters that appear on your keyboard. This is why ASCII is so important. ® or ® are valid HTML special characters but Lynx does not recognize them because ® is not on your keyboard. Instead, you may get ^® or ^?.
Alexandra: When coding a word processing article for the web, the first thing I do is use the Dos2Unix filter. This removes many special printing characters. Then I replace problematic print punctuation marks such as: [?, ', ", (, ), :, ;, !] with ASCII characters.
Capital Letters
Use all caps in writing for the web very, very minimally. Though all caps do set off text, words in all capital letters - EMPHASIZE - signify shouting and can cause misinterpretation of what is being read. To set off text, we suggest, italics emphasize, or bold emphasize.
Underlines
Never use underlines for the web. Underlined text in computerese means click me to go to another location.
Alexandra: When teaching a beginning Internet class for cancer patients, I saw the students try and try to click the underlined text as though it was a url (Uniform Resource Locator). The substitution I use for underlines is italics. Italicized text will stand out on a web page.
Lydia: Yes. You have to use other ways to set off text. Reserve the underline for links only. I even go as further to tell you to always use underlining for links. Most designers are inclined to remove the underline now and just use color to indicate links but what about color-blind users? At least if they happen to rollover the text and an underline appears, they know to click. Use underlines -- only for links. Always underline links, in some way.
Bullets
Bullets for web pages can be less than optimal. On some browsers bullets can be huge or on others tiny. There is no control over how bullets display unless you want to insert special graphics.
Alexandra: I have taken to ripping out bullets from my web pages. For substitution I use Definition List tags [dl, dt, dd, /dd, /dt, /dl]. Another option I use is to set the text off by making the first line bold a line break and then normal text.
Lydia: I don't care how bullets come in on a page. With CSS (Cascading Style Sheets), I can control the look. On browsers that don't support CSS, it will provide users with its default bullet points. How those default bullet points look does not bother me and I am aware that will happen. As a designer, now you are aware. If it bothers you, use CSS and let it go.
Hyphens and Periods
Hyphens are being phased out for example co-morbid is now comorbid. Periods used to be used for title abbreviations such as: M.D. Ph.D. Lt. but now in computers the convention is MD, PhD, Lt. One reason for this is the period means do it again in UNIX. Another reason is printing costs are expensive. By removing these periods one can save money. Two spaces after a period is being changed to only one space. On a web page sometimes the two spaces will give too much blank space and look horrible.
Web References
Referencing web sites and web pages can be tricky.
These are some of the problems. Placing a period after a web address being published on a web page is dangerous because of the period meaning do it again. Others want to follow a convention of using angle brackets to enclose a url. This is an example of someone not computer literate making a decision of what is correct. The message is Error < www.cancerlynx.com> is not recognized!. If you must use angle brackets then the html code is lt; and gt;. We have seen clever designers place the url within parentheses (url goes here) then the period for the end of the sentence. Others add an extra space between the url and the period. Parentheses seem the simplest solution to separate urls from punctuation marks.
If a page moves or is renamed the web reference is now unreachable. Conscientious web people use redirects either in the html code or symbolic links. The code looks like this: ln -s newpage oldpage. Another option is to create a web page saying this page has moved and providing a link to the new page.
Alexandra: Having been bitten many times by the problem of inconsiderate web people moving, renaming, removing pages without any regard for users, I only reference the top url, for instance this example - Cancer Supportive Care (www.cancersupportivecare.com).
Again there is a difference between paper and web. When printing a web address on paper, omit the http://
In the Useful Web Addresses chapter from, Everyone's Guide to Cancer Survivorship: A Road Map for Better Health, Andrews McMeel Publishing, 2007, the useful resource Cancer Supportive Care (www.cancersupportivecare.com) is included. The / at the end of a web address means there is more to follow but is no longer added when referencing web addresses. A good idea is to add the WWW (World Wide Web) to a web address. While some servers are set to recognize these urls (www.cancersupportivecare.com) and (cancersupportivecare.com) as the same, other servers are not. Some browsers will insert the www and some will not.
Here is the same reference on this web page, Addresses of Useful Web Resources – (http://CancerSupportiveCare.com/links.html) Best is to use complete urls Cancer Supportive Care (www.cancersupportivecare.com), if the url ends the sentence you must decide whether to omit the period or place the url in parentheses.
Color Divide Between Computers and Paper
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 PCs it is 96 pixels.
We warn you! Never, never use a color that ends in the hex number of 33.
If you are using a desktop publishing program you will probably need to make two different versions of your document, one using web safe colors, the other using printing press colors.
Lydia: Again, it is important for a designer to be aware. Ultimately, you design for your readers. Use the data on the website's users, to see how many colors they have on the screens they use to read your website. Using actual data on your website's users, empowers you with the appropriate palette of colors. Google Analytics (www.google.com/webmasters) is free and gives a comprehensive break down of users according to screen resolution and screen colors.
Fonts
Here again if you are using a desktop publishing program you will probably need to make two different versions of your document, one using the special fonts you want, the other using web safe fonts.
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, Linux 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.
Another Point Of View
Theresa: For those of us who edit in the world of printed material, the punctuation of the web is anathema. We have respected experts to support us: The Chicago Manual of Style and Eats, Shoots, and Leaves by Lynn Truss, for example. However, the World Wide Web is here to stay. Consider thinking of it as a new language, a new study in punctuation. Allow yourself to learn a new skill.
Awareness of the differences and demands of publishing paper versus publishing web media will help you create documents that can be easily read. Remember, Internet users want to find content and then they want to be able to easily read what they find. Start thinking about how you can begin to incorporate what you read in this article to creating very readable content on your website.
Alexandra Andrews is a Linux Webmaster for many websites including (CancerSupportiveCare.com, and CancerLynx.com).
Lydia Idem is currently a professor at California Design College and Webmaster for BlackTree Media (www.blacktreemedia.com and www.blacktree.tv).
Theresa D. Stephenson is an editor of technical manuals and books for many years.
|
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. |
|
