Beim Aufruf einer nicht (mehr) existierenden Seite wird man auf 404 Seiten weitergeleitet. Das ist aber nicht direkt schlecht, denn die 404 Templates können durch ein bisschen Kreativität wahre Wunder wirken, damit Besucher deine Seite nicht verlassen.
404-Seiten (oder Error Page) heißen so, weil Server im Falle einer nicht oder nicht mehr existierenden Seite den HTTP Status Code 404 zurückliefern, um zu zeigen, dass die angeforderte Seite nicht (mehr) existiert.
Ein kreativer Weg für 404 Seiten Templates ist es, mit witzigen Animationen, Designs und lustigen Bildern seine Besucher dazu zu bringen, die Webseite nicht zu verlassen. In diesem Zuge ist auch wichtig, Benutzer direkt die Möglichkeit zu geben eine andere Unterseite auf deiner Website aufzurufen. Auch responsive müssen die Seiten natürlich gut aussehen.
Die 404 Seiten Templates können als Template Vorlage oder als Beispiele für deine eigene Seite dienen (natürlich komplett kostenlos), lass dich inspirieren! Und sind wir mal ehrlich…404 Witze sind die Besten, oder?
Ich wollte gerade einen Witz über 404-Seiten machen, habe aber keinen gefunden.
Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.
#1 Responsive 404 Stranger things
See the Pen
Responsive 404 Stranger things by ARiyou Jahan (@ARiyou2000)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#2 No Vacancy 404
See the Pen
No Vacancy 404 by Riley Shaw (@rileyjshaw)
on CodePen.
Progrmmiert in
Slim, Sass, CoffeScript
#3 404 Kittens
See the Pen
404 Kittens by nclud team (@nclud)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#4 – Glitched out
See the Pen
404 – Glitched out by ZonFire99 (@ZonFire99)
on CodePen.
Progrmmiert in
HTML, CSS, JS
#5 Fargo 404
See the Pen
Fargo 404 by Nathaniel Watson (@nw)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (SCSS), JS
#6 404 No signal
See the Pen
404 No signal by Adem ilter (@ademilter)
on CodePen.
Progrmmiert in
HTML, CSS, JS
#7 Glitchy 404 Page
See the Pen
Glitchy 404 Page by Kay Pooma (@kaypooma)
on CodePen.
#8 Bluescreen – 404 Page
See the Pen
Bluescreen – 404 Page by Angela Galliat (@agalliat)
on CodePen.
#9 404 Space
See the Pen
404 Space by Keith (@KeithPaul)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#10 Error page – #Project 4
See the Pen
Error page – #Project4 by Jake (@Jake_Woods)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#11 404
See the Pen
404 by Metty (@Metty)
on CodePen.
Progrmmiert in
HTML, CSS, JS
#12 Space 404
See the Pen
Space 404 by Ethan (@eroxburgh)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#13 404 Error Page
See the Pen
404 Error Page by anhat.dev (@nhatanh17)
on CodePen.
Progrmmiert in
HTML, CSS, JS
#14 Daily UI #008 – 404 Page
See the Pen
Daily UI #008 – 404 Page by Rafaela Lucas (@rafaelavlucas)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#15 Lost in Space (ERRORS) (not responsive)
See the Pen
Lost in Space (ERRORS) (not responsive) by Radu (@maxym11)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#16 404 Page Not Found
See the Pen
404 Page Not Found by João Sousa (@joaosousa)
on CodePen.
Progrmmiert in
HTML, CSS (PostCSS)
#17 404 Error Page
See the Pen
404 Error Page by miranda (@mirandalwashburn)
on CodePen.
#18 404 Error page
See the Pen
404 Error page by Abolfazl Arab (@abol)
on CodePen.
#19 404 Makes bear sad ??
See the Pen
404 Makes bear sad ?? by Jhey (@jh3y)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Stylus), JS (Babel)
#20 404-magnifying-glass-svg-animation-css
See the Pen
404-magnifying-glass-svg-animation-css by Maelle Gomez (@maellegomezafpa)
on CodePen.
#21 en 404 page
See the Pen
en 404 page by Arman Azizpour (@arman_bag)
on CodePen.
#22 404 Venn Diagram
See the Pen
404 Venn Diagram by Michael Richins (@MrGrigri)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#23 Tractor Pull 404 Error
See the Pen
Tractor Pull 404 Error by Nick Soltis (@nss5161)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#24 Neon – 404 Page Not Found
See the Pen
Neon – 404 Page Not Found by Tibix (@Tibixx)
on CodePen.
#25 8-bit mario 404
See the Pen
8-bit mario 404 by JFabre (@josfaber)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), Babel
#26 404 error page
See the Pen
404 error page by Swarup Kumar Kuila (@uiswarup)
on CodePen.
Progrmmiert in
HTML, CSS (Bootstrap), JS (anime.js)
#27 Yeti 404 page
See the Pen
Yeti 404 Page by Darin (@dsenneff)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (TweenMax.js, MorphSVGPlugin.js, CustomEase.js)
#28 404 page
See the Pen
404 Page by sarazond (@sarazond)
on CodePen.
#29 Ghost Page | 404
See the Pen
Ghost Page | 404 by Diogo Gomes (@diogo_ml_gomes)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
#30 404 Error Example #3
See the Pen
404 Error Example #3 by Ricardo Prieto (@ricardpriet)
on CodePen.
Fazit
Wie Du siehst sind Deiner Kreativität keine Grenzen gesetzt. Welches 404 Seiten Template gefällt dir am besten, oder hast bist Du vielleicht selber kreativ geworden? Lass es mich gerne wissen! Und vielleicht taucht schon bald deine 404-Seite hier auf. 🙂
Hinweis: Alle Pens sind auf codepen.io veröffentlicht und nicht von mir.
Noch nicht genug? Dann könnte das etwas für dich sein:
Very Attractive Custom 404 Error Page. Nice Keep it up☺RegardsFounder of BlogTriggers.com