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:
WordPress Compatible
Brokebot isn’t just for HTML sites – with just 2 additional steps, it works for WordPress sites as well.100% Scalability
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.
Smooth Javascript Animations
There are no Flash or animated GIF elements here. All of the animations you see 100% Javascript and don’t require any browser plugins.
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
Modifying Brokebot to fit your needs couldn’t be easier. To change the size of the graphics, you modify 1 line of CSS. All the colors, including the individual parts of the robot, are managed with a very small CSS file. Want to change the animation? You can do so with a handful of well-commented variables in the JavaScript. You can even have different text show up depending on what the error is.
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
Other Features
- 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.
Related Items
