Лучшие 404 страницы: опупенное оформление + 10 примеров

Разное 

Содержание

54 креативных страниц с ошибкой 404 с классной анимацией

CSS3, SVG 31.03.2022

Cписок с некоторыми из лучших анимированных страниц 404

54 креативных страниц с ошибкой 404 с классной анимацией!

Если вы вызываете страницу, которой (больше) не существует, вы перенаправляетесь на страницу 404. Но это неплохо, потому что страницы 404 могут творить чудеса, если проявить немного творчества, чтобы посетители не покидали ваш сайт.

Страницы 404 называются так, потому что в случае, если страница не найдена или больше не существует, сервер возвращает код состояния 404, чтобы показать, что запрошенная страница больше не существует.

Примеры можно использовать в качестве шаблона или в качестве примера для вашего собственного сайта, и давайте будем честными… страницы 404 — лучшие! 🤣 Вы можете найти больше информации о собственном использовании на сайте Codepen.

И так рассмотрим все собранные мной примеры анимированых 404 страниц:

   

1.
Mars 404 Error Page

   

2. Dripping paint 404 page | Анимация SVG

   

3. CSS 404 page

   

4. 404 animation

   

5. 404 — new

   

6. 404 — animation

   

7. Error Page

   

8. Ark 404 animation

   

9. 404 Animation

   

10. 404 Animation

   

11. Neon 404 — CSS only(Static)

   

12. 404 svg animated концепция страницы для интернет-магазина

   

13. Darkmode animation | 404

   

14. 404 error page

   

15. Text Wave Animation (404 not found)

   

16. GSAP: SVG Animation 404 Error Milk Carton)

   

17. Error 404 Page With Astronaut

   

18. MJ 404 in Pure CSS

   

19. 404 error page, Caveman mode — pure CSS

   

20. Space 404 (pure CSS)

   

21. StevenGFX Robot 404 Error

   

22. Weight a Minute — Error 404

   

23.
404 Page

   

24. 404 Page

   

25. Css only 404 Crying Baby

   

26. 404 Frog

   

27. Yeti 404 Page

   

28. 404 Error Example #2

   

29. 404 Page

   

30. CSS Train 404 Page

   

31. Error Page

   

32. 404 — SVG Animation

   

33. 404 Page SVG animation

   

34. 404 Error Page: Animated SVG GSAP

   

35. 404 Error page — Animated SVG

   

36. SVG Animation 404 page

   

37. 404

   

38. Animated Error page — #Project4

   

39. 404 Error Page

   

40. Fargo 404

   

41. 404 Error Page

   

42. 404 magnifying glass SVG animation CSS

   

43. Error 404 bulb SVG animation CSS smil

   

44. 404 animation CSS Javascript Mousemove

   

45. Tractor Pull 404 Error

   

46. Space 404

   

47.
«Lost in Space» — 404 Error

   

48. «Lost in Space» — 404 Error

   

49. 404 Page Not Found

   

50. Challenge: 404 page

   

51. 404 — Glitched out

   

52. 404 No signal

   

53. Neon — 404 Page Not Found

   

54. Glitchy 404 Page

Надеюсь, вам понравилось! Пользуйтесь!

Автор Целовальников Сергей

Статьи по теме
  1. Лучшие 5 инструментов для инфографики

    Разное

  2. Инфографический дизайн

    CSS3

  3. Простой плавающий блок на jQuery

    04.2013″>10.04.2013jQuery

  4. Закрепленный заголовок таблицы

    CSS3

как сделать ее полезной — CMS Magazine

Страница 404 является неотъемлемой частью любого сайта. Так почему же не использовать ее для перенаправления посетителей на другие страницы, вместо того, чтобы просто сообщать, что страница не найдена?

По сути, страница 404 существует на каждом сайте с единственной целью: рассказывать посетителям, что запрашиваемая страница не может быть найдена. Такая ситуация может возникнуть по ряду причин. Посетитель мог набрать неправильный URL-адрес или страница была перемещена или удалена.

В большинстве случаев, страница 404 содержит фоновое сообщение о том, что страница не найдена. Но есть более ценные способы ее использования.

