404 страницы: Лучшие 404 страницы

07.09.2020 Разное

Содержание

Лучшие 404 страницы

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

Сегодня, ко дню вебмастера, мы подготовили подборку интересных четырестачетвертых страниц.

На этом сайте можно найти интерфейс Commodore 64.

Похоже, вам не стоило сюда заходить.

Попробуйте поймать кота 🙂

Студия дизайна делится забавными гифками про собак.

А эта страничка ушла в поход… и не вернулась.

Очень атмосферная интерактивная 404-ая страница.

Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.

Спасите несчастных леммингов!

Классический мем на сайте 9GAG.

Красивая иллюстрация броуновского движения от Hot Dot.

А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.

Вам попалась страница 404? Решайте, кого уволить за такое свинство.

Синий экран смерти от Willismonds.

А эту страницу съели пациенты клиники. Очень сожалеем 🙁

Диаграмма Венна на сайте magnt.com.

Дыра в интернете на сайте CSS Tricks.

Поздравляем. Вы сломали наш сайт.

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

Здесь можно поиграть в пакмана.

Airbnb при переходе на сломанную ссылку порадует вас анимацией девочки с упавшим мороженным, а также предложит некоторые полезные ссылки.

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

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

Всё минималистично и главное — ссылка на релевантный материал.

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

Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.

Инструмент для проектировки интерфейсов отлично справился и с собственным. Можно поиграться с узлами на странице ошибки, но не более. Со шрифтами поиграть не получится.

Создатель блога с душой подошел к делу и сделал красивую и анимированную страницу 404, почти полностью написанную на CSS (картинки, конечно же, были в png). Он даже исходным кодом поделился. При входе на страницу меню разваливается и крутится в чёрной дыре, при этом оставаясь кликабельным.

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

Интересная реализация ошибки 404 в блоге любителя иконок. Пользователь, вероятно, находится в машине, к нему приближается светящееся число 404 и в это же время пробегает ящерица по лобовому стеклу (вообще тут всё зависит от вашей фантазии).

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

На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта. А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).

Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.

Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.

Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.

Как сделать 404 страницу: 10 красивых вариантов оформления

Зачем нужна такая страница?

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

Красивое оформление 404 страницы на сайте

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

Неудачный вариант 404 страницы — пользователь точно уйдет

Как создать 404 страницу?

Процесс создания правильной 404 страницы на сайте состоит из двух основных этапов — это разработка дизайна и техническая настройка.

Дизайн и структура

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

Также при проектировке и создании оформления страницы 404 стоит учитывать специфику сайта:

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

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

Технические аспекты настройки

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

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

Если движок сайта самописный, то готовую страницу (HTML, PHP и т.д.) следует поместить в шаблон по протоколу FTP. И подключить ее в файле .htaccess, который находится в корне сайта, используя следующий код:

ErrorDocument 404 http://URL_сайта/404.html

Для редактирования .htaccess рекомендуется использовать бесплатный редактор Notepad++.

При использовании одной из популярных CMS, к примеру, WordPress, делать 404 страницу скорее всего не придется. По крайней мере технически она уже настроена и подключена, но если есть необходимость создания уникального решения, то его лучше реализовать внутри специального файла, который находится в корне шаблона (/wp-content/themes/тема/) – 404.php. При вставке верстки, нужно учитывать подключаемые хуки движка, некоторые из них могут понадобиться для корректной его работы.

В остальном же все схоже с обычной HTML-версткой.

Не все темы WordPress имеют готовый файл 404.php, поэтому если он отсутствует, следует его создать вручную, наполнить и подключить в .htaccess с помощью следующего кода (если он также отсутствует):

ErrorDocument 404/index.php?error=404

10 красивых примеров страниц 404 ошибки

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

Вариант 1

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

Использование видеокреатива при создании страницы 404

Вариант 2

Отлично настроенная 404 страница популярного магазина бытовой техники и электроники. Хорошо продуманная навигация, а также выведены популярные категории товаров.

Страница 404 для интернет-магазина с категориями товаров

Вариант 3

Простая и стильная страница, текст которой прямо заявляет об ошибке, но тут же «переводит» фокус внимания на тематику сайта (кредиты, вклады).

Пример 404 страницы для банка

Вариант 4

Популярный ресторан быстрого питания, коротко и ясно.

Страница 404 ресторана быстрого питания

Вариант 5

Применение анимации задерживает внимание (лупа при перемещении мыши двигается).

Пример применения анимации на странице 404

Вариант 6

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

Пример тематического дизайна на странице 404

Вариант 7

Провайдер, который даже при 404 ошибке, предлагает ознакомиться с тарифами. Если бы данная информация и призывы к действию (кнопка «Подключить») отсутствовали, то процент отказов был бы явно выше.

Пример страницы 404 на сайте интернет-провайдера

Вариант 8

Указание на отсутствие страницы и следом предложение об услуги (агрегатор, который поможет приобрести билет на самолет в любую точку планеты).

Вариант оформления 404 страницы для агрегатора авиабилетов

Вариант 9

Просто и понятно.

Страница 404 для сайта кофейни

Вариант 10

Использование забавных персонажей (которые гармонируют с дизайном сайта) позволяет повысить лояльность среди большого числа людей. В довесок используется торговое предложение, которое скорее всего заинтересует целевую аудиторию сайта

404 страница для турагентства

Вышеприведенные примеры страниц объединяют несколько качеств:

Они креативные и уникальные – непохожие на 90% 404 страниц других сайтов.
Помимо дизайна, несут в себе практическую пользу, удерживают внимание и сглаживают негатив у потенциального лида.
В некоторых случаях наоборот могут повысить лояльность к компании (сайту) со стороны пользователя.

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

ТОП-50 лучших примеров дизайна 404 страницы — Plerdy

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

Очень важно правильно настроить или продумать 404-ю страницу, ведь она может стать последней, которую увидит пользователь на вашем сайте. Для этого можно использовать несколько тактик:

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

Что ж, на этом с теорией закончим, а сейчас давайте познакомимся с 50 крутыми идеями для оформления 404-й страницы.

Содержание

1. Blizzard Entertainment

2. JACK DANIEL

3.Tproger

4. Github

5. Geekbrains

6. Adidas

7. Emailcenter

8. Marvel

9. Crello

10. Sketch

11. Red Bull

12. Cayenne

13. Aviasales

14. LEGO

15. Studiofables

16. ITcluster

17. Pixar

18. 20th Century Fox

19. Planeta Kino

20. Startup Depot

21. MentorMate

22. Specialized

23. 9GAG

24. Orangecoat

25. Teehan+Lax

26. Hakim.se

27. CSS-tricks

28. The New Yorker

29. Dribbble

30. SumatoSoft

31. Skipio

32. CoolFarm

33. Squarespace

34. DustyMiller.ca

35. Mameilleurecuite

36. Agens

37. Rachel the great

38. Fork cms

39. Incore

40. Daniel Karcher

41. Figma

42. Repair pal

43. Romainbrasier

44. Batman 3D

45. Telltale

46. IMDb

47. Netpeak

48. Elativeagency

49. FOX

50. The Software House

Вывод

Первым участником нашего ТОПа стала известная американская компания Blizzard Entertainment. Blizzard занимается разработкой игр. В частности, их творениями являются такие известные продукты как: World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. 404-я страница выглядит как разбитый экран, показывающий сломанный сайт.

Всемирно известный алкогольный бренд, тоже поработал над оформлением страницы 404. Пользователь имеет возможность увидеть пустую дорогу и надпись «Похоже, ты заблудился, друг». Страница выполнена в корпоративном стиле, а благодаря навигации можно легко вернуться к необходимой странице.

Прекрасный пример оформления 404-й страницы в шутливом стиле от редакции издания Tproger (проект о разработке и всего, что с ней связано). Кроме статуса ошибки, пользователь может посмотреть забавное видео, которое точно поднимет настроение после неудачного поиска.

Прекрасный пример использования корпоративного стиля для оформления 404-й страницы. Для этого Github взяли свой логотип (кота-восьминога) и стилизовали его под «Звездные войны».

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

Компания Adidas решила не отходить от своего корпоративного стиля при оформлении страницы ошибки. Мы видим прекрасный пример минимализма в веб-дизайне, а также текст, который мотивирует нас не сдаваться.

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

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

Сервис онлайн редактирования изображений Crello имеет красивое оформление 404-й страницы в юмористическом стиле. Похищение страницы голубями — одно из самых оригинальных объяснение возникновения ошибки.

Компания Sketch решила оформить свою 404-ю страницу в корпоративном стиле. Хороший пример соблюдения фирменного стиля и простоты навигации.

Известный производитель энергетических напитков Red Bull вполне верен своему стилю. В случае ошибки,пользователь попадет на страницу с эффектным видео и надписью: «Хм, это сбивает с толку. Куда делась страница?! «

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

Сервис поиска авиабилетов Aviasales решил оформить страницу 404 в корпоративном стиле. Дополнительной «изюминкой» этого участника является то, что через некоторое время по странице начинают перемещаться маленькие изображения самолетов.

Один из самых известных производителей детских игрушек в мире — компания LEGO также решила соблюсти в оформлении 404 страницы своего фирменного, немного шутливого стиля.

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

Львовский IT-Cluster также решил проявить творческий подход. В случае ошибки, посетителя ждет оригинальная страница 404 и кнопка для возврата на главную.

Мультипликационная студия Pixar решила соблюсти своего стандартного стиля в дизайне 404-й страницы. В случае ошибки гостю сайта предложат не плакать, и объяснят, что это всего лишь 404-я ошибка.

Кинокомпания 20th Century Fox хорошенько поработала над своей 404-й страницей. Пользователю случайным образом показывают один из вариантов оформления, каждый из которых включает видео и уникальный текст.

Сеть кинотеатров «Планета Кино» решила, кроме соблюдения своего стиля, использовать известную фразу из “Аполлона-13″. Кроме этого есть удобная кнопка для возврата на главную.

Львовский бизнес-инкубатор Startup Depot, первый в нашем списке кто использовал для оформления 404 страницы мем с Винсентом Вегой (фильм «Криминальное чтиво). Этот момент из фильма пользуется широкой популярностью для объяснения отсутствия понимания каких-то вещей, поэтому его использование является удивительно удачным.

Компания MentorMate решила прибегнуть к простому и проверенному приему. Обыграть код ошибки «404» в виде какой-то красивой картинки. В данном случае это чашка кофе и цифры в цветовой стилистике сайта.

Specialized занимается продажей велосипедов и необходимого снаряжения, поэтому этот вид 404-й страницы подходит им лучше всего.

Как уже упоминалось, СтартапДепо, не единственные кто решил использовать мем с Винсентом Вегой. Тот самый момент на своей странице использовала интернет-платформа 9GAG. Учитывая количество юмористического контента в пределах сервиса, это решение можно считать идеальным.

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

Если вы попадете на 404-ю страницу сайта креативного агентства Teehan + Lax вам отобразится один из нескольких вариантов 404-й ошибки. В каждом из них использован другой задний фон и надпись «Что-то пошло не так. Очень, очень, очень не так «.

Страница 404 на сайте Hakim.se от шведского дизайнера и разработчика с именем Hakim El Hattab точно придется по вкусу всем фанатам творчества Говарда Филиппа Лавкрафта. Сразу после перехода на пользователя начинают пялиться с десяток страшных глаз и ему предлагают вернуться на главную страницу сайта.

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

The New Yorker — это известное американское еженедельное издание, которое публикуется с 1925 года. 404-я страница оформлена в корпоративном стиле и имеет удобную навигацию.

Dribbble — это известное сообщество дизайнеров, которая тоже красиво оформила свою 404-ю страницу. В этом случае гостю сайта объясняется, что материалов, которые он ищет не существует, а на фоне изображено колоритную фотографию.

Компания Sumatosoft решила с фантазией и юмором подойти к оформлению 404-й ошибки. Летающая тарелка похищает коровку. Что может быть лучшей иллюстрацией на 404-й странице?

Команда сервиса для рассылок Skipio смогла создать красивый дизайн для своей 404-й страницы. На ней изображен заблудившийся путешественник, который не смог найти то, что искал. Однако он может оглянуться и найти другие «сокровища» этого сервиса, о чем нас и информирует текст.

Биотехнологическая компания CoolFarm нашла прекрасное решение для своей 404-й страницы. Когда посетитель попадает на страницу ошибки, он может сыграть в бессмертную классику — Space Invaders. Прекрасная идея для того чтобы удержать пользователя на сайте.

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

Прекрасный пример демонстрирующий, что не только крупным компаниям следует задумываться об оформлении 404-й страницы. Этот участник нашего ТОПа — сайт-портфолио разработчика Дастина Миллера (Dustin Miller). Страница оформлена в характерном для сайта стиле и имеет интересный вид.

Этот участник нашего ТОПа также решил порадовать своих пользователей оригинальной 404-й страницей. В случае ошибочного запроса посетитель сможет сыграть в игру Pac-Man в стилистике сайта.

Рекламная компания Agens также поработала над креативным оформлением страницы 404. Гостья сайта встретит надпись «похоже, что ты потерялся в космосе» и изображение астронавта на астероиде.

Хороший пример оформления 404-й страницы от Rachel Nabors. Rachel the Great — это серия авторских комиксов, поэтому такой дизайн идеально подходит.

Дизайн официального сайта Fork cms выполнен в морской тематике, поэтому компания решила не изменять своему стилю. На 404-й странице пользователя ждет Нептун, и надпись «Эта страница исчезла в море»

Маркетинговое агентство Incore таже решило подойти к оформлению своей 404-й страницы со стилем и юмором. На ней посетителя встретит изображение хищных птиц и вопросы «Привет, мой друг. Нас ищешь? Действительно? «И кнопка с текстом» Нет, спасибо. Вернемся назад к Incore «.

Один из самых оригинальных участников нашего ТОПа — сайт www.danielkarcher.com. Кроме того, что сам ресурс выполнен в весьма интересном стиле, да еще и 404-я страница с действительно интересной идеей. С ее помощью пользователь сможет провести короткое путешествие по метрополитену и понаблюдать за действиями девушки фотографа. Сама страница написана с помощью технологии Flash.

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

А вот дизайн для своей 404-й страницы выбрала команда с RepairPal. Красивая картинка и удобный интерфейс для формы обратной связи — это хороший способ оформить страницу ошибки.

Еще один интересный пример оформления 404-й страницы на сайте портфолио веб разработчика. Когда пользователь попадает на страницу ошибки, он может сыграть в аналог знаменитой игры Lemmings. Хороший пример как можно продемонстрировать свой талант разработчика и порадовать посетителей.

Хороший пример тематического оформления 404-й ошибки от сайта Batman 3D. Не смогли найти нужную страницу? Видимо ее похитил Джокер.

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

IMDb — это крупнейший в мире портал и база знаний посвященная кинематографу. 404-я страница этого сайта выполнена просто идеально. Минимализм в сочетании с точностью. Каждый раз, когда пользователь попадает на страницу ошибки, он видит видоизмененную цитату из культовых фильмов. Для примера на скриншоте выше цитата из «Властелина колец», которая утверждает: «Запомни навсегда, Фродо, страница всегда пытается вернуться к своему повелителю. Она хочет быть найденной».

Хорошим примером оформления 404-й страницы в корпоративном стиле может служить работа компании Netpeak. Увидев сообщение об ошибке, можно воспользоваться удобной навигацией для продолжения работы с сайтом.

Креативное агентство Elativeagency разработало свою 404-ю страницу в юмористическом стиле. Шуточное и милое изображение поможет посетителю не волноваться из-за не найденых материалов.

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

Последним участником нашего топа стала компания The Software House. Простое и стильное оформление в традициях корпоративного дизайна — это хорошая практика для компаний разработчиков.

Вывод

В рамках статьи Вы ознакомились с 50 примерами хорошего оформления 404-й страницы. Часть из участников ТОПа строго придерживались своего корпоративного стиля и делали классические страницы об ошибке. Другие, в свою очередь, не боялись рисковать, шутить и экспериментировать с дизайном.
Надеемся, что эта статья была вам полезна и интересна. Если Вы все еще не создали собственной 404-й страницы, тогда рекомендуем побыстрее этим заняться. В зависимости от типа сайта, аудитории и собственных желаний, можно выбрать различные варианты оформления. А при необходимости, вы всегда можете взять пример с участников нашего ТОПа. Оставайтесь с нами, впереди еще много интересного!

27 примеров проработанной страницы 404 — Дизайн на vc.ru

{«id»:50308,»url»:»https:\/\/vc.ru\/design\/50308-iskusstvo-oshibatsya-27-primerov-prorabotannoy-stranicy-404″,»title»:»\u0418\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f: 27 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404″,»services»:{«facebook»:{«url»:»https:\/\/www. facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/50308-iskusstvo-oshibatsya-27-primerov-prorabotannoy-stranicy-404″,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/50308-iskusstvo-oshibatsya-27-primerov-prorabotannoy-stranicy-404&title=\u0418\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f: 27 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/50308-iskusstvo-oshibatsya-27-primerov-prorabotannoy-stranicy-404&text=\u0418\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f: 27 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc. ru\/design\/50308-iskusstvo-oshibatsya-27-primerov-prorabotannoy-stranicy-404&text=\u0418\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f: 27 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/50308-iskusstvo-oshibatsya-27-primerov-prorabotannoy-stranicy-404″,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0418\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f: 27 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404&body=https:\/\/vc. ru\/design\/50308-iskusstvo-oshibatsya-27-primerov-prorabotannoy-stranicy-404″,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

13 538 просмотров

Что значит ошибка 404 на веб-странице и как её исправить

Ошибка 404, либо Error 404 Not Found появляется, если браузеру не удалось обнаружить на сервере указанный URL.

Сообщение об ошибке 404

Что означает ответ 404

Error 404 Not Found отображается по-разному: «HTTP 404 не найден», «Ошибка 404 Not Found», «404 Страница не найдена». Смысл надписи всегда остаётся тем же: страница отсутствует либо просто не работает. Not Found в переводе означает «не найдено».

Ошибка 404 — классический код ответа по протоколу HTTP. Он свидетельствует, что связь с сервером установлена, но информации по заданному запросу нет.

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

Разберёмся в техническом формировании ответа Error 404 Not Found.

Техническая сторона вопроса. При связи по HTTP браузер запрашивает указанный URL и ждёт цифрового ответа. То есть любой запрос пользователя направляется на сервер размещения искомого сайта. Когда браузеру удаётся связаться с сервером, он получает кодированный ответ. Если запрос корректный и страница найдена, отправляется ответ с кодом 200 OK, что соответствует благополучной загрузке. При отсутствии страницы отправляется ответ об ошибке.

Что значит код «404». В ответе 404 первая четвёрка указывает на то, что запрос был чрезмерно длительным или в самом адресе была ошибка. Ноль предполагает синтаксическую неточность. Завершающая цифра кода отображает конкретную причину ошибки — «4» означает отсутствие данной ссылки.

Какие ещё ошибки бывают. Ошибку 404 не нужно путать с другими ответами, которые указывают на невозможность связи с сервером. Например, ошибка 403 сообщает, что доступ к URL ограничен, а ответ «Сервер не найден» свидетельствует, что браузер не смог обнаружить место размещения сайта.

Google на 404 странице сообщает о возможных причинах ошибки

Причины ошибки

Причины, по которым HTTP возвращает ответ 404 Not Found:

Неверный адрес. К примеру, при ручном наборе пользователь допустил опечатку в URL либо ссылка ведёт на несуществующую страницу.
Битая ссылка. Это нерабочий URL, который никуда не ведёт. Данный вариант иногда возникает при внутренней перелинковке. К примеру, раньше страница существовала, а потом её удалили и забыли убрать ссылку.
Удалённая страница. Когда пользователь попытается перейти на удалённую с сервера страницу, он также увидит ошибку 404. Ссылка для перехода может сохраниться в браузерных закладках или на сторонних ресурсах.
Неправильный редирект на страницу с изменённым адресом. Допустим, в процессе редизайна URL изменили, но оставили без внимания связанные ссылки.
Неполадки на сервере. Это самый редкий вариант.

В большинстве ситуаций ошибка 404 отображается, когда не удаётся обнаружить нужную страницу на доступном сервере.

Причины отсутствия страницы на сайте бывают разными

Возможные последствия для сайта

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

Поисковые системы относятся к Not Found более лояльно. Например, Google отмечает, что 404 страницы не влияют на рейтинг. Но если при индексации роботы будут находить все больше ошибочных страниц, вряд ли это приведёт к более высокому ранжированию.

Если вы хотите улучшить взаимодействие с посетителями, важно найти и исправить все ошибки 404 на сайте.

Как выявить ошибку

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

Search Console Google

Консоль поиска Google позволяет находить страницы с ошибкой 404 за несколько кликов:

Войдите в учётную запись Google и перейдите в Search Console.
Откройте раздел «Ошибки сканирования» → «Диагностика».
Кликните на «Not Found».

Чтобы получить список страниц с ошибками, подтвердите права на ресурс — добавьте проверочную запись TXT в записи DNS регистратора домена. Такая запись не повлияет на работу сайта. Подробнее о процедуре подтверждения, читайте в справке Google.

Для использования Search Console Google нужно подтвердить свои права на сайт

Яндекс Вебмастер

Сервис для вебмастеров от Яндекса поможет быстро найти все ошибки 404:

Откройте Вебмастер после авторизации в Яндекс-аккаунте.
Выберите «Индексирование» → «Доступные для поиска страницы» → «Исключённые страницы».
В выданном списке выберите фильтр «Ошибка HTTP: 404».

Чтобы использовать Яндекс.Вебмастер, также нужно подтвердить право владения сайтом — добавить метатег в HTML-код главной страницы.

Для входа в Вебмастер авторизуйтесь в Яндексе

Screaming Frog

Для начала загрузите и установите программу на компьютер. После запуска добавьте URL проверяемого сайта и начните поиск проблем. Неработающие ссылки можно искать даже в бесплатной версии.

Инструмент SEO-паук в Screaming Frog помогает найти технические неисправности сайта

SiteAnalyzer

Эта бесплатная десктопная программа позволяет обнаружить технические погрешности на сайте. SiteAnalyzer быстро отыщет нерабочие и несуществующие ссылки.

SiteAnalyzer бесплатно найдёт неработающие URL

Как исправить ошибку Not Found

Выбор конкретного решения зависит от причины ошибки:

Ссылка ведёт в никуда из-за неверного URL. Для решения проблемы замените ошибочную ссылку на правильный адрес, чтобы сервер отдавал код 200 OK.
Битая ссылка. Подобная ситуация не редкость при внутренней перелинковке страниц. К примеру, ссылка есть, а саму страницу давно удалили. Решений два: удалить ссылку или заменить её на другую.

Удалять и менять ссылки вручную удобно только на небольших сайтах. Исправление ошибок на крупных порталах лучше автоматизировать. Например, с помощью специальных плагинов для внутренней перелинковки (Terms Description, Dagon Design Sitemap Generator) и для автоматического формирования адресов страниц (Cyr-To-Lat).

Чтобы ошибки 404 появлялись как можно реже, достаточно соблюдать простые рекомендации:

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

Мы разобрались, как найти и исправить ошибки Not Found внутри сайта. Но неработающая ссылка может быть расположена и на стороннем ресурсе. Допустим, когда-то на другом сайте разместили рекламную публикацию со ссылкой на определённую страницу. Спустя какое-то время страницу удалили. В этом случае появится ошибка 404. Устранить её можно, связавшись с администрацией ссылающегося сайта. Если же удалить/исправить ссылку нельзя, постарайтесь использовать ошибку с выгодой.

Как сделать страницу 404 полезной

Грамотно оформленная страница с ошибкой Error 404 Not Found — действенный инструмент конвертации посетителей. Ограничений по использованию страницы с ошибкой 404 нет. При этом практически все CMS позволяют настраивать дизайн этой страницы.

Что публиковать на странице 404:

меню с кликабельными ссылками;
ссылку на главную страницу;
анонс последних публикаций;
контакты для обратной связи.

При оформлении страницы-ошибки желательно опираться на рекомендации поисковиков:

Яндекс настоятельно рекомендует, чтобы страница контрастировала с основным содержанием сайта — иные цвета, другие графические приёмы либо их отсутствие. Необходимо чётко и понятно объяснить пользователю, что запрошенной страницы не существует и предложить другое решение.
Google советует придерживаться единого стиля оформления. Но также рекомендует понятно рассказать об ошибке и предложить полезные материалы.

Главное — по возможности отказаться от стандартной страницы 404. Подумайте, как привлечь внимание пользователя. Расскажите ему об отсутствии искомой страницы и предложите взамен что-то полезное или интересное.

Примеры оформления страниц 404

Designzillas

Мультяшная страница креативной студии привлекает внимание и её хочется досмотреть до конца. Если прокрутить страницу, можно увидеть, как из яйца вылупится дракон. При этом на странице есть ссылки на все основные разделы сайта.

Меню на сайте Designzillas есть и на 404 странице

Domenart Studio

Веб-студия «Домен АРТ» использует красочную страницу 404, оформленную в единой стилистике ресурса. Заблудившимся пользователям предлагают попробовать ещё раз ввести адрес или перейти в нужный раздел.

Контакты, поиск, меню — и всё это на 404 странице Domenart Studio

E-co

«Эко Пауэр», дистрибьютор производителя источников питания, демонстрирует короткое замыкание как символ ошибки. Посетителям предлагают перейти на главную.

Ошибка 404 «Эко Пауэр» выглядит как страница входа

Дом со всем

Компания «Дом со всем», занимающаяся бурением скважин, разместила на странице 404 свои контакты и перечень услуг. Со страницы можно перейти в любой раздел сайта или заказать обратный звонок. С таким наполнением посетителю не нужно искать дополнительную информацию где-то ещё.

Компания «Дом со всем» предлагает заказать обратный звонок

Kualo

Страница 404 на веб-хостинге Kualo может заставить пользователя забыть, зачем он сюда пришёл. Увлекательная игра притягивает внимание. В конце игры посетителю предлагают посмотреть сайт хостинга.

На странице Kualo можно просто поиграть и заработать скидки

Рано или поздно с ошибкой 404 сталкивается большинство сайтов. При регулярной проверке можно своевременно исправить неработающие ссылки, чтобы в ответ пользователи получали код 200 OK. Но для крупного ресурса лучше настроить оригинальную страницу, которая будет отображаться при появлении ошибки Not Found и подскажет посетителям, что делать дальше.

Как оптимизировать страницу 404

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

Ошибка 404 вредит SEO?

404 Not Found (ресурс не найден) — код ответа сервера, который сообщает, что невозможно найти страницу по указанному адресу.

Существует мнение, что наличие страниц с 404 ошибкой на сайте негативно влияет на SEO, но на самом деле это не совсем так.

Из справки Google:

Обычно ошибки 404 не влияют на рейтинг сайта в Google, поэтому их можно игнорировать. Чаще всего они бывают связаны с опечатками, неправильными настройками или попытками Google распознать и просканировать ссылки во встроенном контенте (например, в коде JavaScript).

Появление 404 ошибок на сайте — явление неизбежное и причины тому могут быть разные:

изменение структуры сайта;
битые ссылки;
изменение URL адреса страницы;
страница или сайт больше не существует.

Эти причины требуют тщательной проработки — необходимо заменять битые ссылки на актуальные, при изменении структуры и URL адресов сайта корректно настраивать 301-е редиректы на актуальные страницы. Однако существуют и вполне «житейские» ситуации появления 404-х страниц. Например:

опечатка при введении URL адреса пользователем;
удаление товаров на сайте.

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

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

Страница 404 должна быть настроена корректно и отдавать код HTTP 404 (Not Found), чтобы не попасть в индекс поисковых систем. Во-первых, такие страницы будут засчитываться как дубли. Во-вторых, это может негативно сказаться на поведенческих факторах. Ведь если человек из поиска попадет на 404 страницу — он явно расстроится потому, что ожидал увидеть совсем иное. Следовательно, быстро уйдет и снова вернется к поиску.

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

Нужно ли создавать кастомные 404 страницы?

Очень часто страницы 404 оформлены стандартным образом и выглядят примерно так:

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

Google рекомендует создавать собственные страницы 404:

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

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

Создаем 404 страницы для людей

Основные рекомендации по созданию собственных 404 страниц:

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

Будьте вежливы и объясните, почему человек оказался на этой странице. Практически каждый пользователь знаком с такой ошибкой и в общих чертах представляет, что произошло. Но будьте готовы помочь тем, кто растерялся. Сообщение должно быть четким и понятным — без технических подробностей.

Дайте ссылки, которые могут оказаться полезными для пользователя. Как вариант: самые посещаемые страницы, популярные категории или новые материалы на сайте. У пользователя должна быть возможность перейти на главную.

Предоставьте возможность сообщить о проблеме. Это дополнительный способ отслеживать ошибки сайта и показывать пользователю, насколько вам важно его внимание и комфорт.

Разместите на странице с 404 кодом ответа сервера строку поиска. Увидите, это действие положительно скажется на поведении пользователя. Правда, предварительно убедитесь, что поиск работает корректно и человек найдет то, что искал. Иначе два разочарования он не вынесет и вряд ли захочет в дальнейшем находится на вашем сайте.

Действенный прием для интернет-магазинов — вывод на 404 страницах похожих или недавно просмотренных товаров.

Если сайт у вас небольшой и хорошо структурирован, разместите ссылку на карту сайта.

Дизайну страницы 404 быть!

Используйте креативные идеи и подавайте такие страницы со вкусом — это сгладит неприятное впечатление от 404-й страницы и задержит человека на вашем сайте:

Задействуйте свой творческий потенциал и все таланты в области дизайна и юмора. Четыре идеи в помощь:

Интерактивные элементы. Развлеките человека, добавьте простую игру, дайте ненавязчивый контент. Не исключено, что так ваш сайт запомнится и получит шанс попасть в закладки. Собрала 9 хороших примеров. Наслаждайтесь (только предварительно убавьте громкость):

http://kvartirakrasivo.ru/404/index.php
http://www.tinsanity.net/404.shtml
https://www.agens.no/404
https://imgur.com/404
https://github.com/404
http://hotdot.pro/404/
https://www.tumblr.com/404/
https://www.kualo.co.uk/404
https://amplifr.com/blog/ru/t

+ 18 примеров креативной 404-й страницы.

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

Как настроить 404 страницу?

Существует достаточно плагинов для настройки 404 страниц на платформе WordPress. Но не всегда получается настроить через плагин или сделать это для сайта на другой платформе. Предлагаю вам такой способ:

Создайте 404 страницу HTML.
Настройте переадресацию в .htaccess, чтобы при неправильном URL пользователь переходил на 404 страницу. Для этого пропишите в .htaccess «Error 404 www.site.com/404.html».
Разместите файл .htaccess на хостинге в корневом каталоге сайта.
Нужно, чтобы созданная страница 404 отдавала код ответа сервера отличный от 200, а именно 404 (Not Found). Для этого пропишите на странице 404 строчку кода и добавьте файл на сервер:

Если этого не сделать, то страницы могут попасть в индекс, а в панеле для вебмастеров вы можете увидеть:

Чтобы проверить код ответа сервера, воспользуйтесь такими сервисами:

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

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

Выводы

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

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

При создании 404-х страниц правильно настраивайте коды ответа сервера и проверяйте их на https://www.bertal.ru/, http://checkmy.ru/, https://webmaster.yandex.ru/tools/server-response/. Это поможет избежать проблем с индексированием сайта поисковыми системами.

Нашли крутые по дизайну, идее, реализации страницы — давайте ссылки в комментариях, добавлю в пост.

30+ креативных страниц 404 ошибки: подборка

Редактор-переводчик SEOnews

Работая над дизайном сайта, стоит учитывать все возможности лишний раз зацепить внимание пользователя. Одним из таких способов является креативная страница ошибки 404. Изначально ее цель – оповестить пользователя о том, что URL, по которому он переходил, отсутствует и вернуть его на сайт. Конечно, можно оставить стандартную страницу и не тратить время на проработку идеи и создание дизайна. Однако наличие красочной страницы, цепляющей внимание, поможет сгладить впечатления от того, что пользователь «потерялся», не смог найти то, что искал.

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

В качестве бонуса в конце статьи вы также найдете советы по оформлению страницы 404.

Purée Maison

Purée Maison – французское креативное агентство, специализирующееся на коммуникационных стратегиях. Персонаж со страницы ошибки 404 нарисован в фирменном стиле сайта и также встречается на страницах загрузки.

Pixar

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

На странице ошибки 404 мультипликационной студии Pixar Печаль из мультфильма «Головоломка» приняла ошибку слишком близко к сердцу. Хороший пример тематической страницы: персонаж известен многим, кто знаком с творчеством компании.

Marvel

Страница не найдена. Даже глаз Уату не видит ваш запрос.

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

Matteo Vandelli

Креативные страницы 404 нужны не только крупным известным брендам. Страница итальянского графического дизайнера Маттео Ванделли – одна из работ его портфолио. Зайдите на нее, проведите мышкой и посмотрите, что будет.

20

^th Century Fox

То, на что вы смотрите, могло уже быть перемещено. Если вы, конечно, не ищете «Офисное пространство».

Киностудия 20^th Century Fox вместо страницы с ошибкой 404 выдает кадры из своих фильмов, среди которых «Эдвард Руки-ножницы», «Офисное пространство», «Месть полудурков», «Наполеон Динамит» и другие. Забавно, что на момент написания статьи при попытке кликнуть по тексту пользователя перебрасывало на другую, менее креативную страницу ошибки 404.

Cloud Sigma

О, вы нашли домашнюю страницу нашего junior-разработчика. Даже спя на диване целыми днями, он иногда находит время немного покодить…

Cloud Sigma – облачное хранилище. На странице – немного юмора и кнопка, ведущая на Главную.

BluePath

Раз вы попали на эту страницу, наслаждайтесь картой, которую мы для вас составили. На ней показаны все преступления, совершенные в Атланте за пару лет. Зачем? Да потому что то, что вы нас еще не наняли, – преступление!

Другой сайт, страница которого сделана с юмором, – сайт компании BluePath, работающей с Big Data. На странице 404 – карта Атланты с точками, обозначающими преступления, совершенные в городе за 2 года. А все потому, что вовремя не начать сотрудничать с BluePath – преступление.

The Useless Web Index

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

Kualo

О нет, космические завоеватели уничтожили эту страницу. Отомстите им. Или кликните на ссылку, чтобы вернуться на предыдущую страницу.

Веб-хостинг Kualo на рынке уже 15 лет, бесконечность по меркам интернета. Их страница ошибки 404 – отсылка в прошлое. Те, кто наткнулся на нее, могут поиграть в Space Invaders, лучшую аркадную игру по версии Книги рекордов Гиннесса и основоположницу всех современных аркад.

Waaark

Упс, что-то пошло не так.

Страница креативной студии Waark выполнена в приятной цветовой гамме, но это не главное. Чтобы понять, насколько она крута, нужно вставить наушники или включить громкость. Перейдите на страницу и послушайте, как робот ругается на того, кто попал на страницу 404, и заявляет о своем превосходстве.

Steve Lambert

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

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

Figma

Надпись «404» можно растягивать за опорные точки. Расслабляет.

Airbnb

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

Hot Dot Production

Слоган веб-разработчик Hot Dot Production «Где дизайн встречается с технологией» хорошо отражен на его странице ошибки 404. Три цифры составлены из сотен маленьких точек, которые меняют направление или расходятся в разные стороны в зависимости от движений мышки.

GitHub

Страница Github нацелена на гиков-фанатов серии «Звездные войны».

Помимо 404 у GitHub еще есть креативная страница с 500 ошибкой.

CSS Ninja

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

MailChimp

Мы потеряли эту страницу. Мы посмотрели везде, но так и не нашли то, что вы ищете. Давайте найдем для вас место получше.

В сервисе для рассылок MailChimp недавно произошел ребрендинг, страница ошибки 404 соответствует новому фирменному стилю. Судя по всему, осел со страницы тоже не понимает, куда попал.

Emirates

Страница ошибки 404 от Emirates выполнена в фирменном стиле компании. Один из менеджеров компании Томас Панек утверждает, что упор на ней сделан на UX-дизайн: компания провела исследование и вычислила, на какие страницы пользователи обычно переходят после 404. Так на странице появились 4 кнопки для перехода на поиск рейсов, управление бронью, вход в аккаунт и главную страницу.

Audiko

Audiko – сервис для создания рингтонов. На странице ошибки 404 – иллюстрация Лондона с его традиционными красным автобусом, телефонной будкой, Биг Беном, Шерлоком Холмсом и Тауэрским мостом. А чтобы не потеряться, по центру расположен поиск рингтонов и ссылка на домашнюю страницу.

IMDb

На 404 странице главного западного сайта о кинематографе можно найти измененные цитаты из кинофильмов, в которые вставлено слово «страница». Например, «Я отсутствующая страница Джека» из Бойцовского клуба или «Что на странице?!» из фильма «Семь».

Зайдите и проверьте, цитата из какого фильма попадется вам.

NPR

Организация National Public Radio, распространяющая новости радиостанций США, на своей странице 404 ошибки предлагает ознакомиться с материалами о других пропавших: Атлантиде, летчице Амелии Эрхарт и изображении Валдо на крыше одного из зданий Ванкувера.

Blizzard Entertainment

Компания-создатель игр World of Warcraft и Diablo обвиняет пользователя в том, что страница «сломалась». Ущерб действительно налицо: хедер навигации «упал», а экран разбит.

TProger

На странице 404 портала о разработке TProger есть все: объявление об ошибке, забавные видео (каждый раз новые) и ссылки на другие страницы.

Crello

Страницу сервиса для создания дизайнов Crello украли голуби. Действительно, теперь остается только вернуться на предыдущую страницу или сразу перейти к созданию дизайна.

Hakim.se

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

Android

Android предлагает пользователю вернуться на сайт либо поиграть в игру: помочь сладостям попасть в нужную трубу.

Sumatosoft

Авторы страницы Sumatosoft намекают на то, что страницу украли инопланетяне. Но не стоит расстраиваться: вы все еще можете перейти на домашнюю страницу, просмотреть кейсы или написать компании.

Ma meilleur cuite

Этой страницы не существует… Вы пьяны или просто потерялись? В любом случае вы нашли Pacman’а, который тоже потерялся. Помогите ему найти выход, по пути собирая кружки с пивом!

Французский блог об алкоголе Ma meilleur cuite предлагает сыграть в игру Pacman, выполненную в стилистике сайта.

Romainbraser

На странице сайта разработчика Romainbraser можно сыграть в аналог популярной игры Lemmings.

Fox

На 404 странице студии Fox пользователей ждет Стьюи из Гриффинов. Кнопка «Get Together» ведет на главную страницу.

Discord

Оказывается, мессенджер Discord приводят в действие квантовые хомяки-роботы. Узнать об этом можно, только попав на страницу ошибки 404.

Slack

На странице 404 ошибки корпоративного мессенджера Slack – отсылка к небольшой MMO-игре Glitch (от англ. глюк), созданной одним из основателей программы.

Canva

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

Amphibian

На портале с комиксами Amphibian можно сыграть в лягушачий футбол.

Советы от экспертов

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

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

Задачи кастомной страницы 404:

уведомить об ошибке в дружелюбной форме. Не забывайте про тональность коммуникации (ToV, Tone of Voice): ошибка произошла не по вине пользователя, успокойте его, просто скажите, что контент не найден;
объяснить причину. Например, что страница была удалена либо что вы недавно обновили структуру сайта;
предложить решение, чтобы оставить посетителя на сайте.

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

Если причина возникновения ошибки неизвестна, можно предложить типовые решения: предоставить возможность перейти на работающие страницы, показать основную навигацию, дать ссылки на популярные разделы. Например, для ecommerce-сайтов имеет смысл предложить перейти в каталог товаров или дать ссылки на самые популярные. Главное – не оставить посетителя наедине с проблемой. Хорошие примеры реализации этих идей – Squarespace и IFTTT.

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

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

Примеры того, как можно удивлять и веселить, но при этом все равно предлагать полезное действие:

CreativePeople – сюрреалистичная фирменная иллюстрация поддерживает наш стиль, а отсылка к уровню в игре предлагает в неформальном стиле решение проблемы.
Andrea Areni – хорошая визуализация ошибки, напоминающая помехи на телеэкране. Круто, технологично, непонятно.
Gymbox – а тут просто удивляют посетителя, смешат его. Все-таки 404-я ошибка – не какая-то трагедия.

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

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

Константин Кислейко, руководитель отдела дизайна AGIMA

Я уже давно не встречал 404 страницу в реальной жизни.

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

В последнее время даже дизайнеры перестали веселиться на этой странице. Смысла нет, разве в портфолио выложить. Так что, перефразируя классику, – хорошая 404 страница – это невидимая 404 страница.

Источник: Creative Bloq

Блестящие примеры 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 для изучения

37 примеров, которые вам нужно увидеть

Эпическая страница 404, скорее всего, не принесет вашему бизнесу никаких наград. Я понял.

Но это показывает, что вы заботитесь о своих клиентах.

Хорошая страница 404 может стать отличным способом продемонстрировать индивидуальность вашего бренда.

Но стоит ли вкладываться в причудливую страницу 404?

Может быть.

Потому что, когда пользователи попадают на вашу страницу 404, они не находят то, что им нужно.

Использование ссылок, умной графики и остроумного текста может заставить их забыть, что вы (возможно) напортачили, и вернуть их в нужное русло.

В свете важности 404 страниц ниже приводится список из 37 лучших примеров 404 страниц, которые вы можете найти в Интернете.

Перед тем, как погрузиться в примеры, давайте рассмотрим основы страницы 404.

Что такое страница 404?

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

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

Когда пользователи не могут получить доступ к странице, они не могут найти нужную информацию.

Он также сообщает Google, что ваш сайт оставляет желать лучшего для клиентов, что может привести к снижению посещаемости и снижению рейтинга.

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

Почему посетитель может попасть на страницу 404?

Почему пользователь может получить ошибку 404?

Есть несколько причин, в том числе:

Сервер не работает.
Страница перемещена без перенаправления.
Страницы никогда не существовало.
Пользователь ввел неправильный URL.
URL-адрес не работает.

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

Зачем делать выделяющуюся страницу 404?

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

Продолжить чтение ниже

Когда все сделано хорошо, хорошая страница 404 помогает пользователям простить вас за ошибку (даже если это была их собственная ошибка из-за неправильного ввода URL-адреса) и удерживает их на вашем сайте.

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

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

Вот 37 лучших примеров из 404 страниц, сделанных хорошо.

1. Дисней

Дисней выбивает его из парка своей 404 страницей, выделяя одного из самых популярных персонажей, известных своей разрушительной способностью, — Ральфа Ральфа.

Продолжить чтение ниже

В них также есть Знаменитость, побочный персонаж в «Ральфе ломает Интернет».

Оба символа подходят для страницы 404, но обратите внимание на то, что находится рядом с KnowsMore: маленькая панель поиска.

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

2. Drift

Drift — это инструмент конверсионного маркетинга и платформа продаж, предлагающая инструменты для живого чата, целевых страниц и т. Д.

Продолжить чтение ниже

Копия на их странице 404 остается фирменной, упоминая «разговоры», но также помогает удерживать людей на веб-сайте Drift, предлагая ссылки на их домашнюю страницу, их блог и ссылки на несколько из их самых популярных материалов.

В правом верхнем углу они также предлагают путь к конверсии, предоставляя кнопку Get Drift Free.

3. Help Scout

Help Scout предоставляет компаниям инструменты для программного обеспечения службы поддержки, поддержки клиентов по электронной почте и онлайн-баз знаний.

Продолжить чтение ниже

Как и Drift, их страница 404 предлагает ссылки на их блог и другие сообщения, но они используют милые изображения симпатичных собак, чтобы люди улыбались.

4. Apartment Therapy

Apartment Therapy, сайт домашнего декора, поддерживает свет, шутя, что лента васи (популярная бумажная лента, используемая при декорировании и скрапбукинге) не может исправить неработающую ссылку.

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

Продолжить чтение ниже

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

5.CoSchedule

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

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

Это просто, но выполняет свою работу.

Продолжить чтение ниже

6. Sprout Social

Sprout Social, маркетинговый инструмент в социальных сетях, действительно хочет, чтобы его клиенты оставались на странице.

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

Затем появляется их чат-бот, чтобы узнать, что вам нужно.

Внизу они продвигают свой информационный бюллетень.

По сути, они превратили свою страницу 404 в целевую.

Продолжить чтение ниже

7. ConvertKit

Кто не любит собак?

ConvertKit упрощает работу, предлагая фотографию собаки члена команды и ссылку на их домашнюю страницу.

Но они также поддерживают профессионализм, предоставляя онлайн-чат и CTA для бесплатной регистрации.

8. Screaming Frog

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

Продолжить чтение ниже

В отличие от других страниц 404 в списке, эта не статичная.

Мухи перемещаются по странице, рыба плавает, а кувшинки кружатся.

Это небольшое изменение, но благодаря ему страница выглядит хорошо продуманной.

9. Moz

Moz упрощает жизнь благодаря камео от Роджера Мозбата, талисмана бренда.

Его присутствие — это бренд и простой способ заставить большинство людей улыбнуться.

Продолжить чтение ниже

Moz также дает вам панель поиска по сайту, чтобы вы могли найти то, что ищете.

10. BigCommerce

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

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

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

Продолжить чтение ниже

11. Kinsta

Kinsta, облачная хостинговая компания WordPress, применяет аналогичный подход к BigCommerce, предлагая хорошо продуманное изображение на своей странице 404.

У них есть верхняя панель навигации и поисковая строка, поэтому пользователи могут легко найти другую информацию.

Они также используют всплывающие окна, чтобы предлагать закрытый контент, что, вероятно, помогает привлечь подписчиков электронной почты.

12. Lego

Lego делает его светлым, используя большое изображение человека из Lego вместе с шуткой «Извините, мы не можем найти эту страницу! Не волнуйтесь, хотя все ВСЕ ЕЩЕ УДИВИТЕЛЬНО! » который является отсылкой к песне из фильма «Лего».

Продолжить чтение ниже

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

13. Slack

Страница 404 Slack просто невероятна.

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

Он также становится черно-белым, если вы переходите на другую вкладку, что, к сожалению, затрудняет получение снимка экрана с потрясающим качеством.

Зайдите на их сайт, чтобы узнать больше.

Продолжить чтение ниже

14. Mailchimp

Инструмент электронной почты Mailchimp делает его простым — но умным — с анимированной страницей 404, на которой животное ищет в яме, предположительно, потерянную страницу.

Это умно и показывает, что их страница 404 не является второстепенной.

15. okta

Okta — это облачная компания по управлению доступом, базирующаяся в Сан-Франциско.

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

Продолжить чтение ниже

16. Swiss

Swiss Airlines не предлагает никакой дополнительной информации, кроме ссылки на их домашнюю страницу и панель навигации, но изображение на их странице 404 действительно красивое.

Облака движутся, когда вы наводите курсор на страницу, окутывая вас облаками.

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

17. Волшебный мир

Как известно многим фанатам Гарри Поттера, Гарри заблудился, когда впервые попытался использовать дымовой порошок, блестящее вещество, которое позволяет волшебникам путешествовать, перенося их практически в любой другой дом или здание с помощью камин.

Продолжить чтение ниже

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

18. Юго-запад

Вот еще одна страница 404, которая заставила меня улыбнуться — во-первых, они используют ссылку «Звездные войны», которая делает ее легкой.

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

Продолжить чтение ниже

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

Функциональный, но при этом выделяющийся.

19. 9GAG

9GAG, онлайн-платформа для мемов и видео, использует полностью фирменный GIF для своей страницы 404 и предлагает единственную ссылку, которая направляет пользователей в их приложение.

Это просто, но сохранение бренда гарантирует посетителям, что они находятся на правильном сайте, несмотря на то, что они не находят страницу, которую искали.

Продолжить чтение ниже

20. Flywheel

Flywheel, управляемая хостинговая компания WordPress, предлагает эту причудливую страницу 404, чтобы люди знали, что они попали не на ту страницу.

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

Как и некоторые другие бренды, они также предлагают функцию чата, чтобы помочь пользователям, которые заблудились.

21.Дэн Вудгер

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

Продолжить чтение ниже

Обратите внимание, что он не упоминает, что это страница 404, и не дает никакой другой информации, кроме ссылки на свою работу.

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

22. Дистиллированный

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

Но демонстрация стиля вашего бренда на (казалось бы) незначительной странице имеет большой вес.

Продолжить чтение ниже

Если вы заботитесь о своей странице 404, велика вероятность, что вы заботитесь и о своих клиентах.

Distilled использует изображение, похожее на инфографику, чтобы объяснить, что это за страница и что могло пойти не так.

23. Taco Bell

Taco Bell известен своей непочтительностью.Их страница 404 — не исключение.

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

Продолжить чтение ниже

Это забавное напоминание о том, что они знают, что что-то пошло не так.

На странице также есть ссылка на главную страницу сайта, меню, адреса, а также где можно купить подарочные карты и товары.

24. Magnt

Magnt предлагает простой в использовании конструктор и инструменты для создания сайтов, и они гордятся тем, что они лучше, чем ваш стандартный конструктор веб-сайтов на основе шаблонов.

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

Продолжить чтение ниже

25. Dribble

Dribble, творческий рынок для профессионалов в области дизайна, предлагает полнофункциональную страницу 404.

Пользователи могут перетащить точку под шрифтом 404, чтобы изучить дизайнеров в определенном цветовом диапазоне.

Нажав на блоки, составляющие 404 числа, вы попадете к конкретным дизайнерам.

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

26. Overflow

Личность Overflow помещена впереди и в центре их страницы 404.

Продолжить чтение ниже

Их разговорный тон и юмор приглашают и приветливы, что вызывает у меня желание вернуться на их домашнюю страницу.

И тот же голос и тон передаются на главной странице.

27. Wendy’s

К настоящему времени вы, вероятно, посмеялись над одним или двумя твитами Wendy’s.

Но, как и в случае с Overflow, Wendy’s сохраняет тот же голос и тональность на своем веб-сайте, даже на своей странице 404.

Продолжить чтение ниже

Они создали интерактивную видеоигру для пользователей, похожую на Pac-Man на их странице 404.

Посмотрим, сможешь ли ты довести Венди до конца!

28.Red Bull

Страница 404 Red Bull — мечта любого специалиста по SEO или маркетингу.

Он набит ссылками на статьи и плейлисты с видео.

Red Bull даже поворачивает список воспроизведения видео для своего последнего события.

На изображении выше видно, что Red Bull использовала серфинг Red Bull Big Wave 2020 в качестве источника вдохновения.

Продолжить чтение ниже

29. Blizzard

Blizzard Entertainment, создатели World of Warcraft, также известного как WOW, если вы такой гик, как я.🤓

Blizzard представляет одного из самых известных персонажей, мурлока, который поможет спасти вас с их страницы 404.

30. Marvel

Marvel использует различных персонажей комиксов, таких как Капитан Америка, Дэдпул и т. Д., На вращающейся странице 404.

Небольшая подсказка: продолжайте нажимать кнопку «Обновить». Каждое третье обновление Marvel будет предлагать новое изображение.

Продолжить чтение ниже

31. Patagonia

Patagonia вешает десятку на своей странице 404, подчеркивая ее повседневную тропическую атмосферу.

Сначала они вовлекают зрителя в цикл видео, а затем направляют пользователя вниз по странице к ссылкам на их популярные категории покупок.

32. Backcountry

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

Продолжить чтение ниже

33. Nintendo

Nintendo действительно не хватает некоторых визуально привлекательных деталей, что меня удивило, вы знаете, что это Nintendo и все такое.

Но важно то, что Nintendo добавляет ссылки на ресурсы для пользователя.

Он заставляет пользователей оставаться на веб-сайте и не возвращаться к поисковой выдаче.

34. Zillow

Zillow предлагает интерактивные GIF-файлы для домашних поисковиков.

Zillow использует данные клиентов, чтобы убедиться, что их пользователи любят домашних животных.

Продолжить чтение ниже

И, чтобы заинтересовать этих любителей домашних животных, они создали этого интерактивного кота, который добавляет легкий смешок в конце, когда он что-то ломает в гостиной.

Как любитель животных, я могу подключиться к этому!

35. H&R Block

H&R Block — это еще один взгляд на не очень привлекательную страницу 404, но он предлагает пользователям больше информации, чтобы они продолжали нажимать на свой веб-сайт.

Продолжить чтение ниже

36. World of Warcraft

Команда World of Warcraft отмечает набор навыков своей аудитории несколькими шутками о CDN и выше.

37. Playstation

Playstation дает хороший отзыв об одной из своих новых игр на своей странице 404.

Кроме того, они предоставляют возможность вернуться на главную страницу или получить совет в справочном центре.

Сводка

В идеальном мире никто бы никогда не увидел ваши 404 страницы.

Продолжить чтение Ниже

Они будут спрятаны подальше, как сумка с тонкими рукавами Риза, которую я прячу в своем шкафу. Знаешь, в тяжелые времена.

Но в реальном мире все бывает.

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

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

Дополнительные ресурсы:

Кредиты на изображения

Показанное изображение: Создано автором, август 2020 г.
Все скриншоты сделаны автором, август 2020 г. В постоянных клиентов

Что, если бы мы сказали вам, что ваша страница с ошибкой 404 действительно может увеличить количество конверсий и увеличить доход?

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

В этом посте мы рассмотрим 11 из лучших страниц 404, которые мы видели, и , почему они работают .

Но сначала давайте кратко поговорим о страницах 404 и о том, почему они важны.

Что такое страница с ошибкой 404 и почему вас это должно волновать

Ссылки портятся со временем. Это происходит на каждом сайте. Удаляются продукты, удаляется контент или происходят изменения в структуре постоянных ссылок.

Когда посетитель нажимает ссылку на удаленную или перемещенную страницу, он видит вашу страницу с ошибкой 404.Они также увидят это, если введут неправильный URL или нажмут неработающую или усеченную ссылку.

Отражает ли ваша страница 404 ваш бренд?

Если нет, то вы абсолютно потерявших посетителей, которые могут списать вас и никогда не вернуться.

Это…

Ни для кого не годится.

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

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

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

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

1. Lego — дружественная ошибка «Страница не найдена»

Почему это работает:

Страница 404 Lego не только полностью посвящена бренду, но и интересна и проста для понимания.Нет никаких технических формулировок или упоминания об «ошибке 404», которую некоторые люди могут не понять.

Все, что нужно знать вашему посетителю, — это то, что он не получил нужную страницу. Их на самом деле не волнует, почему; они просто хотят решения.

Как это сделать:

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

«Страница не найдена.”
«К сожалению, мы не можем найти страницу, которую вы искали».
«Ой! Что-то сломано ».
«Ой, эта ссылка не работает».

2. Центр электронной почты Великобритании — Пример интерактивной страницы 404

Почему это работает:

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

Как это сделать:

Не вините посетителя в ошибке.Вместо этого извинитесь .

Если вы объясняете, что пошло не так, не используйте абсолютные выражения. Вместо этого используйте такие слова и фразы, как «мог бы иметь» или «возможно». Такая формулировка вряд ли заставит посетителя почувствовать, что ошибка — его вина.

Вы также можете сделать то, что сделал Email Center UK, и позволить пользователю «уволить» одного из разработчиков.

Бедный Люк, в самом деле.

3. List25 — Best 404 Page

Почему это работает:

Эта страница с ошибкой 404 из List25 великолепна, и, по сути, это больно.

Лучшая практика проектирования взаимодействия с пользователем — объяснить, что пошло не так при доставке сообщения об ошибке. List25 предлагает 25 объяснений. Естественно.

У них есть панель поиска вверху, поэтому посетителям не нужно прокручивать весь список, но мы уверены, что большинство посетителей List25 все равно перейдут туда.

Как это сделать:

На большинстве сайтов не будет списка объяснений, подобных List25, но определенно найдите минутку, чтобы объяснить, что пошло не так .

Вот список возможных причин ошибки 404:

Ошибочный URL
Ошибка копирования и вставки
Ссылка не работает
Усеченная ссылка
Перемещенный контент
Удаленное содержимое

Если вы хотите добавить несколько забавных вещей, которые подходят вашему бренду, сделайте это!

4. Brett Terpstra — Простой дизайн страницы 404

Почему это работает:

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

Страница
Brett Terpstra 404 содержит список сообщений, содержащих ключевые слова, относящиеся к ссылке, по которой вы пытались получить доступ. Сообщения связаны ссылками, что упрощает и ускоряет переход к ним.
Страница невзрачная, но очень полезная.
Как это сделать:
Вы можете использовать API пользовательского поиска Google, чтобы получать наиболее точные совпадения с вашего веб-сайта и отображать их на странице 404. Этот дает посетителям немедленное решение их проблемы с потерянной страницей.
Это требует доступа к консоли разработчика Google и не для слабонервных. На сайте Smashing Magazine есть отличное руководство, которое поможет вам начать работу.
5. Стив Мэдден — Страница 404 с продуктами
Почему это работает:
Страница 404 Стива Мэддена предлагает варианты для потерянных посетителей. Окно поиска — отличное дополнение к любой ошибке 404 и предлагает несколько различных способов получить помощь, позволяя посетителям узнать, что они их слушают.
Они также включают ссылки на другие популярные продукты, чтобы отвлечь посетителей от того, что может быть очень неприятным. Подлый и эффективный.
Как это сделать:
Помогите своим потерянным посетителям с текстом и оформлением сообщения об ошибке 404. Включение некоторых из приведенных ниже идей может побудить посетителей продолжить просмотр и поиск , продлевая время их пребывания на вашем сайте.
Что нужно включить в дизайн страницы 404:
Навигация по меню
Ссылка на домашнюю страницу
Ссылка на вашу карту сайта
Панель поиска
Ссылки на популярные сообщения
Ссылки на популярные товары
6.9gag — Текст страницы 404 с призывом к действию
Почему это работает:
Страница 404
9gag имеет одну цель: заставить вас загрузить их приложение. Они даже не делают вид, что хотят ничего другого.
Добавление полной страницы популярной гифки «Криминальное чтиво Траволта» — это забавный штрих!
Как это сделать:
Простота — ключ к успеху. Да, мы только что говорили о способах удержания посетителей в Интернете, но не перегружайте их слишком большим количеством вариантов .
В идеале вы должны придерживаться одного призыва к действию, может быть, двух. Вы же не хотите, чтобы посетители страдали от паралича нерешительности и в ужасе покидали ваш сайт.
Трава всегда зеленее, правда? Если вы предоставите своим посетителям слишком много вариантов, они могут в конечном итоге пожалеть о своем выборе и обидеться на вас.
7. Путь — Супер-простой дизайн страницы 404
Почему это работает:
Страница 404
Path проста и понятна.Они не хотят, чтобы у них были неработающие ссылки и отсутствующие страницы, поэтому они дают посетителям возможность связаться со службой поддержки Path, чтобы сообщить об этом.
Обратите внимание, что Path также включает нижний колонтитул на тот случай, если посетитель не хочет сообщать о проблеме и предпочитает просмотреть. Это возвращает посетителю силы и помогает облегчить его разочарование.
Как это сделать:
Цель состоит в том, чтобы дать посетителям возможность сообщить о проблеме .
Вы можете сделать это несколькими способами.Вы можете сделать это простым, как Path, и включить возможность обращения в службу поддержки. Другой вариант — использовать форму обратной связи.
8. IMDB — Веселые и фирменные 404 Страница
Почему это работает:
Помните ту ужасную страницу с ошибкой 404 по умолчанию из начала этой статьи? Вашему посетителю не будет чем-то знакомым, чтобы успокоиться. IMDB устраняет это, показывая посетителям цитату из фильма на их странице 404.
Брендинг здесь тонкий. Нет афиш с фильмами или трейлеров, соревнующихся за внимание посетителя.IMDB просто предлагает цитату из фильма, ссылку на домашнюю страницу сайта и ссылку на процитированный фильм.
Как это сделать:
При разработке страницы с ошибкой 404 убедитесь, что поддерживает знакомство с брендом .
Вместо того, чтобы дезориентировать ваших пользователей, им будет приятно познакомиться с тем же брендом, который они узнали.
9. Everipedia — Пример текста сообщения об ошибке 404
Почему это работает:
Страница 404 Everipedia — это все, что посетители ожидают от онлайн-энциклопедии.Это напоминает посетителям, почему они любят этот сайт и продолжают возвращаться.
Как это сделать:
Спикер и маркетолог TED Ренни Глисон сказал о странице ошибки 404,
Простая ошибка может сказать мне, чем вы не являетесь. Или напомни мне, почему я тебя люблю.
Используйте свою страницу 404, чтобы напомнить посетителям, за что они вас любят . В чем ваше уникальное ценностное предложение? Что отличает вас от конкурентов?
10. Heyzap — Best Interactive 404 Page
Почему это работает:
Кто не любит играть в игры?
Страница 404
Heyzap добавляет интерактивный элемент, который на некоторое время будет развлекать посетителей на сайте.Может быть, даже достаточно долго, чтобы с самого начала избавиться от разочарования от попадания на страницу с ошибкой!
Как это сделать:
Нет, вам не нужно разрабатывать игру, но рассмотрите возможность добавления интерактивного элемента на вашу страницу .
Добавление интерактивного элемента позволяет посетителям вашего сайта чем-то заняться на странице с ошибкой 404. Это увеличивает время пребывания на странице и снижает показатель отказов, что важно для сохранения вашего веб-сайта в результатах поиска Google.
11. OptinMonster — Пример страницы 404 с лид-магнитом
Почему это работает:
Страница 404
OptinMonster включает в себя супер крутой свинцовый магнит. Кроме того, предложение загрузки о том, как конвертировать уходящих посетителей со страницы с ошибкой, является довольно гениальным.
Мы не хотим, чтобы люди считали свое время на наших сайтах потраченным впустую. Урок маркетинга на странице 404 по-прежнему дает нашим посетителям полезную информацию.
Да, мы немного предвзяты, но у нас тоже хорошо получается.Это превращается в бандитов.
Как это сделать:
Предложите свой собственный лид-магнит, добавив MonsterLink на страницу с ошибкой 404.
MonsterLinks — одна из замечательных функций OptinMonster, позволяющая превратить любую ссылку, кнопку или изображение в двухэтапный процесс подписки.
Двухэтапная подписка требует, чтобы пользователь инициировал процесс, щелкнув ссылку сначала , прежде чем появится форма подписки.
Вот как выглядит этот двухэтапный процесс:
Доказано, что эти типы оптинов увеличивают конверсию на 785%! Щелкните здесь, чтобы начать работу с OptinMonster, а затем следуйте этому руководству, чтобы добавить MonsterLink на страницу с ошибкой 404.
Бонусная секция: Выход-намерение
Одна из вещей, которые мы не часто наблюдаем, — это использование технологии выхода на странице 404. Намерение выхода помогает снизить показатель отказов, его легко настроить и каждый раз увеличивает конверсию.
Exit-intent определяет, когда пользователь собирается покинуть страницу с ошибкой 404, а затем отображает всплывающее окно прямо в этот момент. Это предотвращает потерю более 70% посетителей, которые покидают ваш сайт, и никогда не вернутся.
Вот пример всплывающего окна, которое появляется, когда пользователь собирается отказаться от страницы с ошибкой 404.
(Это было создано с использованием темы холста OptinMonster.)
Это всплывающее окно является приветственным сайтом для пользователей, поскольку оно помогает им найти то, что им нужно. И это творит чудеса для вас, как владельца веб-сайта, потому что дает им последний шанс продолжить просмотр вашего сайта.
Вы также можете использовать намерение выхода, чтобы предоставить посетителям купон или код скидки, когда они покидают вашу страницу 404.
Вот и все! 11 из найденных нами лучших страниц 404 и множество советов, которые можно использовать для увеличения числа конверсий и увеличения дохода.
Ищете другие советы по увеличению доходов? Ознакомьтесь с полным руководством по оптимизации электронной коммерции: 13 шагов к мгновенному увеличению дохода!
Подпишитесь на нас в Facebook и Twitter, чтобы получить больше полезных советов и руководств от OptinMonster.
Опубликовано Jacinda Santora
Джасинда Сантора — писатель, специализирующийся на электронной коммерции и маркетинге роста.Она гордится своей способностью упрощать сложные вещи. Когда она не пишет, вы можете увидеть, как она мечтает о кемпингах, пьет кофе и слушает подкасты.
Custom 404 Page Лучшие методы
Страница 404 — это что видит пользователь, когда пытается перейти на несуществующую страницу вашего сайта. Это может произойти, если они нажали неработающую ссылку, страница была удалена или неправильно набрали URL-адрес.
Вы можете рассчитывать на то, что ваш сервер вернет стандартную страницу 404, но это может быть непривлекательно и не будет брендирован вашим сайтом.Пользовательская страница 404 может быть помечена вашим сайтом и предоставить полезную информацию
Если у вас есть доступ к вашему серверу, мы рекомендуем вам создать собственную страницу 404. Хороший настраиваемая страница 404 помогает людям находить информацию, которую они ищут, а также предоставляет другой полезный контент, который побуждает людей к дальнейшему изучению вашего сайта.
В этой статье приведены рекомендации по созданию содержимого вашей пользовательской страницы 404. Для информацию о настройке вашего сервера для отображения вашей новой страницы 404, проверьте свой сервер или Интернет документация хостера.Вы все равно должны убедиться, что ваш веб-сервер возвращает код состояния 404 пользователям и сканерам, чтобы поисковые системы случайно не проиндексировали вашу пользовательскую страницу 404.
Поскольку страница 404 также может быть стандартной HTML-страницей, вы можете настроить ее как хотите. Вот несколько советов по созданию эффективной страницы 404, которая поможет удержать посетителей на ваш сайт и найдите информацию, которую они ищут:
Четко скажите посетителям, что страница, которую они ищут, не может быть найдена.Используйте язык, который дружелюбный и гостеприимный.
Убедитесь, что ваша страница 404 имеет тот же внешний вид (включая навигацию), что и остальная часть твой сайт.
Подумайте о добавлении ссылок на свои самые популярные статьи или сообщения, а также ссылку на свои домашняя страница сайта.
Подумайте о том, чтобы предоставить пользователям возможность сообщить о неработающей ссылке.
Какой бы красивой и полезной ни была ваша пользовательская страница 404, вы, вероятно, не захотите, чтобы она появляются в результатах поиска Google.Чтобы предотвратить индексирование страниц 404 Google и другие поисковые системы, убедитесь, что ваш веб-сервер возвращает фактический статус HTTP 404 код, когда запрашивается отсутствующая страница.
Используйте изменение адреса инструмент, чтобы сообщить Google о перемещении вашего сайта.
19 лучших примеров страниц 404 для восстановления потерянных посетителей
Знаете ли вы, что отличная страница 404 может увеличить конверсию вашего сайта и увеличить доход?
Это может показаться довольно безумным заявлением.Но правильно оптимизированная страница 404 может превратить потерянных посетителей сайта в постоянных, вернувшихся клиентов.
В этой статье мы рассмотрим лучшие примеры страниц с ошибками 404, которые мы обнаружили, и почему они так хорошо работают.
Прежде чем мы поделимся лучшими страницами 404, давайте посмотрим, почему целевая страница 404 важна для вашего бизнеса.
Что такое страница с ошибкой 404 и зачем она вам нужна?
Возможно, вы уже знаете, что со временем ссылки на некоторые веб-сайты портятся. Это может быть связано с отсутствием страниц, удалением некачественного контента, изменением веб-дизайна или даже изменением структуры постоянных ссылок на вашем веб-сайте.
Но вот в чем дело…
Эти удаленные или перемещенные страницы часто появляются в поисковых системах или социальных сетях на их старых URL-адресах. Поэтому, когда кто-то нажимает, чтобы посетить их, он видит страницу с ошибкой 404 с сообщением о том, что страница не найдена. Это также может произойти, если они пропустят URL-адрес или нажмут неработающую или неработающую ссылку.
Имея это в виду, внимательно посмотрите на свой текущий дизайн страницы 404. Точно ли он отражает ваш бренд?
Если этого не произойдет, вы можете потерять посетителей и потенциальных клиентов.
Например, если ваша страница 404 выглядит так…
… это оттолкнет людей, и они могут никогда не вернуться.
Тем не менее, если вы оптимизируете целевую страницу 404 not found с помощью:
Отличные изображения
Отличная копия
Полезная информация и ссылки
Вы можете снизить показатель отказов и увеличить количество подписчиков и конверсий на своем веб-сайте.
Теперь, когда вы знаете, что такое страница с ошибкой 404 и почему она важна для вашего веб-сайта, давайте рассмотрим лучшие примеры страниц с ошибкой 404.Если повезет, вы получите вдохновение для дизайна 404, которое поможет вам создать свою собственную страницу 404.
11 лучших примеров страниц 404 от реальных брендов
Следующие ниже дизайны страниц с ошибкой 404 взяты от реальных брендов в Интернете. Мы объясним, почему именно этот дизайн работает, и дадим несколько советов, как сделать это самостоятельно.
1. Lego — Дружественный дизайн страницы 404, вдохновение
Страница
Lego 404 — отличный пример использования юмора и хорошего бренда для привлечения посетителей веб-сайта.
Пользователи сталкиваются с узнаваемым персонажем, Эмметом, который сожалеет о том, что не нашел страницу, которую вы ищете. Затем он говорит вам не беспокоиться, заверив вас, что все по-прежнему великолепно, что является отличным отсылкой к фильму и намеком на песню из фильма Lego.
К этому моменту, когда песня гудит в вашей голове, он предлагает вам начать делать покупки с помощью четкой кнопки с призывом к действию (CTA).
Вся концепция работает, потому что она дружелюбна, узнаваема и полностью соответствует бренду.
Чтобы создать похожий дизайн страницы 404, сначала удалите все технические термины и замените их чем-то более человечным. Используйте такие слова, как не беспокойтесь, упс и извините, чтобы убедить пользователей, что страница с ошибкой — не их вина.
Вы также можете использовать изображения, связанные с вашим брендом, чтобы пользователи знали, что они почти в нужном месте. Затем с помощью кнопки CTA вы можете помочь им найти то, что они ищут, и дольше удерживать их на вашем сайте. Включение окна поиска или панели поиска — еще один отличный способ улучшить взаимодействие с пользователем и повысить эффективность SEO.
2. Промедление — прокрутка страницы 404, пример не найден
Этот пользовательский дизайн страницы 404 от Slack предлагает более интерактивный пользовательский интерфейс, чем некоторые другие примеры веб-страниц в этой статье.
Приземлившись на страницу, вы попадаете в волшебный пейзаж с деревьями, цветами и даже радугой вдалеке. По небу порхают бабочки, и вы даже можете увидеть странных поросенка и цыпленка, которые бродят вокруг.
Более того, вся страница прокручивается по горизонтали при перемещении курсора мыши, открывая больше ярких сцен для просмотра.
Вас можно простить за то, что вы подумали, что реальность на мгновение сбилась с толку, о чем, кажется, думает и Slack, как вы можете видеть из их сообщений.
В сообщении об ошибке не упоминается ошибка 404. Вместо этого они используют слова и фразы, понятные каждому. Он также предлагает, что вам делать дальше: вернуться или найти решение в справочном центре.
Предоставляя пользователям выбор, они дольше удерживают их на своем веб-сайте, а не закрывают вкладку.
3. Mantra Labs — Страница 404 с перенаправлением
Индивидуальный дизайн страницы 404 от Mantra Labs — это умный пример того, как пользователь принимает решение.
Достигнув страницы, вы видите простую иллюстрацию парящего в космосе космонавта с заголовком «Ой! У тебя закончился кислород ». Астронавт помещается над «0» в 404 и медленно втягивается в нее, очень похоже на падение в черную дыру или полет в космос.
Затем вы видите таймер обратного отсчета, который отсчитывает время, пока они не вернут вас «домой», который перенаправляет вас на главную страницу веб-сайта.Если вы моргнете, вы можете полностью пропустить страницу 404.
Самое замечательное в этом примере — некогда думать. Всего за 10 секунд вы будете перенаправлены на главную страницу, где сможете найти нужный контент, а этого времени вряд ли хватит, чтобы принять решение уйти.
4. Студия 20 века — Страница 404 с идеями фильмов
Еще один отличный пример правильного креативного брендинга страницы 404 — это от 20th Century Studios. Если вы перейдете по неработающей ссылке или удалите статью на их веб-сайте, вы увидите содержательное сообщение и кадр из одного из их культовых фильмов.
Далее по странице они предлагают несколько фильмов из своей коллекции, где вы можете щелкнуть, чтобы узнать больше и купить копию.
Это фантастический способ удержать пользователей на веб-сайте, который естественным образом превращается в квалифицированных потенциальных клиентов.
Вы можете использовать аналогичный подход для своего сайта, предлагая популярные статьи, продукты и многое другое.
5. Figma — Интерактивная страница 404 Страница
Нам нравится дизайн 404 страницы Figmas за его простоту. Страница довольно прямолинейна, минимальна и не содержит лишних наворотов.
Если, конечно, вы не учитываете тот факт, что вы можете манипулировать точками привязки в тексте 404 и играть с ними.
Хотя сначала это может показаться бессмысленным, на самом деле это довольно умно. Эта небольшая дизайнерская игра идеально воплощает в себе бренд Figmas как инструмент дизайна. Вы мгновенно получаете представление о том, что с ним можно делать, и это побуждает вас узнать больше.
Получить дополнительную информацию тоже несложно. Страница 404 Figmas включает меню навигации и полезные ссылки, чтобы легко найти то, что им нужно.
6. Behance — 404 с предложениями по проектам
Behance, сайт, похожий на Dribbble, предоставляет еще один отличный пример страницы 404, который помогает пользователям находить нужную информацию.
У страницы простой заголовок «Ой! Мы не можем найти эту страницу ». с подзаголовком, предлагающим посетителям посетить галереи их проектов.
Под заголовком вы можете щелкнуть различные категории проектов, чтобы перейти на нужную страницу. Затем у вас есть возможность просмотреть несколько избранных проектов в поисках вдохновения.
С этой страницей пользователи не останутся без дела. Они не попали на страницу, которую искали, но с таким количеством предложений они могли найти что-то похожее или лучшее.
7. eBay — Страница 404 с трендами сделок
eBay — популярный веб-сайт электронной коммерции, который использует пользовательское сообщение об ошибке 404 для демонстрации самых популярных продуктов.
При посещении страницы вы видите забавное изображение и причудливый заголовок, в котором говорится, что они «везде искали» вашу желаемую страницу.Это помогает пользователям понять ситуацию. Затем он ссылается на их домашнюю страницу с помощью привлекательной кнопки.
После этого они предлагают заглянуть на свои справочные страницы, если вам все еще нужна помощь. Или вы можете сразу перейти к просмотру их популярных сделок, которые большинство пользователей, вероятно, в любом случае ищут.
Организуя дизайн своей страницы 404 таким образом, они предлагают больше возможностей для людей продолжать использовать их сайт, не будучи слишком настойчивыми.
8. 9gag — Призыв к действию 404 Страница
Знание своей аудитории имеет решающее значение для превращения ее в платежеспособных клиентов.Если вы не знаете, что им нравится, вы не можете предлагать контент, продукты и услуги, которые им нужны больше всего.
На этой странице с ошибкой 404 9gag демонстрирует, что они хорошо знают свою аудиторию.
На их целевой странице 404 изображен популярный мем, с которым знакомо большинство их пользователей. Это не оставляет сомнений в том, что вы попали в нужное место, даже если это не та страница, которую вы искали.
Далее следует простое сообщение и призыв к действию для загрузки приложения, мгновенное решение для привлечения большего числа потенциальных клиентов.
9. IMDB — 404 Page Design Inspiration
Большинство людей знают, что IMDB — это веб-сайт, на котором можно найти новости и предложения о кино. Поэтому неудивительно, что их страница 404 ориентирована на кино.
При входе пользователей развлекает индивидуализированная цитата из популярного фильма. В приведенном выше примере это известная цитата Гэндальфа из «Властелина колец».
Название фильма под сообщением 404 связано с соответствующей страницей, что дает людям возможность узнать больше.Или вы можете перейти на домашнюю страницу, чтобы продолжить просмотр. В любом случае пользователи остаются на сайте.
10. Уэно — Creative 404 Page
Еще один способ использовать пользовательскую страницу 404 — продемонстрировать творческий потенциал ваших брендов. Это то, что Ueno, агентство полного цикла, сделало с этим примером 404 страницы.
Вы не можете увидеть полный эффект на скриншоте выше.
Это изображение представляет собой анимацию хот-дога, бегущего по странным и сюрреалистическим пейзажам. Более того, каждый раз, когда вы обновляете страницу, вы будете видеть другое сообщение, объясняющее ситуацию.
Эта страница 404 демонстрирует весь творческий потенциал агентства, что идеально подходит для потенциальных клиентов. Кроме того, вернуться на главную страницу легко с помощью хорошо размещенной ссылки «вернуться».
11. CloudSigma — Веселый дизайн страницы 404
Облачный хостинг — не обязательно забавная тема для демонстрации, даже если это невероятно полезная услуга для многих владельцев веб-сайтов. Вот почему нам нравится дизайн страницы 404 от CloudSigma.
Их насмешливые сообщения дают посетителям возможность заглянуть за кулисы жизни разработчика.Тем не менее, юмор достаточно беззаботный, чтобы не обидеться.
Вся страница создает привлекательное и дружелюбное впечатление, заставляя вас перейти на главную страницу, чтобы узнать больше.
Надеюсь, что приведенные выше примеры страниц 404 дадут вам достаточно вдохновения для того, чтобы сделать один для своего веб-сайта.
12. Brett Terpstra Simple 404 Страница
Если ваша страница 404 плохо спроектирована, это может сигнализировать о тупике для посетителей и предлагать им больше некуда идти.Это может привести к потере тонны потенциальных клиентов.
Вместо этого вы можете сделать что-то вроде этой страницы 404 от Бретта Терпстры. Он сразу понимает, что что-то пошло не так, и вместо того, чтобы оставить все как есть, предлагает варианты того, что вы, возможно, ищете.
Хотя страница некрасивая, она очень полезна.
Вы можете создать нечто подобное, просмотрев аналитику своего веб-сайта, чтобы определить, какие статьи люди ищут больше всего.
13. Marvel Animated 404, пример
404 страницы
Marvel бывают всех форм и размеров.Фактически, у них есть много страниц с ошибками, посвященных различным персонажам их вселенной.
В этом примере они анимировали свою страницу 404 со ссылкой на Железного Человека, который понравится многим фанатам.
Движение анимированного gif привлекает внимание к инструкциям. И это побуждает посетителей либо нажать кнопку «Назад», либо воспользоваться функцией поиска, чтобы найти то, что они ищут.
14. CSS-хитрости 404 Дизайн страницы
Эта простая, но функциональная страница 404 от CSS Tricks — отличный пример хорошего знания своей аудитории.Внизу страницы есть разрыв, открывающий ее CSS, который найдет отклик у многих разработчиков.
Как видите, они также включают ссылки на соответствующие страницы, чтобы люди не покинули их веб-сайт. Кроме того, внутренние ссылки — отличный способ повысить ваш SEO.
15. Пример страницы 404 Mailchimp
Когда что-то идет не так, часто лучший способ справиться с ситуацией — это откровенно признать свою вину. Именно это делает Mailchimp со своим дизайном страницы 404.
На странице есть анимированный GIF-файл с изображением персонажа, «ищущего» то, что вы ищете. Кроме того, сообщение о потере страницы полностью честно. Тем не менее, они предлагают читателям решение, показывая кнопку, возвращающую посетителей на их домашнюю страницу.
16. Разбитое яйцо SeedProd 404 Page
Страница 404 разбитого яйца от SeedProd — это простой дизайн с легким настраиваемым сообщением. Он включает в себя область для логотипа вашего сайта, меню навигации и призыв к действию, направляющий пользователей обратно на вашу домашнюю страницу.
Фоновое изображение — отличный признак того, что что-то сломалось. А ссылки в меню упрощают переход к другим областям веб-сайта.
17. Шаблон страницы 404 SeedProd для электронной коммерции
Эта страница 404 будет полезна
сайтам электронной коммерции. В нем есть простое сообщение о том, что что-то пошло не так, а также предложения по продукту, чтобы пользователи продолжали просматривать.
18. SeedProd Sunset 404 Пример страницы
В этом дизайне от SeedProd вы можете создать потрясающую полноэкранную страницу 404, которая производит впечатление.Полноэкранный дисплей сразу привлекает внимание теплым изображением заката. Затем пользователи могут щелкнуть большую кнопку «домой», чтобы вернуться на вашу домашнюю страницу.
19. SeedProd Funny Пример страницы 404
Кто устоит перед милой собачкой в костюме ананаса?
Этот яркий и веселый дизайн страницы 404 говорит о том, что страницы не существует. Но с небольшой помощью вы можете перейти на домашнюю страницу, на которой действительно существует.
Он также включает удобное меню навигации, чтобы пользователи могли легко находить другие страницы вашего веб-сайта.
Когда дело доходит до создания собственной страницы 404, есть несколько вариантов.
Многие темы WordPress включают готовые дизайны страниц 404 как часть пакета тем. Таким образом, вы могли увидеть, есть ли у используемой вами в настоящее время темы такие функции.
Вы также можете нанять разработчика для разработки и кодирования страницы 404, но это может обойтись дорого.
Или вы можете создать страницу 404 с помощью конструктора целевых страниц, такого как SeedProd.
SeedProd — лучший конструктор целевых страниц для WordPress.Он упрощает создание любой целевой страницы и предоставляет простой конструктор перетаскивания для создания страниц без необходимости кодирования.
Он также поставляется с широким спектром шаблонов целевых страниц, которые вы можете настроить в визуальном конструкторе. Кроме того, плагин не содержит раздутых материалов и содержит минимум кода, поэтому он не замедлит работу вашего сайта.
Конструктор целевой страницы
SeedProd и шаблоны страниц 404 позволяют легко создавать страницы 404, которые увеличивают количество потенциальных клиентов и коэффициент конверсии.
Так чего же вы ждете?
И если вам понравилась эта статья, подпишитесь на нас в Twitter и Facebook, чтобы получать больше полезного контента, который поможет вам в развитии вашего бизнеса.
16 супер умных страниц 404, которые полностью соответствуют бренду
Креативные страницы 404 в наши дни пользуются популярностью.
Похоже, веб-дизайнеры постоянно пытаются превзойти друг друга, создавая все более и более совершенные версии того, что раньше было общим сообщением об ошибке.
Простой поиск в Google, Pinterest или Dribbble найдет тысячи примеров, которые помогут развить ваши творческие способности.
… Но погодите — красивая эстетика — это только полдела!
Единственное, что действительно отличает страницу 404 от остальных, — это то, как она связана с вашим брендом, продуктами, услугами и прямыми призывами к действию, которые повторно привлекают ваших посетителей, чтобы они продолжали изучать ваш сайт.
Следующие бренды проделали большую работу по созданию пользовательских страниц 404, которые устанавливают все флажки.
Marvel
Marvel помещает своих супергероев в центр своей страницы 404. Они проделали большую работу, связав сообщение об ошибке с конкретным персонажем. Добавлен бонус, страница имеет тонкую анимацию и может быть обновлена для просмотра других персонажей. Гений.
20th Century Fox
Такой простой, но такой умный. Компания 20th Century Fox использует сцены из своих фильмов, чтобы подшутить над ужасной страницей 404, как они это делают со сценой из «Мести ботаников».Вы даже можете немного отомстить — купив фильм со скидкой!
Specialized
Почему бы не продемонстрировать ваш продукт в действии? Specialized использует одного из своих гонщиков, чтобы объяснить свою страницу 404. Все делают ошибки, почему бы не продемонстрировать одну на своей странице?
Blizzard
Blizzard, популярный производитель видеоигр, выводит неработающие страницы на совершенно другой уровень. Меню, экран — все битое. И это ты во всем виноват! Бонусные баллы за меню, которое все еще работает и позволяет посетителям повторно участвовать.
eHarmony
Сайты знакомств известны тем, что имеют отличные страницы 404. Eharmony’s — еще один отличный пример того, как простое изображение и дерзкий текст могут превратить разочарованных посетителей в потенциальных клиентов.
Pixar
У этого гиганта анимационного кино сегодня одна из самых популярных страниц 404 в Интернете. Печаль из их популярного фильма «Наизнанку» используется для объяснения сообщения об ошибке, используя концепции прямо из фильма. Кроме того, реквизит для красивого дизайна с большим количеством белого пространства!
Distilled
Страница 404 Distilled идет по совершенно иному пути.Вместо того, чтобы искать минимальное количество копий и надеяться на клик, на странице представлены два очень симпатичных мультяшных персонажа, обсуждающих ошибку 404 и то, что посетители могут делать дальше. Такой простой, но такой творческий.
PageCloud
Да, даже разработчикам сайтов нужна страница 404! Страница PageCloud 404 объединяет бренд, продукт и контекст как единое целое. Вы находитесь на неработающей странице, почему бы вместо этого не создать ее? Ах да, на заднем плане тоже облако. Возьми? PageCloud.
airbnb
Вы не можете не чувствовать себя виноватым из-за анимированной девушки airbnb, которая роняет мороженое на этой странице 404.Вы же не хотите сразу уходить, это было бы нехорошо! Почему бы вместо этого не щелкнуть ссылку справки?
9 Gag
9GAG известен смешными видео, изображениями и гифками. На их странице 404 представлена известная сцена из «Криминального чтива», где растерянный Винсент (Джон Траволта) ищет Миа (Ума Турман). Подзаголовок: «Здесь ничего нет» и скачивание нашего приложения, чтобы найти то, что вы ищете, идеально связывает все воедино.
Дэн Вуджер
Популярный иллюстратор-фрилансер, чьи творения использовались такими гигантами, как McDonald’s, добавляет один из своих дружелюбных гамбургеров с извиняющимся флагом на свою умную страницу 404.Бонус? Тонкий призыв к действию, отправляющий посетителей посмотреть его другие иллюстрации.
Email Center UK
Поговорим о том, как высмеивать сообщение об ошибке. Это ведь должна быть чья-то вина? На странице 404 Emailcenter вас попросят выбрать, кого из их разработчиков следует уволить за ошибку. Кого бы вы ни выбрали, вы увидите забавную групповую картинку и соответствующую копию. Может, в следующий раз добавят редирект и сохранят работу.
IMDb
IMDb — один из крупнейших источников фильмов, телепередач и знаменитостей.Их страница 404 содержит несколько цитат из популярных фильмов, которые были изменены, чтобы соответствовать контексту. Нажмите «Обновить», и вы увидите новую цитату со стратегической ссылкой на дополнительную информацию о фильме.
Orange Coat
Страница 404 Orange Coat содержит продуманную блок-схему, которая поможет счастливому интернет-путешественнику найти нужную информацию. Все, что вам нужно сделать, это ответить на их вопросы ДА / НЕТ, и вы отправитесь в путь. Бонус: их URL даже заканчивается на / дорогой-счастливый-интернет-путешественник — гораздо удобнее, чем / error, не так ли?
LEGO
Страница 404 LEGO — еще один пример, который показывает, насколько ваша страница может быть: привлекательной, эффективной и брендовой, но без чрезмерной сложности.Изображение, строка текста и кнопка для отправки пользователей домой. Вот и все — и каждый раз это заставляет улыбаться.
TSheets
Поскольку они предлагают программное обеспечение для планирования, TSheets решили отметить одну из великих сцен из фильма «Назад в будущее», где доктор Эммет Браун разгоняется до 88 миль в час на Delorean, используя свой конденсатор потока. Как и программное обеспечение TSheet, эта сцена демонстрирует важность точности и эффективности, чтобы вы не запускали OUTATIME.
Что вы думаете об этих конструкциях? Какой из них твой любимый?
Если вы чувствуете вдохновение, почему бы не узнать, как создать свою собственную страницу 404 сегодня? Это проще, чем вы думаете!
30 креативных и умных страниц ошибок 404 | by Solodev
Большинство страниц с ошибками 404 — отстой, но страницы с ошибками компании доказывают, что в этом нет необходимости.
Уведомление об ошибке по-прежнему отображается на веб-странице, связанной с вашим брендом. Почему бы не воспользоваться возможностью и дальше продвигать свой бренд?
Мы нашли 30 уникальных страниц 404, которые выходят за рамки базового. Но прежде чем мы перейдем к списку, давайте сузим три элемента, которые отличают эти страницы от остальных. Эти три идеи можно применить даже к вашей собственной странице с ошибкой 404.
Кажется стандартной практикой для любого 404 вежливо сказать: «Извините, страница, которую вы ищете, недоступна.Попробуйте снова X, Y или Z ».
Хотя эта копия, безусловно, вежлива, она ожидаема и скучна. Скука не привлекает внимания.
Если у вашего бренда есть особый голос, выберите копию, которая продолжает этот голос. Например, если ваш бренд использует символы (как у Солодева), добавьте этот голос на страницу 404. Если на вашем веб-сайте используется в основном неформальная копия, страница 404 формального тона вызовет у них раздражение, а не добавит им общего впечатления.
Визуальные эффекты остаются у пользователей Интернета даже в неудобных ситуациях.Воспользуйтесь возможностью найти забавное изображение или визуальный элемент, который одновременно выражает ценность вашего бренда и добавляет больше к потенциально скучной странице.
Копия и изображение в середине белой страницы 404 — это эквивалент обслуживания клиентов, когда неискренний, без энтузиазма официант извиняется за задержку с вашей едой. В целом сообщение могло быть доставлено, но упаковка сообщения была тусклой. Отойдите от шаблонов традиционного дизайна и выберите неожиданные элементы на странице 404.Это может варьироваться от фактического макета самой страницы до геймификации страницы с ошибкой.
Эти 30 страниц ошибок выходят за рамки одной, двух или всех трех предыдущих категорий. Вот наш список, если вам нужно вдохновение:
Spotify использует простую анимацию со своим проигрывателем, добавляя как соответствующий визуальный элемент, так и уникальный элемент дизайна. Подобно звуку царапины записи, который указывает на то, что что-то не работает, анимированная запись перестает вращаться через несколько секунд. В тексте также упоминается подпись Канье Уэста «808 and Heartbreak», которая остается в тренде с некоторыми из самых громких музыкальных произведений.
Говоря об иконках, эта популярная игрушка имеет «культовую» страницу 404. Тон радостный, полезный и не разочаровывающий. Похоже, вы можете просто поговорить со своим дружелюбным сотрудником службы поддержки LEGO и решить свои проблемы! Он отлично вписывается в общую идею бренда и творческую маркетинговую стратегию компании. Традиционный веб-сайт LEGO также может похвастаться довольно забавной страницей с ошибкой 404.
Ой, ДашЭто, ты точно знаешь, как доставить удовольствие фандому «Властелин колец» .Эта страница 404 заставляет наши ботанические сердца улыбаться и смеяться над неудобствами. Он такой умный и подробный, что даже вершина горы (404) Doom достигает 404 по оси y. Он не воспринимает себя так серьезно, как Сообщество, и прекрасно сочетает текст с умным дизайном.
Конечно, в этом списке есть и другие 404-е, связанные с фэндомом! GitHub превращает одну из самых культовых фраз кино в умную страницу 404. А если вы понятия не имеете, кто такой Оби Ван Кеноби, или вы не фанат Звездных войн ? Тогда «это не та веб-страница, которую вы ищете.”
Говоря о знаменитых строках, оставьте это в базе данных Интернет-фильмов (IMDb), чтобы получить одну из лучших возможных страниц 404. Это может быть простая установка, но в ней есть цитата из фильма о том, что что-то теряется, пытается что-то найти или буквально говорит об Интернете. Мы не можем себе представить, сколько времени потребовалось, чтобы найти все эти варианты, но мы, безусловно, ценим творческий подход.
НАСА 404 — это именно то, что вы ожидаете от НАСА; это относительно беззаботно, если вы поклонник космического юмора, а также отлично сочетается с тоном и брендом организации.Это простое напоминание о том, что в галактике есть более серьезные проблемы, кроме потерянной веб-страницы.
Эта страница 404 от французского разработчика Ромена Брайзера — один из лучших примеров геймификации, которые мы когда-либо видели. Ух ты. Если вы задержитесь на странице слишком долго, вы рискуете принести в жертву 404 лемминга … если только вы не будете достаточно опытны, чтобы спасти их с помощью крошечных желтых парашютов.
Imgur не воспринимает себя слишком серьезно, учитывая, что это одна из постоянных столиц гиф и мемов в Интернете.Эта страница с ошибкой воспроизводит глупость Скуби-Ду с блуждающими глазами животных на картинах, наблюдающих за вашим курсором. Это забавная простая анимация, которая добавляет на страницу что-то особенное.
Французская компания Videotron открыла еще одну универсальную истину: с единорогами никогда не ошибетесь. Иногда эксцентричный и нерелевантный текст срабатывает, если он помогает поднять настроение. Это один из таких случаев.
Образовательная и остроумная, эта страница 404 визуально соответствует тому, что вы ожидаете от NPR.Однако настоящий сюрприз — это если погрузиться в неожиданный юмор копии. Этот легкий шутливый тон относительно «серьезных» новостных агентств — это освежающее изменение темпа.
Конечно, 404 Amazon может быть визуально несколько прост, но Amazon делает то, что умеет лучше всего, и дает публике то, что они хотят. И они компенсируют неудобство попадания в 404-ю щенками. Действительно, очень милые щенки. Серьезно, если вы обновите 404, вы получите больше щенков. Все эти 404 щенка принадлежат сотрудникам Amazon и имеют дополнительные (и очаровательные) их дескрипторы.
Снова со щенками. Это то, что заставляет нас улыбаться, когда страница 404 заставляет нас хмуриться. И так же, как пост щенка Amazon, Huffington Post дарит вам нового счастливого щенка с каждым обновлением.
Интернет-магазин винтажной одежды использует «винтажную» копию и поддерживает классическую и беззаботную атмосферу, которая отражена во всем веб-сайте. Простой текстовый дизайн также побуждает читателей проверить рекомендованное платье или особый предмет дальше по странице.
Страница с ошибкой 404 австралийца не боится быть слегка политизированной.Новостное агентство умело реконструировало их ошибку 404, чтобы она звучала как цитата неуклюжего политика. Каждый раз, когда вы заходите на страницу, вам обещают новую смешную цитату.
Это одна из самых креативных групп в кино. Конечно, их страница 404 частично отражает это творчество. А благодаря множеству персонажей на выбор, Pixar может использовать любого персонажа, которого они хотят, чтобы стать лицом своего 404. Использование Sadness из Inside Out кажется идеальным сочетанием.
Umbro использует умный вид, чтобы сказать «что-то сломалось» не словами, а дизайном.
На блестящей странице ошибок Distilled используется текст и простой дизайн, чтобы рассмешить пользователей. Надменный тон письма — не то, что вы ожидаете, и именно это делает эту страницу такой эффективной. Кроме того, бонусные баллы за тонкое включение логотипа Distilled, выходящего из трубы.
Геймификация страниц 404 — это умный способ удержать людей на вашем сайте. Куало не только предлагает версию Galaga (или Space Invaders или Galaxian), но и дает скидочный код тем, кто достигает определенных пороговых значений.(И это одна из самых захватывающих и простых игр, с которыми мы сталкивались за очень долгое время.)
404 Ошибки похожи на неожиданных монстров для пользовательского опыта. MailChimp воспользовался этим чувством беспокойства со своей страницей 404, на которой изображено зомбированное воплощение их фирменного шимпанзе. Анимация катящегося тумана — приятный штрих.
Как и MailChimp, G2 Crowd включает в сообщение об ошибке фирменный знак компании. Это милый, простой и отличный способ неожиданно включить повествование и буквальный характер в ресурс веб-сайта.
Страница 404 афиши сохраняет культовый дизайн брошюр, сохраняя при этом весьма театральный тон, пронизывающий их брендинг.
Простая демонстрация того, как даже стоковые фотографии можно использовать для украшения страницы 404. Вместо того, чтобы иметь отдельное изображение позади или рядом с копией, изображение становится копией. Это доказывает, что внешний вид всего доступен — даже то, как ваши посетители видят числа.
Иногда вам кажется, что ваша просьба потерялась в водовороте 404, и это чувство именно то, что Хьюго Уэр воплотил в жизнь на этой странице.В анимации нет ничего сложного, но идея настолько проста, что заставляет посетителей хихикать, а также заставляет их сказать: «Эй, это круто».
Миньоны могут быть одними из самых «черных» персонажей последних фильмов, но они определенно привлекают внимание. И не нужно много воображения, чтобы придумать историю о том, что несколько шуток миньонов в конечном итоге привели к ошибке 404.
Динозавры лишили вас шансов найти правильную веб-страницу. Это отличный визуальный ряд в сочетании с умной копией, которая отражает творческий потенциал всей франшизы.Это просто, срочно и заставляет уйти оттуда как можно быстрее.
Копия проста, но читается как обратная связь директора. И в некотором смысле это именно то, для чего предназначена страница 404 — направлять посетителей веб-сайта туда, где они должны быть.
Конечно, эта страница 404 забавна, если вы не один из четырех разработчиков этой британской компании, находящихся в критическом положении. Нажав на каждое имя, вы получите более подробную информацию о разработчике и компании в целом.
Команда, создавшая чрезвычайно популярные игры Warcraft, демонстрирует впечатляющий дизайн и забавный контент, который переворачивает традиционную страницу ошибок с ног на голову. Вместо того, чтобы извиняться за проблему, группа Blizzard возложила вину на пользователя. И, учитывая, что ошибка 404 часто возникает в результате ошибки пользователя, это довольно умный вариант сценария.
Конечно, у них отличная страница с ошибкой 404. Франшиза «Звездных войн» настолько детализирована и масштабна, что имеет смысл только построить империю веб-сайтов, столь же обширную, как и ее кинематографическая империя.Это отличное сочетание дизайна, изображений и текста, объединяющего все необходимое для создания фирменного тона и сообщений. Это определенно та страница 404, которую мы ищем.
Мы не стали бы критически смотреть на 404 страницы других компаний, не обращая этого взора на себя! Мы хотели немного развлечься с нашей страницей 404, включив в нее самого озорного члена команды Солодева — Code Monkey. Он не нарушит ваш код, но он может нести ответственность за другие нарушения … Для нас это интересный способ объединить тематический текст с визуальным элементом, который можно найти в другом месте на нашем сайте.
С какими еще замечательными страницами с ошибками 404 вы сталкивались? Оставляйте ссылки на избранное в комментариях!
Нужна помощь в отслеживании событий 404? У нас есть для этого учебник! Ознакомьтесь с нашей публикацией на сайте о том, как использовать Google Analytics и Диспетчер тегов для их отслеживания и, в конечном итоге, какие уловки помогают уменьшить количество заходов посетителей в Интернет с ошибками 404 (и горе).

Comments

Leave Comment