Красивая страница 404: 80+ великолепных страниц ошибки 404
80+ великолепных страниц ошибки 404
Иногда посетитель сайта видит ошибку 404 потому, что веб-страницы попросту не существует – она удалена или переименована (404 Not Found – страница не найдена). Нередко случается и неправильный ввод адреса. В любом случае, никого не обрадует безликое оформление 404-й или простое сообщение об ошибке. Креативными дизайнерами создаются более полезные для пользователя, эстетически красивые индивидуальные страницы 404.
Для оформления четырестачетвертой страницы есть немало интересных идей, вдохновляющих примеров, оригинальных иллюстраций, забавных видео coub’ов. Наконец, существуют шаблоны.
Подобраны топ-80 самых красивых, качественно отрисованных дизайнером, анимированных или забавляющих интерактивом 404-х страниц.
Интересно и оригинально оформленные 404 страницы
Тут примеры достойных 404 страниц, которые впечатляют не только креативно анимированной иллюстрацией с интересным описанием 404, но и блестящей реализацией нестандартной идеи.
01. Discord App
За работой квантовый хомяк-робот из мира Discord.
02. Beach Park
Плавник акулы, он и в луже 404-й страницы захватывает внимание.
03. Toggl
Красиво анимированная трехмерная графика страницы переносит в сказку с 404-сюжетом. По-мультяшному реалистично.
04. Designzillas
Дизайн-зиллы сделали страшилку из своей 404 страницы. Персонаж монстра служит символом существенных результатов креативной студии. Прокрутите – увидите как вылупляется дракон.
05. Bench
Такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует?
06. Pirate Code
Персонаж с главной страницы сайта задумчиво прогуливается по 404-й.
07. Weemss
Каждый раз, когда кто-либо посещает эту страницу, пони превращается в зомби.
Чтобы спасти хотя бы 1-го пони предлагают войти или подписаться на софт.
08. Flipping Book
Может кому знакомо? В домашнем хаосе с малышом и котом, вырванные страницы становятся самолетиками.
09. Vebk
Красивая рестро страница 404 ошибки – в тонах и жанровой стилистике самого сайта.
10. De’Nastia
Предлагая уютные товары для дома, De’Nastia встречает ошибающихся адресом пользователей симпатичной 404-й страницей.
11. Slack
В странном месте бродят свинки с курицами, природа буйствует красками. Страница «Not Found» напоминает сказку.
12. Pikabu
В информационно-развлекательном жанре, страница 404-ошибки изображает представителя сообщества пикабу.
13. Rabota Gk-Rte
Обратный отсчет в ожидании столкновения ракеты с землей…
14.
Lyft
LyftСтраница ошибки сайта американского такси-сервиса.
15. Kick Point
Внедорожник 4×4 на странице 404
16. Madwell
Креативное агентство развело анимированный костер на 404-й странице.
17. Clockwise
Перекати-поле подкатывается к надписи 404. Это растение пустынь и степей, а вы на странице ошибки.
18. Matteo Vandelli
Интерактивная анимация цифр 404 на странице с ошибкой.
19. Grainand Mortar
Трафаретное изображение тигра в белой цифре 404, соответствуя акцентному цвету (коричневый) создает приятный контраст с фоновой текстурой изогнутой сетки.
20. Rails Ware
Тематическая 404-я сайта разработчиков и дизайнеров.
21. Domenart Studio
Красиво оформленная 404-я страница российской студии дизайна.
22. Love Beets
Английская ферма выращивает овощи для салатов. Интереактивный редис под социальный шаринг на 404-й странице – это оригинально и уникально.
Страница 404 и красивая айдентика
Увязанные с оформлением ресурса и айдентикой компании страницы 404. Интересны тем, что знакомят с корпоративным стилем или творческой индивидуальностью.
23. Sketch
В дизайне этой 404 страницы идеально выдержан корпоративный стиль, сохранена навигация.
24. Puree Maison
После предзагрузки основных страниц, перекатывающийся монстрик покажется старым знакомым.
25. Hungry Boys
Благодаря лого и анимации прелоадера, жест облизывания в перевернутом виде уже понятен.
26. Phive
После эксцентричного поведения при загрузке страниц, значок прелоадера на 404-ой выглядит изможденным: «Не могу согнуться, потеря 404 грамм жира…»
27. Mail Bakery
Mail BakeryБренд персонаж сообщает об ошибке 404. Однако на возможность сделать заказ указывает интерактивная анимация с призывом.
28. Moosend
После редизайна с новым логотипом, ярко выраженную айдентику сайт компании демонстрирует и на 404-й странице.
30. A propos du cancer
Жанровая стилистика сайта мед. учреждения – обращение к докторам хосписа. Иллюстрации, спокойная анимация и успокаивающие тона. На странице 404 ошибки потерявшийся пациент.
31. Studio Wolf
Доменный нейминг студио-волка подчеркивает контурное волчье лого, а еще мигающие пары глаз из темного леса.
32. Horton Works
В дополнение к логотипу и сам слон.
33. Pointless Corp
Бренд-персонажа на 404 странице поместили в анимированную печать, заставив крутить педали.
Столь «достойное применение» медведю объясняет само название агентства.
34. Nagyi Titka
Рекламный персонаж продукта крупным планом на 404-странице.
35. Panoraven
Похоже, персонажу сервиса выдали лупу для детективного изучения собственных следов.
36. Waaffle
На странице с ошибкой персонаж сайта начинает плавиться.
37. Avocode
Страница 404 весьма недвусмысленно подчеркивает креативный нейминг (avocode от авокадо).
38. Yelp
Пес-сыщик Дарвин идет по горячим следам в ходе рассмотрения дела о пропавшей странице. Пока детектив вынюхивает и разбирается, переходим по ссылкам – элементарно, дружище. Cтраница yelp.com/404 имеет скрытый смысл (yelp – лаять).
Тематичные 404 страницы
Идея этих четырестачетвертых – иронично и коротко представить сайт, чтобы пользователь не унывал, когда попадает на страницу ошибки.
Они лаконично выражают направленность деятельности компании.
39. E-co
Анимированное замыкание на 404 странице сайта дистрибьютора производителя источников питания.
40. Slodych
Аппетитная выпечка цифр 404.
41. Codemy Concept
Чашка кофе – символ разработчика.
42. Prob2b
У сервиса по созданию лендингов и повышению бизнес-эффективности лаконичная страница 404 с красивым плоским дизайном.
43. Handy Hat
Оригинальная страница 404 бренда вязанных шапок.
44. Limra Technosys
Индусы иронично и лаконично выразили свою деятельность: строят сайты, приложения, делают софт, SEO-оптимизируют и приводят в порядок маркетинг.
45. Max Style
У агентства по цифровому продвижению компаний эффектная страница 404.
46. Fuse Lab Ceative
Красивый агентский сайт. Страница ошибки эффектно оформлена объемными цифрами 404.
47. 1ps
Онлайн-агентство оказывает digital-услуги и продвигает сайты. Легкая, воздушная 404 страница с идеей – сбрасывать балласт и подниматься.
48. Woodst
Анимированная 404-я на сайте агентства, специализирующегося на графике.
Забавные и необычные 404-е
Самые креативные и занимательные страницы 404-й ошибки. Прикольные иллюстрации, видео-коубы, Gif и анимации могут развлечь и повеселить хоть целевого, хоть праздного посетителя сайта.
47. Tapfiliate
Очень энергичная, эксцентричная 404. Наверное, такая и должна быть ненайденная страница у CPA партнерки.
48. Пора валить
Анимированная 404-страница агентства «Пора валить»: свинья развлекается на тракторе.
49. Vintage
Забавно анимирована страница 404 украинской студии: чем-то обеспокоен трафаретный олень.
50. Insurance Experiments
Свой забавный промо проект UK-страховщики назвали экспериментальным, а мульти-страницу 404 сделали веселой.
51. Multi Work
На 404-й фирменный персонаж проекта, помогающего студенту / клиенту подобрать материал или репетитора. Уходя, сообщает, что страница переехала.
52. Fromage Abondance
Видео-коуб: французская корова-модница — соответствует тенденциям, также как и сайт.
53. Red Collar
Причудливая фантазия с анимацией на 404 странице цифрового агентства.
404 коты, собаки и разные создания
Смешные и позитивные коты и собачки, которые в какой-то мере выражают назначение сайта, поддерживают общую идею дизайна.
54. Html6
Html6Сделано на шаблоне: интерактивный и сердитый кот.
55. Buzz Feed
Gif-ка слегка анимированного кота на 404-й… а как иначе для развлекательного медиа ресурса?
56. Life Daily
Интересующийся кот-404 с развлекательного веб-ресурса.
57. Kayako
Анимированный котенок рыжими пятнами удачно удачно поддержал акцентный цвет сайта.
58. Idesign
Непонятные создания перед непростым решением. Но надо возвращаться на главную.
59. Help Scout
Собачки рвутся с поводка… впрочем позитивных flat-иллюстраций немало на этом сайте.
60. Marketohttps://www.marketo.com/404
Разве кого-то может рассердить такая мордочка.
61. 99designs
Щенок — терминатор.
Красиво иллюстрированные Not Found страницы
62. Enjoy Kamchatka
Enjoy Kamchatka Красиво оформленная под 404-ю ошибку фоновая фотография привлекает целевую аудиторию на сайт.
63. Skipio
Иллюстрация затерявшегося среди красот природы путешественника. К основной навигации добавлены ссылки. Предлагают осмотреться.
64. Epic
Красивая страница ошибки, выполнена как креативный вариант страницы «О нас».
65. Branded7
Красивая иллюстрация 404 в стиле шапки и футера сайта.
66. Дом со всем
Качественно отрисованная 404-я страница под тематику сайта компании.
67. Bright Scout
Назад в будущее – отличная идея для 404 страницы. Плоская иллюстрация с градиентами выполнена в стиле этого зеленого сайта и современных Web трендов.
68. Deep Time
Потерянная во времени, винтажная 404-я страница проекта интерактивной инфографики об истории Земли.
Провальное / непреодолимое. Потерянные на 404-ой
На таких страницах ошибки есть непреодолимое препятствие, полный провал. Либо вы ясно понимаете, что потерялись на сайте.
69. FSRussia
Страница 404 сайта федерации фигурного катания: «провальное выступление».
70. Sibirix
Видео-коуб 404 новосибиркой дизайн студии с роботом-собакой.
71. Anton & Irene
Люди будущего медитируют перед тем как провалиться в черную дыру.
72. Straight North
Кирпичная стена за дверью. Ваш клик привел на несуществующую страницу. Может не все клики засчитываются? Попробуйте еще – тут зачтется (специализируются на PPC рекламе, SEO).
73. Cloud Cart
Попал на распутье (смысл в том, что нужно выбрать подходящий сервис платформы).
74. Ucraft
Страница 404 посвящается потерявшимся в джунглях сервиса (для создания веб-сайта без навыков программирования).
75. Crello
Такое не часто встретишь. Потому сразу говорят: либо уходите, либо воспользуйтесь онлайн-сервисом Crello и создайте свой дизайн.
76. Kleo
На сайте про моду, красоту и бомонд, желательно, чтобы посетитель если уж заблудился, то красиво.
Игровые страницы 404
Не найденные четыреста четвертые страницы с простенькой, но очень занимательной игрой.
77. Heyzap
Лучшая интерактивная страница 404 – тут придется защищаться. Элемент игрового интерактива развлечет и займет на время. Игра может порадовать и человек не пожалеет, что попал по ошибке на 404-ю страницу.
77. Kualo
Веб-хостинг встречает всех попадающих на страницу ошибки увлекательной игрой. «Космические захватчики» – просто волшебные воспоминания прошлого. Используйте пробел.
78. Pointe Pest
Игра развлечет того, кто ничего не имеет против необходимости отстреливаться от нашествия ползущих жуков, клещей, стрекоз и др. насекомых. Используйте пробел.
79. Canva
Сбор пазла – совсем несложная игра.
80. Amphibian
Лягушачий футбол! Если не одна из страниц ошибки 404 не впечатлила, то эта хотя бы может занять…
Лучшие примеры 404 страницы
Блуждая по Сети, вы иногда натыкаетесь на сообщения об ошибке «page not found». Часто эти «не найденные» 404 страницы ошибок не представляют никакого интереса. Неудовлетворенный таким результатом, посетитель может покинуть сайт. Поскольку ошибки в написании адреса допускаются довольно часто, а сайты не идеальны (например ошибка из-за битой ссылки) – очевиден факт того, что они теряют своих посетителей. Лучшие примеры страниц 404 наводят на мысль о создании эффективной Error Page, которая должна быть спроектирована и настроена индивидуально под сайт.
Если нет возможности создать что-то необыкновенное, то можно придумать свое сообщение, добавить меню, поиск, линк на главную или показ последних постов. Это будет не самым плохим выходом. Для лучших результатов потребуется разработка более оригинального дизайна страницы 404 ошибки.
Эта подборка в помощь тем, кого интересуют лучшие примеры 404 страниц и кому нужны новые идеи для вдохновения при создании своей страницы ошибки.
Screaming Frog ( screamingfrog.co.uk/404/)
Okostroy ( okostroy.ru/404/)
Hey Zap ( heyzap.com/404 )
Fusion Charts ( fusioncharts.com/404/)
Med-Altai ( med-altai.ru/404/)
Bully Entertainment ( bullyentertainment.com/404notfound/)
Mini Handball (www.minihandball.pl/ 404 )
Banks (banks.az/404 )
Purple Travel ( purpletravel.co.uk/abc/)
Funkyimg ( http://funkyimg.com/404 )
Colibris ( http://colibris.ua/404/)
Smart Touch ( smarttouch.me/en/page-not-found )
Gift Rocket (http://www.giftrocket.com/ 404)
Made with Envy (http://madewithenvy.com/404 )
Space Angry Birds (http://www.angrybirds.com/404er )
11×11
Fitbit (http://www.fitbit.com/404 )
Sandalikidet (http://sandalikidet.ru/404error/)
Black Wave Creative (blackwave.net/ 404 )
Оvsyannikoff ( http://ovsyannikoff.ru/404 )
2013.404fest ( http://2013.404fest.ru/404/)
Kyan ( http://kyan.com/404 )
Coex (https://www.coex.cz/404)
Soline (http://www.soline.ru/ 404 )
Оформляем красиво страницу 404-ой ошибки
Привлекательная c оригинальной идеей страница 404 ошибки улучшит поведенческий фактор и повысит эффективность сайта. Чтобы битая ссылка не оставляла худшее впечатление, сделайте 404 страничку интересной целевому посетителю. Свое нестандартное текстовое сообщение смотрится интереснее, чем «ошибка 404 страница не найдена». Предложите:
- Правильно писать адрес
- Свои извинения за сложившуюся ситуацию
- Объяснение факту случившегося и важности перехода на главную / др. страницы
Для навигации обычно оставляют основное меню и ссылки на продукт, важный контент. Стандартные элементы 404-й: логотип, шапка, футер… На лучших страницах ошибки уделяется внимание подбору цвета, соответствию стилю самого сайта и красивой анимации с занимательным интерактивом.
Для сайта с коммерческим предложением подчеркните:
- Рациональный подход к делу и разумную стратегию
- Заявленную креативность своих дизайнеров
- Исключительность и особенность своего бренда
- Подлинное качество сервисов и продуктов
- Готовности предложить нестандартные идеи и пути их решения
Интеллектуальное общение с пустым холодильником: кажется дизайнеру страницы ошибки 404 удалось выразить избранную стратегию и оптимистичный настрой компании.
Ooops! Похоже нет того, что искал – страница не нашлась. Но если подумать: ничего ведь на самом деле и быть не может. В принципе. Концепция игры разума в процессе получения сенсорных ощущений от чего-либо. В конечном счёте, любовь – это все что вам нужно
На главной странице веб-сайта развлекательного центра Сибирский Молл элементом навигации по слайдеру служит шарик, который в итоге лопается на странице 404 ошибки.
Важна идея! — пример красивого оформления 404-й ошибки сайта
По оформлению страницы:
- Поставить ссылки на главную и значимые материалы
- Как вариант, настроить вывод 10 последних материалов
- Связать случившуюся ошибку с вашей тематикой и общим дизайном – странице ошибки важно соответствовать веб-ресурсу / визуально быть его частью
- 404 страница не должна выглядеть скучно, усиливая разочарование от ее посещения
- Сделать навигацию заметной, оформление несложным, что бы пользователь мог легко охватить всю страницу взглядом
- Добавить форму поиска по сайту
По настройке страницы:
После создания, файл страницы (например 404.html) разместите на сервере, сконфигурировав файл .htaccess. Для случая, когда сайт на Apache вверху файла .htaccess размещаем директиву ErrorDocument 404 /404.html (файл – в корне сайта) или ErrorDocument 404 http://www.site.ru/404/ (файл – не в корне сайта)
Убедитесь, что страница не индексируется поисковиками (возвращается правильный http статус ошибки). Запретить индексацию можно в robots.txt, дописав строчку Disallow: /404.html.
Креативным офоормлением и правильной обработкой 404 Not Found вы удержите посетителя, а сервисы проверки битых ссылок помогут снизить число самих ошибок.
Варианты 404 страницы — идеи оформления
Bark Box
Компания реализует продукцию для домашних питомцев: «Это же шампунь для собак…»
Pando
404: Page not found — почти наверняка это он виноват
Mitra
На 404-ой странице веб-агентства, парой персонажей представлена команда профессионалов
Валенки водка
Страница 404 отечественного бренда: алкогольный сайт VALENKI™
Sumato Soft
Похоже, нет такой страницы. Можете продолжить горевать, а можете:
- Познакомиться с нами
- Посмотреть работы
- Написать нам
Комплето
У маркетинговой группы «Комплето» 404-я собрана из элементов оформления главной и внутренних страниц
Story and Hear
У онлайн видео-школы, тематичная 404-я страница с зацикленным видео (coub video)
Born Group
Оопс, выглядит как будто-то все пошло не так, раз ты здесь очутился. На верный путь вернут эти ссылки: портфолио, сервисы, о нас
Coffeemate
404 на продающем кофейном сайте: Похоже, кто-то не выпил свой утренний кофе…
Stugoo
404 страница на любителя чудовищ из space тематики… была съедена Юникроном. Трансформер: Я вас сюда заманил. Эффектная Ghost-кнопка: Никто на заманит Мегатрона!
Imaginovation
Страница 404-й ошибки вида Lost in Space… Возвращайся на главную
Lander
Символичная страница ошибки Landing page платформы: «Наша ракета сбилась с курса»
Pixelemu
Мы поискали запрошенную страницу, но нашлась только уточка для ванной
Checkmate
Мультяшая страница ошибки 404: даже Дора не может найти эту страницу. Возвращаемся домой
Piccsy
Вы куда-то не туда забрели, но иллюстрации R. Klonek стоит посмотреть
Yougov
Персонаж аналитической компании YouGov озадачен ошибкой: 404 страница не найдена
Fish Finger
Похоже вы высадились на 404-й. Не волнуйтесь за шеф-повара, гарантируем — будет жив
We Heart It
Оппс! Приземление возле движущейся цели. Похоже страница сменила адрес или более не существует. Не падайте духом и возвращайтесь на сайт
Supremo
Агентство веб-разработки решило позабавить заказчиков. На странице с ошибкой 404 случилась… ну явная неудача. Предлагают связаться к ними
Quartzy
Эксперимент не удался — 404 страница ошибки от научно-маркетинговых исследователей
Поиск 404 ошибок на сайте — SEO на vc.ru
Довольно широко распространена ситуация, когда мы, пользователи, натыкаемся на несуществующие страницы с кодом ответа 404 Not Found. Такие страницы есть на любом сайте, достаточно лишь вбить в адресную строку URL с ошибкой. Но вот проблема — наличие внутренних ссылок на них обязательно к исправлению, и вот почему.
- Поисковые роботы расходуют краулинговый бюджет при переходе на 404. Это приводит к тому, что они с меньшей вероятностью просканируют действительно полезные страницы с новым контентом.
- Потеря веса внешних ссылок, которая несомненно скажется на ухудшении в ранжировании этой страницы, а возможно и всего сайта.
- Ухудшение пользовательского опыта. Если на каждом углу посетитель сайта наталкивается на 404 страницу с грустной надписью «Not Found» он с большой вероятностью покинет сайт.
Какие причины приводят к 404
Вызывать эту ошибку могут следующие причины:
- Неправильный URL-адрес. Довольно часто пользователи просто опечатываются.
- Страница была удалена.
- URL-адрес страницы был изменен без настройки редиректов. Это привело к тому, что если пытаться перейти по старому адресу (например, по ссылке с другого сайта или закладок) возникнет ошибка 404.
Помочь найти страницы с 404 ошибкой помогут панели для вебмастеров.
Страницы 404, которые радуют | Статьи SEOnews
Мы хотим, чтобы все ссылки работали, но проколы случаются. Чтобы сохранить лояльность посетителя и порадовать его, вам нужна непростая страница 404. Мы уже публиковали подборку интересных реализаций. Вот 4 подхода, которые помогут вам выделиться.
1. Немного юмора
Blue Egg преподносят посетителям сюрприз: разместили на странице 404 вирусное видео с козлом, который кричит как человек.
Когда вы удовлетворитесь видеоизвинением, можете вернуться на главную страницу.
Лучший пример нескучной страницы у Lego. Узнаваемые фигурки и ситуация, похожая на ту, в которой оказался посетитель. Так они создают лояльность и смягчают разочарование.
Кто устоит перед Гомером Симпсоном? Известный персонаж в комической ситуации снизит напряженность момента и укажет кратчайший путь назад.
Мы понимаем, как неприятно попасть на несуществующую страницу, поэтому на помощь позвали ёжика в тумане.
2. Развлечение
Воспользуйтесь моментом и развлеките посетителя. Подарите ему немного удовольствия, это сотрет из памяти неприятный момент.
Blue Daniel используют анимацию и мотивы из фильмов. Сразу и не поймешь, что это страница 404. Только присмотревшись к мелким деталям, осознаешь, где ты. Колышущиеся буквы, поезд, прибывающий на станцию, визг тормозов — больше похоже на телешоу, чем на несуществующую страницу сайта.
Что может быть увлекательнее игр? Blue Fountain творчески подошли к оформлению 404 страницы и приготовили сюрприз в виде игры Pacman. Посетитель может и забыть, что он искал, и рекомендовать друзьям эту 404 страницу.
3. Покажите профессионализм
>9GAG использует современную цветовую схему и типографику. Причудливый текст отражает творческую направленность сайта, а цвета делают страницу привлекательной визуально. Дизайн 404 страницы отличается от оформления сайта, что привлекает к ней дополнительное внимание.
У HotDot залипательная страница. Точки, составляющие 404, реагируют на мышь и постоянно двигаются. Страница демонстрирует главную ценность компании — внимание к деталям.
Devian Art известен своим креативом. На простой странице 404 присутствует талисман сообщества. Это помогает показать характер сообщества и выразить сочувствие и понимание посетителю, который не нашел того, что искал.
4. Помогайте
Это важно. Снабдите посетителя всеми инструментами, которые помогут достичь цели.
Например, как Starbucks. Страница информирует, что пошло не так, и предлагает варианты действий. И, как хорошая 404 страница, предлагает оставить отзыв.
Этот же вариант использует Mozilla. В центре внимания навигационное меню сайта. Также страница используется для конверсионных действий: так, присутствует ссылка для скачивания браузера. Хороший способ порадовать заблудившегося путешественника.
При правильном подходе даже неприятная ситуация будет работать на вас. Уделите внимание 404 странице, ведь даже незначительные детали влияют на лояльность посетителей. Как знать, возможно, именно вашу несуществующую страницу будут показывать друзьям и посещать не только случайно, но и намеренно.
Как создать страницу ошибки 404
Всем привет, друзья! В данной статье речь пойдет о том, как создать страницу 404. Если у вас на блоге стандартная страница ошибки 404, то ее нужно срочно отредактировать и сделать красивой.
Страница ошибки 404 – это такая страница, которой просто не существует. Например, вы написали статью, и по каким-то причинам решили ее удалить. Но эта статья еще индексируется поисковыми системами. Посетитель зайдет на ваш сайт и увидит вод такую некрасивую страницу ошибки:
Скорее всего, эта страница не понравиться посетителю и он быстро закроет сайт. Так зачем нам такая не правильная страница 404? Я считаю, что лучше ее изменить и заставить человека остаться на блоге. Тем боле, что это делается очень просто и быстро.
Мою страницу ошибки вы можете посмотреть по такому адресу http://vachevskiy.ru/232 Если вы хотите увидеть, как выглядит ваша страница 404, то нужно после третьего слеша ввести любые символы. Ну, например, так: http://ваш домен.ru/1212345.
Для того, чтобы создать 404 страницу, нужно сначала скачать файл 404 php себе на компьютер. Для этого зайдите в панель управления – внешний вид – редактор. Откройте файл 404 php скопируйте код, который в нем находиться и вставьте его в блокнот Notepad ++ например, на рабочем столе компьютера.
Файл 404 php можно также скачать и другим способом. Для этого зайдите в корень сайта. Перейдите в папку wp-content – themes – название темы — 404.php. Скачивайте файл себе на компьютер и сделайте его копию, потому что ми сейчас будем делать изменения в коде.
Что теперь можно сделать с этой страницей? Да все, что угодно. Вставлять картинки, похожие записи, популярные записи. Можно добавить поиск по сайту, вставить ссылку на главную страницу или же на карту сайта. Написать любой текст посетителю. В общем, делать все, чтобы у нас появилась красивая страница 404 для сайта.
Но в любом случаи, я считаю, что человек должен видеть, что страницы, которую он ищет, больше нет. Это будет правильная страница 404. Вот я в фотошопе за 5 минут сделал такую картинку.
Согласитесь, намного лучше, чем просто надпись, Error 404 — Page Not Found. Вы также можете скачать в интернете любую картинку. Просто введите в поиске по картинкам «404 страница»:.
Для того, чтобы вставить изображения в страницу ошибки, можно воспользоваться вод таким кодом:
но перед тем, нужно закачать изображения на хостинг в папку images, а также нужно каждое изображения оптимизировать, для этого прочтите статью, о том, как уменьшить вес фото или картинки без потери качества.
Вставить последние записи можно так:
Вывести популярные записи можно при помощи этого кода:
Вывод категорий сайта:
Если вы хотите вывести поиск по блогу на 404 страницу, то найдите в файле header.php или sidebar.php код, который отвечает за поиск по сайту, и вставьте его в страницу ошибки.
Если вы хотите разместить что-то по центру страницы, то нужно воспользоваться тегом
Вот, например, я хочу сделать картинку по центру:
Возможно, хотите сделать отступ сверху, тогда воспользуйтесь следующим кодом:
В последнем случаи ми сделали отступ картинки на 30px сверху. Число 30 можно изменять. Экспериментируйте.
Отступ снизу на 30px делается следующим образом:
Думаю, этих знаний css будет достаточно, чтобы у вас получилась красивая страница 404 для сайта.
Какие коды вставлять, вы уже знаете. Теперь остается выяснить, куда их вставлять. Код моей страницы ошибки выглядел до изменений следующим образом:
Как видно, все коды нужно вставлять внутрь блока div. Я убрал надпись h3 Error 404 — Page Not Found /h3 поскольку она мне не нужна.
Вместо этого вставил картинку по центру. После картинки вставил вод такой текст:
И сделал отступ сверху на 20рх, чтобы текст не прилипал к картинке. А еще ниже сделал вывод последних записей:
А вот, красивая страница 404 для сайта http://vachevskiy.ru/232
Если вы не умеете изменять что-то в кодах, то можете сделать 404 страницу при помощи плагина. Но, здесь стоить сказать и то, что каждый плагин уменьшает загрузку вашего сайта. Об этом я подробно писал в статье: «Как ускорить wordpress блог». Но все же, если вы решили сделать красивую страницу 404 для сайта при помощи плагинов, то вот они:
Redirection. Принцип роботы этого плагина очень простой. Вы указываете в настройках любую страницу, и этот плагин будет перенаправлять посетителя со страницы 404 на ту, которую вы указали в настройках. Мне кажется неплохой плагин. Скачать вы его можете здесь.
Smart 404. Этот плагин вместо 404 страницы выдает пользователю другую релевантную страницу. Он ищет похожую запись в рубриках и метках. Если у вас тематический сайт и много похожих статей, то думаю, этот плагин вам подойдет. Скачать можно здесь.
Вот и все, наверное, что касается вопроса, как создать страницу 404. До новых встреч ;-).
Блестящие примеры 404 страниц
Создание 404 страниц может не быть в верхней части вашего списка при разработке веб-сайта, но лучшие из них работают, чтобы передать идентичность бренда и развлечь посетителей. Конечно, в идеале вы не хотите, чтобы пользователи вообще видели страницу 404, но вы можете немного обдумать ситуацию в свою пользу и использовать эти страницы с ошибками в качестве послов вашего бренда.
На заказных страницах 404 используется умный UX, остроумие или потрясающий дизайн, чтобы смягчить раздражение от того, что вы оказались в неправильном месте, а лучшие из них запоминаются, а также ими можно поделиться.Это может быть какая-то продуманная CSS-анимация, крутой эффект прокрутки параллакса или резкая копия — лишь некоторые из способов оживить страницы с ошибками 404.
Мы выбрали наши любимые страницы с ошибками 404 и представили их здесь. Эти примеры достигли всего вышеперечисленного и многого другого, так что взгляните и вдохновитесь мыслить нестандартно со своими собственными.
01. Marvel
(Изображение предоставлено Marvel)У Marvel есть несколько версий своих страниц 404, которые (конечно) все посвящены MCU.Мы заметили ссылки на Гидру (одна из которых выше) и глаз Утау, и это всего лишь пара. Проверьте страницу, чтобы узнать, какой из них вы получите.
02. LEGO
(Изображение предоставлено LEGO)Страница Lego 404 довольно проста, но излучает индивидуальность. Испуганное выражение лица Lego-человечка плюс толчок к лозунгу бренда («все по-прежнему великолепно») создают впечатление страницы с ошибкой, о которой вам не жаль, что вы наткнулись.
03. Omlet
(Изображение предоставлено Omlet)Игра слов уведет вас далеко, поэтому мы ценим подход Omlet к его странице 404.На странице креативной компании написано: «Эта страница — яичный запах», поскольку на экране появляется анимированная яичная трещина. Ярко-красный цвет показывает, что это «предупреждение», тогда как тема яйца соответствует имени Омлета. Что не нравится?
04. Mantra Labs
(Изображение предоставлено Mantra Labs)Эта страница 404 от Mantra Labs проста, но эффективна. Иллюстрация космического человека, плывущего в «404», сопровождает текст «Ой! У вас закончился кислород ». Также есть таймер, отсчитывающий до того, как вы вернетесь на главную страницу.Если вы моргнули, то можете даже пропустить эту 404-ю страницу, хотя стоит специально пойти не так, чтобы просто посетить ее.
05. Готовы к выживанию
(Изображение предоставлено: Готовы пойти на выживание)Мы все любим хорошие ссылки на фильмы на странице 404 (и некоторые из них включены в наш список). Этот сайт выживания ссылается на Матрицу на своей странице 404 и предлагает вам два варианта: щелкнуть красную или синюю таблетку. Естественно, оба удерживают вас на сайте.
06. Carwow
(Изображение предоставлено carwow)Этот сайт сравнения покупок автомобилей поможет вам найти идеальный автомобиль, но когда вы отклоняетесь от курса, его страница 404 предоставляет умный тематический способ удержать вас на сайте.Посетителям предоставляется 8-битный экран в игровом стиле. Все, что вам нужно сделать, это нажать на текст «Пуск», чтобы насладиться простой игрой с горизонтальной прокруткой, в которой все, что вам нужно сделать, это избегать препятствий и других автомобилей. Попробуйте.
07. Ueno
Ueno — агентство полного цикла с выдающейся страницей 404. То, что вы видите выше, не отражает всех усилий, которые были приложены к нему: хот-дог анимирован, поэтому он проходит в бесконечном цикле через сюрреалистический пейзаж, и есть несколько веселых пояснительных сообщений для изучения.Это помешательство и совершенно уникальное — посетите страницу ошибки здесь.
08. Gymbox
Gym Box — компания по производству спортзалов, цель которой — предложить «самые уникальные и разнообразные классы в Лондоне». Пределы этого утверждения могут заключаться в великолепном фитнес-зрелище 80-х, которое появляется на его странице 404. Короткие шорты, укороченные топы и подталкивание таза — что еще нужно от страницы с ошибкой?
09. Slack
С небольшим преувеличением можно сказать, что обновление логотипа Slack в 2019 году было встречено повсеместным ужасом, а его сверхсахаристая страница 404 наверняка вызовет немалую долю ненавистников.Совершите ошибку в Slack, и вы попадете в волшебный пейзаж с пышной листвой, горами и радугами, где свободно бродят бабочки, куры и крошечные поросята. Сцена также прокручивается по горизонтали с движением мыши (попробуйте здесь).
10. Purée Maison
Purée Maison — это креативное агентство, специализирующееся на коммуникационной стратегии, и его характерный веб-сайт полон восхитительных анимаций (мы рекомендуем посмотреть вокруг). Мы — особые поклонники этой сюрреалистической страницы 404, которая каким-то образом прекрасно передает боль от удара о цифровую стену.
11. Pixar
Некоторые люди могут принимать вещи слишком близко к сердцу. Страница 404 Pixar, на которой изображена печаль из чрезвычайно популярного журнала Inside Out 2015 года, проста, понятна и выполняет свою работу. Однако, если это отражает вашу реакцию на получение ошибки 404, возможно, вам нужно немного пересмотреть свою жизнь.
12. 20th Century Studios
Не можете найти нужный фильм? Недавно переименованная студия 20th Century Studios (ранее 20th Century Fox) может вдохновить вас на случай, если вы укажете неправильный URL; На его странице 404 появляется кадр из культового фильма с лаконичной подписью и подборкой других фильмов, которые вы, возможно, захотите посмотреть.Мы заметили отрывки из фильмов «Эдвард руки-ножницы», «Месть ботаников» и «Наполеон Динамит» и других (посмотрите, какой из них вы получите).
13. Cloud Sigma
Cloud Sigma — это облачный сервер и облачный хостинг, работающий в США, Европе и Азиатско-Тихоокеанском регионе. Хотя гибкие облачные серверы полезны, они не совсем интересны, и мы предполагаем, что именно поэтому компания приложила немного дополнительных усилий, чтобы добавить немного юмора в свою насмешливую страницу с ошибкой 404.Интересно, сколько времени пройдет, прежде чем этого полезного молодого разработчика переманивают конкуренты.
14. BluePath
Другой веб-сайт, который использует юмор на своей странице с ошибкой 404, — это консалтинговая компания BluePath по стратегии данных из Атланты. На странице изображена карта Атланты с точкой на другой стороне страницы, указывающей на то, что посетитель «Уйиу с карты». Карта также включает в себя основанную на данных информацию, показывающую сообщения о преступлениях в этом районе. «Почему? Потому что это преступление, для которого вы еще не наняли нас!» Ах, эти дурацкие аналитики данных.
15. Kualo
Компания веб-хостинга Kualo работает уже более 15 лет — вечность в Интернете — и ее страница 404 возвращает в прошлое, угощая посетителей игрой про космических захватчиков Куало. Это не идеально. Ключевая стратегия, заключающаяся в подрыве внешних краев флота, чтобы замедлить спуск захватчиков, для начала не работает. Но это весело, и вы можете получить скидку на хостинг, если вам удастся набрать более 1000 баллов. Играйте здесь.
Его включение в эту статью также вдохновило американскую компанию по борьбе с вредителями Pointe Pest Control на включение своей собственной игры Pest Invaders на страницу с ошибкой 404, дополненную различными летающими и ползающими насекомыми для распыления.
Как говорит Хлоя Золлингер из Pointe: «Достижение страницы с ошибкой 404 чаще всего разочаровывает пользователя сайта. Мы понимаем, насколько важно взаимодействие с пользователем на веб-странице. Чтобы улучшить взаимодействие с посетителями, наша команда посвятила себя созданию интерактивного на нашей странице 404.»
16. Waaark
Страница 404 французской студии Waaark достаточно хороша для просмотра, но ее лучше слушать — хотя, возможно, и не на работе. Вдохновленная Стивеном Хокингом, Автостопом по Галактике и Порталу, она использует инструмент преобразования текста в речь на языке JavaScript под названием meSpeak, чтобы подвергнуть вас ругательной роботизированной тираде. Подключите наушники и посмотрите.
17. Стив Ламберт
Художник из Нью-Йорка Стив Ламберт описывает это так: самая неудобная 404 страница, не найденная в Интернете », и вы знаете, он вполне может быть прав.В нем есть мучительная деталь для камеры, которая просто продолжается и продолжается. Мы не хотим, чтобы вы дочитали его видео до конца, не сжимая ни одной части вашего тела.
Следующая страница: Более вдохновляющие страницы 404 для изучения
15 самых умных страниц 404 в Интернете для вашего вдохновения
Ошибка 404 — одна из самых частых ошибок, возникающих в Интернете. Это происходит, когда сервер не может найти ссылку, которую вы ищете, например, когда ссылка не работает или не работает.Цель страницы 404 как таковая — предупредить пользователей о том, что страница, которую они ищут, не существует, и, надеюсь, перенаправить их на другую, более ценную страницу сайта.
Хотя ошибка 404 может отпугнуть пользователей и побудить их покинуть сайт, тем не менее, ее можно превратить в хорошую маркетинговую возможность. Все мы ценим хороший юмор. Объедините это с ярким сообщением, которое соответствует имиджу компании, и добавьте свой личный колорит, и вы получите выигрышное сообщение об ошибке.Это помогает лучше общаться с посетителем и вызывать эмоциональную реакцию. Это также важный элемент дизайна любого веб-сайта. И эстетика, и функциональность одинаково важны, чтобы упростить навигацию для потерявшегося пользователя.
Именно по этой причине бренды предпочитают не пренебрегать возможностью конвертировать потерянного пользователя. Некоторые из этих страниц 404 широко ценятся в социальных сетях за умное творческое использование для перенаправления пользователей на соответствующие страницы, а не для того, чтобы заставить их покинуть веб-сайт.
Взгляните на 15 таких умных страниц 404 от разных брендов в Интернете:
HUGO FRAN Ç A
Источник: HUGO FRANÇAЭта страница 404 от HUGO FRANÇA сочетает в себе простоту и относительную простоту чтобы произвести впечатление, как и ожидалось от дизайнера UX. Чистая посуда после еды используется, чтобы показать, что страницы больше нет. Изображение явно помогает эмоционально связать пользователя с брендом.
Pixar
Источник: PixarЕще один прекрасный пример эффективной страницы 404 — это страница от Pixar, анимационной компании.Он использует одного из своих персонажей из фильма «Наизнанку», «Печаль». Это мило, интересно и вызывает сочувствие. Само сообщение об ошибке основано на сюжете фильма.
20 th Century Fox
Источник: Fox MoviesНа странице ошибок Fox Movies случайным образом используются клипы и соответствующие тексты из нескольких популярных фильмов, простой, но умный из «Мести ботаников» », Например, высмеивает страницу 404. Нажав на «Искать месть здесь», вы сможете приобрести фильм по сниженной цене.
dogstudio
Источник: dogstudioСтраница 404 Dogstudio дает нам излишнюю привлекательность с некоторыми гифками с собаками. Если собака говорит вам, что вы заблудились, вероятно, вы заблудились.
Emailcenter UK Limited
Источник: emailcenterПлатформа электронного маркетинга от Emailcenter UK Limited используется некоторыми крупными брендами Великобритании. Их инновационная страница 404 на самом деле спрашивает вас, кого уволить за ошибку. Грубая страница использует остроумие, чтобы очеловечить компанию.Страница мотивирует вас оставаться на сайте.
404 Страница Зака Дейли
Источник: Зак Дейли / BehanceЭто одна из наиболее креативных страниц, позволяющая понять, что вы заблудились. Простая, изящная и элегантная страница 404 показывает потерявшегося и плывущего в космосе астронавта с сообщением «обязательно следите за уровнем кислорода» и призывом к действию вернуться на соответствующую страницу сайта.
Хаким Эль Хаттаб
Источник: Хаким Эль ХаттабЧтобы придумать эту корявую штуку, вы должны быть разработчиком внешнего интерфейса.Он прекрасно использует черный юмор. Глаза на странице 404 шведского разработчика Хакима Эль Хаттаба следят за вашим курсором, заставляя вас вернуться на главную страницу.
Big Bad 404 Страница Бена Джордана
Источник: Бен Джордан / DribbleЕще один пример из космоса. Пространство внизу используется для проявления «космического» эффекта. Он содержит четкое сообщение для пользователя о необходимости вернуться на соответствующую страницу веб-сайта. Фраза «возьми меня за руку, и мы вернемся на сайт» на самом деле увлекает вас на страницу и побуждает вернуться назад.
GitHub
Источник: GitHub«Это не та страница, которую вы ищете». Пародия на звездные войны с эффектом параллакса при перемещении мыши обязательно вызовет улыбку на лице любого компьютерщика. Github, популярный портал для всех фанатов, знает, как доставить удовольствие своим пользователям. На сайте также есть классная страница 500, которая отображается, когда сервер выходит из строя.
STG
Источник: STGВы, наверное, не искали Лайонела Ричи, но это нормально.Поп-значок кажется вежливым, когда он пьян, и страница блестяще использует эту концепцию с текстами одной из его знаменитых песен, чтобы направлять пользователей на главную.
Lego
Источник: LEGOLego всегда имеет свое очарование, и нет ничего лучше, чем использовать часть Lego, чтобы сообщить пользователю о неработающей ссылке.
Airbnb
Источник: AirbnbСтраница 404 от Airbnb остроумно напоминает вам о том, что вы должны быть ответственным хозяином, показывая, что если вы уроните мороженое на пол, вы также должны его вымыть.На другой стороне анимации есть полезные ссылки для возврата на сайт.
Hot Dot Production
Источник: Hot Dot ProductionЭтот продукт от Hot Dot Production серьезно соответствует девизу компании «где дизайн встречается с технологиями». Число 404 состоит из крошечных красных точек, которые постоянно меняют направление в ответ на наведение мыши и щелчки. Эта страница действительно вызывает привыкание и не позволит вам так легко покинуть сайт.
Figma
Источник: FigmaЕсли вы действительно любите играть с векторами, эта страница 404 из Figma — то, что вам нужно.Число 404, отображаемое на странице ошибки, отображается в векторах, и вы можете играть весь день, чтобы изменить их форму, которую вы можете себе представить.
9gag
Источник: 9gagСтраница 404 от 9gag отражает настроение и голос бренда. Но страница не только заставляет вас смотреть всегда стильного Джона Траволту, но и умно дает вам возможность загрузить их приложение.
60 Действительно креативные, красивые и удобные для пользователя страницы ошибок 404
Никто не любит видеть страницы с ошибками 404 — страниц больше не существует.Вот почему мы, как ответственный веб-разработчик и блоггер, всегда проверяем неработающие ссылки, исправляем или удаляем их. Слишком много страниц с ошибками не только произведет плохое впечатление на ваших посетителей, но и снизит рейтинг вашего сайта в результатах поиска.
Хотя сокращение количества страниц с ошибками с устаревшими ссылками следует рассматривать как постоянные усилия по поддержанию качества вашего веб-сайта или блога, вы также можете создать свою собственную страницу с ошибкой 404 в соответствии с темой вашего сайта.По умолчанию сообщения об ошибках не так полезны, поэтому вы можете создать свою собственную страницу 404, добавив несколько творческих идей, потрясающую графику и полезные решения, которые помогут вашим посетителям, когда они потерялись на вашей странице. Доверьтесь нам, ваш труд обязательно оценят посетители!
(Источник изображения: Rockettheme.com)
В этом посте мы хотели бы продемонстрировать до 60 креативных, красивых и удобных страниц с ошибками 404 , которые заслуживают вашего внимания. Если вам известны какие-либо потрясающие страницы с ошибками 404, поделитесь с нами в разделе комментариев ниже.Кто знает, что мы можем добавить его в наш список?
(СМОТРИ ТАКЖЕ: Как создать собственную страницу с ошибкой 404 для блога WordPress)
Brandstack 404 Страница ошибки
Страница ошибки Github 404
Кофе Ванкувер Ошибка 404
Tkdesigns — 404 Файл не найден, извините
Catalyst Studios Ошибка 404
Deviantart 404 Страница ошибки
Chykalophia Ошибка 404
501-я ошибка 404
Страница ошибки Robo 404
Ndesign-Studio 404 Страница ошибки
Cuoma 404 Страница ошибки
Tinsanity 404 Ошибка страницы
24-4 Ошибка носителя 404 Страница
CssTricks — этой страницы не существует
ZIVE — файл не найден (страница ошибки 404)
Wufoo — страница не найдена (страница ошибки 404)
Soocial — Мы не смогли найти страницу, которую вы искали… (Страница ошибки 404)
Ошибка Twingly 404
Ошибка Sprawsm 404
Ошибка 404 Bargainjack
BrightKite — К сожалению, страница не найдена (страница ошибки 404)
Квартира Дом Жилая Ошибка 404
Kidmondo — Извините… (страница ошибки 404)
LightPost — К сожалению, эту страницу невозможно найти! (Страница ошибки 404)
Cats Who Code — К сожалению, ничего не найдено (страница ошибки 404)
Абдузидо — Хьюстон, у нас проблема! (Страница ошибки 404)
Copimaj 404 Страница ошибки
Ошибка Acro Media 404, страница
Фактор D Ошибка 404
Флютер — О нет.Не удалось найти / users / 404 /.
Ferdaze — Ошибка 404
Centerd — Извините за ошибку сайта. (Страница ошибки 404)
Cartoon Network 404 Страница ошибки
Amorphia Apparel Ошибка 404, страница
Mozilla — Упс! Что ты здесь делаешь? (Страница ошибки 404)
South Park Studios — Вас обслужили … 404!
Страница ошибок Jackfig 404
44 невероятных страницы ошибок 404
Никто не хочет, чтобы посетители его сети терялись.Но бывает. Когда это произойдет, отличная страница с ошибкой 404 может превратить неприятный опыт в приятный.
Мы всегда хвалим за преимущества хороших стратегий в отношении простоев. Другой аспект заключается в том, чтобы позаботиться о посетителях, если они попадают на старую страницу или на неработающую ссылку. Вот почему мы рекомендуем уделить немного больше внимания страницам с ошибками на 400 и 500 уровнях.
Умная или увлекательная страница с ошибкой усиливает послание вашего бренда и увеличивает шансы посетителей остаться на вашем сайте, а не просто уйти.
Знаете ли вы, что у нас есть бесплатный инструмент, который может вам помочь?
Нажмите здесь, чтобы начать создавать бесплатные страницы ошибок
Что такое страница ошибки 404?
Страница ошибки 404 — это веб-страница, предназначенная для отображения, когда запрос вызывает код ответа HTTP 404. Этот код означает, что клиент (или «посетитель») смог найти сервер, но не определенное место назначения. Другими словами, они нашли ваш сайт, но не конкретную страницу на вашем сайте.Таким образом, сервер отправляет вашему браузеру код ответа 404, сообщая им, что произошло. Если его назначил дизайнер сайта, загружается страница с ошибкой 404.
Вот пример:
Посетите страницу статуса, и ваш браузер загрузит нашу главную домашнюю страницу. Вы нашли наш сервер. Добавьте правильный пункт назначения в конце этого URL-адреса, например, / pricing или / login, и ваш браузер загрузит это конкретное место назначения. Но попробуйте несуществующий пункт назначения, например / gibberish, и вы получите страницу 404.По сути, наш сервер говорит следующее: вы нашли меня, я вижу там мой URL, но конкретный пункт назначения, который вы ищете после косой черты, — это страница, для которой мне нет соответствия. Итак, вот эта страница с ошибкой, чтобы вы знали, что я не вижу в моем каталоге страницы, которая соответствует вашему запросу.
Самое замечательное в странице с ошибкой 404 то, что одна и та же страница загружается независимо от того, какая ошибка приведет вас туда. Таким образом, любая из бесконечных комбинаций неправильных расширений URL будет генерировать эту страницу при условии, что домен верхнего уровня, часть site-dot-com, не поврежден.
Есть две распространенные причины, по которым посетитель может попасть на страницу с ошибкой:
- Они попали по ссылке, указывающей на URL-адрес страницы, которая больше не существует
- Они нажимают или вводят ссылку с ошибкой
Эффект «гниения ссылок» является побочным продуктом первой причины — старых ссылок. Веб-сайты регулярно обновляются, перемещаются или удаляются. Но ни один человек не может полностью контролировать или знать сеть внешних свойств, ссылающихся на их страницу. Это означает, что хотя ссылки продолжаются, они указывают на страницу, которой больше не существует.Таким образом, звено гниет. По некоторым оценкам, он настолько распространен, что половина ссылок, цитируемых в заключениях Верховного суда, больше не содержат исходного содержания.
Поскольку мы не можем контролировать, кто может отправлять посетителей на неработающие ссылки в нашем домене, лучшее, что мы можем сделать, — это настроить отличную страницу с ошибкой 404. Несмотря на то, что отправка посетителей на страницу с ошибкой — не лучший вариант, вы все равно можете это сделать.
А как насчет других страниц ошибок?
Хотя 404 — это наиболее частый код ошибки, который видит большинство людей, это лишь одна из немногих ошибок, которые можно исправить.
Любой трехзначный код ошибки, начинающийся с 4, например 404, называется ошибкой 400 уровня и означает, что что-то пошло не так на стороне клиента. В этих отношениях клиент — ваш посетитель. В частности, это их браузер. Поэтому логично, что неправильный URL считается ошибкой клиента. Сервер (компьютер, на котором размещен сайт) работает нормально.
Другие распространенные ошибки 400-го уровня включают:
- 400 Неверный запрос: запрос, отправленный на сервер, был искажен или каким-то образом не соответствовал правилам синтаксиса.
- 404 Запрещено: звучит зловеще. Но на самом деле все это означает, что запрошенный URL действителен, но у клиента нет необходимых разрешений для доступа к сайту. Это может произойти, когда вы пытаетесь перейти по URL-адресу сайта, для посещения которого необходимо войти в систему.
Другой распространенный набор кодов ошибок — это коды с 500 уровнями. Если коды с 400 уровнями указывают на проблему с чем-то, что делает клиент, коды с 500 уровнями указывают на что-то неожиданное, происходящее на стороне сервера.
Некоторые из общих кодов с 500 уровнями:
- 503 Служба недоступна: это стандартная ошибка «сервер недоступен».Обычно сервер не может ответить, потому что он перегружен или отключен для обслуживания.
- 504 Тайм-аут шлюза: сервер действовал как шлюз для вышестоящего сервера, но не получил вовремя ответ от вышестоящего сервера.
Совет для профессионалов: Даже если на сайте нет страницы с ошибкой, вы можете увидеть коды ошибок в своем браузере. Например, в Chrome щелкните страницу правой кнопкой мыши и выберите «Проверить». Вы увидите набор панелей инструментов разработчика.На вкладке «Консоль» вы увидите список любых кодов HTTP-ответа, которые могут быть сгенерированы, а также множество другой «скрытой» информации, которую сервер сообщает вашему браузеру.
Интересный факт: Существует и иногда используется малоизвестный код ошибки 451. Код предназначен для использования, когда доступ запрещен по юридическому запросу, и является отсылкой к роману-антиутопии «451 градус по Фаренгейту».
44 невероятных примера страниц с ошибками 404
1. 20th Century Fox
У такой компании, как 20th Century Fox, есть огромная библиотека памятных материалов, на которые можно черпать вдохновение.Они взяли несколько отрывков из любимых фильмов библиотеки, таких как «Офисное пространство», «Месть ботаников» и «Эдвард Руки-ножницы». Нажмите на текст, и вы попадете на страницу, где можете купить свою копию.
2. Amazon
Amazon умеет делать сразу несколько вещей. Их страница ошибок ничем не отличается: отчасти устройство для привязки к бренду, отчасти инструмент для набора персонала, их страница с ошибкой загружает изображения и копирует их на множество разных собак, которые часто бывают в офисах компании. Оттуда вы можете щелкнуть биографии разных собак и перейти к реальным историям реальных сотрудников о работе в Amazon.Как будто они знали, что талантливые люди, которые строят в Интернете, будут искать забавные примеры страниц с ошибками.
3. Astuteo
Фирма Astuteo, занимающаяся веб-дизайном и цифровым маркетингом, привлекла большое внимание своей страницей с ошибкой, посвященной «Касабланке». Зайдите на их страницу с ошибкой сейчас, и ее копия станет умной ссылкой для всех, кто ищет забавную страницу с ошибкой. Все еще забавно.
4. Бэтмен 3-D
Сайт фан-арта Бэтмена немецкого художника Ахима Лубса — отличный пример использования дизайна и движения на странице с ошибкой.Наведите указатель мыши, чтобы направить фонарик Бэтмена и отобразить сообщение об ошибке.
5. Бенджамин Рид
Британская компания веб-дизайнера Бенджамина Рида Nouveller создала невероятную страницу с ошибкой, взяв за основу фильм «Парк Юрразика». Страница позволяет посетителям попробовать свои силы во взломе компьютерной системы парка, основанной на сцене, где персонаж Сэмюэля Л. Джексона пытается обойти систему безопасности, установленную коварным программистом парка.
6. Кампания Берни Сандерса
Вскоре после объявления своей президентской заявки в 2016 году Берни Сандерс создал, вероятно, самую запоминающуюся страницу ошибок любого кандидата в президенты.На странице воспроизводится видео, в котором Сандерс объясняет, что пошло не так, и как вернуться на главную страницу. «Просто пролистайте вниз до конца страницы, и вы вернетесь домой, туда, где должны быть!»
7. Bitly
Интерактивность и анимация не должны быть чрезмерными, чтобы произвести впечатление. На странице ошибок Bitly посетители видят существо, плавающее в море. Используйте курсор, чтобы волны подпрыгивали и катились. Удивительно успокаивает и доставляет удовольствие, почти заставляет вас чувствовать себя хорошо, когда вы теряетесь в море.
8. Blizzard Entertainment
Blizzard Entertainment использует изображение битого стекла на своей странице с ошибкой с дерзкой копией о том, что пользователь «ломает» страницу. Умная концепция, особенно для миллионов поклонников Blizzard, стреляющих цифровыми боеприпасами на своих экранах.
9. Bloomberg
Bloomberg известен двумя вещами. Отличная финансовая отчетность и отличные инструменты для профессионалов финансовых услуг. Вот почему это странно и запоминается, что они поместили эту анимацию на страницу с ошибкой.На нем изображен человек в костюме, который отрывает свой компьютер от стола, а затем разваливается на куски на полу. Возможно, это метафора, показывающая, как слишком много ночей проводить в терминале Bloomberg?
10. Блюгг
УBlugg’s была довольно известная страница с ошибкой 404. Долгое время на странице появлялось вирусное видео смеющегося козла. Звучит странно, но это соответствовало тону компании, это было забавно, людям это нравилось. Настолько, что когда команда переработала страницу с ошибкой, им просто пришлось поговорить о козле.Они даже включили сводку статей, где упоминалась коза. Молодец, козел.
11. Codecademy
Codecademy помогает людям научиться программировать. Нет лучшего места для призывания к действию на уроке о страницах ошибок, чем их собственная страница с ошибками.
12. Даниэль Карчер
Вся сцена на этой странице ошибки завораживает и немного преследует. Тонкие штрихи и визуальные эффекты, происходящие в заброшенной обстановке метро, создают настроение, создающее эффект неожиданного попадания в какое-то место.
13. Дилберт
Комикс Дилберта — отличный пример использования собственного контента в качестве материала для вашей страницы 404.
14. Dogstudio
Dogstudio использует великолепную библиотеку гифок с животными от Giphy, чтобы заполнить страницу с ошибкой вращающимся набором гифок с собаками.
15. Восточный рынок
Люди любят летучие игры, в которых вы нажимаете или щелкаете, чтобы летать по небу и избегать препятствий.На восточном рынке Детройта размещена страница с ошибкой 404 с игрой под названием Flappy Spud. Может быть, это такая же окорочка, которую можно купить на рынке. Также приятно, что картофель превращается в груду картофеля фри, когда ударяется о стену.
16. Электронный центр UK
Страницы ошибок — хорошее место, чтобы продемонстрировать творческий потенциал сотрудников вашей компании. Для Emailcenter UK это означало интерактивную шутку об увольнении члена их команды разработчиков. Это отличный способ развлечься как бренд и показать свою команду за кулисами, которая, как правило, не пользуется особой популярностью.
17. Google
Google всегда отлично справлялся с тем, чтобы их бренд оставался веселым и веселым, даже если они создавали одни из самых посещаемых инструментов в Интернете. С таким большим количеством разных посетителей и вариантов использования их продуктов трудно идти в ногу со временем. Google отлично справляется с задачей размещения тонких личинок в неожиданных местах. Их страница с ошибкой — отличный пример.
Страница ошибки — это довольно простая иллюстрация сломанного робота и некоторой копии.Но пасхальное яйцо находится в заголовке страницы, той, которую вы видите на вкладке браузера. Сначала это выглядит как опечатка, но «!! 1» — это отсылка к сетевой шутке о том, как быстро энтузиазм (!!!) может стать неряшливым (!! 1). Обратите внимание на эту клавишу переключения передач, дети.
18. HeyZap
Люди любят винтажные видеоигры. Команда HeyZap уловила часть этой любви, закодировав версию классической аркады «Astroids» на своей странице ошибки. Выстрелите несколькими лазерами по летающим космическим камням, и вскоре вы простите того, кто отправил вас на мертвую связь.
19. Производство горячих точек
КомпанияHot Dot Production создала изящную интерактивную страницу ошибки 404 с гигантской плавающей анимацией «404». Щелкайте по частям чисел, и точки взрываются в космос и возрождаются.
20 Хьюго Боначчи
Страница ошибок разработчика и дизайнераХьюго Боначчи кажется стандартной страницей ошибки 404, когда вы впервые попадаете на нее. Затем вращающаяся фиолетовая черная дыра начинает всасывать все элементы страницы.
21. IGN
IGN позаимствовал некоторую ностальгию у любителей видеоигр по их странице ошибок, вдохновленной Марио. В копии упоминаются моменты из игр «Принцесса в другом замке».
22. IMDb
Страницы ошибок не должны загружать одно и то же содержание при каждом посещении. Их можно настроить так, чтобы они сменяли друг друга в библиотеке копий или произведений искусства, чтобы каждый визит казался новым. Именно это сделали IMDb со своей страницей ошибок, на которой представлены немного измененные цитаты из фильмов.Идите и нажмите «Обновить» несколько раз, чтобы увидеть, какие еще цитаты появятся.
23. Iconfinder
Эффект полета в космосе «Звездных войн» завораживает публику с 1970-х годов. Это полностью действует на странице ошибки 404 в Iconfinder. Еще один отличный пример тонкой анимации, производящей большое впечатление.
24. Imgur
Говоря о тонких вещах, вы можете десятки раз попадать на страницу с ошибкой Imgur, прежде чем заметите, что там даже происходит анимация.Наведите указатель мыши и попытайтесь найти его.
25. Дизайн зайцев
Jackrabbit Design вводит посетителей в эту богатую анимацию, создавая слои, которые перемещаются и смещаются в зависимости от курсора пользователя. Это отличный способ побудить людей уделять вашим работам немного больше времени.
26. Куало
Space Invaders — еще одна классическая аркада. Британская команда, стоящая за Kualo, повеселилась, написав название своей компании с помощью Invaders.Захватчики, которых вы полюбите, используя космический лазер.
27. Лего
Страница ошибокLego проста, но стала классикой. На картинке изображены персонажи лего в беспорядке из-за выдернутой вилки питания. Отличная визуальная метафора и умный способ рассказать историю с помощью знакомого бренда.
28. Одинокая планета
Не на каждой странице с ошибкой должна быть какая-то умная связь с брендом или сложная метафора. Иногда забавной гифки с животным бывает достаточно, чтобы изменить настроение пользователей.Lonely Planet отлично справляется с этой страницей с ошибкой.
29. Пышный
Эта страница с ошибкой от косметического бренда Lush — отличный пример привязки вашей страницы к продвижению. На Пасху 2014 года бренд объявил о своей «охоте за пасхальными яйцами». Найдите пасхальное яйцо на их сайте и выиграйте бесплатный приз. Оказалось, что пасхальное яйцо было спрятано на странице с ошибкой 404, а призом была специальная версия их популярной бомбы для ванн с названием «Ошибка 404».
30. Magnt
Страница с ошибкой не требует сложной анимации или запуска лазеров космических кораблей, чтобы привлечь внимание людей.Простая страница ошибок диаграммы Венна, созданная Magnt, за эти годы получила столько любви, что они добавили раздел, в котором были выделены вырезки из прессы, созданные на этой странице.
31. MailChimp
Тонкая анимация тумана, катящегося по джунглямMailchimp, демонстрирует способность бренда рассказывать историю и привлекать внимание, используя небольшие творческие элементы. Это приятный эффект, которого вы почти не замечаете, если не обращаете внимания.
32. NPR
NPR содержит массу отличных материалов, на которые они могут направить посетителей.Они немного повеселятся с этим на своей странице ошибки 404, на которой представлены истории NPR о других людях и вещах, которые приняли неправильный оборот.
33. Национальный музей истории похорон
Похороны — это повод для смеха? Если кто-то знает, это Национальный музей истории похорон. На их странице с ошибкой есть каламбур «серьезная ошибка» и упоминается страница «исчезнувшая в загробной жизни».
34. Житель Нью-Йорка
Житель Нью-Йорка известен своими прекрасными мультфильмами.Так что, конечно, у них есть тот, который идеально подходит для страницы с ошибкой.
35. Правительство Новой Зеландии
У людей есть дурная привычка оставлять Новую Зеландию за пределами карты. Правительство страны немного повеселилось над этим на своем собственном веб-сайте с пометкой «чего-то не хватает» и картой мира, на которой не было видно Новой Зеландии.
36. Нуванго
Ошибок нет, просто счастливые случайности. Если цель страницы с ошибкой — превратить разочарование в другую эмоцию, например, спокойствие, нет человека, способного справиться с этой работой, как Боб Росс.
37. Оранжевое пальто
Interactive не обязательно означает игры и виджеты Javascript. Страница ошибок Orange Coat предоставляет посетителям блок-схему выбора стиля приключения для работы.
38. Ромен Бразье
Еще один отличный пример использования классических видеоигр, чтобы вызвать ностальгию и радость у посетителей вашей страницы ошибок. Персональный сайт Ромена Бразье ставит перед вами умную цель — спасти как можно больше леммингов, падающих с неба.
39. Spotify
Копия — отсылка к альбому Канье Уэста, анимация — это приятное движение виниловой пластинки. Так расслабься, ты просто хочешь включить музыку и посмотреть, как вращаются пиксели.
40. Стив Ламберт
Страница художника Стива Ламберта, получившая название «Самая неудобная страница ошибок в Интернете», заслуживает внимания. Попробуй дойти до конца. Как пишет Стив на странице: «Такая идея приходит к вам только в 12:30. И тогда ты должен это сделать, иначе ты никогда этого не сделаешь.”
41. Sygic Travel
Sygic Travel вдохновляет страсть к путешествиям своей анимированной страницей ошибок. Наблюдайте за восходом и заходом солнца, когда пустынный пейзаж движется и сменяет день и ночь.
42. Австралийский
Новостные организации обычно немного скучны со своими брендами. Австралийцы неплохо справляются с этим восприятием на своей странице ошибок. На странице представлены фальшивые, но почти правдоподобные цитаты австралийских политиков.
43. Музей творчества
Музей Творения — это место с большой миссией. Многие люди расходятся во мнениях относительно этой миссии, но в любом случае это большая задача: убедить мир, что эволюции не было.
