Text issues
Good use of the "title" tag
The text in the title tag is what appears in the very top left corner of the screen when you visit a Web page. (The title of this Web page, for example, is "guidelines for Web sites".)
Why is this important?
This is more than important; it is crucial. Appropriate title text is among the most important factors in determining search-engine placement, as well as helping visitors know your site is the one they want to view.
Use words that will be useful. Also, try to avoid "extra" words, such as articles.
Examples
- bad: "Welcome to MOE"
- good: "Ministry of Education" ("MOE" means nothing to most people, and is certainly not going to be used in most Web searches for education in Taiwan)
- bad: "Welcome to the official English website of the City of Taipei"
- good: "Taipei City Government" (Of course it's a Web site. What else would this thing be on the Web? And the use of English words is alone enough to let people know the site is in English.)
- bad: "home page"
- good: "Information for Foreigners in Taiwan" ("home page" is useless)
- bad: "Research, Development, and Evaluation Commission, Executive Yuan"
- good: "Research, Development, and Evaluation Commission" (That the RDEC is part of the Executive Yuan is something that most people have no interest in nor any need to know. Keep in mind that in most cases English takes up much more horizontal space than something written in Chinese characters. Lots of English labels in Taiwan are thus ridiculously long. Don't think in Chinese and then translate into English; think in English for English-language sites. Keep it short and simple.)
- bad: "The Legislative Yuan Rebpulic of China"
- better: "Legislative Yuan, Republic of China" (This is a good reminder of the need to check spelling ("Rebpulic"). Also, "the" is unnecessary in most titles.)
In many cases, the word "Taiwan" would be an appropriate addition.
Further reading
Real text instead of images of text
Why is this important?
This is crucial. Computers and search engines work from text, not pictures.
There are several reasons for this, including
- Web pages with text load faster than those with extra images
- text can be resized more easily and clearly than images
- typos and errors are easy to fix in text but difficult to fix in images of text (This is a major consideration, given the number of errors on my English Web sites.)
For example, here is a gif of the word "Taiwan":
Search engines, however, have no way of knowing what this image is, which means that search engines won't know the word "Taiwan" appears on the Web page, which means they won't return your Web page if someone includes the word "Taiwan" in the search phrase. Obviously, that's not something you want to happen.
Here's the same image, but this time the HTML includes
alt="Taiwan"
, which lets search engines and those (such
as the blind) who use non-traditional Web browsers to know what the
image is of.
But in almost all cases, it is better simply to use real text:
In a very few cases (such as, perhaps, with logos), images with proper alt text are acceptable. But if you have more than one of these on a Web page, you probably have too many.
How do I check?
In Opera 8, turn off images with Shift + I
.
In Opera 7, turn off images with the button that looks like a camera, which is located near the top right of the screen.
In Firefox, Images --> Hide
Images
.
Romanization correctly spelled
In some ways this is a particularly difficult issue. The central government has officially adopted the Tongyong Pinyin romanization system for Mandarin but it has allowed individual areas to make their own decisions. Accordingly, Taipei has adopted Hanyu Pinyin, which is the system now used almost everywhere in the world and which is strongly preferred by most foreigners. (Some other places have also adopted Hanyu Pinyin; but their implementation of that system has been much less thorough than that of Taipei.)
Keeping in mind that your Web site is meant to convey useful information to your readers, including Hanyu Pinyin romanization, especially for any location within Taipei, would help them match your information with the romanization system foreigners know best and the signs they will likely see.
Regardless of which romanization system you use, all words written in it should be spelled correctly.
How do I check?
- Taiwan city names
- Taipei street names
- romanization tools
- check if Tongyong and Hanyu Pinyin words are spelled the same
- convert zhuyin (注音) to Hanyu Pinyin
Romanization correctly styled
Why is this important?
Some people seem to think AddIng ExTra CaPiTaLiZaTion makes reading easier. They are wrong. There is no more reason to write "NanJing" than there is to write "BerLin" or "PaRis". This is a counterproductive and downright annoying practice, and it needs to be stamped out.
Also, remember to write words as words, not as frag ment ed syll a bles.
Examples
- wrong: NanJing East Road
- wrong: Nan Jing East Road
- wrong: NANJING East Road
- wrong: Nan-Jing East Road
- wrong: Nan-jing East Road
- right: Nanjing East Road
Further reading
No other unnecessary use of capital letters
Why is this important?
PUTTING EVERYTHING IN CAPITAL LETTERS MAKES READING MORE DIFFICULT. IT'S ALSO MAKES IT LOOK LIKE YOU'RE SHOUTING.
Likewise, People Tend to Use Too Much Capitalization at the Beginning of Words. Don't Do This. Do this. Most words do not need to be -- and therefore should not be -- capitalized. If you're not sure whether to capitalize something, usually the correct thing to do is leave it in lower case. For example, titles are not capitalized unless they come before a name; thus, "The ambassador presented a medal to President Chen Shui-bian", but "Chen Shui-bian is president [not "President"] of the nation." There is no lack of respect in this; it is standard practice in English.
Also, please note that "fax" is an ordinary word. "FAX" is wrong.
Correct English
Why is this important?
This should be obvious. But in case it's not, here are two points:
- If no one can understand what the page says, it's useless. Actually, it's worse than useless because your organization is giving outsiders a bad impression. That leads to the second point.
- Poor English damages your credibility. Foreigners are much less likely to take seriously anything that features bad writing or typos.
How do I check?
Hire a copy editor (改稿編輯) -- a real copy editor. Having a native speaker of English look at your text is most definitely not enough; you need a trained specialist. Note: If you try to hire one person to be a copy editor and a translator and an editor, you'll probably end up with someone who isn't really good at any of those jobs.
The author of this document is a .
Documents in HTML rather than PDF or Word format
Why is this important?
- Many people will not open Word documents because they could contain viruses.
- PDF and Word files tend to be orphans (i.e. documents that do not have links back to the main Web site).
- Almost everything that can be done in a Word document can be done in HTML; and that which can't be done in HTML probably shouldn't be done at all -- not in any format.
- PDF and Word files often have unnecessarily large file sizes because they have images meant for printing rather than screen use.
- It's supposed to be a Web site, so use Web pages (HTML).
PDF files are appropriate on rare occasions, such as for forms that are intended for printing. Microsoft Word files, however, are almost never appropriate on Web sites; they should be converted to HTML. (But be careful in the conversion. Microsoft Word's HTML converter puts out terrible code that would need to be cleaned up considerably before being allowed on a Web site.)
Further reading
Proper use of header tags (e.g. <h1>, <h2>, <h3>)
Why is this important?
This is crucial for high rankings in search engines. Putting something in <p> tags and then making it larger artificially is not the same thing as using <h1> tags. Leave paragraph tags for body text, and make sure each paragraph begins with a new <p> tag, not with a line break (<br>). Also, proper use of tags is important for those with disabilities and the correct use of CSS.
How do I check?
Look in the HTML. Each page should have one <h1> tag near the top of the page. Most pages should also have <h2> and <h3> tags. <h4> may also be found, but rarely <h5> or <h6>.
Proper use of lists
Why is this important?
Lists should appear in the coding as real lists, not as lines separated by line breaks (<br> tags).
How do I check?
Look in the HTML.
Further reading
Use of "Taiwan" on the home page
Why is this important?
This helps people who are searching the Web find your site. Also, the government keeps changing its mind on precisely what to call the country, so it's best to have all of the following: "Taiwan", "Republic of China", and "ROC".
Use of "Republic of China" on the home page
Why is this important?
See comments above on "Taiwan".
Important: Having an image of this phrase without real text isn't good enough.
Use of "ROC" on the home page
Why is this important?
See comments above on "Taiwan".
Note: use "the ROC", not "the R.O.C." But if this follows "Taiwan", then use "Taiwan, ROC" (without the the).
Important: Having an image of this term without real text isn't good enough.
Address and telephone number on the home page
Why is this important?
E-mail is not the world's only form of communication.
Correct format for telephone and fax numbers
Why is this important?
Using standard formats makes it easier for people to correctly read telephone numbers. Note the use of parentheses and hyphen, and how many digits are before and after the hyphens.
Right:
- +886-2-2311-3731
- (02) 2311-3731
- (02) 2311-3731, ext. 32
- 0938-383-838
Telephone numbers in areas that still use seven- rather than eight-digit phone numbers should appear as follows:
- (06) 927-4400
Remember that "fax" is a normal word, so don't write "FAX".
A common error on Web pages is the use of a Chinese-style colon after "fax". Make certain you use the Western colon and other Western punctuation.
Western date format
Why is this important?
Almost no one outside Taiwan has any idea that 2005 is also year "94" to people here. Never use 民國年 (Mínguó nián) on an English-language Web page. Also, using numbers for months can result in ambiguity. For example, many visitors won't know whether "04/06/2005" is April 6 or June 4. So use "April 6, 2005" or "6 April 2005".
Another reason to always use Western dates is what might be called the Y1C problem. Remember Y2K? This is similar.
How do I check?
Just look. The Web site of the Office of the President, for example, has an automated date script that on June 21, 2005, produced "Jun 21, 105". Horrible!
Examples
- wrong: 94-0621
- wrong: June 21st, 2005
- right: June 21, 2005
No blinking text
Why is this important?
Even in the early days of the Web, when confusing background images, ugly text colors, and terrible design were almost universal, nearly everyone recognized that blinking text is extremely annoying. In fact, this technique is so annoying that many visitors will refuse to read any page with blinking text.
No scrolling text
Why is this important?
Scrolling text is annoying, hard to read, and frequently depends upon non-standard code to function.
No Chinese punctuation or related marks in non-Chinese pages
Why is this important?
Don't use the Chinese character for a punctuation mark when English has a more widely supported mark. Chinese punctuation marks are not designed to fit alphabetic text; thus, these characters look unbalanced and ugly when placed in the context of an English-language Web page. Moreover, the use of any Chinese anything could cause Web pages to render incorrectly for many visitors to your site. Keep in mind that most of them do not have Chinese operating systems or have their computers set up to read Chinese text. After all, they're looking at the English section of your Web site, so give them real English.
Examples
- wrong: tel.:(02) 2311-3731
- right: tel.: (02) 2311-3731
- wrong: 90%
- right: 90%
- wrong: Semicolons are important; don't screw them up.
- right: Semicolons are important; don't screw them up.
- wrong: Parentheses (like these) are also important.
- right: Parentheses (like these) are also important.
- wrong: Get it right!
- right: Get it right!
- wrong: Is this correct?
- right: Is this correct?
How do I check?
Just look -- but do check carefully, because these are easy to overlook. The most commonly mistaken punctuation mark is the colon (:), so pay particular attention to these.
No files or folders labeled in Chinese characters instead of the Roman alphabet
Why is this important?
Any file or folder name that includes Chinese characters is a file or folder that most foreigners will not be able to type out for themselves or send as a link to others through e-mail. Nor could the link name be printed in most Western printed sources. This is another good reason to learn correct romanization.
Although Chinese characters must never be used anywhere in the URL of an English-language Web page, they could be acceptable in some cases for pages in Mandarin and other Chinese languages. But note that differences between traditional Chinese characters and simplified Chinese characters may also prevent some people from easily being able to type out the URL of a Web page. Thus, even for pages in Chinese, it's often best to stick with English or romanized Mandarin for names of directories and files.
Examples
- http://www.rdec.gov.tw/mis/download/共通作業平台規範.pdf
- http://www.cge.knu.edu.tw/newindex/設立目標eng.htm
- www.abctravel.com.tw/銅鑼灣.html
Home page free of outdated information
Why is this important?
Having outdated information on your home page makes it look like you pay no attention to your Web site. (And if you don't pay attention to your own site, how can you expect others to?) It's much better to have no news on your home page than to have news about events that ended months or even years ago.
Copyright notices are often several years out of date.
Links
Prominent link to the English-language site from the Chinese one
Why is this important?
Most people who want an English-language site can't read Chinese and won't be willing to spend much time looking for the link that gives them what they want to see.
Also, it should go without saying that the link should say "English" instead of "英文" (which most foreigners won't be able to read). But I've seen this astonishing mistake on several prominent Web sites.
Example
- site with "英文" instead of "English". Dr. Tzeng is a top linguist, so maybe this is just a sly joke on his part.
Prominent link to the Chinese site from the English-language one
New pages open within the same window
Why is this important?
Opening new windows is against the spirit of the Web -- and it's
annoying, too, especially because it breaks the back
button.
Proper link style? (Link on names, not URLs.)
I'm amazed how common URLs are in link names. Using them is absurd and against the notion of how the Web is supposed to work. Link on the name, not the Web address.
Examples
Wrong:
Wrong:
- Ministry of Foreign Affairs www.mofa.gov.tw
- Government Information Office www.gio.gov.tw
- Yahoo www.yahoo.com
Right:
Proper link style? (Link on names, not "click here," etc.)
How do I check?
Just look for yourself.
Wrong:
"To enter the contest, fill out the application form. You can do that by clicking here."
Right:
"To enter the contest, fill out the application form."
Further reading
When link text is in English, it leads to an English-language page
Why is this important?
Again, this should be obvious. But many sites don't follow this simple principle. For example, a prominent link on the MOFA Web site to that site's FAQ leads to a page entirely in Chinese.
If there's no English text on the destination page, there shouldn't be a link from an English Web page, except in rare cases (and even then only if the link notes that the page is in Chinese only).
Valid links
Why is this important?
Web pages and sometimes entire Web sites come and go, so you occasionally need to make sure that all of your links (both internal and to other sites) are still good.
How do I check?
Use software designed to check links. REL Link Checker Lite is one such program; it's freeware.
Main e-mail addresses are position- rather than person-specific
Why is this important?
People come and go at companies and organizations, and Web sites frequently fail to keep up with these changes. So, if you have a Web page advising people to contact miawang@illusion.gov.tw but Mia Wang has changed jobs, that message will never get through to someone who can help the person in need of assistance.
Imagine your organization registered a domain name. If the e-mail address is not one that is checked regularly, your registration could expire without your knowing about it in advance. This happens more often than you might think. By the time people figured out the problem, your domain might have been bought by someone else -- all because of a very simple matter.
Instead, have job-specific e-mail addresses and either have the mail from these forwarded to the relevant person or have that person responsible for two separate e-mail accounts (private and job-specific).
Encode e-mail addresses (optional)
Why is this important?
The surest way to get your inbox filled with spam (junk e-mail) is to put your e-mail address on a Web page. Spammers have programs that search the Web for such e-mail addresses. So if you want to avoid spam, you need to do something to the coding for your address so it won't be visible to these bad programs but will still be visible to those who legitimately need to contact you. By reducing or even preventing spam, you will save time, improve efficiency, and reduce the chance of your computer receiving viruses and spyware.
How do I do this?
Use a tool such as Automatic Labs' Enkoder before adding an e-mail address to a Web page.
Note that a Web page with many e-mail addresses would not work well with this approach because it is code heavy. For example, to encode requires the following:
<script type="text/javascript"> function hiveware_enkoder(){var i,j,x,y,x= "x=\"783d223137783d5c2227363b383078323d66366f34375c5c5c22347235283261363334" + "69323d636636363130353b643436373069333c356332366378362e63393636396c36653431" + "3636316e3767396436366474366834323632643b376930633235352b323d32643633303632" + "39633632366329357b333536363166376f353236373572362865383636326a363d39303732" + "304d3661633132363174366835633633302e366d343232323469366e393837323728367835" + "353236652e376c373436372b65366e303979367b673274353229373268362c34373d372b69" + "372b396569323b363639333468377429373b306567366e2d322d323565366c6a323e63642e" + "36783d366939353c37693b362931333b36307b367964663d36692b363d643428367278322e" + "355c5c5c5c6f5c5c633668655c22663d3b613372327827362741327463353d367928356a33" + "373b355c5c29373b335c5c645c5c5c227d377d353362343379363b5c22373033333b6a3d65" + "3662353376616c2836396132782e636836323232617241743665353328302929373133363b" + "783d78376666322e73756233633733737472283737343631293b79376565363d27273b3231" + "3636666f722837376635693d303b36303732693c782e363165366c656e673239653674683b" + "69366466342b3d3229363039797b792b3d367d333b782e737537293529627374723732632c" + "28692c3136696328293b7d66367239746f722869367330623d313b69347537733c782e6c36" + "2e6578656e6774362b3127683b692b362537273d32297b37283165792b3d78367039612e73" + "756236636473737472283665336e692c31293775393d3b7d793d365c5c5c2230792e73753b" + "327933627374723d372739286a293b223b6a3d6576616c28782e636861724174283029293b" + "783d782e7375627374722831293b793d27273b666f7228693d303b693c782e6c656e677468" + "3b692b3d38297b792b3d782e73756273747228692c34293b7d666f7228693d343b693c782e" + "6c656e6774683b692b3d38297b792b3d782e73756273747228692c34293b7d793d792e7375" + "62737472286a293b\";y='';for(i=0;i<x.length;i+=2){y+=unescape('%'+x.substr(" + "i,2));}y"; while(x=eval(x));}hiveware_enkoder(); </script>
Web site contact e-mail address
Why is this important?
Allow visitors to your site to contact you to tell you of problems with your site or requested features. Important: If the site is in English, make sure any mail goes to someone who can read and write English.
No underlining except for links
Why is this important?
One of the conventions of the Web is that links (at least those not in menu bars) are underlined. Text that is underlined thus appears to be a link. If you underline things that aren't links, you'll probably confuse your readers.
Images
Use of alt text
Why is this important?
To computers, a picture is just some binary data. That data could represent a photo of an elephant, a child's drawing of her mother, or a map of Taiwan. A computer (or someone who is blind) has no way of knowing what an image is supposed to be of unless "alt" text is added in the HTML.
How do I check?
Firefox: Images --> Replace images with ALT attributes
Further reading
Properly sized images
Why is this important?
Image size is measured in pixels. In HTML, however, it is possible to make an image appear larger or smaller than its actual dimensions. This can result in problems:
- images made to look smaller than they really are means visitors have to download a larger file than is necessary, slowing down your site
- images made to look larger than they really are look blurry
- HTML that distorts the height-width ratio of the original image distorts the appearance of that image
How do I check?
Using the Firefox Web-developer toolbar, select Images
--> Outline images with adjusted dimensions
.
All images are relevant
Why is this important?
Images aren't necessarily bad. Indeed, they often greatly enhance the appeal of a Web site. But they are often misused. An image for its own sake doesn't make things better; it slows down your site and clutters up the screen. And remember that even relevant images can be a distraction.
Please, please don't add "cute" images. To most foreigners these don't make your site look lively but rather childish and unprofessional.
And don't forget the important principle: real text instead of images of text.
An old saying is especially true for Web-site images: "Sometimes less is more."
No distracting movement
Why is this important?
Unless your Web site is for young children, your visitors are probably there to find information. Images that move (especially those that never stop moving) or blink are distracting and make it hard for people to read your site. Moreover, such images are almost never relevant to your site.
Example
The Bureau of Consular Affairs provides several good examples of what not to do. The home page (as of July 2005) has at least eight animated GIFs, most of which are simply ugly and all of which are distracting.
Images that look like buttons have links; images that don't look like buttons don't have links
Further reading
Technical
Valid (X)HTML
Why is this important?
Think of this as something like a technical spell-check. Invalid HTML can result in pages being rendered incorrectly. A page with incorrect HTML might look OK to you right now on a certain browser and certain system. But the only way to ensure it's going to look OK to everyone now and in the future is to use correct HTML or XHTML. Also, most Web sites need adjustments from time to time. This is much easier to do when the HTML is correct and CSS is used (see below). If you accept a site with invalid code, that site will take much longer to make changes to. Remember that time is money.
Any contract with an outside company for a Web site should insist that the HTML validates. If the company says it can't do that or this would be too much trouble, find a different company. In general, sites produced by Microsoft FrontPage have invalid and generally awful code.
For most sites, the best choice at present would be "XHTML strict".
How do I check?
Using Opera, go to the page you want to check and then hit
CTRL + ALT + V
to send the page to the
validation checker.
Or, using Firefox, hit CTRL + SHIFT + H
. If the Web
page is not yet on the Internet but instead is on your hard drive,
hit CTRL + SHIFT + A
.
Further reading
- Why validate?
- Why should I care if my document is in correct HTML?
- HTML Tidy (essential program that corrects HTML errors)
Valid CSS
Why is this important?
This might seem like a small item, but it's not. Knowing CSS is essential for making an efficient Web site. It would be difficult to overstate the importance of CSS for a well-run Web site.
CSS (Cascading Style Sheets) allows you to make faster, more flexible Web sites. From just one stylesheet you can control the look of an entire Web site. CSS allows you to separate content from appearance, making your site better for everyone. If whoever made your site didn't know and use CSS, your site almost certainly has serious problems and is highly inefficient.
Proper HTML and CSS can also make separate Web pages for printing unnecessary. (See CSS Design: Going to Print.)
How do I check?
Using Firefox, go to the page you want to check and then, from the
Web developer toolbar (not Firefox's main toolbar), go to Tools
--> Validate CSS
(if the page is on the Internet) or
Tools --> Validate Local CSS
(if the Web page is
still just on your hard drive).
Or, using any browser, go to the W3C's CSS validator and check for yourself.
Further reading
- Eric Meyer's CSS work
- Tantek Çelik
- CSS Zen Garden (This is an excellent demonstration of the power of CSS. Every demonstration page on this site has exactly the same valid HTML. Yet the pages look radically different. Here are some examples: Kelmscott, blackcomb* 75, Greece Remembrance, Red Paper, Toddler Art, Defiance, Odyssey.)
- CSS links
Correct character encoding
Why is this important?
If your Web page is in English but your code tells browsers that the site is in Chinese, visitors to your site are likely to experience problems and delays in viewing your site. Not having this right can be a big problem. If you want to have a page that is mainly in English but with a few Chinese characters, the proper encoding to use is UTF-8, not Big5.
Similarly, if your page is in Chinese but the encoding is set incorrectly (or not set at all, as is all too often the case), you have a big problem.
How do I check?
Using Opera, click on the "Info" button in the left toolbar. One line will begin "Encoding from server (used by Opera)." If the page is in English, the encoding should not be "Big5", because this is used for pages in traditional Chinese. Instead, the encoding should be set to "utf-8" or, less ideally, "iso-8859-1". Anything else is probably wrong.
From Firefox's Web developer toolbar (not Firefox's main toolbar),
go to Information --> View Page Information
and then
look in the Meta
box. It should say something like
text/html; charset=UTF-8
. If your page is not in Chinese
but the Meta box says text/html; charset=Big5
, you have
a problem that needs fixing.
Further reading
URL works without www prefix
Why is this important?
You shouldn't make visitors work more than they have to for them to reach your site.
This needs to be corrected at the server level.
How do I check?
In Opera or Firefox, type your URL in the address bar, leaving off
the www
prefix, and hit enter
. Thus, you
would enter gio.gov.tw
, not www.gio.gov.tw
.
If your home page does not come up, you should have your server
reconfigured.
For an example of a site that has been configured to work without the www prefix, compare Pinyin (http://pinyin.info) and Pinyin (http://www.pinyin.info), which work equally well.
For an example of a site that does not work without the www prefix, compare moi.gov.tw (fails) and www.moi.gov.tw (works).
No frames
Why is this important?
A long time ago, some people decided frames are a good thing. Time has shown they were wrong.
The W3C notes a number of the problems with frames:
- The [back] button works unintuitively in many cases.
- You cannot bookmark a collection of documents in a frameset.
- If you do a [reload], the result may be different than what you had.
- [page up] and [page down] are often hard to do.
- You can get trapped in a frameset.
- Searching finds HTML pages, not framed pages, so search results usually give you pages without the navigation context that they were intended to be in.
- With frames, noframes markup is necessary for user agents that don't support frames. However, almost no one produces noframes content, and so it ruins Web searches, since search engines are examples of user agents that do not support frames.
- There are security problems caused by the fact that it is not visible to the user when different frames come from different sources.
In short, there are just way too many things that can go wrong with frames, so don't use them.
How do I check?
Use Opera's Info
button. Note that frames and "inline
frames" are different.
Home page under 100 KB
Why is this important?
Most Web pages take unnecessarily long to download, frustrating many visitors to your site. There are still plenty of people in Taiwan and the world as a whole who access the Internet through dial-up connections. Unless your Web site is for playing graphics-intense games online, there is no need to shut out a sizable percentage of your potential visitors by making your site take many seconds or even minutes to download.
Remember that a Web page that may appear almost instantaneously on your own system may take much, much longer for others. Do not judge the speed of a site by how quickly it appears to load on your page or on that of your Web designer. Look instead at the file size of the HTML and other elements (graphics, etc.).
Sure, some popular sites have home pages larger than 100 KB. But keep in mind that those sites can get away with that because they're so popular that people will look at them regardless. Your site, however, isn't likely to be in the same category as eBay, Amazon, or Yahoo.
Keep in mind that a 100 KB page can contain a great deal of information. This very long page, for example, is about 100 KB, including graphics.
How do I check?
In the Info bar of Opera, see "Size of main page" for the file size of the coding itself and "Size of inline elements" for the total file size of pictures and other such non-HTML items. Add those two numbers together.
Misc.
Cross-browser compatibility
Why is this important?
One of the most important things to keep in mind is that not everyone has the same computer setup. So don't judge a site by how it looks on your current system with your current browser alone. Other people have different computers, different browsers, different language set-ups, etc. Thus, checking your site with just Microsoft Internet Explorer version 6 (or whatever) alone is a big mistake, because others won't necessarily see what you do.
You should also check your site with at least Firefox and Opera, preferably on Macintosh and Linux machines as well as Windows. Don't worry about making the site look the same in older browsers that were not built according to Web standards (such as Netscape 4.7); but do make certain that all the text is accessible regardless of the browser. (This is especially important for those who are blind.)
To get an idea of how a computer will "see" your site, in Opera,
perform View --> Style --> User Mode
. Then select
"Emulate Text Browser
".
To get the same basic effect in Firefox, go to
View --> Page
Style -->
No Style
. And then, on the
Web-developer toolbar, select Images -->
Make Images Invisible
.
Examples
- Council for Cultural Affairs
- This is a complete disaster in browsers other than Internet Explorer. Not only does the layout break badly, the menus won't work!
- Research, Development, and Evaluation Commission
- The main content appears too far down the page in browsers other than IE.
Further reading
Free of counters
Why is this important?
Counters have been out of fashion since before this millennium began. You'll look painfully old-fashioned if you have one on your site. Also, many counters aren't programmed to handle large numbers, so if you have a busy site you risk having visitor number 999,999 followed by visitors numbers 0, 1, 2, 3, etc.
You should, however, have a site-statistics program -- just not one that gives your visitors useless numbers on your home page.
Unnecessary to scroll sideways, even in sizes as small as 800 x 600
Why is this important?
Remember: Design for the Web, not specific browsers on specific operating systems with specific sorts of monitors set in specific ways.
People hate to have to scroll sideways in order to read a Web page, so don't make them.
How do I check?
In Firefox, click on Resize
on the Web-developer
toolbar and then choose 800x600
. If a horizontal
scrollbar appears at the bottom of the page, the site has a
problem.
One danger sign is something like the following: "Best viewed with IE 4.0 or higher at 800 x 600 resolution."
Example
No sounds played or loaded automatically
Why is this important?
Many people find sounds on Web pages extremely annoying. Also, they take up a lot of file space and thus slow down the loading of your Web site.
Logical and clear structure of files and folders
Why is this important?
Web-page addresses that can't be remembered easily are easily confused, especially if someone needs to type out a URL. When looking at the address of a Web page, ask yourself whether you would allow a location like that for the filing of documents.
For example, the English home page of the Web site of the Ministry
of Foreign Affairs is www.mofa.gov.tw/webapp/mp?mp=6
.
"webapp"? "mp?mp=6"? What do these mean to a person (not a computer
system)? Why are they there? These are not clear. They are just extra
layers of confusion between people and the sites they need to view or
manage. There is nothing to indicate this is a home page or in
English, or even that it's important. Much better would be
www.mofa.gov.tw/english/
or
www.mofa.gov.tw/english.html
.
Poor ordering almost guarantees that Web pages will get lost over time as the Web site grows and personnel come and go.
You wouldn't allow someone to organize a library by the color of the books, would you? So don't allow someone to organize a Web site using unclear naming practices and illogical ordering.
Further reading
- Choose URIs wisely
- How to Succeed With URLs
- Slash Forward (Some URLs are Better Than Others)
- URLS! URLS! URLS!
No Flash
Why is this important?
Flash could be appropriate on a few sites. But on most it is simply a bandwidth-wasting distraction. Many Flash images also violate other important guidelines, such as not having blinking text or distracting movement.
Search function
No "best viewed with ..." statement
Lots of sites state something like the following: "Best viewed with IE 4.0 or higher at 800 x 600 resolution." This should not be done because it is basically an advertisement that the site has not been designed correctly to Web standards.
Why is this important?
One of the main themes of these guidelines is that Web sites need to be designed to Web standards, not to certain browsers running on certain kinds of computers with certain kinds of monitors set at certain screen resolution. Your site is meant to serve its visitors, so don't try to make them change for you.