BAC Software Consulting

Web & Document Accessibility | Drupal | WordPress | Web Programming | Web Design

Category: Web Development

Web Development

Creating a Custom 404 Page for your Website

The 404 or “Not Found” is the error message displayed whenever someone requests a Web page that is not available on your Website. The 404 message is an HTTP standard response code indicating that although the client could communicate to the server, the server could not find what was requested. As there is no Web page to display, the Web server sends a generic page that says “Not found”. More from Wikipedia.

List of HTTP Response Status Codes

When you visit a Web page, your browser requests the data from the server through HTTP. The HTTP protocol is designed to enable communications between browsers and servers. The server returns a response message to the browser. The response contains completion status information about the request. A standard response for a successful HTTP request is a 200 OK. This is the list of HTTP status codes from Wikipedia.

Two essential steps are needed for your 404 page:

  • Creating your custom 404 page.
  • Configuring the server to display your page.

Step One: Creating your Custom 404 Page

Since a Generic 404 message can be frustrating to the user, it is better to create a custom page. This makes it easier for your vistors to find the information they need, and makes it less likely that they will leave your Website. A custom 404 page is an added advantage to your Website. It shows professionalism and that you care about your visitors.

Qualities of a Good Custom 404 Page

A good custom 404 page directs the visitor out of the 404 box. This means:

  • having the same look and feel as the rest of your Website.
  • having a clear message.
  • Telling the visitor what possibly went wrong.
  • Including the same navigation menu like the rest of your Website.
  • Avoiding auto redirection to other pages.
  • You don´t want search engine´s robots to index or archive your custom 404 page. Otherwise; it might be included in search engine results. To do that, include the following meta tag within the <head></head> tag of your custom 404 page:
<meta name="robots" content="noindex, noarchive" />

Step Two: Configuring the Server

Configuring the server to use your custom 404 page depends on the server´s type hosting your Website. This article covers the following Web servers:

  • Apache servers on Linux.
  • Windows servers.

There are two ways to setup your custom 404 page on Linux servers. You could:

  1. Use the cPanel.
  2. or Add the ErrorDocument directive in the .htaccess file.

I want to emphasize that these are general guidelines and they might not work for your specific Web server, or your Web host company might have different control panel.

Setting up your custom 404 page on Linux using cPanel

This video tutorial shows you how to setup your custom 404 page on Linux using the cPanel. This video requires Adobe Flash player, which can be installed from adobe.com.

Setting up your custom 404 page using “.htaccess” file on Linux

The .htaccess is the Apache´s directory-level configuration invisible file that allows you to manipulate the behavior of the Web server. Other Web servers handle the customization of 404 error pages differently. More from Wikipedia.

The .htaccess can contain all kinds of directives for the Apache server. To create an .htaccess file, open any text editor like Notepad or Notepad++, name it .htaccess (there is no extension).

If you already have an .htaccess file on your server, download it to your computer and open it with your favorite text editor.

Now open or create your .htaccess file and type the following directive:

#ErrorDocument directive, followed by the HTTP response code and a relative URL. 
#The URL begins with a slash (/) for local Web-paths (relative to Root folder). 
#This method has the advantage that robots will receive the 404 status response.  
#Replace the file “name/extension” with your custom 404 file. 
 
ErrorDocument 404 /doesnotexist.html

The above code will return the 404 Not found response from the server.

You might be tempted to type in the following code:

#ErrorDocument directive, followed by the HTTP response code and the full URL path. 
#Replace “yourdomain” with your domain name.

ErrorDocument 404 http://www.yourdomain.com/doesnotexist.html

The above code will cause the Web server to issue a redirect to another page. Also robots will receive the status 200 OK response from the server rather than the 404 Not found response.

Once you are done with your changes, upload the .htaccess to the root directory of your Website.

Tip: Since your custom 404 page might be served up from any subdirectory of your Website, make sure that all links in your custom 404 page are defined absolutely. Use href = “/index.html” or href = “http://www.yourdomain.com/index.html” to link back to your homepage instead of relatively like href = “../index.html” or href = “index.html”.

Setting up your custom 404 page on Windows Servers using Helm Control Panel

If your Website is running on a Windows server, there is only one way to setup your custom 404 page which is from your Web host control panel.

Tip: In order for the server to return the proper 404 Not found response code:

  • Fordynamicpages, use the URL option.
  • Forstaticpages, use the File option

Step Three: Test and Test again

Now test your custom 404 page by typing a URL that you know does not exist and see if your custom 404 page is displayed. Also check that all links in your custom 404 page are valid, including any images.

