Taking Your Camera on the Road

Before you can get your web page noticed, you have to make sure all the parts fit together and it works properly. Why? Well, in order to be seen, the page has to work. In other words, all the pieces and parts must be read by the user’s Internet browser, interpreted, and displayed upon the user’s screen. This seems like a simple task, but there is always a wrench thrown in to make it a little more complicated.

Currently, there are about a dozen popular Internet browsers. Microsoft’s Internet Explorer is the most popular with about 95% of the marketplace, followed by Opera, Safari, Camino, Firebird, and Netscape, though Netscape has just gone out of business. An Internet browser is software that interprets a web page’s code (HTML, CSS, PHP, etc.) and visually displays the content so it is easy to view and read. Different browsers feature different ways of interpretation, therefore you need to make sure your site’s coding can be read by the majority of browsers. We’ll get to browser compliance in a moment. Let’s look at HTML compliance to begin with. Welcome to the stage the W3 Organization’s standards and compliance guidelines.

In 1994, a group of web designers and programmers got together to create standards for universal access in web page coding. The World Wide Web was to be the “face” of the Internet, and these people were determined to make all the information available on the Internet open to everyone, no matter what kind of computer or software they were using – and no matter what language they could read. They wanted it open and available, without limits. This meant that the page not only had to be visually “pretty” for those with eyes, it had to “sound” and work pretty for those who are dependent upon other senses. An accessible web page should work on a computer monitor, with a browser that can’t “see” the graphics, with “reader software” (software that “reads” out loud what is on the screen), braille readers (converts content to a special board that produces braille), and can be used by someone without the use of their arms or hands. With an estimated 20% of all Internet users physically challenged in some way, the need for this kind of access is critical. Ah, but they didn’t limit the concept of accessibility to only the physically challenged. Millions of people want access to web pages on handheld computers, Web TV, and cell phones. Access for all means access for all.

The W3C created a uniform code for the programing language of the World Wide Web. They set the standards for approval and modification of the code and developed methods of validating that code. Internet browsers slowly caught onto the idea of standardization and today web designers can pretty much design web pages from one set of standard code. This benefits everyone. it’s like everyone speaking the same language at an international meeting – we all understand more.

Part of creating standards for the web is the challenge of compliance. There are no rules that state web page designers have to follow the standards set up by the W3, but if you want to design web pages for everyone, and I mean EVERYONE, then best play by the same rules as everyone else so everyone can access your pages.

Why Validate and Maintain Web Design Standards

• Web Developer’s HTML Standards Compliance – Why Bother?
• The Real Reason You Should Care About Web Standards **
• The Business Benefits of Web Standards ***
• Whacky Matrix Metaphor Article on CSS Based Design ***
• Web Standards Organization
• Using an HTML Validator
• Why Validate HTML?
• Acts of Volition’s Open Letter to the Web Design Community: Why should I redesign my site with Cascading Style Sheets
• Why the Web Sucks
• Why Validate Your HTML
• Why Tables for Layout is Stupid
• Could Helen Keller Read Your Page?
• So, why bother?

Compliance Equals Proper Code

Begin your efforts by understanding how the various code tags work, and have a good understanding of HMTL structure and CSS presentation codes. Let’s take a moment now to look at a few of the most commonly overlooked and often misunderstood basic compliance issues.

In order for your pages to meet the W3 Organization standards, the coding must be accurate and complete. All code must begin and end with the proper code (tag). This means that for every <p> there needs to be a </p> closing tag. Designers used to be able to get away without the closing code on a few tags, but with the stricter XHMTL and XML standards, you have to cross every “t” and dot every “i”.

Codes must follow a specific sequence and the tags must be nested appropriately. The last tag to open must be the first tag to close. For example, if you have a paragraph that starts with a phrase in bold, the wrong tag sequence would be:

<b><p>Text in bold:</b> More text rattles on here.</p>

The proper sequence should be:

<p><b>Text in bold:</b> More text rattles on here.</p>

Even if you are not ready to move into XML, prepare yourself for the future now by making sure that every attribute is in quotes and every open tag is closed. For example, we used to be able to get away with:

<img src="ball.gif" align=right width=100 height=300 alt="Picture of a pink ball.">

Not any more. Every attribute used within a tag code must have quotes around it, so the proper way to code this is:

<img src="ball.gif" align="right" width="100" height="300" alt="Picture of a pink ball.">

We also used to be able to get away with leaving closing tags out like in this example of a list:

<ul> <li>Item One <li>Item Two <li>Item Three </ul>

Not anymore. For every opening tag, there must be an ending or closing tag:

<ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul>

Presentation verses Structure

One of the biggest challenges facing novice web page designers is the concept of the separation of the structure architecture of the web page from the presentation style. The structure of a web page is held within the HTML (Hyper Text Markup Language) tags on a page. The style and beauty of a web page is attached to each HTML page in the form of a Cascading Style Sheet (CSS) page. This page instructs the HTML page on how each element should look. For example, if you would like your header tag H1 to be in the font Arial and to be bold, dark blue(Hex Color code #333399), and about 120% larger than your text font, the old style of including presentation style with HTML would look like this:

<H1 align="center"><B><font size="2" font face="helvetica, arial, verdana, sans-serif" color="#333399">Title Here</H1>

You can remove all those codes from your HTML page and just leave:

&ltH1>Title Here</H1>

In the CSS page, most commonly called the style sheet, there would be a presentation code that would instruct the browser to display the H1 as “Arial, bold, navy (#333399), and 120% larger” and might look like this:

H1 {
font-family:helvetica, arial, verdana, sans-serif;
font-size: 120%;
color: #333399;
font-weight: bold;
font-style: normal;
text-align: center}


The use of style sheets are very important within web page design. With one style sheet for your entire Website, you can maintain a consistent presentation throughout. It also makes changing the “look” of your site easy. If you would like to change your header H1 to the color red and make it italic, instead of changing it on every single one of your 400 pages, you would just change the style sheet in one spot and it would be changed throughout the entire site.

These are just samples of the minimum you need to do to make your pages meet the W3 Organization standards. We discuss more about how to create Cascading Style Sheets (CSS) and developing web pages in our series of articles on web design. You can also visit the W3 Organization’s Websites and the others listed below to help create the most “user friendly” and compliant web pages.

Compliance With Software and Hardware

We’ve just covered the compliance associated with the coding that the web page designer uses to create the physical pages for interpretation by the Internet browser software, but compliance also means accessibility. Remember, accessibility is defined by the ability of the software on the computer system to interpret the code for display, projection, printing, speech, or whatever output the system requires. The body of knowledge and capability for these different forms of “media” is limited but growing. We’ve included a few links and resources below. Part of compliance means making sure that your design will work across the broad spectrum of software interpreters and hardware, so research what it takes, and then check your style sheets and HTML code against the validation software and online programs available.

Next Step…

To make sure your pages are compliant, you have to validate them. This means running your pages through a testing program that examines every tag and element to make sure that all the parts and pieces are accurate, they fit together properly, and they meet the established standards.

CSS – Reference

• CSS Style Sheet Browser Support by Selector
• Cascading Style Sheet Pointers
• Selectoracle – Explains complex CSS selectors on your site *****
• Putting Style Sheets in Perspective: Abbreviating CSS Code
• Cascading Style Sheet Guide
• Code Ave’s CSS Resources
• Codestyle.org’s CSS Style Guide
• CSS Pointers – List of Dangerous and Safe CSS properties
• Jessett’s CSS Style Properties Guide
• CSS 2 Framed References for easy code research
• CSS Crib Sheet
• NYPL Online CSS Style Guide
• Web Design: CSS Quick Reference – Syntax
• Using W3C Core Styles for CSS templates
• W3C’s Cascading Style Sheets Level 2 Specification
• W3C Recommendations for CSS2
• Syntax and hierarchy of CSS styles

Design – Reference

• Rules of thumb Older well-written article about web design.
• Web Design Group Home of many good online resources
• CSS1 Support Chart for Cross Browser References
• CSS2 Support Chart for Cross Browser References
• Web Standards Awards
• Web Standards Organization
• Economist’s Style Guide
• Design Eye for the Usability Guy

Access – Compliance Standards

• Creating an Accessibility Statement
• Review: International Compliant Style (IC-Style) Accessibility
• Accesskeys and Reserved Keystroke Combinations Chart
• Clagnut: Accesskey Standards
• Keyboard Access Information (UK Government Recommendations) *****
• Accessibility Statement and Resources
• A Primer for Accessible Web Pages
• Section 508 US Accessibility Law
• Checkpoints for Web Accessibility Guidelines

Resources for Designing for Various Media

• HTMLDog’s HTML and CSS for Mobiles

Validating the code behind your web page or Website isn’t limited to a check to see if the HTML or CSS codes are right. You need to check the content of the page, test and verify accessibility, and thoroughly test your page under different viewing conditions in order to know if the design will indeed be accessible: visible and usable by everyone.

The order for checking and validating your pages should be:

• Content
• HTML tags
• CSS codes
• Accessibility
• Links

Creating “accessible” web pages is not just a standard from the W3C Organization. It is considered a requirement by some search engines. Getting noticed means being “seen” by search engines, so do your best to meet their needs, too. Don’t limit your audience by creating limited pages. It’s not hard to make your page accessible, and it will help you in the future as the rules become more stringent on this topic.

By checking the content and basic coding, including the HTML and CSS style sheets, you are making sure the web pages can easily be read by others, no matter their software. After all, if your page is doing strange things because of screwed up bits of code, it makes it difficult to read and people will click away from you quickly. Checking for accessibility guarantees your page will be able to be read by not only any Internet browser software, but by anyone.

Just because a web page looks good on your screen doesn’t mean that all the coding is accurate or that it will look good on someone else’s screen. Begin by checking your page against the W3 validator. If you have left a tag without a closing or have too many tags that don’t match, or the elements within a tag aren’t right, these will show up in your validation report. Any little bugs in the CSS style sheets will also be found. To check your style sheets thoroughly, run it through W3’s CSS Validator separately. Fix and correct the mistakes and pass it through the tests again. When you get it right, the official validators reward you with an icon to post on your site to tell the world “I passed the test!” Don’t put this on every page on your site, but assign it to a nice “wall” on your “about us” or information page, just so those who are really interested in whether or not you passed can find it.

Most web page validators offer a link to help you understand what element is missing or needed to fix the code. About.com’s article about Using an HTML Validator discusses the most common errors to help you understand how to fix them if you need more information.

Different validators check for different problems. Some only check the HTML while others check both the HTML and CSS. There are validators to check your scripts, too. Some even check your layout to make sure all the containers are lined up as they should be and not spread all over the place overlapping, even though you can’t see it. Take the time to run your test pages through a variety of validation tests to catch all the little problems that might be there.

HTML – Validation

• Watchfire’s Bobby Validator for Standards and Accessibility – hardest to pass
• W3C Tidy Online
• Windows GUI Interface for TIDY
• Searchengineworld.com’s Validator
• Site Report Card Validator *****
• Valet Webthing.com
• The W3C’s HTML Validation Service *** (URL and upload)
• Watson Addy’s Validator
• Alpine Internet HTML Validator
• AnyBrowser’s HTML Validation
• Cynthia Says Validator
• Doctor-HMTL Validator *****
• HTMLvalidator.com’s Validator
• Website Test Tools and Site Management Tools (mostly paid, some free)
• Software QA and Testing Resource Center
• HTML Tag Checker
• W3.org Tidy Validator
• Cleans Your HTML Code to Shrink It

CSS – Validation

• W3.org’s CSS Validator (URL, upload, and direct paste in) *****
• Style-Sheets.com Validator (browser specific) ***
• W3C Style sheet validator
• WDG and HTMLhelp.com’s CSS Validator and Checker
• WDG Add-on CSS tool set for Win IE4.0x

Validation by Uploading Files – Validate From Your Computer

• W3.org’s CSS Validator (URL, upload, and direct paste in) *****
• Searchengineworld’s HTML File Upload Validator ***
• WDG and HTMLhelp.com’s CSS Validator and Checker (URL, upload, and direct paste)
• The W3C’s HTML Validation Service *** (URL and upload)
• HTMLHelp’s File Upload HTML Validator

Validators – Resources and Articles

• Fixing Your Website
• Mark Freeman’s Many Links to Validation Resources
• Squarefree’s Bookmarketlets (JavaScript for web page testing) *****
• Walidator.com

HTML – Articles about Validation

• Understanding How HTML Validators Work
• You Call That Website Testing?
• What Every Website Owner Should Know About Standards: A Web Standards Primer ***

Meta Tag – Validation

• BCentral’s Meta Tag Validator
• Scrubtheweb’s Meta Tag Checker
• Submitcorner’s Metascan

Size Does Matter – Web Page Size Standards

A move is on by many web page designers to help their viewers upgrade to newer browsers by providing links to free newer upgrade versions, but the desire to keep pages visible to everyone, even those with old technology, continues, therefore you need to test your pages against the older browsers to see how they will look and if they will work.

Some validators even check your page’s tags to see if the code is backwards compatible, able to be viewed by older browsers. While Microsoft has announced it will stop distributing Windows 98 at the end of December 2003, new studies report that quite a few businesses (39%) and individuals are still using software that is at least five years old. Odds are that a good percentage of these are still using older versions of Internet browsers.

There are also validators and web page testers that emulate the various monitors and graphic card resolutions and sizes. It used to be that most pages were designed with a recommendation of “best viewed with 600×800 resolution” inviting users to tweak their screen quality to this standard. Unfortunately, few people knew how to change their screen resolution. Today’s hi-tech computers (52% of all Internet users) feature a screen with a much higher quality, but people still don’t know how to change the setting if it didn’t arrive that way! Many people use lower screen resolutions like a magnifier, thinking this helps them see the pages more clearly. A properly set up screen will ease headaches and eye strain.

If you are designing your site on a monitor at 1024×768 and higher (SVGA), take time to check how your pages will look when viewed at 600×800 or even down to 640×480. But don’t stop there! Consider how web pages are currently being viewed by everyone. Are people only surfing the Internet from their desktop computers?

It’s all very nice to have your web page be viewable at screen sizes from 640×480 to 1024×768, but can your web page be viewed when the screen size is two inches (5cm) square? Web pages are now being viewed on handheld computers and cell phones. Can your page design pass the cell phone test? What about WebTV? On a small, medium or wide screen television? Can it be viewed on all these devices without scrambling your pretty layout and design? Do the graphics stay in place or are they munched up, covering up the text or not even visible? You aren’t just designing for desktop computers anymore.

This is where the power of CSS or style sheets come into play. With a well-designed style sheet, you can take these different size issues and backward compatibility challenges on, easily overcoming them. By adding another style sheet or incorporating the specifics for the different media, you can easily make your web page viewable by all.

To help you understand how different software and hardware “see” web pages, we’ve provided a page showing the graphic examples of how your page might be viewed by different screen sizes, resolutions, as well as on a handheld computer or cell phone.

The CSS Zen Garden site offers an excellent example of what well designed code can do. Volunteers have taken the exact same structure and content, well embedded with style tags, and created hundreds of different “looks” for the exact same content, simply by changing the style sheets. This is just an example of the power of a good style sheet.

After making all your changes and additions to meet the requirements of the different validators including looking backwards to ensure your page will work on a variety of browsers and monitor sizes and resolutions, run them through the primary HTML and CSS validators again to make sure that your “cleaning” didn’t create a few more little messes.

Tools – Validation

• Gazingus.org’s Validation Bookmarks
• NetMechanic’s Spell Check for Web Pages
• Pcman’s Web Page Screen Resolution Tester*****

Browser Statistics and Information

• Upsdell’s Browser News Statistics
• W3 Schools’ Browser Statistics and Trends
• Evolt’s Browser Archive
• The Counter’s Browser Global Statistics on Usage

Browsers – Validation

• Web Page Monitor (check for different sized monitors)
• AnyBrowser’s Website Viewer – How does your site look to other browsers
• Window Sizer – Check a page at various window resolutions
• AnyBrowser.org Developing Web Pages to Work for Every Browser
• Archive.org: Preserving the Internet Web Pages (Find old web pages)
• Bobby (checks sites for browser compatibility and disability access)
• Web Browsers Compatibility from Delorie
• Webmonkey – Browser Kit
• A Compendium of HTML Elements (browser compatibility lists)
• NetMechanic’s Browser Compatibility
• Learnwebdesign’s Browser References
• Public Lynx Access Browsers
• Checking with Multiple Browsers (the hard core way)

CSS – Media

• Code Style Media Monitor (projection, print, etc)
• Guide to CSS2 Support in PDA/Handheld Browsers
• pawgo.com’s Handheld Internet 101
• Pcman’s Free WAP Tools and Resources (WML/WAP Page Emulator)****
• How Can I Tell HTML Browsers from WML (Wireless) Browsers
• The Wireless FAQ (WAP, WML)
• W3C Mobile Access – Seamless Web Access From Mobile Devices
• W3C Mobile Access Activity Statement
• CSS Mobile Profile Test Suite
• W3C CSS Mobile Profile 1.0
• W3C HTML 4 Specs on Mobility – Handheld
• Aural style sheets
• The W3C CSS2 recommendation, Section 7: Media types
• Open Mobile Alliance for the Mobile Services Market
• Web Design for Mobility – Handheld, PDA, etc.

Ready to Add Content

When the structure (HTML) and presentation (CSS) codes passes the validations with he test templates, it’s time to start adding content. Before you add the text, make sure you have run it through the spell checker a few times, and have it proofed or passed through a grammar checker to make sure that your wording is correct. Many a user has been frustrated reading articles about how to serve up the best quality web product, and misspelled the word “Intrenet”, or left behind one of those common “from” or “form” mistakes. Proof your material thoroughly to make sure you are putting forward your best face.

If you are new to this, start slowly, with only a few articles, tips, and tricks, in addition to your gallery or product showcase. If you are experienced and have a web page already up on the web, it’s time to take the old content, put it through the wringer and incorporate it in your new page designs.

Again, upload only a few of the new pages and continue testing them through the various validators. Make sure they are working right with the new content. Sometimes a code is overwritten or misplaced during the copy and paste stages, resulting in the left side content sitting over on the right side of the page, and the right content smashed down at the bottom of the page. Take your time. After the first few pages are up and re-validated, then start adding more pages until you are confident that the process is working and you are secure with the coding.

your document. And make sure the content matches the use of those

Many times I’ve been so focused on the coding, I forgot to spell-check and really READ a document. I find out months, even years later, how a mispelled word or incorrect use of a phrase changed the whole content from what my goal was. Work hard to proof your material as much as you can before you post it. Have others read it and proof it for you. Keep the content concise but engrossing at the same time. The more effective your content, the more powerful the overall presentation will be.

The Accessibility Tests

While most HMTL validators test for accessibility, it’s time to really test your design for accessibility. W3’s Bobby is the most stringent of validators for accessibility requirements. It takes a lot of work to get the Bobby stamp of approval. It checks HTML, CSS, and links for accessibility. If any small detail doesn’t match its stiff requirements, you don’t pass. This is an excellent way to really test your web design skills. Understanding why it didn’t pass means learning about how the tags work together, enriches your skill level. Or so we like to tell ourselves. It’s hard work but worth it.

To meet accessibility requirements, every visual image must have a ALT or LONGDESC (long description) listed in its tag describing the image, especially if it is a graphic that replaces text. For example, , the graphic shown here spells out the word “updated”. If you hold your mouse over the graphic, a tip balloon will pop up with the ALT description which is “updated”. If a user is reading your page with a speech program, it will automatically access the ALT and read the description of the image as:

For example, updated, the graphic shown here spells out the word "updated".

Not every image needs a description, but any important one does. All graphics must have an ALT tag to comply with the standards, an empty ALT tag would be:

<img scr="graphic.gif" alt="">

If the ALT is descriptive enough, you don’t need the long description. If you do need more of a description of the graphic, you have to have a LONGDESC file. This is an unformatted html file which contains a verbose description. Here is a well written sample graphic code:

<img src="ball.gif" align="right" width="100" height="300" longdesc="images/descrip/ball.html" alt="Picture of a pink ball bounced high in the air by a child.">

Longdesc from ball.html: "Photograph of a pink ball being bounced by a child, just out of visual range but with his hands showing and just a glimpse of a smiling face enjoying the pleasure of bouncing a ball on the sidewalk."

Links are not exempt from accessibility emphasis. While they don’t feature ALT tags, they do have TITLE tags. Be sure that every link is titled with a description so the browser can “read” the tag, describing where the link will go.

<a title="Taking Your Camera on the Road Learning Zone" href = "http://www.cameraontheroad.com/learn.html"> Learning Zone </a>

This is just a sample of the very basics for making your page accessible. In the links provided below you will find more information, as well as on our own Accessibility Policy page.

There are other validators for accessibility that you should run your pages through. Some provide testing for how your pages look when viewed under different browser settings for the visually impaired such as the browser-forced use of various foreground and background combinations (some dyslexics can read black text on a dark blue or purple background better than against a white background), font types and sizes (make sure your fonts are scalable to easily permit such size ranges), color blind issues, and the use of access keys (for non-mouse movement through a web page). Can your page be read and still look good as straight text with no graphics? Would Helen Keller be able to read your web page? We’ve put together a page showing examples of how a web page might look under some of these situations. Part of the magic of the World Wide Web is its accessibility to everyone, so make sure you take the time to ensure your pages are indeed accessible to everyone.

Access – Compliance Standards

• Creating an Accessibility Statement
• Review: International Compliant Style (IC-Style) Accessibility
• Accesskeys and Reserved Keystroke Combinations Chart
• Clagnut: Accesskey Standards
• Keyboard Access Information (UK Government Recommendations) *****
• Accessibility Statement and Resources
• A Primer for Accessible Web Pages
• Section 508 US Accessibility Law
• Checkpoints for Web Accessibility Guidelines

Access – Organizations

• Dotless Braille
• Guild of Accessible Web Designers

Access – Resources

• Accessible Web Authoring Resources and Education
• Designing More Usable Websites – massive links *****
• Designing More Usable Web Sites
• Accessibility Forum
• Makoa.org’s Accessibility Resources and Information
• The Accessible Web
• Alertbox: References on usability of web design
• Blindness-Related Resources on the Web and Beyond
• Accessible Web Page Design – Resources for the Visually Impaired

Access – Speech

• An Introduction to Speech-Access Realities for Interested Sighted Internauts
• EmacSpeak
• Introduction to the Voice, Your Aural Font – CSS Tutorial

Access – Validation

• Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles
• Vischeck (simulates color blind vision)
• Accessibility Checking Favelets (scripts)
• Bobby (checks sites for disability access and browser compatibility)
• Notes on Tools for Checking and Improving Web Page Accessibility
• HiSoftware’s Online Content Accessibility and Quality Tester
• Evaluation, Repair, and Transformation Tools for Web Content Accessibility
• W3C Web Accessibility Initiative: Evaluating Websites for Accessibility
• WaiZilla: Open Source Accessibility Testing
• WAVE Online Accessibility Tool Checker *****

Access – Color Blindness

• Can Color Blind Users See Your Web Page?
• Q42 Color Blindness Simulator
• Visibone’s Color Blind Color Chart
• Color Blind Web Filter – Testing Online

Access – Information and Resources

• UK Government Standards for Access Keys Implementation
• The Digital Talking Player – Download
• Arguments for Making your Site Universally Accessible
• UK Web Accessibility Center for Public Access
• Don’t Fake Your Markup Accessibility Issues for CSS
• How Alt Attributes Help Accessibility
• Five Site-accessibility Tips to Help Comply with Section 508
• Building Accessible Websites (online free book)
• Improving Website Usability and Appeal
• Improving Website Usability and Appeal
• Designing More Usable Web Sites
• Viewable with Any Browser Campaign
• Making Accessibility Accessible: The Reasons Organizations Don’t Have Accessible Websites
• Accessible by Design
• Dive Into Accessibility
• Dracos Accessibility Examples (using popular “inaccessible” Websites and redesigning them to be accessible)
• Inaccessible Website Demonstration
• Provide Clear Navigation Mechanisms
• Design Considerations: Readers with Visual Impairments
• Maccassibility Teaching Web Accessibility to Blind Students
• CSS Accessibility Problems: Is Markup Dead?
• Accountability of Accessibility and Usability
• Useit.com CSS and Usability
• W3C Device Independence Principles – Understanding Accessibility Issues
• Guidelines for Creating Accessible Websites
• Curriculum for Web Content Accessibility Guidelines 1.0

Preparing your Website for search engines means tackling the following:

• Searcher’s Needs
• Search Engine Requirements
• Meta Tags
• Content Viability
• Internal Links
• External Links
• Linkability

How Do Search Engines Work?

There are several kinds of search engines. Some collect their own data through “robots” or “spiders”, software that crawls through the web, tracking the various links between pages and sites, gathering data which the search engine filters and adds to its database. Some rely upon individuals and businesses to enter their Website’s information manually, with a staff that checks and processes the information into their database. Other search engines, called meta-search engines or metacrawlers, don’t gather their own information but search the databases of other search engines, letting them do the work. And then there are combinations of all of these. For example, Google sends out robots to gather information. They also permit manual submissions. They also search other search engines to add information to their database. This combination creates a vast resource with checks and balances so they can offer a wide range of listings and not be dependent upon a single collection.

Once the search engine has the information from a web page, it applies a software filter to clean it up and determine whether or not it is worth including in the database. Many robots and spiders are now sophisticated enough to do much of the filtering before gathering the content, saving time and effort on the other end. Therefore, you have to pass their tests in order to be considered for their listings.

When a search engine searches, these are the things it considers and gathers when visiting your pages:

• Code Viability
• Page Title
• Links to your core pages (internal links)
• Links to external web pages (external links)
• Content – Text
• Word Frequency and Density
• Meta Tags (page description)

As you can see, a search engine doesn’t care about how pretty your Website is and how many pictures or dazzling graphics you have. All it wants is information and that comes from meta tags and content text.

Web page designs now encompass more than just some words and a few pictures. A lot of designers are opting for Macromedia’s Flash and other visual expressions to showcase their business and products with dramatic visual displays, video, sound, and slide shows. Photographers are definitely taking advantage of all the bells and whistles they can for visual impact. Unfortunately, when it comes to getting picked up by search engines, if you don’t have text or some basic textual data on your page, it’s difficult for the search engines to gather information about your site. They don’t “look” at the site, they just crawl through it gathering data. No data, no collection, no listing. Even if you use splashy graphics, make sure there is some underlying code that tells the search engines what you do and why they should bother with you.

Document structure and page layout (frames, tables etc.) affect how a search engine gathers information about your page. Frames can limit the robot’s ability to index your site, as they can’t easily access your attached frames. The newer “iframe” is also ignored by robots. If you are using frames, have a “no frames” version so search engines and users with accessibility problems can still make use of your page. If you use tables to layout your page, the layout may force the key information down lower in the page away from the searching eyes of the robots. Few search engine robots go beyond 50% of your site, so if the good content is low on the page, they will miss it. Meta tags, tags with information about your web page, are meant to be found within the HEAD of your document. If a search engine requires the meta tag information and it can’t find it, you lose.

Search engines won’t check your pages for proper tags and coding, but if it isn’t correct, it can lead the robot or spider in a wrong direction or confuse it. If it has difficulty moving through your pages, it will stop and look elsewhere. A robot can spot a well designed page because it can get to the “good stuff” faster. It also gives the robot information that could help raise the rankings of the page within the search engine database. It says that this page was designed with care and attention to detail and to the standards imposed by the industry, and therefore it should have valuable content worth considering. Not every page is worthy of inclusion. The easier you make the job for the robot, the more likely they will visit you, and return.

How People Search and How They Can Find You

Did you know that 53% of Websites are found by word-of-mouth? Yes, the old gossip method still works. There are many ways of spreading the news among friends, relatives, clients, your industry, and the general public, but let’s concentrate on how Internet users can find you through search engines. After all, your goal is to be found, right?

Spamming, Flooding, and Other Search Engine Failures

A lot of amateurs, and even a few veterans, of web page design using techniques they think will get them up the rankings in search engines. They come up with all kinds of gimmicks like hiding text on a page that isn’t visible (or sometimes is) to the user filled that if they use the word “sex” or “foreplay” hidden in the code, it will increase the likelyhood of coming up on search engine searches.

These just don’t work. They are a waste of your time, our time, and the search engine’s time. Excess code that is unimportant to the page adds to the file size and slows down the loading times. Search engines know how to look for such evils as spamming and you trying these techniques.

Stick to tried and true methods and your site will get the attention it deserves. It takes time, but it will happen if you follow the simple steps outlined within our articles and other sites offering sensible techniques for attracting and keeping the attention of search engines and your audience. Play nice and play fair.

How Do You Search?

Think about how you search the web. Do you start out vague or think it through to come up with the specific phrase or term to narrow your search immediately? Do you often search within those results (refining your search) or start over? How many pages of the results do you go through before you start over or just give up? Do you start with Google or Yahoo, or another search engine? Which search engines are people using the most?

Answering these questions tells you a lot about how people search and about how people would search for you. Are the content and vague in reference to your subject? If you sell toothbrushes, but never mention “teeth”, aren’t you missing something? As professional nature photographers, we redid our web pages recently and realized that most of our web page articles and images were related to travel and not so much to nature, so we rearranged our material to be more specific to travel, with nature as a side line.

Look at Competitor’s Web Pages

Look at your Search Engine World’s Keyword Validator to find how their page measures up to yours. By what words and phrases do you think people use to find them on search engines? Experiment and try a few to see if their site comes up. Don’t know who your competitors are? Some search engines make it easy for you. Search for your product line or subject and when you see a description that matches your interests, click on “Find Similar Pages”. Also check the links offered below for the most attract attention to themselves.

Categorize Your Website

Search engines like Google, Yahoo, and Altavista offer long lists of potential sites when searched. Others categorize their listings like a directory, similar to a yellow pages directory. These include DMOZ Open Directory and All The Web. You can search their site and get specific results, but the better technique is to “drill down” through their categories, getting more and more specific as you move down through the lists. For instance, our site, Taking Your Camera on the Road, could be found in a directory under Arts, Photography, Instruction, Workshops or Travel, Activities, Photography. DMOZ requires Websites to be categorized very specifically, keeping the listings per category down to a manageable number.

Directories like DMOZ can be very helpful in determining what category your Website belongs. Browse through their categories that apply to your site and check your competition. Are they dealing with the topics you are? Then you might want to reconsider your category. Or get more specific. To help people find you, it helps to be in the category they are searching. Think about it. Where would you find your topic if you were looking in a library or bookstore?

Keep a running list of the words and phrases you see repeated over and over again. Consider how they apply to you. We’ll discuss how to maximize your coverage in a moment, so keep collecting this information as you gather it and begin the process of understanding how people will search for you.

Below are some links to help you get ready for search engines. In the next article we’ll examine how your page functions and performs under the headlights of a search engine.

Our Listings of Top Search Engines

• Search Engines: Top Search Engines Listing
• Search Engines: Directories and Indexes
• Search Engines: Specialty Search Engines and Directories
• A Winner: Awards for Websites

Search Engines – Robots and Spiders

• Enginemage’s Robots Listing
• Database of Search Engine Robots
• Crawler Alert: Be notified by Email when your web page has been spidered
• The User Agent Database (spiders, robots, harvesters, etc.)
• List of Robot Agent Strings
• The Web Robots Database
• Tool checks your spidered pages with Google.com’s database. Good for verifying titles and descriptions.
• Robots.txt Syntax Checker
• Search Engine Optimization Tools – Search Engine Spider Simulator

Search Engine – Articles about Robots and Spiders

• How to block spambots, ban spybots, and tell unwanted robots to go to hell
• How to Know When a Spider Visits
• Optimizing for Spiders
• Search Engine Test-Webpage Spider & Crawler Test
• Using Apache to Stop Bad Robots
• Search Engine Robots that Search Your Site ****
• HTML Author’s Guide to the Robots Exclusion Protocol
• A Standard for Robots Inclusion
• All About Search Indexing Robots and Spiders
• Generating Simple URLs for Search Engines Robots and Spiders

Search Engines – Cluster

• Web Search For A Planet: The Google Cluster Architecture
• Clustering With Search Engines – Article
• Clustering User Queries of a Search Engine – Article
• Google.com’s “Sets” Cluster Search Project
• Mooter – NEW and VERY UNIQUE
• Vivisimo Cluster Search Engine – one of the oldest
• Infonetware
• Queryserver
• Tenoma (part of AskJeeves)
• Wisenut

Search Engine – Reference

• Understanding Search Engine “stop words” – ignored words
• Understanding Search Results Pages
• Search Engine Results chart (where info comes from)
• Search Engine Trends

Search Engine – Resources

• Google Features and Tools (allowing searching for your pages, links to your pages, and pages like yours)
• Metaspy’s Live Search Requests
• A Survey of Google’s Page Rank
• Search Engine Watch’s Search Engine Index – statistic reports – how the search world rates

Search Engine – Validation

• AnyBrower’s Search Engine View of Your Web Page – tester

Search Engine – Comparisons

• Who Powers Whom – Search Engine Sources
• Search Engine Ratings (which are the most used search engines)
• Searchenginewatch.com’s Search Engine News and Statistics
• Reports from Searchenginewatch
• How Search Engines are Inter-Connected
• Search Engine Rankings
• Search Engine Chart
• Search Engine Statistics: Relative Size Showdown
• Search Engine Comparisons
• Search Engine Stability and Submission Times

Search Engines – Designing Web Pages and Websites for Search Engines

• How to Search the Web – Understanding How People Search
• Enginemage – Search Engine Articles and Resources
• Searchenginewatch’s Tips and Articles on Optimization
• Search Engine Features for Webmasters
• How Major Search Engines Regionalize
• Searchenginewatch Site Submission Tips and Tricks
• Article on Site Submission
• Secrets of Search Engines
• Understanding Search Engines
• Site Search Engine Saturation
• A Helpful Guide to Web Search Engines
• Search Engine Advice
• Search Engine Optimization
• Search Engine Features for Webmasters
• Accessing Your Site Indexing on Search Engines
• Search Engine Guide
• How long does it take to get listed in a search engine

Search Engines

• Understanding Alexa for Webmasters
• Aesop
• All The Web
• Alta Vista
• Ask.com
• Ask Jeeves
• Google
• Link Master
• Specialty Search Engines
• Search Engine Collosus (massive listing of search engines)
• SearchEngineWatch’s Links to Search Engines
• Search Tools Product Listings (Very comprehensive list & Includes Reviews)
• Yahoo

Other Resources

• Marketing Experiments – Research into what works and doesn’t in web page design and marketing

There are two main aspects to preparing your pages for exposure to the World Wide Web. First is validation, the process of checking and rechecking the structure and design elements of a page to meet the standards. The other is a form of site maintenance, often called optimization – the process of fixing, repairing, maintaining, and speeding up web pages for better accessibility. Remember, the better and tighter your web page design is, the more friendly and appreciated it is by search engines, and by the users, the most important people to please.

Keeping Current: Checking Loose Links

The three biggest complains by Internet users are speed issues, broken links, and slow ads . We’ll discuss the issue of speed and fast-loading pages in a moment, but let’s tackle the number two complaint: broken links. Few things are more frustrating than tracking down the information you want, and finding that the real answer is on another page, and you click the link and get the famous “404 Page Error – Page Not Found”.

The term “web” came about as a visual image of how the Internet and web pages work. Through a process of links within a web, each web page connects with another web page which connects with another, and another, and so on and so on, all connecting the strands of the web together. When one of those strands is broken, the web weakens.

A web page features two different types of links: internal and external. External links take the user to another site, leaving yours behind. Internal links are the links that connect one page to another within your Website. As a search engine moves through your site, it relies upon the internal links to move through your web site from page to page, gathering information. If there is a break in any of these links, or you have pages that are not linked to from within other pages in your site, that page won’t be found by the search engines.

Most web page editing software permits the checking of internal links, and some even feature external link checkers. As you redesign your Website, take care to create a good 404 Page Not Found web page to guide people to the information they want. Put placeholders, pages with information that the content has moved, on the links to pages you have deleted or moved to let people know the address has changed, what the new one is, and where to find more information. If you use site statistics programs to monitor your Website’s visitors and access, check to see how often your 404 page is being accessed. If frequently, thoroughly check how up-to-date your internal links are to keep people inside your site on the right content.

Keeping up with “dead links” can be a full-time job if your site features more than a thousand links. There are several link checking software programs available to help you organize and check your links, as well as free online link checkers to help those with only a few links on their pages. Websites and pages come and go rather quickly, or they change their linking structure so broken links are commonly found while the Website is still functioning. While the link checking programs can identify broken links, you still have to manually check to see if the link is really dead or just moved. If you have a small business or site, schedule link checking about once every three to six months to keep your external links updated.

Link – Validation

• DMOZ’s Link Management Links
• Siteowner’s Link Checker
• Link Valet recursively checks links on your site.
• Webthing’s Free Link Checker *****
• W3C check link free utility which will test links on up to 150 pages.
• AnyBrowser’s Link Checker
• Anybrowser.com free utility which will check links on one web page.
• HTMLHelp Valet Link Checker
• Icehouse Designs Link Checker
• Link Alarm tests a site of any size for one cent a page.
• NetMechanic’s Link Check
• Poisontooth’s Free Link Check
• RelSoftware’s Link Checking Software
• Squarefree’s Bookmarklets – javascripts for checking links***

Fast-Loading: Optimizing Bandwidth

The number one complaint by users has little to do with design elements, based more on the speed of the system relaying the information, yet how a web page designer designs the page does influence the speed of access to the page. While most people just accept and tolerate the long waits for pages to load, they don’t have to. As the web page designer and developer, there are ways you can speed up the process. A happy user usually returns if the pages load quickly and the content is worthy.

Imagine your access to a web page as fluid passing through a funnel. On the server site, the side where the web page rests, the funnel is at its widest, though its width is controlled by the speed of the machine that hosts the web page. A fast server (computer) will feature a huge funnel opening, and an older, slower one will have a smaller opening. From this point, the web page information flows into the funnel towards you, at the narrow end. The width of the funnel is controlled by the speed of your computer and its hard drive to accept the information, the number of other programs you are running at the time (consuming your computer’s speed), the speed of the communications line you are using (telephone, cable, etc.), and the speed of the computers and lines through which the web page information passes through to get to you. At any point along the path, something can slow down a web page, such as an electrical storm over one of the computers passing your information along or a “traffic” jam of too many users online.

Auser user can speed up access to a web page by changing their computer’s speed (by upgrading or replacement) or changing their communication line (from telephone to high speed Internet). As of December 2003, 39 million, or 13%, of Americans are connecting via broadband (high speed Internet), a growth of 49% from last year. England, and the rest of the EU, is not far behind, with England announcing high speed Internet access to everyone in the country by 2005. Still, there are nearly twice as many narrowband (telephone line) users as broadband users. While the majority of users are still going slow, there are still things a web page designer can do to help the user get the information a little faster.

Adding Up Each Byte on Your Web Page

When a web page loads into a browser, it brings with it the content, the structural format code that holds the content, the CSS (style sheets) instructing the browser how the content should look and be arranged, the images within the content, and any scripts, frames, iframes, and other pieces of code that “brings” content to a page. Every character on a page, every < tag, colon, quote and equal sign – these all add up. For example, here is a breakdown of one of our web pages with six graphics on it:

The average base page, according to experts, should be about 30K, and grow to about 60K with all the graphics and scripts added in for the best loading speed, though less is always best. This page is way over the limit! So how do you get that number down?

There are a lot of good articles on optimizing web pages for fast loading, but here are a few tips.

Eliminate spaces

Often when writing articles and content in word processors and pasting the information into the HTML page, spaces are created at the end of paragraphs. If your web page editor permits multiple page search and replace, search and replace for _</p> (space then tag) to </p> (no space just tag) and see how many are found. With our over 400 web pages, we found and replaced over 49,500 spaces. This comes to just over 49K bytes of wasted space, but it still adds up. Spaces between tags are usually invisible on the screen, but they take up space. Check for spaces between ” >” and ” <” and see if they can go (be cautious of links next to links or code next to code as they will squish together with this search and replace). While empty lines and indenting around the coding help the web designer “see” the code better, they take up space so get rid of them.

Image Borders

By default, images do not have borders, but many web page editors automatically insert border="0" in their image tags. This adds up to 10 bytes per image which can be eliminated. The instructions for borders on images can be put into the style sheet if necessary. Ten images (or graphics) on a page and you have saved 100 bytes of space. One hundred bytes across 100 pages and you’ve saved 10,000 bytes. Again, not much, but they add up.

Excessive Comments

Web designers often use comments <--! Put mailing address here --> to help them with the layout of their coding in their HMTL and CSS pages. These are great, but they also take up space. Consider leaving them in your template pages and eliminating them in your final pages, or minimize them to something like <--! Mail -->.

Optimize Graphics

With the advent of JPEGs and GIFs, images can be used on web pages that feature compression to reduce their size while maintaining quality. There are now a wide range of programs available that will further reduce the size of your images without degrading the quality. If your site hosts a lot of images, consider investing in an image optimization program.

After you’ve optimized your page design, streamlining it for the fastest possible loading, validate the HTML and CSS again to make sure you haven’t slipped somewhere.

Clean Your HTML Code, Too: Go CSS

Go through your HTML code and pull out every presentation reference you can and put it in CSS (Cascading Style Sheets). There are hundreds of articles and resources for learning about CSS on the Internet, but here is a simple example. If you have a recurring headline of:

<H2 align="center"><B><font size="2" font face="helvetica, arial, verdana, sans-serif" color="darkblue">Title Here</H2>

You can remove all those codes from your HTML page and just leave:

&ltH2>Title Here</H2>

By moving all the presentation effects (color, size, font face, etc.) to the CSS (style sheet), you would shrink your HTML page by every mention you have of the H2 code and only have one listing in the style sheet applicable to every H2 found in your site as:

H2 {
font-family: helvetica, arial, verdana, sans-serif;
font-size: 120%;
color: darkblue;
font-weight: bold;
font-style: normal;
text-align: center}


CSS elements can also be streamlined and condensed. For example, the DIV code for a specific box layout may be:

#box {
margin-top: 2px; margin-right: 3px; margin-bottom: 2px; margin-left: 3px; padding-top: 2px; padding-right: 3px; padding-bottom: 2px; padding-left: 3px; border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-style: solid; border-color: blue}


Using the consolidated formula with a clockwise format, this can be reduced to:

#box {
margin: 2px 3px 2px 3px; padding: 1px 2px 1px 2px; border:1px solid blue }



Instantly, you may have stripped any where from a few dozen bytes to a 1000 bytes off the size of an HTML page, and increased the style sheet by only a few bytes. Less code, faster loading, less time waiting.

If you find you have created huge web pages, consider breaking them down into smaller portions, but take care. There are times when slicing up an article to reduce the page size is rewarding, with the faster access speed, and times when having one article paragraph per web page, requiring the user to click through dozens of pages to get to the end of your article – is a great time waster and inconvenience. For larger pages, work to find a happy medium.

One of the most fascinating sites I found on the Internet for web designers is produced by WebReference.com. It is a step-by-step explanation and history of their web pages with samples of the pages as they developed. The lessons they learned over the years can help all of us avoid the making the same mistakes. Their articles and information on optimization of their Website is a must read!

There are many other ways to streamline your code and reduce your bandwidth, so take some time to check them out. Your viewers will love you.

Designing for Speed

• Lean and Mean HTML *****
• Tutorial on Web Page Optimization
• Web Page Size Recommendations
• About.com’s Website Optimization Articles
• Journal on the Truth of Website Speed Optimizing ***
• Web Page Optimization and Increasing Speed
• Speeding Up Your Web Pages
• Optimization Week – Serious Analysis of Website Optimization ***
• If it’s slow, SAY So!
• Bandwidth Conservation Society
• The Easy HTML Weight Loss Program
• NetMechanic’s Load Time Check
• Site Optimization Strategies
• Submit-It Optimization Recommendations
• Web Page Bandwidth Analyzer
• Webreference Extreme Optimization
• Webreference.com’s Optimizing Web Graphics
• Website Optimization’s Bandwidth Report and Statistics
• WebSiteOptimization.com’s Web Page Analyzer ****
• WebSiteOptimization.com’s Analyze Services
• Web Page Bandwidth Analyzer – How fast does it load?

After you’ve validated your web page’s code, content for search engines, is there anything else you can do to maximize your search engine ranking? Yes, there is. It’s known as “linkability” or “link popularity”.

Google and other modern search engines are now determining a website’s ranking using the theory that if everyone is talking about it, it must be good. Ah, the old word-of-mouth advertising method.

Using a combination of word frequency, matching meta tags and descriptions, search engines are now adding “link popularity” to their sifter. By checking to see what pages you link to, and, more importantly, who links to your site, they can tell how many people are “talking” about you, and the more the merrier.

But it doesn’t stop there. The software actually evaluates “who” is talking about you and whether or not they are a reliable “source”. After all, it isn’t just who is talking about you, it’s their reputation for saying things about others that comes into play. No different from the real world. If Aunt Sally is a gossip, and you can’t trust what she says, then you rarely take her seriously. But when Aunt Sue speaks, everyone listens, because they value her opinion and honesty. The key to gaining ground in the ranks is to not only get everyone talking about you, but to get the right people talking about you.

The premise of link popularity comes from the world of academia. If your thesis or paper is worthy of citation (others referencing it in their articles and papers), then it must have value. Therefore, if your site has value within its content, people should naturally be willing to link to it as a recommendation of its value as a resource. In a perfect world, it would be a nice thing if you linked back to them, but this is not always possible. We have over 2000 external links on our 400 web pages. While it would be nice if Photographer XYZ linked back to us, it would be nearly impossible for the US Embassy or US State Department Travel pages to link to us, even though we list their links numerous times within our pages to help travelers. But Google can trace our link to the US Embassy or State Department and say to itself, “well, they are linking to a page with serious value” and throw that into the sifting mix to decide how “worthy” we are in their ranks.

Link to Me

In order to get others to link to your pages and to be worthy of such links, you have to first provide value. As nature and travel photographers and writers, we decided to not just show off our pretty pictures ( of which we have a lot!), but to share our knowledge and experiences on how we got those pretty pictures. I wish I had a quarter for every professional photographer over the years who told me I was a fool for teaching nature photography and writing articles about my photographic techniques. Years ago, there was an attitude of “not sharing” except with the very beginners. Why create competition? My policy on this has never changed. The better we all become as nature photographers, the better quality product we have to offer and the more consistent and honest our business practices and standards become. I want to compete against the best, not against the mediocre, and by teaching others to become the best, I help lift the nature photography industry out of mediocrity. I think that is a worthy goal, don’t you? So we decided to add our knowledge to these web pages, helping everyone. Therefore, creating more value than a bunch of pretty pictures (and they are really pretty!).

Other ways to increase your link popularity is to write articles, be interviewed, or be listed as a resource on other web pages. There are many services available that accept free, public domain (credited, copyrighted, but usually no pay) articles. Websites are hungry for content, and maybe you have an article they would snap up, thereby giving you exposure and creating a link to your site as part of your byline or bio. If you are doing something interesting or extraordinary, then get yourself interviewed by a webzine or Website, and get a link from that page to you. Send out press releases frequently to let organization know that your page is a valuable resource and that you are doing something interesting, and create a few more links.

Finally, you can ask. On our home page, we’ve created a small banner and HTML code along with a request to post a link to our page if they find the content worth as a resource. Hopefully, you should soon start seeing our “Taking Your Camera on the Road” logo popping up around the web. We also send emails to many of the sites we link to, explaining the link popularity rating, and telling them that we found their site so valuable, we put a link on our site, so it would be nice if they found our site as deserving. Be careful to word your email so it doesn’t appear to be spam, as this race for links is attracting spammers like flies to honey. Mention what it is you liked about their pages and why you find it worthwhile so they know you are sincere.

In the early days of link popularity, people didn’t care who they linked to, just as long as they had huge numbers of links, pushing up the link popularity ratings. Link farms, link and banner exchanges, and other gimmicks started popping up everywhere. Google and other search engines were quick to figure out the games people were playing with them, and they put a stop to it. “Spamming” or “flooding” a Website with massive links to other pages just for the sake of linking is now worthy of banning, and some of those bans are permanent. If you are considering boosting your search engine ranks this way, don’t. It could cost you. Play fair.

Developing your linkability doesn’t happen overnight. Plan for your link popularity to rise over years, not months. You can test your own site’s link popularity on Google by typing link:www.myWebsite.com in the search box to see who is linking to you that Google finds acceptable.

To find out now how your link popularity rating is, here are a few resources:

Link Popularity

• Enginemage
• Link Check (Javascript )
• Market Leap
• Alltheweb.com (Type the web page address in the search bar)
• Ineedhits.com
• Link Gnome
• Link-popularity-checker.com
• Link-popularity-tools.com
• Searchbliss.com (tests 5 search engines)
• Sitepopularity.org *****
• Whose Linking to Your Site
• Link Tree
• Popdex
• Who are Your Competitors

Link Popularity – Articles

• Checking Your Listings in Search Engines
• Finding Out Your Link Popularity

Yes, we’re still not done. There is even more you need to know when it comes to web page and site development. While the following items are not required for everyone, they are well worth considering.

International Challenges

While the majority of web pages are in English, moves by the UN and other international groups are working hard to change that. As more and more people speaking a variety of languages gain access to the Internet, foreign language and international issues will become more and more critical to the web page designer. There are a variety of ways to make your pages more “foreign language” friendly, through its coding and by providing translations of your pages, widening your audience.

For now though, most web pages are in English, but even English isn’t always English. There is American English, British English, South African English, Australian English, and even more English out there, each with their own rules and regulations on how things should be spelled and arranged. Other international challenges include issues with dates and measurements. People living in the US take it for granted that everyone understands the difference between an inch and a yard, that the dollar sign is the symbol for the US dollar, and that dates are month-day-year. In the rest of the world, however, the metric system is standard, and Fahrenheit degrees are obsolete. The “$” sign may mean Mexican pesos or Australian dollars, and dates are more commonly seen as day-month-year.

There are standards for dates, monetary symbols and other things for use on web pages, too. According to the International Standards Organization, a group similar to the W3 that overseas internationalizing of all technical standards since 1947, ISO 8601, Data Elements And Interchange Formats states that the international standard for the calendar date is year-month-day shown in a 4-2-2 format such as ” 2005-09-05” to designate August 5, 2005. This standard is to be used in all technical programming, code, and technical data, but it is still not universally accepted by non-technical users. Still, it is one of the standards that must be examined and chosen to create consistency within your web pages.

As US citizens living overseas, and providing a Website accessible to an international audience, we had to make a decision about the standard of dates within our own Website. To avoid confusion, we chose to use actual words such as ” August 5, 2005” instead of ” 09/05/05” or ” 05/09/05” or ” 05-09-05“, etc. You have to decide what the standard will be for your own site and stick to it.

Which spellings are you going to use? American English or British English? Make sure your HTML codes reflect which form of English you are using to guarantee the right characters appear within the browser’s screen.

According to the World Wide Web Consortium (W3C), valid documents require a document type ( doctype) code at the beginning of each document. This code passes on instructions about the code language inside the document, the content language, and gives other information vital to the successful interpretation and display of the page by the browser software. For example, our document type is as follows, representing our page as a public access document designed using HTML 4.01 Transitional code and it’s in English:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You have to decide which way you are going to go that will meet the needs of the majority of Internet users. Here are some Websites to help you understand the challenges of making your Website “international”.

Access to All: Multilingual Web Pages

Accessibility means access to all. All means everyone, and that includes people who don’t speak English. Have you given this any thought in developing your Website? According to IBM’s WebFountain, 65% of all web pages are currently written and displayed in English. Projections are that by 2010, English will be in the minority as a world language. Spanish, Chinese, Japanese, Russian, and Arabic languages are growing in popularity on the Internet.

While translation software is greatly improved, it is still improving. There are many online services offering free translations of web pages, though your degree of accuracy improves with purchased translation software packages or programs. So you can choose to set up duplicate pages of your web pages in a foreign language or two on your own, or with an investment in software or translators. We are planning on translating many of our pages about nature photography techniques into Spanish in the near future. It’s worth considering to widen your audience, especially if you sell a product or service with international viability.

International Issues for Web Pages

• Developing Websites for Users of Languages Other than English
• International JSP-based web sites
• W3C Internationalization References and Resources
• US Library of Congress – International Standards Organization – Codes for the Representation of Names of Languages
• Developing Websites That Can Be Localized
• Babel – Internationalization of the Internet
• Multilingual WWW Resources
• Asia To Europe Multilingual Hypertext
• International Confusion on the Net
• Euro Accessibility Organization – International issues
• Questions to Consider When Designing International Sites
• W3C Internationalization and Localization
• W3.org’s International Web Page Design Launch
• International Pitfalls for American Webmasters
• Developing an International Web Site
• Multilingual Webmaster
• Multilingual Support in Internet applications
• WebmasterWorld’s 3rd quarterly European SEO strategy primer
• Content to Attract an International Audience

Date, Time, Money, International Standardization

• What is Universal Time?
• Javascript Calendar with Week Numbers
• A Few Facts Concerning GMT, UT, and the RGO
• Today’s Calendar and Clock Page
• Calendar FAQ v2.6 Information on Calendar Standards
• International Organization for Standardization
• Date and Time Formats
• Date and Time Links and Resources
• Date and Time Scales – How Dates and Times are Measured
• Gregorian Calendar (AD1970-2030) with ISO Week Numbers
• The Calendar Week – Understanding the History of Calendars
• Calendar Converter – International Calendars
• Frequently Asked Questions about Calendars
• Usability.gov