Brokebot – Animated SVG 404 Error Pages | Prosyscom Tech
When your users are lost or your site is broken, it’s a bad time to send them to the default error pages, which are ugly, lack helpful information, and have zero links to lead them to somewhere better. Just like GitHub, Lego, and MailChimp, your 404 page should be creative, informative, and maybe even a little funny to break the tension.
Check out all the amazing features:
Brokebot isn’t just for HTML sites – with just 2 additional steps, it works for WordPress sites as well.
Unlike JPG’s and PNG’s, SVG graphics are 100% scalable. It doesn’t matter if you look at them on your iPhone or if you zoom in 10x on a high-res screen, they will always have clean, precise edges without pixelation.
This item uses Greensock’s TweenMax for the animations, rather than jQuery. Why? Because GSAP is SOOOO much faster and smoother. See for yourself: jQuery vs GSAP speed test.
Easy to Customize
Compatible With All Major Browsers
Brokebot works seamlessly with all major browsers, even iOS and Internet Explorer.
Handles All Necessary Error Codes
According to Google Insights, here are the worst offenders:
- 500 – Internal server error
- 404 – Not found
- 403 – Forbidden
- 400 – Bad request
- 401 – Authorization required
These aren’t as common, but still covered:
- 405 – Method not allowed
- 406 – Not acceptable (encoding)
- 407 – Proxy authentication required
- 408 – Request timed out
- 409 – Conflicting request
- 410 – Gone
- 411 – Content length required
- 412 – Precognition failed
- 413 – Request entity too long
- 414 – request URI too long
- 415 – Unsupported media type
- 501 – Not implemented
- 502 – Bad gateway
- 503 – Service unavailable
- 504 – Gateway timeout
- 505 – HTTP version not supported
- Tiny file size – The entire page, includes graphics, CSS, and JS, is just 33kb.
- Detailed instructions – Don’t worry, getting your custom error pages online will be a cinch.
- Mobile friendly
A Note on SEO and Error Pages
No matter how cute your error pages may be, if your users are showing up at the same dead link over and over, you should create a 301 redirect for that URL.