Креативные страницы 404. Как это работает

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


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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

Ошибка 404 или Not Found («не найдено») - код ответа сервера на несуществующую страницу на сайте.

Как это работает?

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

В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:

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

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

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

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

Как сделать 404 страницу?

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

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

Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:

ErrorDocument 404 //сайт/404.php

Всё довольно просто!

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

В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu"s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:

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

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

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

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

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

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

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

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

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

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

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

Дизайн страницы 404

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

Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора - это привлекает и удерживает посетителей.

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















Статьи по теме: