Пт, 17/02/17 – 3:54 | No Comment

Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого …

Читать статью »
CSS верстка

Оформление веб-страницы: css3 html5 приемы верстки сайтов

Дизайн

Веб-дизайн: правила создания и лучшие примеры дизайна сайтов

Wordpress

Wordpress сайту: современные и креативные, шаблоны вордпресс

Интернет-маркетинг

О маркетинге в сети Интернет и web-эффективности

Свой сайт

О создании оформления сайта, как сделать свой сайт лучше

Главная » Свой сайт

Оформляем красиво страницу 404-ой ошибки

1 Июнь 2013 Нет комментариев

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

  • Правильно писать адрес
  • Извинения за битую ссылку
  • Найдите объяснение случившемуся и важности перехода на главную / др. страницы
  • Придумайте сами )

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

Для сайта с коммерческим предложением, оформлением «ненайденной страницы» подчеркните:

  • Рациональный подход к делу и разумную стратегию
  • Заявленную креативность своих дизайнеров
  • Исключительность и особенность своего бренда
  • Подлинное качество сервисов и продуктов
  • Готовности предложить нестандартные идеи и пути их решения

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

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

пример страницы 404 с забавным описанием

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

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

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

Памятка по оформлению 404-ой страницы:

  • Поставить ссылки на главную и значимые материалы
  • Как вариант, настроить вывод 10 последних материалов
  • Связать случившуюся ошибку с вашей тематикой и общим дизайном – странице ошибки важно соответствовать веб-ресурсу / визуально быть его частью
  • 404 страница не должна выглядеть скучно, усиливая разочарование от ее посещения
  • Сделать навигацию заметной, оформление несложным, что бы пользователь мог легко охватить всю страницу взглядом
  • Добавить форму поиска по сайту

Памятка по настройке 404-ой страницы:

После создания, файл страницы (например 404.html) разместите на сервере, сконфигурировав файл .htaccess. Для случая, когда сайт на Apache вверху файла .htaccess размещаем директиву ErrorDocument 404 /404.html (файл – в корне сайта) или ErrorDocument 404 http://www.site.ru/404/ (файл – не в корне сайта)

Убедитесь, что страница не индексируется поисковиками (возвращается правильный http статус ошибки). Запретить индексацию можно в robots.txt, дописав строчку  Disallow: /404.html.

Читайте также:  Как исправить ошибку 404 (не найдено) в WordPress

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

Интересные варианты 404-й страницы

Pando

404: Page not found - определённо в этом его вина

404: Page not found — почти наверняка это он виноват

Валенки водка

404-ая страница алкогольного сайта VALENKI™ оригинально представляет свой бренд

Комплето

У маркетинговой группы «Комплето» 404-я собрана из элементов оформления главной и внутренних страниц 

Sapientnitro

Необычная страница 404 not found с красивой анимацией

У нас возникло недопонимание. Давай сначала (на главную)

Born Group

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

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

Coffeemate

404 на продающем кофейном сайте: Похоже, кто-то не выпил свой утренний кофе…

Lyft

загадочная 404 not found

Не туда свернул..? Ну мы не можем помочь со страницей. Ты искал что-то подобное?

Stugoo

Креативная ошибка 404: страницу съели космические монстры

404 страница на любителя чудовищ из space тематики… была съедена Юникроном. Трансформер: Я вас сюда заманил. Эффектная Ghost-кнопка: Никто на заманит Мегатрона!

Imaginovation 

lost in space 404 not found

Страница 404-й ошибки вида Lost in Space… Возвращайся на главную

Lander 

Тематическая 404-я страница ошибки красиво оформлена под плоский стиль сайта

Символичная страница ошибки Landing page платформы: «Наша ракета сбилась с курса»

Checkmate

404 страница с забавной детской иллюстрацией

Мультяшая страница ошибки 404: даже Дора не может найти эту страницу. Возвращаемся домой

Piccsy 

яркая 404 страница

Вы куда-то не туда забрели, но иллюстрации R. Klonek стоит посмотреть 

Master IT 

страница 404 ошибки улучшающая настроение

Дамы и Господа, Хакеры …и… роботы, а также МНОГОУВАЖАЕМЫЙ

Yougov 

404 страница не найдена

Персонаж  аналитической компании YouGov озадачен ошибкой: 404 страница не найдена

Fish Finger 

Занимательная страница 404 ошибки

Похоже вы высадились на 404-й. Не волнуйтесь за шеф-повара, гарантируем — будет жив

We Heart It 

Занимательная страница 404

Оппс! Приземление возле движущейся цели. Похоже страница сменила адрес или более не существует. Не падайте духом и возвращайтесь на сайт

Supremo

Прикольная картинка на странице с ошибкой 404

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

Quartzy

Неудачный эксперимент: ошибка 404

Эксперимент не удался — 404 страница ошибки от научно-маркетинговых исследователей