How to create custom HTTP error pages for your website
There will be some scenarios where web visitors will be served with error messages when trying to access certain pages or files on your website.
Such scenarios include:
403 Forbidden
This response means the web visitor does not have the necessary permission to access the page they are trying to access, so the server is rejecting to give a proper response.
404 Page Not Found
This response is the most famous due to the frequency of its occurrence. It means that the requested page or resource could not be found on the server. This could be due to visitors trying to access a web page that doesn't exist, using of incorrect page URL, or the change of page name.
500 Internal Server Error
This occurs when the server has encountered an error it doesn't know how to handle while trying to serve the user the requested page.
503 Service Unavailable
The server cannot handle the request (because it is overloaded or down for maintenance). Generally, this is a temporary state.
There are many other error responses that visitors may see but the above are the most common and all that you will need to create.
As you can see from all the above screenshots, the default pages are not attractive at all. They also do not give your web visitors any option but to leave your website.
I bet you don't want to send your visitors away when they try accessing a page on your site and it isn't available at the moment.
Examples of Great Error Pages
Below are examples of well-designed error pages, from which you can gain some inspiration while designing yours:
403 Forbidden
404 Page Not Found
Example 1: Joe Bidens' website
Example 2: Donald Trump's Website
Example 3: Virgin Group Website
Example 4: Whitehouse.gov Website
Example 5: BBC News Website
Example 6: CNN News Website
Example 7: Apple Website
Example 8: Microsoft Website
500 Internal Server Error
503 Service Unavailable
How to create your website custom error pages
It is a great idea to create your own well-designed error pages that are more user-friendly, conveys your brand identity, and gives your visitors more options just like in the above examples.
A good error page should be able to explain to the visitors what happened and give them the ability to navigate to other pages.
You design error pages just like any other page on your website and place the pages anywhere you would like, then instruct the server to load the respective page when a user gets an HTTP error.
To instruct the server you will just need to write some commands in the .htaccess file using the format below.
ErrorDocument errorCode /pagenameExample:
If your error pages are namely: error403.html, 404.php, error_500.html, 503error.html. You can name the error pages however you want.
You write these commands in .htaccess file:
ErrorDocument 403 /error403.html
ErrorDocument 404 /404.php
ErrorDocument 500 /error_500.html
ErrorDocument 503 /503error.html
Include the file paths if the error pages are not in the root directory(ie. public_html).
Eg. if your error page namely 404.html is located in public_html/error/404.html, use:
ErrorDocument 404 /error/404.html
Conclusion
Website visitors will occasionally be served with error responses when they try to access various resources on your website such as web pages or files. The default error pages are unfriendly and usually sends away visitors from your website.
It's a good idea to have your own custom error pages.
In this article, you have learned how you can make your own error pages for your website.
