33 классных страниц ошибки 404


Содержание

Создание правильной страницы 404 и влияние на SEO

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

Влияние ошибки 404 на SEO

Наверняка, все хотя бы раз встречали фразу «404 Not Found (ресурс не найден)» — знакомо? А увидеть ее можно из-за того, что неправильно указали адрес нужной страницы или же она отсутствует на данном сайте. Сервер таким образом сигнализирует нам о том, что не может найти нужную страницу по указанному адресу. Проверить код ответа сервера можно с помощью бесплатных сервисов, например, bertal.ru или в панели Яндекс.Вебмастера.

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

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

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

страница отсутствует (была удалена);

ссылка оказалась «битой»;

вносились изменения в структуру сайта;

произошло изменение URL’а страницы.

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

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

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

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

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

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

Дефолтные страницы 404: полезны ли они?

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

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

Даже Яндекс создал специальный пункт в «Рекомендациях для владельцев сайтов» по данному поводу и довольно подробно расписал, как правильно оформить страницу с ошибкой 404:

«Увидев страницу с ошибкой, пользователь может решить, что ваш сайт не работает, и уйти. Чтобы этого избежать, необходимо правильно оформить и разместить на сайте специальную страницу, которая внешне будет отличаться от остальных страниц вашего сайта. При оформлении такой страницы используйте различные графические приемы, подсказывающие человеку, что по запрошенному адресу ничего не существует: например, другие цвета или отсутствие графики. Разместите на странице карту сайта, ссылку на главную страницу или форму поиска, дайте инструкции по дальнейшим действиям».

Создание внешнего вида 404-й страницы

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

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

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

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

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

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

Креатив всегда поможет

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

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

Для некоторых CMS (в частности WordPress) существуют специальные плагины, способные отслеживать возникновение подобных страниц.

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

Кстати, страница ошибки 404 нашего блога выглядит следующим образом:

Вывод

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

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

80+ творчески оформленных страниц 404

Иногда посетитель сайта видит ошибку 404 потому, что веб-страницы попросту не существует – она удалена или переименована (404 Not Found – страница не найдена). Нередко случается и неправильный ввод адреса. В любом случае, никого не обрадует безликое оформление 404-й или простое сообщение об ошибке. Креативными дизайнерами создаются более полезные для пользователя, эстетически красивые индивидуальные страницы 404.

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

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

Интересно и оригинально оформленные 404 страницы

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

01. Discord App

За работой квантовый хомяк-робот из мира Discord.

02. Beach Park

Плавник акулы, он и в луже 404-й страницы захватывает внимание.

03. Toggl

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

04. Designzillas

Дизайн-зиллы сделали страшилку из своей 404 страницы. Персонаж монстра служит символом существенных результатов креативной студии. Прокрутите – увидите как вылупляется дракон.

05. Bench

Такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует?

06. Pirate Code

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

07. Weemss

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

08. Flipping Book

Может кому знакомо? В домашнем хаосе с малышом и котом, вырванные страницы становятся самолетиками.

09. Vebk

Красивая рестро страница 404 ошибки – в тонах и жанровой стилистике самого сайта.

10. De’Nastia

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

11. Slack

В странном месте бродят свинки с курицами, природа буйствует красками. Страница «Not Found» напоминает сказку.

12. Pikabu

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

13. Rabota Gk-Rte

Обратный отсчет в ожидании столкновения ракеты с землей…

14. Lyft

Страница ошибки сайта американского такси-сервиса.

15. Kick Point

Внедорожник 4×4 на странице 404

16. Madwell

Креативное агентство развело анимированный костер на 404-й странице.

17. Clockwise

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

18. Matteo Vandelli

Интерактивная анимация цифр 404 на странице с ошибкой.

19. Grainand Mortar

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

20. Rails Ware

Тематическая 404-я сайта разработчиков и дизайнеров.

21. Domenart Studio

Красиво оформленная 404-я страница российской студии дизайна.

22. Love Beets

Английская ферма выращивает овощи для салатов. Интереактивный редис под социальный шаринг на 404-й странице – это оригинально и уникально.

Страница 404 и красивая айдентика

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

23. Sketch

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

24. Puree Maison

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

25. Hungry Boys

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

26. Phive

После эксцентричного поведения при загрузке страниц, значок прелоадера на 404-ой выглядит изможденным: «Не могу согнуться, потеря 404 грамм жира…»

27. Mail Bakery

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

28. Moosend

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

30. A propos du cancer

Жанровая стилистика сайта мед. учреждения – обращение к докторам хосписа. Иллюстрации, спокойная анимация и успокаивающие тона. На странице 404 ошибки потерявшийся пациент.

31. Studio Wolf

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

32. Horton Works

В дополнение к логотипу и сам слон.

33. Pointless Corp

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

34. Nagyi Titka

Рекламный персонаж продукта крупным планом на 404-странице.

35. Panoraven

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

36. Waaffle


На странице с ошибкой персонаж сайта начинает плавиться.

37. Avocode

Страница 404 весьма недвусмысленно подчеркивает креативный нейминг (avocode от авокадо).

38. Yelp

Пес-сыщик Дарвин идет по горячим следам в ходе рассмотрения дела о пропавшей странице. Пока детектив вынюхивает и разбирается, переходим по ссылкам – элементарно, дружище. Cтраница yelp.com/404 имеет скрытый смысл (yelp – лаять).

Тематичные 404 страницы

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

39. E-co

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

Как сделать из страницы 404 что-то полезное и интересное: 30 примеров

Время чтения: 6 минут Нет времени читать? Нет времени?

Когда мы вводим на сайте неверный адрес или щелкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP – Not Found или «Ошибка 404». Мы стремимся понять, что же произошло, и скорее покинуть эту страницу.

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

Рассмотрим наиболее удачные примеры.

AliExpress

  • Автоматический редирект на главную страницу сайта через 4 секунды.

Amazon

  • Предложение перейти на главную страницу.
  • Есть ссылка на страницу «Собаки Amazon»:

Aviasales

  • Предложение перейти на главную страницу.
  • Ссылки на сервисы компании.

Blizzard

  • Уместный сарказм.
  • Возможности перейти во все разделы со страницы.

Coca-Cola

  • Возможность перейти на главную страницу.
  • Доступ к разделам компании со страницы (круглая красная кнопка в верхнем правом углу).
  • Подписка на новости компании.

Convert Monster

  • Креативное оформление – молодая красивая девушка с призывом в духе sex sells.
  • Доступ ко всем разделам сайта из футера (его видно при прокрутке вниз).
  • Изображение и призыв к действию меняется каждый раз при обновлении страницы 404:
  • Прямое указание на то, что что-то пошло не так. И извинение.
  • Предложение вернуться на главную страницу или воспользоваться техподдержкой.
Цукерберг рекомендует:  Почему Python

Evernote

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

Facebook

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

Тупичок Гоблина

  • Графическое оформление в духе компьютерных игр конца 90-ых.
  • Анимация на странице – в прорези двери справа появляются красные глаза.
  • Доступ из страницы ко всем разделам сайта.

Студия Дениса Каплунова

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

Лабиринт

  • Ссылка на акции в теле страницы.
  • Возможность воспользоваться поиском по сайту или выбрать книгу из каталога.

Студия Артемия Лебедева

  • Оригинальный сопроводительный текст.
  • Доступ к самым интересным разделам сайта студии.

Новолипецкий металлургический комбинат

  • Возможность вернуться на предыдущую страницу или перейти на главную.
  • Ссылка на географию активов завода и на его продукцию.
  • Оригинальный сопроводительный текст.
  • Доступ к каталогу товаров.
  • Возможность посмотреть все акции и спецпредложения «Озона».

Сотмаркет

  • Нетривиально оформленные ссылки на разделы каталога электроники.
  • Кликабельный логотип «Сотмаркет» для перехода на главную страницу сайта.

Texterra

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

Банк «Тинькофф»

  • Оригинальный текст со смайликом.
  • Ссылки на основные услуги банка «Тинькофф».

Викиум

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

Яндекс

  • Возможность воспользоваться поиском :-)
  • Ссылки на сервисы «Яндекса».
  • Ссылка на установку переключателя раскладки клавиатуры Punto Switcher.

  • Рекламные объявления (!) на странице 404.

Университет «Синергия»

  • Позитивная картинка со смыслом.
  • Возможность воспользоваться поиском.
  • В описании страницы предлагается способ решения проблемы.

Студия аниматоров «Кудесник»

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

«Кинопоиск»

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

Творческая мастерская «Штуки»

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

Playboy Russia

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

«Единый визовый центр»

  • Запоминающаяся картинка-мем с Grumpy Cat.
  • В описании страницы способы решения проблемы выполнены гиперссылками.
  • За присланный на почту скриншот страницы 404 обещают подарок.

Udemy

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

Pikabu

  • Скажу просто – на этой странице прекрасно ВСЁ!
  • Что за существо сидит рядом с парнем?

Pixar

  • Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить.
  • Заголовок страницы «Оооо… Не плачь». Трудно сдержаться, глядя на изображение.
  • Описание страницы написано будто от лица Радости из того же мультфильма:

«Этот всего лишь ошибка 404!

То, что ты ищешь, могло затеряться в долгосрочной памяти».

Какой не должна быть страница 404

  1. Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
  2. Внешний вид страницы
  • с нечитаемыми символами:
  • со стандартной и малоинформативной надписью:
  • дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):

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

Как оформить страницу 404 ошибки?

30.09.2020 Время прочтения: 5 минут

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

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

Почему возникают ошибки 404?

404 Page Not Found указывает, что веб-страница не найдена. Это может произойти по одной из следующих причин:

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

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

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

У Google и Яндекс есть сервисы для веб-мастеров, которые помогают находить неработающие ссылки — Google Search Console и Яндекс.Вебмастер соответственно. Вы можете воспользоваться ими бесплатно.

Почему нужен оригинальный шаблон для страниц с 404?

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

Каким должен быть дизайн страницы 404?

Создавая дизайн и прописывая код страницы 404, советуем придерживаться следующих рекомендаций:

Совет №1. Немного доброжелательности

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

Совет №2. Будьте проще

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

Совет №3. Предложите решение

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

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

Совет №4. Добавьте юмора

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

Совет №5. Позаботьтесь о функциональности

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

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

Важность для SEO

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

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

«Решите, нужно ли устранять выявленную проблему. Большинство таких случаев можно проигнорировать: они не влияют на индексирование и рейтинг сайта».


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

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

Оформление страницы с 404 ошибкой: примеры

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

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

Вопрос подбора изображений мы рассматривали в отдельной статье: «Как выбрать иллюстрации для сайта?».

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

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

404 страница: идеальное оформление + 10 примеров

Все, кто хоть раз пользовался интернетом, попадали на страницу “ошибка 404”. И наверняка, видя её у себя на экране, просто брали и уходили с этого сайта.

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

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

Почему она появляется

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

Стандартная ошибка 404

Теперь давайте определимся, почему же посетитель сайте может видеть такую ошибку. А все происходит потому что:

  1. Ссылающаяся сторона совершила ошибку при указывании информации на Вас;
  2. Пользователь неправильно ввёл ссылку;
  3. Страница (ссылка) была удалена;
  4. Страница (ссылка) была изменена.

Ещё раз, если Ваш сайт состоит из 10+ страниц, то скорее всего у Вас уже есть эта ошибка и Вы о ней просто не знаете.

И для поиска битых ссылок, как минимум, в рамках сайта можете воспользоваться бесплатной программой Xenu. Делает всё быстро и легко.

Чем грозит

Как Вы поняли, от этого не уйти. Такие коллапсы будут, если не по Вашей вине, то по вине клиентов.

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

А если Ваша страница не будет следовать дальнейшим рекомендациям, то посетители будут:

  1. Уходить с сайта;
  2. Расстраиваться, что не нашли нужную информацию;
  3. Понижать свой уровень доверия к Вам.

И всё это ведёт не просто к отсутствию дополнительных денег, а к убыткам и потерям. Что я могу представить только в плохом сне.

Как Сделать такую страницу

Если Вы задались вопросом как сделать страницу ошибки 404, то хочу Вас поздравить, она у Вас уже есть (кроме landing page).

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

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

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

И просто в любое место с новой строки вписать – ErrorDocument 404 http://ВАШ_САЙТ/404.php

Данная ссылка будет являться указанием пути к файлу, который будет показывать Ваш сайт при возникновении ошибки.

Больше ничего не надо, всё очень просто! И если вдруг не хотите расширение .php, то можете сделать .html, в глобальном смысле разницы нет.

Цеплять и продавать

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

В остальном он может преследовать разные задачи. Для этого давайте рассмотрим разные варианты и чем они хороши.

Просто и красиво

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

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

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

Ох, капитан, мы потерялись.
(404. Это не то место, где ты должен быть)
Идти домой Хлоп!
Я стесняюсь…
Извините, Вы попали на “битую” страницу
Свалить отсюда

Ссылки на основные разделы

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

При этом дизайн также важен как и в первом случае. Делайте уклон на оригинальность и юмор.

Упс!
Я стесняюсь…
Мы не можем показать страницу, которую Вы ищите.

Попробуй ещё раз/поиск

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

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

Попробуйте еще раз

Реклама продукта

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

Причём показать Ваш продукт можно даже когда он искал что-то другое. В идеале, не просто показать, но и сделать специальное предложение на него.

Пример рекламы 1 Пример рекламы 2

Интерактив

Чтобы клиент чуть больше провёл на Вашем сайте, и чуть больше повзаимодействовал с ним, можно на данной странице создать “интерактив”, с которым он может что-то поделать, потаскать, покликать, посмотреть или даже поиграть.

Интерактив игра Интерактив видео

Форма захвата

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

Поэтому чтобы его не терять, и чтобы он к вам ещё раз вернулся – нужно взять его контактные данные и добавить в свою e-mail рассылку.

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

Пример формы захвата

Это наш вариант страницы, на который Вы можете легко попасть введя in-scale.ru/любыеслова. Самое интересное, что такого рода ошибок почти нет на просторах интернета.

Поэтому рекомендую сделать акцент именно на этом, если ваш бизнес подразумевает e-mail маркетинг.

Коротко о главном

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

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

Тут и встаёт вопрос, что нужно Вашему посетителю в тот момент, когда он попал на эту страницу и как его плавно перевести на то, что хотите от него Вы.

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

Цукерберг рекомендует:  Pascal - Помогите написать браузер в лазарусе.

Спасибо!

Наш менеджер свяжется с Вами в ближайшее время!

Что-то пошло не так

Попробуйте повторить попытку

«На данный момент мы делаем ребрендинг сайта и он станет активным в ближайшее время.

Но Вам же нужно увеличение продаж уже сейчас?! Поэтому заполните форму справа и мы свяжемся с Вами для презентация услуги.»

1. Общие положения

1.1. Политика в отношении обработки персональных данных (далее — Политика) направлена на защиту прав и свобод физических лиц, персональные данные которых обрабатывает ИП Жестков Н. В. (далее — Оператор).
1.2. Политика разработана в соответствии с п. 2 ч. 1 ст. 18.1 Федерального закона от 27 июля 2006 г. № 152-ФЗ «О персональных данных» (далее — ФЗ О персональных данных»).
1.3. Политика содержит сведения, подлежащие раскрытию в соответствии с ч. 1 ст. 14 ФЗ «Оперсональных данных», и является общедоступным документом.

2. Сведения об операторе

2.1. Оператор ведет свою деятельность по адресу 664009, г. Иркутск, ул. Ядринцева, 1/9, 70.
2.2. Руководитель Жестков Никита Владимирович (телефон +7 (964) 111-8758) назначен ответственным за организацию обработки персональных данных.
2.3. База данных информации, содержащей персональные данные граждан РоссийскойФедерации, находится по адресу: mailigen.ru, in-scale.bitrix24.ru, mail.yandex.ru, in-scale.ru, vk.com, facebook.com, manychat.com.

3. Сведения об обработке персональных данных

3.1. Оператор обрабатывает персональные данные на законной и справедливой основе для выполнения возложенных законодательством функций, полномочий и обязанностей, осуществления прав и законных интересов Оператора, работников Оператора и третьих лиц.
3.2. Оператор получает персональные данные непосредственно у субъектов персональных данных.
3.3. Оператор обрабатывает персональные данные автоматизированным и не автоматизированным способами, с использованием средств вычислительной техники и без использования таких средств.
3.4. Действия по обработке персональных данных включают сбор, запись, систематизацию,накопление, хранение, уточнение (обновление, изменение), извлечение, использование,передачу (распространение, предоставление, доступ), обезличивание, блокирование,удаление и уничтожение.
3.5. Базы данных информации, содержащей персональные данные граждан РоссийскойФедерации, находятся на территории Российской Федерации.

4. Обработка персональных данных клиентов

4.1. Оператор обрабатывает персональные данные клиентов в рамках правоотношений сОператором, урегулированных частью второй Гражданского Кодекса Российской Федерацииот 26 января 1996 г. № 14-ФЗ, (далее — клиентов).
4.2. Оператор обрабатывает персональные данные клиентов в целях соблюдения норм законодательства РФ, а также с целью:
— заключать и выполнять обязательства по договорам с клиентами;
— осуществлять виды деятельности, предусмотренные учредительными документами ИПЖестков Н. В.;
— информировать о новых продуктах, специальных акциях и предложениях;
— информировать о новых статьях, видео и мероприятиях;
— выявлять потребность в продуктах;
— определять уровень удовлетворённости работы.
4.3. Оператор обрабатывает персональные данные клиентов с их согласия,предоставляемого на срок действия заключенных с ними договоров. В случаях,предусмотренных ФЗ «О персональных данных», согласие предоставляется в письменном виде. В иных случаях согласие считается полученным при заключении договора или при совершении конклюдентных действий.
4.4. Оператор обрабатывает персональные данные клиентов в течение сроков действия заключенных с ними договоров. Оператор может обрабатывать персональные данные клиентов после окончания сроков действия заключенных с ними договоров в течение срока,установленного п. 5 ч. 3 ст. 24 части первой НК РФ, ч. 1 ст. 29 ФЗ «О бухгалтерском учёте» и иными нормативными правовыми актами.
4.5. Оператор обрабатывает следующие персональные данные клиентов:
— Фамилия, имя, отчество;
— Тип, серия и номер документа, удостоверяющего личность;
— Дата выдачи документа, удостоверяющего личность, и информация о выдавшем его органе;
— Год рождения;
— Месяц рождения;
— Дата рождения;
— Место рождения;
— Адрес;
— Номер контактного телефона;
— Адрес электронной почты;
— Идентификационный номер налогоплательщика;
— Номер страхового свидетельства государственного пенсионного страхования;
— Должность;
— Фотография.
4.6. Для достижения целей обработки персональных данных и с согласия клиентов Оператор предоставляет персональные данные или поручает их обработку следующим лицам:
— менеджер по продажам
— руководитель проекта
— менеджер проекта
— маркетолог

5. Сведения об обеспечении безопасности персональных данных

5.1. Оператор назначает ответственного за организацию обработки персональных данных для выполнения обязанностей, предусмотренных ФЗ «О персональных данных» и принятыми в соответствии с ним нормативными правовыми актами.
5.2. Оператор применяет комплекс правовых, организационных и технических мер по обеспечению безопасности персональных данных для обеспечения конфиденциальности персональных данных и их защиты от неправомерных действий:
— обеспечивает неограниченный доступ к Политике, копия которой размещена по адресу нахождения Оператора, а также может быть размещена на сайте Оператора (при его наличии);
— во исполнение Политики утверждает и приводит в действие документ «Положение об обработке персональных данных» (далее — Положение) и иные локальные акты;
— производит ознакомление работников с положениями законодательства о персональных данных, а также с Политикой и Положением;
— осуществляет допуск работников к персональным данным, обрабатываемым в информационной системе Оператора, а также к их материальным носителям только для выполнения трудовых обязанностей;
— устанавливает правила доступа к персональным данным, обрабатываемым в информационной системе Оператора, а также обеспечивает регистрацию и учёт всех действий с ними;
— производит оценку вреда, который может быть причинен субъектам персональных данных в случае нарушения ФЗ «О персональных данных»;
— производит определение угроз безопасности персональных данных при их обработке в информационной системе Оператора;
— применяет организационные и технические меры и использует средства защиты информации, необходимые для достижения установленного уровня защищенностиперсональных данных;
— осуществляет обнаружение фактов несанкционированного доступа к персональным данным и принимает меры по реагированию, включая восстановление персональныхданных, модифицированных или уничтоженных вследствие несанкционированного доступак ним;
— производит оценку эффективности принимаемых мер по обеспечению безопасностиперсональных данных до ввода в эксплуатацию информационной системы Оператора;
— осуществляет внутренний контроль соответствия обработки персональных данных ФЗ «Оперсональных данных», принятым в соответствии с ним нормативным правовым актам,требованиям к защите персональных данных, Политике, Положению и иным локальнымактам, включающий контроль за принимаемыми мерами по обеспечению безопасностиперсональных данных и их уровня защищенности при обработке в информационнойсистеме Оператора.

6. Права субъектов персональных данных

6.1. Субъект персональных данных имеет право:
— на получение персональных данных, относящихся к данному субъекту, и информации,касающейся их обработки;
— на уточнение, блокирование или уничтожение его персональных данных в случае, еслиони являются неполными, устаревшими, неточными, незаконно полученными или неявляются необходимыми для заявленной цели обработки;
— на отзыв данного им согласия на обработку персональных данных;
— на защиту своих прав и законных интересов, в том числе на возмещение убытков икомпенсацию морального вреда в судебном порядке;
— на обжалование действий или бездействия Оператора в уполномоченный орган позащите прав субъектов персональных данных или в судебном порядке.
6.2. Для реализации своих прав и законных интересов субъекты персональных данныхимеют право обратиться к Оператору либо направить запрос лично или с помощьюпредставителя. Запрос должен содержать сведения, указанные в ч. 3 ст. 14 ФЗ «Оперсональных данных».

УТВЕРЖДАЮ
Н. В. Жестков
29.06.2020

Уважаемый пользователь. Любая информация, размещенная на сайте in-scale.ru, предназначена только для свободного изучения пользователями сайта. Администрация сайта прилагает все усилия для того, чтобы предоставить на этом сайте достоверную и полезную информацию, которая отвечает на вопросы пользователей сайта, но в то же время не исключает возникновения ошибок.

Ни при каких обстоятельствах Администрация Сайта in-scale.ru не несет ответственности за какой-либо прямой, непрямой, особый или иной косвенный ущерб в результате использования информации на этом сайте или на любом другом сайте, на который имеется гиперссылка с нашего cайта, возникновение зависимости, снижения продуктивности, увольнения или прерывания трудовой активности, а равно и отчисления из учебных учреждений, за любую упущенную выгоду, приостановку хозяйственной деятельности, потерю программ или данных в Ваших информационных системах или иным образом, возникшие в связи с доступом, использованием или невозможностью использования Сайта, Содержимого или какого-либо связанного интернет-сайта, или неработоспособностью, ошибкой, упущением, перебоем, дефектом, простоем в работе или задержкой в передаче, компьютерным вирусом или системным сбоем, даже если администрация будет явно поставлена в известность о возможности такого ущерба.

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

Сайт in-scale.ru — это проект, работающий без заключения каких-либо договорённостей или договоров между вами, пользователями данного сайта, администрацией, владельцами серверов, на которых он размещён, либо кем-то ещё, любым образом связанными с этим или родственными ему проектами, которые (договора) могут стать предметом прямых претензий.

Некоторые ссылки на in-scale.ru ведут к ресурсам, расположенным на сторонних сайтах. Данные ссылки размещены для удобства пользователей и не означают, что Администрация одобряет содержание других сайтов. Кроме этого, Администрация in-scale.ru не несет никакой ответственности за доступность этих ресурсов и за их контент. Это заявление относится ко всем ссылкам, представленным на in-scale.ru, и материалам всех веб-сайтов, доступных через баннеры и ссылки на веб-сайте по адресу in-scale.ru

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

In-scale.ru не гарантирует возможность приобретения или использования тех или иных товаров или услуг по ценам и/или на условиях, указываемых в рекламных блоках (текстах, баннерах).

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

Администрация сайта in-scale.ru вправе отказать в доступе к сайту любому Пользователю, или группе Пользователей без объяснения причин своих действий и предварительного уведомления.

Администрация вправе изменять либо удалять ссылки на информацию, графические, звуковые и прочие данные, размещенные Пользователями на in-scale.ru, без предварительного уведомления и объяснения причин своих действий.

Любые торговые марки, знаки и названия товаров, служб и организаций, права на дизайн, авторские и смежные права, которые упоминаются, используются или цитируются на страницах in-scale.ru, принадлежат их законным владельцам и их использование здесь не дает вам право на любое другое использование. Если не указано иное, страницы in-scale.ru никак не связаны с правообладателями, и никто, кроме правообладателя, не может распоряжаться правами на использование материалов, защищенных авторским правом. Вы несете ответственность за использование этих и подобных материалов.

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

Бездействие со стороны Администрации в случае нарушения Пользователем либо группой Пользователей пользовательского соглашения не лишает Администрации права предпринять соответствующие действия в защиту интересов in-scale.ru позднее.

Все права на материалы, находящиеся на in-scale.ru, охраняются в соответствии с законодательством ЕС и РФ, в том числе, об авторском праве и смежных правах.

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

Все высказывания и примеры на сайте in-scale.ru по поводу увеличения, получения доходов, прибылей или/и результатов, уже размещенные или которые будут размещены на ресурсе, — всего лишь предположения по поводу предстоящих или текущих заработков, доходов, результатов поэтому не являются гарантией их получения. Если предположительное Вы считаете гарантированными, то также берете на себя все риски по их неполучению.

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

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

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

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

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

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

Данный документ гласит о том, что вы даете свое согласие на то, что ИП “Жестков Н.В.”, команда ресурса in-scale и сам сайт in-scale.ru не несёт ответственность за ошибочно принятые Вами решения по поводу доходов, прибылей, способов ведения бизнеса, продукции тренинг-центра, предоставляемых услуг или других материалов, что размещаются на данном сайте: текстовой, аудио и видео информации.

Заполняя форму подписки на сайте in-scale.ru, Вы соглашаетесь с политикой конфиденциальности проекта, а также с другими положениями:

1. Подписчик дает бессрочное согласие на обработку всех персональных данных, предоставленных на домене in-scale.ru

2. Подписчик не возражает против получения e-mail, смс уведомлений информационного и рекламного характера о предстоящих акциях, изменениях на проекте, иных событиях с домена in-scale.ru или от сообществ vk.com/in_scale, facebook.com/inscalerus

3. Подписчик может отписаться от информационной рассылки проекта In-scale в любое время по своему желанию при помощи специальной гиперссылки, а также обратившись в службу поддержки по адресу info@in-scale.ru и попросив удалить его контакты адрес из нашей подписной базы.

После получения администрацией сайта in-scale.ru такой просьбы, e-mail адрес или аккаунт в социальных сетях будет удален из базы в течение 72 часов, кроме выходных и праздничных дней.

ИП “Жестков Н.В” гарантирует полный возврат средств за приобретенный цифровой продукт по первому требованию клиента.

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

Для того, чтобы запросить возврат денежных средств за определенный продукт обратитесь на info@in-scale.ru . Все заявки рассматриваются в течении 72 часов, кроме выходных и праздничных дней.

Возврат денежных средств осуществляется путём перевода необходимой суммы на один из электронных кошельков (WebMoney, Яндекс.Деньги), либо на карту VISA/MASTERCARD в пределах России. Длительность транзакции – от 1 до 5-х банковских дней после отправки денег.

404 ошибка – подборка красивых страниц, советы по улучшению

«Ошибка 404 или Not Found (не найдено) – стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу» – определение из Википедии.

404 ошибка — самая часто встречаемая на просторах интернета. А что же означают эти до боли знакомые всем цифры? Первая цифра ­4 указывает на ошибку со стороны клиента, например, плохое соединение или неверно введенный адрес в строку поиска. Другие два числа обозначают конкретную категорию ошибок, которая включает такие статусы, как Conflict, Precondition Failed, Bad Request и другие статусы четвертого класса. Возникновение данной ошибки имеет несколько причин:

  • плохое соединение;
  • ссылка, ведущая на адрес, устарела или была удалена;
  • страницу перенесли на новый адрес;
  • опечатка при вводе адреса сайта.

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

Стандартную страницу с этой ошибкой знают все, выглядит она достаточно устрашающе:

К сожалению, не все посетители знают, из-за чего происходит эта ошибка и первая мысль при появлении этого окна будет: а что мне делать дальше? Я все сломал? Уйду отсюда подобру-поздорову. Даже опытного пользователя это окно может смутить или отпугнуть.

Как удержать посетителя?

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

Существует несколько способов вернуть доверие:

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

Цукерберг рекомендует:  Вакансии Harbor Crew

Объясните, что произошло. Не обязательно подробно расписывать о происхождении ошибки, составлять длиннющие инструкции. Достаточно обойтись одной или несколькими фразами. Слово «ОШИБКА» совсем необязательное, зачастую лишь больше вгоняет в ступор. Если сайт носит развлекательный характер, можно юморнуть и покреативить. Заставьте улыбнуться гостя, тогда он охотнее вернется на главную страницу. Но обойдемся без юмора ниже пояса и обидных шуточек, давайте уважать наших пользователей.

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

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

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

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

Как у нас

Наша страница с ошибкой 404 выглядит так:

Полностью весь внешний вид оставили в том же стиле, что и сам сайт. Не трогали верхнее меню и подвал, чтобы никого не шокировать резкими переходами. Для удобства вставили ссылки на самые популярные услуги (для клиентов) и основные разделы блога (для просто интересующихся). Обязательно добавили ссылку на главную страницу 1PS и призыв к действию «Напишите нам», чтобы уж точно никто не затерялся. Но! Учтя все технические вопросы, мы забыли про креатив. Уже работаем над этим. В скором будущем и мы обзаведемся привлекательной и забавной страничкой.

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

Урок 55 Создание 404 страницы

Добрый день всем, сегодня на очереди 404 страница. 404 страница – это страница, которая открывается тогда, когда пользователь переходит по не существующему адресу (URL). Я уверен, Вы ее часто встречали. Приведу Вам пример 404 страницы моего блога:

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

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

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

404 страница нужно обязательно! Она позволит удержать посетителя Вашего блога. Обычно те, кто видят стандартную 404 страницу ошибки, просто уходят с блога (а что еще делать, если перед их глазами какая-то непонятная надпись “Error 404. Page not found”).

  1. В шаблоне демонстрируемого блога (напомню, он имеет адрес FanBar.ru) не оказалась той самой заветной страницы. Если у Вас также ее нет, просто создаем страницу под названием 404.php в теме блога, а у кого она есть, откройте данный файл:
  2. После открытия файла добавьте на первую строчку следующее (если у Вас эта строчка уже есть, то не нужно):

А в конце (последняя строчка) добавьте следующий код:

Откройте файл page.php и исходя из него поставьте примерно в то же место код:

Так как у каждого пользователя свой шаблон WordPress, я не могу рассказать Вам как точно сделать дизайн 404 страницы для Вашего блога. Ориентируйтесь на файл page.php, используйте FireBug, ознакомьтесь с языком CSS, экспериментируйте.

Готовая 404 страница.

Приведу пример 404.php блога FanBar.ru. Я в нее добавил все необходимые комментарии, чтобы объяснить Вам какой код что делает, чтобы облегчить Вам процесс создания 404 страницы ошибки. Эту страницу Вы можете скачать тут (просто разархивируйте архив), а кому лень скачивать, смотрите код ниже:

В принципе, все. Будут вопросы – пишите в комментариях. И не забывайте завтра — воскресенье, бесплатная видеоконференция со мной. Участвуйте все!

Следующий урок: Урок 56 Плагин Tweetmeme: выводим кнопку retweet на блоге.

18 гениальных страниц ошибки 404

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

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

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

20 отличных примеров страниц 404 со всей сети

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

Kualo

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

The Australian

Кому еще высмеивать политиков, как не газете! «The Australian» сделала редизайн своей страницы 404 — их каламбуры остроумно обыгрывают выступления, цитаты и промахи политических деятелей, метко и находчиво объясняя причину страницы ошибки.

Dan Woodger

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

Bret Victor

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

Bit.ly

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

Blizzard Entertainment

Битое стекло = битая ссылка, логично, правда? Обвинять пользователя — наверное, не лучший стиль для подписи, но Blizzard Entertainment может себе это позволить. Это хороший пример того, как простая картинка отлично работает в паре с простым текстом.

Magnt

Ну раз уж на то пошло, посмотрите на Magnt — они подошли к своей странице 404 ошибки очень обдуманно. Пользователи не могут не оценить, насколько она классная и остроумная. Диаграмма Венна показывает две причины, по которым вы могли оказаться на этой странице: «мы что-то сломали» и «вы не умеете печатать». Более того, они еще и добавили текст с загадкой, над которой вы еще долго будете думать, не торопясь переходить на другие страницы.

CSS- Tricks

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

Kwarter

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

Blue Fountain Media

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

EmailCenterUk.com

А это вообще блеск! Попадая на эту страницу 404, вы получаете выбор уволить кого-то из отдела разработки одним кликом мышки. Ясно, что это часть их шутки «для своих», но какой классный способ вовлечь пользователей! Интересно, что будет, если кого-то выбрать…

Amazon

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

DashThis

DashThis знает свою целевую аудиторию, и конечно же знает, что все поймут отсылку к «Властелину колец». От этой страницы 404 прямо холодок по спине… слава богу, что это все шутка — и, к слову, очень остроумная! Подробный график в виде горы Ородруин — удачный дизайн и отличный текст.

Huffington Post

Интернет-издание «Huffington post» пошло по неформальному пути, по максимуму использовав всю силу милых пёсиков, против которой просто невозможно устоять. Ну разве можно не улыбнуться, глядя на картинку с этой милой мордахой и простой подписью? С таким комбо не прогадаешь.

Когда движущей силой твоего бренда становится юмор, нужно удивлять пользователей еще большей порцией юмора. Раньше на странице ошибки 9gag была гифка из «Криминального чтива» с Джоном Траволтой, который в растерянности бродил вокруг, а под гифкой текст: «Здесь ничего нет». Теперь у них на странице какой-то новый мем, который я не могу расшифровать — может, получится у вас.

Daily UI

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

Team Coco

Сайт Конана О’Браена не разочаровывает никогда. Сменяющие друг друга серии гифок показывают лучшие моменты с Энди, так что их страница 404 — настоящая удача. И конечно, вам стоит посмотреть на нее в действии

Distilled

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

Подведем итоги: что нужно для классной страницы 404 ошибки?

1. Остроумный, непринужденный текст

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

2. Правильная графика, точно передающая идею

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

3. Безупречный дизайн

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

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

Почему любому сайту нужна страница 404

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

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

Зачем нужна страница 404

Приемы создания страницы 404: о чем стоит помнить

Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.

У Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.

33 классных страниц ошибки 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-е ошибки зарубежных сайтов

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
18 сентября 2010