404 страницы – 404 ошибка (not found) — какой должна быть идеальная страница ошибки и как ее создать средствами CMS или через файл htaccess

23.08.2019 Советы художника

Содержание

Идеальная страница 404 ошибки, или как удержать пользователя на сайте? / Хабр

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

В качестве вступления отметим, что страница 404 «Не найдено» (404 Page Not Found) – это один из кодов состояния HTTP, принятых Консорциумом Всемирной паутины (W3C) в 1992 году. Для тех, кому интересно значение цифр 404, вкратце расскажем.

Первая «4» означает, что произошла ошибка со стороны клиента. Такой ошибкой может быть неверно написанный URL или запрос несуществующей страницы. В свою очередь, первая «5» значила бы ошибку со стороны сервера.
Цифры «04» — определяют конкретную ошибку Not Found из группы 4хх. Среди других ошибок из этой группы — 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden и так далее.

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

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

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

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

удобный для пользователя дизайн, чтобы не отпугнуть его и удержать на сайте;

полезный контент, который бы предоставил пользователю ответ на вопрос «что мне теперь делать?» и дал простые и ясные инструкции;
принятие во внимание вопросов SEO.

Принимая это во внимание, приведем список рекомендаций по созданию кастомной 404-й страницы.

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

Придерживайтесь единого стиля сайта. Дизайн страницы 404 по оформлению и по ощущениям должен быть выдержан в стиле Вашего бренда, чтобы у пользователей не возникло заблуждения, что они попали на какой-то другой сайт.
Страница ошибки 404 не должна выглядеть как обычная страница. Ваши посетители должны ясно видеть, что страница не была найдена и не содержит какого-либо контента. Поэтому не стоит наполнять ее слишком большим количеством текста и ссылок.
Небольшая порция юмора никогда не помешает. Довольно часто 404 страница становится для дизайнеров и разработчиков платформой для выражения своих креативных и юмористических идей. Вместо того чтобы пользователи быстро закрывали ненайденную страницу, лучше удержать их от закрытия сайта, заинтересовав забавно и изобретательно выполненной страницей.
Будьте полезными и предоставьте ссылки на возможные совпадения. Если пользователи оказались на ненайденной странице, они, вероятно, что-то искали. Так помогите же им это найти. Разместите на странице меню или ссылки на недавно перемещенные страницы. Или почему бы не дать ссылки на самые популярные страницы Вашего сайта? Либо на самый новый и актуальный контент. Так или иначе, пользователи должны быть не более чем в одном клике от перехода на какую-либо другую страницу сайта. И, конечно же, всегда давайте ссылку на главную страницу.

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

Позаботьтесь о вопросах SEO. Для оптимизации сайта важно максимально сократить количество внутренних ссылок на 404-е страницы, а еще лучше вовсе исключить возможность формирования некорректных URL адресов, ведущих на страницы 404. Инструменты для вебмастеров помогут Вам отслеживать ошибки на сайте, в том числе и ошибки с кодом 404 Not found. Более того, эти инструменты помогут Вам понять, откуда берутся ошибки и как они формируются – ошибка в URL ссылки на сайте, либо это атака конкурентов.
Немного отклоняясь от оригинала статьи, добавлю ссылки и скриншоты инструментов, о которых говорится в этом пункте.
Google:
Яндекс:

Также рекомендую ознакомиться с официальной информацией о страницах 404 от поисковых систем: Google — здесь и Яндекс —
здесь.

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

habr.com

Страница 404 — что такое и как создать страницу ошибки 404

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

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

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

План статьи будет такой:

Что такое страница 404.
Как создать страницу 404.
Как создать страницу 404 в phpBB.

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

Мы знаем, что любой сайт находится на сервере хостера, когда пользователь набирает адрес вашего сайта в адресной строке браузера, браузер отправляет запрос серверу «показать страницу, которая содержит этот адрес», сервер, получая такой запрос, находит требуемую страницу и отвечает на запрос, передавая содержимое страницы браузеру (я упростила процесс передачи информации, выкинув из него несколько звеньев, т.к. суть сейчас не в этом). Передавая найденную страницу сервер дает ответ: «Да, такая страница существует». Но так словами объясняемся мы, люди, на языке машин любой ответ сервера называется «код состояния» и имеет числовое значение из 3 цифр, а данный ответ имеет числовое значение – 200. Т.е. каждая страница в интернете, которая разрешена для просмотра пользователями через браузер, существует на сервере и доступна в данный момент отдает код 200 OK.

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

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

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

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

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

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

Создание страницы можно разделить на 2 этапа.

«Физическое» создание 404 страницы.
Прописываем правило в файле .htaccess.

Физическое создание страницы 404

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

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

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

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

Правило в файле .htaccess

В корневой папке сайта должен быть служебный файл .htaccess, если его ещё нет (если вы только создаете свой сайт и он ещё не работает), то вы должны обязательно его создать, т.к. он обязательно вам потребуется и для других правил, в частности для указания, как поисковый робот должен индексировать ваш сайт с или без www. Я не буду подробно останавливаться на этом файле, это самостоятельная отдельная тема.

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

ErrorDocument 404 /404.html

Соответственно, если вы создаете страницу с расширением .php, то правило должно быть таким:

ErrorDocument 404 /404.php

Как видите, ничего сложно в этом нет.

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

Теперь о том, как создать страницу 404 в стиле форума phpBB.

Создание страницы 404 в phpBB

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

Я решила вас не томить, и сразу выложить готовые файлы, которые делала для себя. Вот ссылка на архив. В нем 2 файла.

Первый файл 404.php сохраняем в корневой папке форума.

Второй файл 404_body.html сначала правим под себя, прописываем заголовок страницы и текст сообщения на свое усмотрение, затем сохраняем в папке со стилем, который вы используете — от корня сайта styles/my_style/template/.

Далее открываем файл language/ru/common.php, не помню почему именно так, но после строки:

‘SUBMIT’ => ‘Отправить’,

вставляем строчку:

‘404’ => ‘404 Страницы не существует’,

Далее открываем файл .htaccess и вставляем строчку:

ErrorDocument 404 /404.php

Т.к. на форуме я использую мод SEO Ultimate SEO URL (этот мод создает специальный .htaccess), правило у меня идет сразу после строки:

# HTTP authentication and it does not already work.

На этом страница 404 для форума phpBB готова. Можете ввести какую-нибудь абракадабру после имени домена, вас перекинет на 404 страницу.

Как оказалось на практике, все очень просто и быстро.

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

На этом все. Удачи.

amateurblogger.ru

Лучшие 404 страницы Рунета / Веб-дизайн / OakHill

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

^{Страница 404 на сайте Creative People}

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

И да, в профессиональной среде, специально оформленная страница 404 ошибки является хорошим тоном.

^{Знаменитая страница 404 с мозгошмыгой на Хабре (доступна зарегистрированным пользователям)}

^{404 метровая глубина с айсбергом на сайте Штокмановского месторождения}

^{Страница 404 на сайте Турбомилка}

^{Страница 404 на сайте веб-студии Zanami}

^{Страница 404 на сайте Центра информационной безопасности с «Лебединым озером»}

^{Эпическая 404 страница с молдавскими гастарбайтерами}

^{Облако тегов в виде цифр 404 на сайте БФМ}

^{На сайте Олега Чулакова похожий принцип, только вместо тегов превью работ}

^{У Икеи на странице 404 просто безвыходное положение}

^{У Евросети фирменная собачка}

^{Страница 404 на сайте дизайнера Сергея Мосякина}

^{У дизайнера Евгения Филатова удобная настроечная таблица на 404 странице}

^{Традиционный русский квест на сайте студии «Парадокс Бокс»}

^{Неопознанный персонаж на сайте дизайн-бюро «Щука»}

^{Страница 404 студии «Джаст би найс» с арканоидом на HTML5}

^{У Елены Клубничкиной фотоаппарат}

^{Не дорисованная страница 404 на сайте студии «Банг! Банг!»}

^{404 страница студии «Пиксель»}

^{404 страница сайта Agita.net.ru}

^{404 страница сайта студии «Баллистика»}

^{На сайте Александра Булгакова какая-то девушка ест страницы. На данный момент выжила только главная}

^{Кто-то недовольный на странице 404 сайта интернет-журнала}

^{Страница 404 на сайте Александра Прокудина, которая приносит деньги}

oakhill.ru

дизайн и текст для 404 страницы

Отдайте свои заботы о хорошем контенте на сайте в наши руки

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

Подпишись на рассылку и получи книгу в подарок!

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

Причины 404 ошибки
Красивая страница 404 для сайта обязательно вам понадобиться, чтобы показать ее пользователю, когда тот:
Перейдет по неправильной ссылке, которая содержит синтаксическую ошибку или просто опечатку.
Попадет на страницу, которая в данный момент не существует. Это означает, что данные могли перенести или вовсе удалить. Также можно предположить, что данной страницы (а значит и ссылки) вообще не существовало.
В любом случае страница 404 ошибки уведовляет пользователя о том, что страничка, которую он намеревался посмотреть, не найдена.
Как сделать 404 страницу?
В первую очередь следует разобраться с тем, как формируется страница 404 для сайта. На самом деле это такая же страница, как и любая другая на вашем веб-проекте.
Если вы используете какую-то CMS, то вам нужно знать структуру файлов и страницу, которая отображается при отработке 404 кода ошибки. Если ваш сайт не на движке, то вас спасет системный файл .htaccess, который располагается в корневой папке вашего сайта. В случае если он отсутствует, создайте его сами.
Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:
ErrorDocument 404 //semantica.in/404.php
Всё довольно просто!
Страница 404 для сайта: общие рекомендации
Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте.
В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu’s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:
если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
если страницы уже не существует — просто удаляем ссылку.

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

Оформление 404 страницы
По-умолчанию страница 404 ошибки представлена в виде пустой страницы с надписью 404 Not Found, также возможна ситуация с редиректом на страницу хостинга, услугами которого вы пользуетесь.
Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде — они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно — потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?
Текст для 404 страницы
Скажите “Нет!” технической информации!
Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
Предоставьте полезный контент!
Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.
Это можно реализовать разными методами:
разместить меню сайта. Не стоит забывать о ссылке на главную страницу сайта
разместить полезные ссылки- это может ссылки на популярный или новый контент.
Разместить строку поиска по сайту- для того чтобы пользователи нашли то что они искали.
В оформлении 404 страницы важно не переусердствовать — не стоит слишком нагружать ее контентом.
Дизайн страницы 404
Визуальное оформление 404 страницы не должно выбиваться из общего дизайна.
Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора — это привлекает и удерживает посетителей.
В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько:

Не стоит забывать!
1. Редирект на 404 страницу должен осуществляться без изменения URL страницы.
2. Следите за битыми ссылками на вашем сайте!
В совокупности выполнение этих рекомендаций даст положительный эффект. Не рассматривайте 404 страницу как техническую константу сайта и даже в сложившейся неприятной ситуации она послужит важном инструментом в привлечении посетителей.

И напоследок вот вам пример того, как мы оформили страницу 404 для своего сайта:
semantica.in
50 прикольных страниц ошибки 404
Хорошая страница ошибки 404 может быть также важна для сайта как и его содержание. С помощью такой страницы вы сможете направить посетителя к нужной вам домашней странице сайта.
Если на вашем сайте или блоге нет такой страницы, возможно вам стоит задуматься о её создании. А для вашего вдохновения тут собрано 50 прикольных и необычных примеров страниц ошибки 404.
Другие примеры таких страниц вы сможете увидеть в ранее опубликованных подборках Эффективные страницы ошибки 404 и Ошибки 404 — часть вторая.
Сайт Propeller
Иллюстрированная страница ошибки 404 на B3ta
Страница ошибки 404 Cuoma
Забавная страница ошибки 404 на Tinsanity
Сайт latelategifts
Муха на странице ошибки сайта 24-4 Media
Разорванная бумага на CssTricks
Иллюстрации акул на Renkoo
Плачущий ребенок на iFolderLinks
Мусорная корзина на странице ошибки 404 TurboMilk
Страница ошибки 404 на Zivity
Такая страница ошибки на сайте Soocial
Разноцветные кубики на rush68
Страница ошибки на Ook
Забавный котенок на Github
Так изобразили ошибку на сайте RetardZone
Надпись на футболке на Planetgeek
Кривляющийся мужчина на PatternTap
Простая и забавная страница ошибки 404 на Studentmarket
Иллюстрация на странице ошибки 404 на BrightKite
Страница ошибки 404 на сайте ClearSpring
Иллюстрация девушки на Erotica Challenge
Грустная мордашка на kidmondo
Смешная страница ошибки сайта Funned
Необычная страница ошибки 404 на nickciske
Страница ошибки в стиле ретро на сайте Lileks
Сайт lightpostcreative и его страница ошибки
Стройка на странице ошибки сайта tele2
Яркая страница ошибки 404 на DDZ
Кот в компьютере на Catswhocode
Космос на странице ошибки Abduzeedo
Разыскивается странница на сайте Limpfish
Стильная иллюстрация на Ferdaze
И на Expansion Broadcast иллюстрированная страница ошибки
Художественная страница ошибки сайта Chrisglass
Страница ошибки на Fuelly
Облака на Zanami
Страница ошибки на Southpark Studios
Страница ошибки сайта Geeksquad
Милый котенок на Centerd
Марио на странице ошибки сайта Dawdle
Смешной монстр на Cartoon Network
Птерозавры на странице ошибки Amorphia Apparel
Такая страница ошибки на Mozilla
Ещё один забавный пример страницы ошибки 404 Jotsai
Смешная страница ошибки на The Brand Surgery
Страница ошибки Mmo Game Zone
На странице ошибки сайта Acorn Creative разместили носок
Автор – hongkiat
Перевод — Дежурка

Комментарии
Оставить ответ
Похожие статьи
Случайные статьи
www.dejurka.ru
Страницы 404 / Блог компании Edison / Хабр
404 страница. Это место для пасхалок, дурачества и креатива создателей сайтов. Про 404 ошибку есть даже выступление на TED.
Первая «4» — означает, что ошибка на стороне клиента, «04» — означает конкретную ошибку «Not Found». В компании EDISON Software философски считают, что пользователь не может ошибиться, что он всегда прав, если он на сайте компании.
Кому в пятницу нечего делать или кто в поисках вдохновения — добро пожаловать под кат, там подборка лучших (и худших) 404 страниц.

Your browser does not support HTML5 video.
Начнем с самых животрепещущих сайтов, а потом перейдем к «попсовым».
Роскомнадзор

PornHub

Старая версия 404 Хабра

Новая версия 404 Хабра

Virgin.com

Google

YouTube

Facebook

Reddit.com

Amazon.com

Vk.com

Linkedin.com

Imgur.com

Aliexpress.com

Bing.com

Stackoverflow.com

Github.com

Dropbox.com

Craigslist.org

Dribbble.com

Awwwards.com

Csswinner.com

Coolhunting.com

Codyhouse.co

Mailchimp.com

Slack.com

Mashable.com

Bloomberg.com

Airbnb.com

Bitly.com

МГУ, психфак

Разговаривающая страница 404.
Еще подборки

404 pages from popular sites — Design Inspiration, Muzli, 2017
Anatomy of a 404 Error Page, Envato, 2016
Лучшие 404 страницы, Tproger, 2015
404 – страницы, ради которых стоит заблудиться на сайте, cossa, 2015
Идеальная страница 404 ошибки, или как удержать пользователя на сайте?, Habrahabr, 2014
Лучшие примеры 404 страницы, seo-design, 2013
Лучшие 404 страницы Рунета, oakhill, 2012
Лучшие примеры ошибки 404, netpeak, 2012
50 прикольных страниц ошибки 404 , Дежурка, 2009
Интерактивные
Играем в Pacman
Рушим сайт
Суслик
Спасаем леммингов
Поймай кота
P.S.