Common Mistakes with a 404 Custom Page

  1. Writing the wrong path or filename in the .htaccess file.
  2. Using relative paths in the 404 custom page instead of absolute paths.
  3. Getting from your custom 404 page the 200 OK response instead of the 404 Not found response. This is known as soft 404.

Soft 404?

Soft 404S are actually “Not Found” errors returned by a Web server as a standard Web page with a 200 OK response. There are two kinds of 404 responses: “hard 404” and “soft 404”. Google discourages the use of “soft 404s” because they can be a confusing experience for users and search engines. Instead of returning a 404 response code for a non-existent URL, Websites that serve “soft 404s” return a 200 OK response code. The content of the 200 OK response is often the homepage of the Website, or an error page. More from Google.

The proper behavior for an error page is to return a 404 response code.

How To Prevent Skype from Highlighting Phone Numbers

Web Development

How To Prevent Skype from Highlighting Phone Numbers

In this tutorial I will show you 3 solutions, from a developer´s point of view, how to prevent Skype from automatically highlighting phone numbers displayed in your Website. Also I will show you, from a user´s point of view, how to disable Skype phone highlighting in Internet Explorer.

The Problem

If you have Skype installed on your computer and you use Internet Explorer as your Web browser, then there is a good chance that Skype highlights phone numbers on Web pages as shown in the image below. I find this Skype “feature” intrusive. This Skype modification is not aesthetically appealing, is obtrusive, does not flow nicely with the page design, and sometimes breaks the layout on the page.

The XHTML markup associated with the image above is the following:

<h2>Get in touch</h2>
<!-- code removed for brevity -->
<span class="phone">(123) 456-7890</span>

The Solutions: From a Developer´s Point of View

For a Web developer, I am going to list 3 solutions. Choose the method that best fits your needs. All 3 solutions passed XHTML 1.0 Transitional and Strict validation. After you implement any of the 3 solutions, you should expect that Skype is prevented from highlighting phone numbers, as shown in the image below:

Solution1: Use HTML Soft Hyphen

Put the soft hyphenation somewhere inside the phone number in order to prevent Skype from recognizing it as a phone number. Make sure that the phone number does not split across two lines. This is an easy solution that passes validation.

<h2>Get in touch</h2>
<!-- code removed for brevity -->
<!-- In HTML, soft hyphen is represented by the character entity 
reference &shy; (&#173; or &#xAD;)-->
<span class="phone">(123)&shy; 456-7890</span>
 
<!-- OR you could do the following-->
<span class="phone">(123)&shy; 456-7890</span>

Solution2: Use CSS Trick

This is another method to prevent Skype from highlighting phone numbers of Web pages by injecting code that splits the phone number and thus preventing skype from recognizing it as a phone number. Also, from an SEO perspective, this method is harmless since between the <span> tag (with the display: none property), there are no hidden links, no hidden images, no stuffed keywords to improve search ranking, no stuffed text, and no hidden malicious code.

<h2>Get in touch</h2>
<!-- code removed for brevity -->
<!-- Insert invisible <span> with "-" inside phone number. The hyphen will not show, 
but that's fine. You could keep space between the set of numbers. -->
<span class="phone">(123) 456<span style="display:none;">-</span> 7890</span>

Solution3: Use Meta Tag

This solution is discussed in the Skype community Forum referenced below. Add a vendor-specific meta tag. This solution is especially useful for Web pages that display a lot of data (phone numbers or otherwise) that are highlighted (mistakenly or not) by Skype. In this case it will be much easier to add one meta tag at the head of the HTML document instead of modifying every single number on the page. This method, like the previous two, validates for XHTML 1.0 Transitional and Strict.

At the head section of your HTML document, insert the following Meta tag.

<head>
<title>Blue Olive Online</title>
<!-- code removed for brevity. -->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<!-- code removed for brevity. -->
</head>

The Solution: From a User´s Point of View

If you are an Internet Explorer Web user, and you are annoyed by this Skype feature, then follow the steps below. This solution is tested for IE8. I am not sure about other versions of Internet Explorer.

  1. From your IE browser, go to: Tools -> Skype add-on for Internet Explorer
  2. From the dialog box, you have 2 choices:
    • Either uncheck the box that says “Turn number highlighting on”
    • Or click “Uninstall” to completely remove this Skype add-on.
  3. Click “Ok” and Skype will no longer automatically highlights phone numbers in Web pages.

Conclusion

This tutorial lists 3 solutions for Web developers that prevent Skype from intrusively highlighting phone numbers in your Website. Also it shows Web users how to disable automatic Skype phone highlighting in Internet Explorer. This issue had been reported to Skype almost four years ago. It seems that Skype views this as a feature and not an issue.