Вам не нужно быть графическим дизайнером или программистом для создания эффективной 404 страницы. Вот несколько советов как сделать это, а также свести к минимуму ее появление:

1. Используйте Google-виджет

Один простой способ улучшить вашу страницу 404 – это использовать инструменты Google для виджета 404. Чтобы использовать эту функцию, скопируйте приведенный ниже код и поместите его на шаблоне 404 страницы:

<script type=»text/javascript»>
var GOOG_FIXURL_LANG = ‘en\’;
var GOOG_FIXURL_SITE = ‘http://www.example.com’
</script>
<script type=»text/javascript»
src=»http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js»>
</script>

После того, как данный виджет будет установлен, Google будет автоматически обслуживать окно поиска, предлагая список рекомендуемых страниц на сайте, которые, возможно, искал пользователь.

Конечно, Google виджет не сделает страницу 404 уникальной или брендированной.

Но его легко установить, что делает его хорошим инструментом для начинающих веб-мастеров, которые хотят улучшить страницу 404 без каких-либо неприятностей.

 

2. Рекомендуйте самые популярные страницы вашего сайта

Если виджет Google вам не подходит, вы можете настроить страницу 404 при помощи вашего программного обеспечения. Воспользуйтесь этой возможностью, чтобы включить изображения или текст, которые отражают индивидуальность вашего бренда, а также предоставляют полезную информацию для потерявшегося посетителя.

Вы можете включить список ссылок на самые популярные страницы на вашем сайте. Чтобы определить, какие страницы больше всего интересуют пользователей, используйте сервисы «Google Analytics» или «Яндекс.Метрика». И тогда, если посетитель попадет на страницу 404 в поисках нужной информации, он может перейти на другую страницу, достаточно интригующую, чтобы заставить остаться на вашем сайте.

3. Уменьшите количество битых ссылок

Независимо от того, насколько вам удастся улучшить страницу 404, попадание на нее все равно будет разочаровывать или раздражать посетителя. Поэтому надо свести к минимуму неработающие ссылки, которые ведут на страницу 404. Если ваш сайт создан на основе WordPress, вы можете следить за неработающими ссылки с помощью бесплатного плагина, например, «Broken Link Checker». Он предупреждает вас, когда обнаруживаются плохие ссылки. Если вы используете другие платформы, то вы можете проверить сайт на битые ссылки при помощи различных бесплатных сервисов, например, BrokenLinkCheck.com.

 

Но что же делать, если ваши программы веб-аналитики показывают, что на страницу 404 некоторые посетители попадают по битой ссылке со стороннего ресурса? Если это возможно, свяжитесь с администратором этого сайта, и попросите исправить ссылку на ваш сайт.

Если это не возможно, вы можете настроить редирект на вашем сайте. Это может быть сделано при помощи бесплатного плагина или внесения соответствующего кода на веб-страницу. Перенаправление будет автоматически передавать весь входящий трафик со сломанной ссылки на рабочую страницу вашего сайта.

Лучшие страницы с ошибкой 404 всех времен

Рынки США Загрузка… ЧАС М С В новостях

Значок шеврона указывает на расширяемый раздел или меню, а иногда и на предыдущие/следующие варианты навигации. ДОМАШНЯЯ СТРАНИЦА Значок «Сохранить статью» Значок «Закладка» Значок «Поделиться» Изогнутая стрелка, указывающая вправо. Читать в приложении Скриншот

Когда вы вводите неправильный веб-адрес, вы попадаете на страницу 404.

У большинства компаний есть скучные страницы 404, которые пытаются вернуть вас на главную страницу сайта.

Но некоторые умные компании делают больше. Они используют страницу 404, чтобы повеселиться.

У нас есть обзор лучших страниц 404 в Интернете.

Несколько лет назад Тристан Уокер создал ветку на Quora, чтобы люди могли найти лучшие страницы с ошибкой 404 в Интернете. Изучив эти материалы, а также 404 коллекции на Mashable, 404 Research Lab и в других местах в Интернете, мы собрали наши фавориты.

Упс! Мы поймали TechCrunch со спущенными штанами на этом

TechCrunch

Этот Pac-Man 404 великолепен, вы можете играть в Pac-Man внутри 404!