Ну и напоследок
А какая ваша любимая 404 страница?
Какая 404 страница на вашем сайте?
habr.com
QA Platform Blog — Искусство ошибаться: 32 примера достойных 404 страниц
Ошибки сайта огорчают пользователей. Но не всегда. Оригинально оформленная «404 страница» может оставить приятное впечатление на пользователя, вызвать улыбку или даже развеселить.
Ошибки сайта огорчают пользователей. Но не всегда. Оригинально оформленная «404 страница» может оставить приятное впечатление на пользователя, вызвать улыбку или даже развеселить.
Какие еще плюсы может принести такой подход к оформлению ошибок?
Вот перечень большинства из них:
Обеспечивает позитивное настроение ваших пользователей
Ваш сайт становится запоминающимся
Если сделать навигационное меню – это сильно упростит поиск посетителям
Шанс показать, на что вы способны
Показывает посетителю, что вы заботитесь о нем
Производит впечатление
Дает возможность поделиться с друзьями
Мы подобрали варианты, когда разработчики сайта ответственно подошли к вопросу.
404-е ошибки отечественного производства
1. www.sombrero.su/404/
Буэнос диас! Очень креативный подход и превосходная реализация на сайте мексиканской кухни.
2. www.profflex.ru/404/
Для чего еще может пригодиться монтажная пена? Конечно, для оформления страницы ошибки.
3. www.designstudy.ru/404/
Очень тематичная иллюстрация – мазки кистей для школы дизайна. Однозначно заслуживает внимания.
4. http://habrahabr.ru/showme404/
Интерактивная солнечная система с юмором и навигацией по сайту. Хабр, как всегда, в своем стиле.
5. http://designfire.ru/404/
Такой страницы нет, как нет и её освещения – приходиться зажигать спичку. Отличный дизайн ошибки, для сайта «с огоньком».
6. http://cpeople.ru/404/
Минимализм выполненный в современном стиле. Еще одна страница в копилку интересных решений.
7. www.motocms.ru/404/
Красиво и со вкусом. Такие страницы вызывают только позитивные эмоции, несмотря на ошибку.
8. www.defa.ru/#404
Стильная страница с высокой содержательностью.
9. www.inclouds.ru/404/
Выполнено в лучших традициях современного дизайна, и что не менее важно, соблюдена общая стилистика сайта.
10. http://turbomilk.ru/404sdfwert
Просто и с юмором. Да и дизайнер поработал на пять с плюсом.
11. http://ifolderlinks.ru/404/
Креативно и остроумно. А также доходчиво и понятно.
404-е ошибки зарубежных сайтов
12. www.bluedaniel.com/404/
Это однозначно шедевр. Станция 404 выше всяких похвал.
13. www.dmcloud.net/404/
Приятная анимированная страничка, хоть и содержание ее дождливо и зябко.
14. www.ipolecat.com/404
Забрел в тупик. Очень символично для рассматриваемой нами темы.
15. http://tix02.be/en/404
Современный дизайн с элементами всеми любимого интрактива – просто прекрасно.
16. http://veerle.duoh.com/404
Красочно и необычно, как раз подходит для такого сайта. Отдельно хочу отметить исполнение навигации.
17. www.bluefountainmedia.com/404/
Вака-вака! Всеми известный PACMAN ждет вас на «ненайденной» странице.
18. http://magnt.com/404/
Элегантно и информативно. Хороший пример, как можно оформлять страницу 404.
19. http://www.titleist.com/404
Забавный вариант странички, с толпой людей ищущих мяч для гольфа.
20. http://trackmaven.com/404
Анимированная история о вырванной страничке книги. Завораживает и заставляет следить за летящими листами.
21. www.edukate.com/404
Похоже, вы сошли с курса… и одинокий корабль в ночи. Отличная задумка и ее реализация.
22. www.randco.com/404
Дизайнер постарался и на славу. Так и хочется осмотреть сайт.
23. www.fork-cms.com/404notfound
Страница канула в морскую пучину. Отличное дизайнерское решение.
24. www.fullscreen.com/404
Модное фото со стильным дизайном – можно использовать как залог успеха.
25. http://saltcitybuilds.com/404
Выполнено в лучших традициях современного дизайна, а еще не забыли анимировать навигацию.
26. http://us.blizzard.com/en-us/error.html
Создатели игр решили отличиться и поздравляют нас с поломкой сайта. Нескучно и круто.
27. http://huwshimi.com/404/
Еще одно отличное сочетание юмора и красоты исполнения. Ниндзя украл эту страницу!
28. http://molo.me/404
Забавная анимация и приятная картинка производят хорошее впечатление.
29. http://hotdot.pro/en/404/
Интерактивные завораживающие цифры не дают оторваться. Выглядит круто.
30. http://mailchimp.com/404/
Что-то есть в этой замороженной обезьяне окутанной льдом.
31. http://becherovka.com/error
Данная страница пропитана элитным алкоголем и обвораживает древностью. Очень элегантное исполнение.
32. http://hakim.se/404
Тебя не должно быть здесь. Оцените задумку – разбудите глаза.
Материал подготовил Юрков Кирилл
blog.qapl.ru