JavaScript Is More Than You Might Think

Tips for using JavaScript

Several factors go into good web design, and really, who arbitrates what is and is not considered good anyway? One visitor to a site might call the site an ugly hodgepodge of colors and text created as if those elements were put in a sack and shaken until they fell out onto the page; the next visitor might love the design and color scheme.

Because you’re reading this book, I assume that you’re looking for some help with using JavaScript to enhance your website. I also assume that you want to use this programming language to help people use your site and to make your site look, feel, and work better.

The design of a website is not and will never be an entirely objective process. The goal of one website might be informational, which would dictate one design approach, whereas the goal of another website might be to connect to an application, thus requiring specialized design and functionality. That said, many popular and seemingly well-designed sites have certain aspects in common. I try to break down those aspects here, although I ask you to remember that I didn’t create a comprehensive list and that the items reflect only one person’s opinions.

A well-designed website does the following:

• Emphasizes function over form. When a user visits a website, she usually wants to obtain information or perform a task. The more difficult your site is to browse, the more likely the user is to move to another site with better browsing.

  Animations and blinking bits come and go, but what remain are sites that have basic information presented in a professional, easily accessible manner. Using the latest cool animation software or web technology makes me think of the days of the HTML <BLINK> tag. The <BLINK> tag, for those who never saw it in action, caused the text within it to disappear and reappear on the screen. Nearly all web developers seem to hate the <BLINK> tag and what it does to a webpage. Those same developers would be wise to keep in mind that today’s exciting feature or special effect on a webpage will be tomorrow’s <BLINK> tag. Successful websites stick to the basics and use these types of bits only when the content requires them.

  Use elements like a site map, alt tags, and simple navigation tools, and don’t require special software or plug-ins for viewing the site’s main content. Too often, I visit a website only to be stopped because I need a plug-in or the latest version of this or that player (which I don’t have) to browse it.

  Although site maps, alt tags, and simple navigation might seem quaint, they are indispensable items for accessibility. Text readers and other such technologies that enable sites to be read aloud or browsed by individuals with disabilities use these assistive features and frequently have problems with complex JavaScript.

• Follows standards. Web standards exist to be followed, so ignore them at your own peril. Using a correct DOCTYPE declaration and well-formed HTML helps ensure that your site will display correctly to your visitors. Validation using the W3C’s Markup Validator tool is highly recommended. If your site is broken, fix it!

• Renders correctly in multiple browsers. Even when Internet Explorer had 90 percent market share, it was never a good idea for programmers to ignore other browsers. Doing so usually meant that accessibility was also ignored, so people with text readers or other add-ons couldn’t use the site. People using operating systems other than Microsoft Windows might also be out of luck visiting those sites.

  Although Internet Explorer is still the leader among browsers used by web visitors, it isn’t the only browser your web visitors will use. Somewhere around 3 or 4 of every 10 visitors will be using a different web browser.

  You never want to turn away visitors because of their browser choice. Imagine the shopkeeper who turned away 3 of every 10 potential customers just because of their shoes. That shop wouldn’t be in business too long—or at the very least, it wouldn’t be as successful.

  If you strive to follow web standards, chances are that you’re already doing most of what you need to do to support multiple browsers. Avoiding the use of proprietary plug-ins for your website is another way to ensure that your site renders correctly. You need to look only as far as the iPad to see a device that is popular but whose use is restricted because it doesn’t natively support Flash. For this reason, creating sites that follow standards and avoid proprietary plug-ins ensures that your site is viewable by the widest possible audience.

• Uses appropriate technologies at appropriate times. Speaking of plug-ins, a well-designed website doesn’t overuse or misuse technology. On a video site, playing videos is appropriate. Likewise, on a music site, playing background music is appropriate. On other sites, these features might not be so appropriate. If you feel that your site needs to play background music, go back to the drawing board and examine why you want a website in the first place! I still shudder when I think of an attorney’s website that I once visited. The site started playing the firm’s jingle in the background, without my intervention. Friends don’t let friends use background music on their sites.

Where JavaScript fits

Today’s web is still evolving. One of the more popular movements is known as unobtrusive scripting. The unobtrusive scripting paradigm contains two components, progressive enhancement and behavioral separation. Behavioral separation calls for structure to be separated from style, and for both of these elements to be separated from behavior. In this model, HTML or XHTML provides the structure, whereas the CSS provides the style and JavaScript provides the behavior. Progressive enhancement means adding more features to the page as the browser’s capabilities are tested; enhancing the user experience when possible but not expecting that JavaScript or a certain JavaScript function will always be available. In this way, the JavaScript is unobtrusive; it doesn’t get in the way of the user experience. If JavaScript isn’t available in the browser, the website still works because the visitor can use the website in some other way.

When applied properly, unobtrusive scripting means that JavaScript is not assumed to be available and that JavaScript will fail in a graceful manner. Graceful degradation helps the page function without JavaScript or uses proper approaches to make JavaScript available when it’s required for the site.

I’m a proponent of unobtrusive scripting because it means that standards are followed and the resulting site adheres to the four recommendations shared in the previous section. Unfortunately, this isn’t always the case. You could separate the HTML, CSS, and JavaScript and still end up using proprietary tags, but when you program in an unobtrusive manner, you tend to pay closer attention to detail and care much more about the end result being compliant with standards.

Throughout this book, I strive to show you not only the basics of JavaScript but also the best way to use JavaScript effectively and, as much as possible, unobtrusively.

Which browsers should the site support?

Downward compatibility has been an issue for the web developer for a long time. Choosing which browser versions to support becomes a trade-off between using the latest functionality available in the newest browsers and the compatible functionality required for older browsers. There is no hard and fast rule for which browsers you should support on your website, so the answer is: it depends.

Your decision depends on what you’d like to do with your site and whether you value visits by people using older hardware and software more than you value the added functionality available in later browser versions. Some browsers are just too old to support because they can’t render CSS correctly, much less JavaScript. A key to supporting multiple browser versions is to test with them. All of this means that you need to develop for and test in an appropriate set of browsers before releasing a website for public consumption.

Obtaining an MSDN account from Microsoft will give you access to both new and older verions of products, including Internet Explorer. Additional resources are the Application Compatibility Virtual PC Images, available for free from Microsoft. These allow you to use a time-limited version of Microsoft Windows containing older versions of Internet Explorer, too. For more information, see http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en.

Many web designs and JavaScript functions don’t require newer versions of web browsers. However, as already explained, verifying that your site renders correctly in various browsers is always a good idea. See http://browsers.evolt.org/ for links to archives of many historical versions of web browsers. Even if you can’t conduct extensive testing in multiple browsers, you can design the site so that it fails in a graceful manner. You want the site to render appropriately regardless of the browser being used.