Блюфонтанмедиа

Это очень весело, вы можете вращать куб и перемещать его внутрь и наружу

Форадиан

Поиграй с этим здесь

Это от Lululemon странно

Лулулемон

У Блиппи довольно волшебное число 404, но что оно означает?

Блиппи

Титулист отлично подходит, если вы играете в гольф.

Группа парней ищет потерянный мяч.

Скриншот

Не знаю, что с этим делать…

Слонки

Помните Германа Каина? Это была классическая дисс Обамы.

hermancain. com

В Южном парке ротация 404 страниц

Студии Южного Парка

Вот еще один…

Студии Южного Парка

У Лего есть довольно крутой

Лего

Помните Homestar Runner? У него был один из лучших 404-х когда-либо.

Это был короткометражный комикс о том, почему сайт не работает

Homestarrunner

Если вы попадете на страницу 404 Nosh, вы увидите это видео, где какие-то парни убивают веб-страницу

Вот страница 404. Ниже подробное видео.

PBWorks с другим подходом к теме единорога

Скриншот

Политическая страница 404 из Канады

НДП

Этот от Local Fitness — наш фаворит в группе

Местный фитнес

Еще один замечательный, на этот раз от BedMap

Карта кроватей

Github с веселой игрой по «Звездным войнам»

Скриншот

БОНУС: это не страница Yahoo 404, но она была на стадионе Сан-Франциско Джайентс, и это забавно.

TechCrunch

Теперь не пропустите…

Скриншот

Читать далее

LoadingЧто-то загружается.

Спасибо за регистрацию!

Получайте доступ к своим любимым темам в персонализированной ленте, пока вы в пути.

Функции Интернет

Страница ошибки 404 — Awwwards

324 шт.

  • jpg","tags":["404","3d","clean","simple","json","studio"],"title":"Le:mma Studio 404 Page","createdAt":1675531750,"type":"element"}»>

    ЭЛЕМЕНТ

    Le:mma Studio 404 Страница

    2

  • jpg","username":"empi.junior","displayName":"empi","type":"user"},"main_image":"element\/2022\/12\/639ca7dbef421613109249.mp4","tags":["404","webgl"],"title":"404 WebGL page","createdAt":1671210971,"type":"element"}»>

    ЭЛЕМЕНТ

    404 Страница WebGL

    видео

  • jpg","tags":["404","animation","3d","gradient"],"title":"404 page","createdAt":1668063187,"type":"element"}»>

    ЭЛЕМЕНТ

    404 стр.

  • ЭЛЕМЕНТ

    XXL 404 свиток

    видео

  • jpg","username":"Katya Smolianinova","displayName":"Katya Smolianinova","type":"user"},"main_image":"element\/2022\/12\/63960beb8b4982

    956.jpg","tags":["404"],"title":"404","createdAt":1670777835,"type":"element"}»>

    ЭЛЕМЕНТ

    404

  • ЭЛЕМЕНТ

    404

  • jpg","username":"humana","displayName":"humana","type":"user"},"main_image":"element\/2022\/11\/6364e6767bdd6110177504.jpg","tags":["404 error page"],"title":"404 error page","createdAt":1667556982,"type":"element"}»>

    ЭЛЕМЕНТ

    404 страница ошибки

  • png","username":"Netrix","displayName":"Netrix","type":"user"},"main_image":"element\/2022\/10\/63603d372a2c0917771700.png","tags":["404","error","404 page"],"title":"404","createdAt":1667249341,"type":"element"}»>

    ЭЛЕМЕНТ

    404

    2

  • ЭЛЕМЕНТ

    404 страница ошибки

  • png","username":"awwwards","displayName":"awwwards.","type":"user"},"main_image":"element\/2022\/10\/633eb4bbabeac542910489.jpg","tags":["404 error page"],"title":"404 error page","createdAt":1665053883,"type":"element"}»>

    ЭЛЕМЕНТ

    404 страница ошибки

  • ЭЛЕМЕНТ

    Ошибка 404 Реактивный курсор

    видео

  • png","username":"awwwards","displayName":"awwwards.","type":"user"},"main_image":"element\/2022\/09\/633301af62413317942690.jpg","tags":["404 error page"],"title":"404 error page","createdAt":1664287151,"type":"element"}»>

    ЭЛЕМЕНТ

    404 страница ошибки

  • ЭЛЕМЕНТ

    Страница ошибки 404 — Hematogenix

  • png","username":"awwwards","displayName":"awwwards.","type":"user"},"main_image":"element\/2022\/06\/62b168207c096288392212.jpg","tags":["cursor interaction","404 error page","clean","black and white","shapes"],"title":"404 Error page — Clou Architects","createdAt":1655793696,"type":"element"}»>

    ЭЛЕМЕНТ

    404 Страница ошибки — Clou Architects

  • jpg","tags":["404 error page","animation"],"title":"404 error page — Basement Studio","createdAt":1655230155,"type":"element"}»>

    ЭЛЕМЕНТ

    Страница ошибки 404 — Basement Studio

  • ЭЛЕМЕНТ

    Страница ошибки 404 — Санта-Тереза ​​

  • png","username":"SynchronizedStudio","displayName":"Synchronized Studio","type":"user"},"main_image":"element\/2022\/06\/629e222d144bc627526262.jpg","tags":["404 error page","graphic design","visual elments","ornamental"],"title":"Kim Kneipp — 404 error page","createdAt":1654530604,"type":"element"}»>

    ЭЛЕМЕНТ

    Ким Кнайп — страница ошибки 404

  • jpg","tags":["colorful","404 error page","color palette"],"title":"Color contrast 404 error page","createdAt":1649398718,"type":"element"}»>

    ЭЛЕМЕНТ

    Цветовой контраст Страница ошибки 404

  • ЭЛЕМЕНТ

    Размытое изображение и эффект параллакса

    видео

  • png","username":"pinkyellow","displayName":"Pink Yellow","type":"user"},"main_image":"external\/2022\/03\/6230aa2b92f10815736925.jpg","tags":["404 error page"],"title":"MicroWaver 59\u2122 — 404 error page","createdAt":1647356459,"type":"element"}»>

    ЭЛЕМЕНТ

    MicroWaver 59™ — ошибка 404 стр.

  • jpg","tags":["404 error page"],"title":"e-Money — 404 error page","createdAt":1646397660,"type":"element"}»>

    ЭЛЕМЕНТ

    электронные деньги — страница ошибки 404

  • ЭЛЕМЕНТ

    Wildcatter — страница ошибки 404

  • png","username":"markovsky","displayName":"Artem Markovsky","type":"user"},"main_image":"external\/2022\/02\/620e7840830eb593191550.jpg","tags":["404 error page"],"title":"ARCR — 404 error page","createdAt":1645115442,"type":"element"}»>

    ЭЛЕМЕНТ

    ARCR — страница ошибки 404

  • jpg","tags":["404 error page"],"title":"Studio Debuut — 404 error page","createdAt":1644502838,"type":"element"}»>

    ЭЛЕМЕНТ

    Studio Debuut — страница ошибки 404

  • ЭЛЕМЕНТ

    MICA — страница ошибки 404

  • png","username":"awwwards","displayName":"awwwards.","type":"user"},"main_image":"external\/2022\/02\/61fd32c4cc25d989422514.mp4","tags":["404 error page"],"title":"KeepGrading — 404 error page","createdAt":1643983556,"type":"element"}»>

    ЭЛЕМЕНТ

    KeepGrading — страница ошибки 404

    видео

  • jpg","tags":["404 error page"],"title":"ALTS digital — 404 error page","createdAt":1643981683,"type":"element"}»>

    ЭЛЕМЕНТ

    ALTS цифровой — страница ошибки 404

  • ЭЛЕМЕНТ

    Notorious Nooch Co — страница ошибки 404

  • png","username":"awwwards","displayName":"awwwards.","type":"user"},"main_image":"external\/2022\/01\/61f187312c105977013340.jpg","tags":["404 error page"],"title":"Chirpley — 404 error page","createdAt":1643218737,"type":"element"}»>

    ЭЛЕМЕНТ

    Chirpley — страница ошибки 404

  • No related posts.

    • Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *