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


23.08.2019 Facebook Twitter LinkedIn Google+ Советы художника


Содержание

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

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

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

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

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

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

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

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

  1. Будьте любезны с посетителями.Они попали на эту страницу не по своей вине. Постарайтесь выразить свое сожаление и готовность помочь.
  2. Не углубляйтесь в технические детали. Термин «ошибка 404» сам по себе уже в достаточной мере техничен и в то же время понятен большинству пользователей. Нет никакой необходимости отпугивать посетителей любой другой специфической информацией о причинах этой ошибки. По сути, необязательно даже использовать цифры «404», достаточно просто объяснить суть проблемы.
  3. Предложите пользователям проверить написание ссылки. Если они вводили адрес ссылки самостоятельно, то вполне вероятно могли допустить ошибку.
  4. Придерживайтесь единого стиля сайта. Дизайн страницы 404 по оформлению и по ощущениям должен быть выдержан в стиле Вашего бренда, чтобы у пользователей не возникло заблуждения, что они попали на какой-то другой сайт.
  5. Страница ошибки 404 не должна выглядеть как обычная страница. Ваши посетители должны ясно видеть, что страница не была найдена и не содержит какого-либо контента. Поэтому не стоит наполнять ее слишком большим количеством текста и ссылок.
  6. Небольшая порция юмора никогда не помешает. Довольно часто 404 страница становится для дизайнеров и разработчиков платформой для выражения своих креативных и юмористических идей. Вместо того чтобы пользователи быстро закрывали ненайденную страницу, лучше удержать их от закрытия сайта, заинтересовав забавно и изобретательно выполненной страницей.
  7. Будьте полезными и предоставьте ссылки на возможные совпадения. Если пользователи оказались на ненайденной странице, они, вероятно, что-то искали. Так помогите же им это найти. Разместите на странице меню или ссылки на недавно перемещенные страницы. Или почему бы не дать ссылки на самые популярные страницы Вашего сайта? Либо на самый новый и актуальный контент. Так или иначе, пользователи должны быть не более чем в одном клике от перехода на какую-либо другую страницу сайта. И, конечно же, всегда давайте ссылку на главную страницу.
  8. Добавьте строку поиска. Чтобы не потерять своих посетителей, позвольте им найти то, что они искали, оказавшись на странице ошибки.
  9. Обеспечьте способ отправить отчет об ошибке. У пользователя всегда должна быть возможность отправить вам сообщение об ошибке, если он пожелает. Это поможет Вам узнать о каких-либо внутренних недочетах сайта. Еще лучшим решением для отслеживания проблем на сайте станет автоматическое уведомление. А если произойдет внезапный всплеск 404-х ошибок, полезным будет мгновенное уведомление. Это позволит исправить проблему в режиме реального времени, пока она еще релевантна.
  10. Позаботьтесь о вопросах 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.

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

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

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

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

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

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

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

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

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

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

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

  1. "Физическое" создание 404 страницы.
  2. Прописываем правило в файле .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 для сайта обязательно вам понадобиться, чтобы показать ее пользователю, когда тот:

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

В любом случае страница 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 страницы

  1. Скажите “Нет!” технической информации!
  2. Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
  3. Предоставьте полезный контент!

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

Это можно реализовать разными методами:

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

В оформлении 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

Comments

Отправить ответ

avatar
  Подписаться  
Уведомление о