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

Содержание

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

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

Подпишись на Telegram

Подписаться

Ошибка 404: что это значит?

Иногда при переходе по ссылке вместо страницы сайта на экране появляется надпись: «Страница не найдена. 404 not found. Ошибка 404». Это значит, что такой веб-страницы нет или у неё поменялся адрес.

Пример страницы 404 на сайте Lenta.ru

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

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

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

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

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

Онлайн-обзор платформы Roistat

В прямом эфире расскажем, как сделать маркетинг эффективным

Подключиться

Грамотно настроенная страница 404 поможет:

1. Сохранить трафик сайта и позиции в выдаче результатов поиска. Сайт теряет трафик, если пользователи часто закрывают его из-за ошибки 404. Из-за этого поисковые системы могут понизить уровень ранжирования сайта.
2. Предложить посетителю что-то взамен неоткрывшейся страницы. Пользователь попал на неработающую страницу, когда искал конкретный контент, возможно, даже форму регистрации. Сделайте страницу 404 полезной для посетителя, предложите ему почитать о ваших ключевых продуктах, дайте ссылки на полезные статьи.
3. Вызвать доверие. Грамотно оформленная страница 404 — это возможность сохранить потенциального клиента на сайте. Извинитесь и помогите пользователю найти то, зачем он зашёл на сайт. Так посетитель с большей вероятностью останется на сайте и завершит оформление заявки или покупку.

Как создать страницу с уведомлением об ошибке 404

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

Чтобы добавить страницу на сайт:

1. Перенесите шаблон страницы ошибки 404 в корневую папку сайта.
2. Откройте файл .htaccess и пропишите код: ErrorDocument 404 http://АДРЕС_САЙТА/404.html
3. Впишите код в любую свободную строку, залейте на хостинг и проверьте: совершите ошибку в какой-нибудь ссылке, например, удалите букву. Вместо стандартного шаблона 404 должен отобразиться новый вариант. Если нет — проверьте правильность кода, возможно, была допущена ошибка.

Некоторые CMS автоматизируют процесс создания страницы об ошибке: например, в WordPress это можно сделать с помощью плагина 404page. Плагин может кастомизировать страницу на разных темах. Для его установки нужна версия WordPress от 4.0.

Как оптимизировать страницу 404 ошибки

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

Советы по созданию страницы 404:

1. Будьте доброжелательны. Расскажите посетителю, что страница удалена или произошла ошибка, помогите вернуться на основные страницы сайта.
2. Предложите посетителю проверить точность адреса или дайте ссылки на разделы, которые были недавно перемещены.
3. Дайте ссылки на продукт или статьи, релевантные поиску. Для этого нужно знать, на какую страницу пользователь пытался перейти. Это можно сделать, когда в URL указан раздел или категория.
4. Сделайте страницу полезной: дайте возможность скачать книгу или перейти на статьи в блоге, которые рассказывают о ценности продукта.
5. Не ограничивайтесь забавной картинкой. Добавьте ссылку на главную страницу сайта, блог, каталог или афишу событий компании.
6. Предложите посетить страницу с акциями, спецпредложениями.
7. Разместите строку поиска, чтобы посетитель сайта мог найти то, что он искал. Например, модель телефона в интернет-магазине или статью на новостном портале.
8. Покажите посетителю квиз или мини-игру. Это отличный способ свести негативное впечатление пользователя к минимуму.
9. Выдержите единое оформление, чтобы страница 404 не отличалась от остальных страниц сайта.

Рассказали, как квиз-маркетинг помогает пользователям совершить покупку.

Примеры отличных 404 страниц для сайта

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

У McDonalds на странице 404 есть навигация по сайту и даже форма для подписки на рассылку:

Пример страницы 404 на сайте McDonalds

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

Пример страницы 404 в блоге Roistat

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

Пример страницы 404 на сайте Roistat

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

Пример страницы 404 на сайте Спортмастер

Ещё одна страница известного интернет-магазина Lamoda. Кроме навигации и строки поиска, пользователям предлагают популярные товары:

Пример страницы 404 на сайте Lamoda

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

Пример страницы 404 на сайте банка Тинькофф

Страница об ошибке у ресторана KFC очень лаконичная страница. Пользователю предлагают всего 2 кнопки с простым CTA — «Заказать еду» и «Найти ресторан»:

Пример страницы 404 на сайте KFC

Как избегать ошибок на сайте

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

Рассказали, как SEO-аудит помогает оптимизировать работу сайта.

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

Онлайн-обзор платформы Roistat

В прямом эфире расскажем, как сделать маркетинг эффективным

Подключиться

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

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

Приемы создания страницы и лучшие примеры от сайтов на Тильде и в вебе

Tilda Education

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

Содержание

Зачем нужна страница 404
Приемы создания страницы 404: о чем стоит помнить
Как правильно сделать страницу ошибки на Тильде
Примеры классных страниц 404 на Тильде

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

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

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

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

Кажется, что можно и обойтись без собственного дизайна страницы ошибки — что в этом такого?

На самом деле страница 404 нужна всем, и вот почему:

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

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

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

ifttt.com

www.dtelepathy.com

www.cosowinerestaurant.com

oak.is

www.hannabi.com

www.panicstudio.tv

panike.pt

outlane.co

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

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

Объяснить посетителю, что происходит.

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

solarcomplekt.com

www.uxsofia.com

marvelapp.com

Развлечь и рассмешить.

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

hugeinc.com

Тональность сообщения на странице ошибки зависит от позиционирования вашего бренда, но немного юмора никогда не помешает.

worrydream.com

www.pixar.com

renk-magazin.de

off-box.com

bakkenbaeck.com

emojibook.club

Вернуть пользователя на сайт.

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

builtvisible.com

theoryandpractice.ru

finely.co

mag.fieldsroads.ru

Сохранять свой стиль.

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

dropbox.com

hula-hoop.fr

intercom.com

airbnb.ru

Предупредить ошибку.

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

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

Как правильно сделать страницу ошибки 404 на Тильде

Создайте новую страницу сайта на Тильде.

Сделайте оформление: добавьте сообщение об ошибке и желаемый контент — например, ссылку на главную или забавную иллюстрацию.

Опубликуйте.

Перейдите в «Настройки сайта > Еще > 404 страница». Выберите из списка страницу, которую вы создали и сохраните.

Важно:

• Не задавайте адрес /404 — будет появляться стандартная ошибка Тильды
• Чтобы 404 заработала, вам нужно переопубликовать все страницы сайта

Какую информацию разместить на странице 404?

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

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

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

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

Как должна выглядеть моя страница 404?

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

danwoodger.com

bons.me

swelldesigngroup.com

robinhood.com

www.dogstudio.co

Примеры классных страниц 404 на Тильде

controforma. school

basetemplates.com

www.arenaslab.com

thewonderdesigns.com

www.togdazine.ru

happyfication.space

lab-w.com

Текст: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Читайте также:

Продвижение по методу AARRR

Что такое UX дизайн?

Как привлечь новых пользователей с подходом Jobs To Be Done

Закон о защите персональных данных — как избежать штрафов

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

Визуальная иерархия сайта: оформление и организация контента

Персональный сайт личного бренда: как использовать Тильду для развития личного бренда

Бизнес в инстаграм: как увеличить продажи с помощью сайта

Как повысить конверсию сайта — 12 психологических приемов

Уникальное торговое предложение для сайта — как составить продающий оффер

Аналитика сайта — как повысить конверсию сайта, используя веб-аналитику

SEO продвижение сайта на Тильде самостоятельно — пошаговая инструкция

44 невероятных страницы с ошибкой 404

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

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

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

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

Страница ошибки 404 — это веб-страница, предназначенная для отображения, когда запрос вызывает код ответа HTTP 404. Этот код означает, что клиент (или «посетитель») смог найти сервер, но не конкретный пункт назначения. Другими словами, они нашли ваш сайт, но не конкретную страницу вашего сайта. Таким образом, сервер отправляет вашему браузеру код ответа 404, сообщая им, что произошло. Если дизайнер сайта указал один, загружается страница ошибки 404.

Вот пример:

Посетите страницу состояния, и ваш браузер загрузит нашу главную домашнюю страницу. Вы нашли наш сервер. Добавьте правильное место назначения в конец этого URL-адреса, например, /pricing или /login, и ваш браузер загрузит это конкретное место назначения. Но попробуйте несуществующий пункт назначения, например /gibberish, и вы получите страницу 404. По сути, наш сервер говорит следующее: вы нашли меня, я вижу там свой URL-адрес, но конкретное место назначения, которое вы ищете после косой черты, — это страница, для которой у меня нет соответствия. Итак, вот эта страница с ошибкой, чтобы вы знали, что я не вижу в своем каталоге страницы, которая соответствует тому, что вы просите.

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

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

1. Они нажимают на ссылку, которая указывает на URL-адрес страницы, которой больше не существует
2. Они нажимают или вводят ссылку с ошибкой

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

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

А как насчет других страниц ошибок?

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

Любой трехзначный код ошибки, который начинается с 4, например 404, называется ошибкой уровня 400 и означает, что что-то пошло не так на стороне клиента. Клиент в этих отношениях — ваш веб-посетитель. Точнее, это их браузер. Поэтому имеет смысл, что неправильно написанный URL-адрес считается ошибкой клиента. Сервер (компьютер, на котором размещен сайт) работает нормально.

Другие распространенные ошибки уровня 400 включают в себя:

• 400 Неверный запрос: запрос, отправленный на сервер, был неправильно сформирован или каким-то образом не соответствовал правилам синтаксиса.
• 404 Запрещено: звучит зловеще. Но на самом деле все это означает, что запрошенный URL-адрес действителен, но у клиента нет необходимых разрешений для доступа к сайту. Это может произойти, когда вы пытаетесь перейти по URL-адресу сайта, для посещения которого необходимо войти в систему.

Другим распространенным набором кодов ошибок являются 500-уровневые коды. Там, где коды уровня 400 указывают на проблему с чем-то, что делает клиент, коды уровня 500 указывают на что-то неожиданное, происходящее на стороне сервера.

Некоторые из распространенных кодов уровня 500:

• 503 Служба недоступна: это стандартная ошибка «сервер недоступен». Обычно сервер не может ответить, потому что он перегружен или отключен для обслуживания.
• 504 Время ожидания шлюза: сервер действовал как шлюз для вышестоящего сервера, но вовремя не получил ответ от вышестоящего сервера.

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

Интересный факт: Существует и иногда используется малоизвестный код ошибки 451. Код предназначен для использования, когда доступ запрещен из-за юридического запроса, и является отсылкой к роману-антиутопии «451 градус по Фаренгейту».

44 невероятных примера страниц с ошибкой 404

1. 20th Century Fox

У такой компании, как 20th Century Fox, есть огромная библиотека запоминающихся материалов, которые можно использовать для вдохновения. Они взяли несколько клипов из своей любимой фильмотеки, таких как «Офисное пространство», «Месть ботаников» и «Эдвард Руки-ножницы». Нажмите на текст, и вы попадете на страницу, где вы можете купить собственную копию.

2. Amazon

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

3. Astuteo

Фирма веб-дизайна и цифрового маркетинга Astuteo привлекла большое внимание своей страницей ошибок на тему «Касабланки». Приземлитесь на их страницу с ошибкой сейчас, и копия делает умную ссылку на всех, кто ищет забавную страницу с ошибкой. Все еще смешно.

4. Batman 3-D

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

5. Benjamin Reid

Британская фирма веб-дизайнера Бенджамина Рида Nouveller создала невероятную страницу ошибок, вдохновившись фильмом «Парк Юрского периода». Страница позволяет посетителям попробовать взломать компьютерную систему парка, основываясь на сцене, где персонаж Сэмюэля Л. Джексона пытается обойти систему безопасности, установленную коварным программистом парка.

6. ​​Кампания Берни Сандерса

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

7. Bitly

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

8. Blizzard Entertainment

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

9. Bloomberg

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

10. Bluegg

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

11. Codecademy

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

12. Daniel Karcher

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

13. Дилберт

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

14. Dogstudio

Dogstudio использует потрясающую библиотеку Giphy с изображениями животных, чтобы заполнить свою страницу ошибок постоянно меняющимися изображениями собак.

15. Восточный рынок

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

16. Emailcenter UK

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

17 . Google

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

Страница с ошибкой представляет собой простую иллюстрацию сломанного робота и копии. Но пасхальное яйцо находится в заголовке страницы, который вы видите на вкладке браузера. Сначала это выглядит как опечатка, но «!!1» — это отсылка к интернет-шутке о том, как быстро энтузиазм (!!!) может стать неряшливым (!!1). Обратите внимание на эту клавишу Shift, дети.

18. HeyZap

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

19. Hot Dot Production

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

20 Хьюго Боначчи

Страница ошибки разработчика и дизайнера Хьюго Боначчи при первом посещении выглядит как стандартная страница ошибки 404. Затем фиолетовая вращающаяся черная дыра начинает засасывать все элементы страницы.

21. IGN

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

22. IMDb

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

23. Iconfinder

Эффект полета в космосе из «Звездных войн» завораживает зрителей с 1970-х годов. Это в полной мере влияет на страницу ошибки 404 Iconfinder. Еще один отличный пример тонкой анимации, производящей большое впечатление.

24. Imgur

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

25. Jackrabbit Design

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

26. Куало

Space Invaders — еще одна классическая аркадная игра. Британская команда, стоящая за Kualo, сделала забавный ход, назвав название своей компании Invaders. Захватчики, которых вы полюбите уничтожать космическим лазером.

27. Lego

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

28. Lonely Planet

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

29. Lush

Эта страница с ошибкой косметического бренда Lush — отличный пример привязки вашей страницы к рекламной акции. К Пасхе 2014 бренд анонсировал «Охоту за пасхальными яйцами». Найдите пасхалку на их сайте и выиграйте бесплатный приз. Оказывается, пасхалка была спрятана на странице с ошибкой 404, а призом стала специальная версия «Ошибка 404» их популярного продукта с бомбой для ванны.

30. Magnt

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

31. MailChimp

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

32. NPR

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

33. Национальный музей истории похорон

Похороны — это смешно? Если кто-то знает, это Национальный музей истории похорон. На их странице с ошибкой есть каламбур «серьезная ошибка» и упоминается, что страница «исчезла в загробной жизни».

34. Житель Нью-Йорка

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

35. Правительство Новой Зеландии

У людей есть плохая привычка оставлять Новую Зеландию вне карты. Правительство страны немного позабавилось этим на своем собственном веб-сайте со ссылкой «чего-то не хватает» и картой мира без Новой Зеландии.

36. Nuvango

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

37. Оранжевое пальто

Под интерактивом не обязательно подразумеваются игры и виджеты Javascript. Страница ошибок Orange Coat дает посетителям блок-схему в стиле «выбери свое приключение».

38. Romain Brasier

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

39. Spotify

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

40. Стив Ламберт

Страница художника Стива Ламберта, получившая название «Самая неуклюжая страница ошибок в Интернете», заслуживает внимания. Попробуйте дойти до конца. Как пишет Стив на странице: «Такая идея приходит к вам только в 12:30. И ты должен сделать это тогда, иначе ты никогда этого не сделаешь».

41. Sygic Travel

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

42. Австралийские

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

43. Музей творения

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

44. The Irish Times

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

Дополнительный совет:

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

Страница состояния — это инструмент, с помощью которого вы можете легко сообщать сведения об инцидентах и ​​периодах обслуживания своим клиентам.

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

1. Уменьшение числа обращений в службу поддержки:  Когда пользователи знают, когда ожидать решения, им не нужно будет открывать обращение, чтобы запросить дополнительную информацию. или, что еще хуже, жалуйтесь в социальных сетях.
2. Автоматическое уведомление пользователей:  Когда ваши пользователи подписываются на вашу страницу статуса, они автоматически получают уведомление по электронной почте, SMS или Slack, когда в вашем приложении возникает ошибка или период обслуживания.
3. Улучшение качества обслуживания клиентов:  Объяснение вашим пользователям периодов обслуживания и сроков устранения неполадок укрепляет доверие ваших клиентов и повышает качество обслуживания клиентов.

Попробуйте бесплатно.

40 Умные страницы ошибок 404 с реальных веб-сайтов

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

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

Неудобно, но факт. И реакция посетителей, когда они попадают на несуществующую страницу, может варьироваться от «не воспринимать это спокойно» до «полностью сходить с ума».

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

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

Что такое ошибка 404?

Ошибка 404 — это стандартный код сообщения об ошибке HTTP, означающий, что веб-сайт, который вы пытались открыть, не найден на сервере. Это ошибка на стороне клиента, означающая, что либо веб-страница была удалена или перемещена, а URL-адрес не был соответствующим образом изменен, либо человек просто неправильно ввел URL-адрес.

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

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

Лучшие примеры веб-страниц с ошибкой 404

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

Страница не найдена: креативные страницы ошибок 404

1. Pipcorn

Хотя страница 404 может легко выделяться на веб-сайте, страница ошибки Pipcorn идеально сочетается с остальным брендом сайта. Есть приятный анимированный фон, дружественная текстовая подсказка, направляющая посетителей на поиск на веб-сайте (в комплекте с умной игрой слов), и кусочек попкорна, используемый как «0» в «404».

2. Spotify

Гигант потоковой передачи музыки Spotify прикрыл свои базы умной страницей 404. Используя остроумный каламбур из альбома Канье Уэста «808s and Heartbreak» и анимацию записи, веб-сайт ненадолго развлекает посетителей, а затем отправляет их обратно на страницу, с которой они пришли.

3. Гениально

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

4. Adobe

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

5. Clorox

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

6. ​​Коллективная Дума

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

7. Chillhouse

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

8. Bitly

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

9. Ikea

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

10. Moxie Design Co.

Конечно, фраза «взорвал Интернет» может быть несколько преувеличенной, но это говорит посетителям о том, что Moxie Design Co. не воспринимает себя слишком серьезно с такими небольшими оплошностями, как этот. . Кроме того, панель поиска удобно расположена внизу, чтобы отправить вас в путь.

11. McKissack & McKissack

А, классический трюк «мы потеряли страницу». Опять же, простой способ представить 404, не отталкивая вашу аудиторию. Если вы представляете такое агентство, как McKissack & McKissack, которое управляет многими взаимодействиями с клиентами, четкий и краткий текст необходим для всех страниц вашего сайта, включая страницы ошибок.

12. Хитрости CSS

Вы когда-нибудь отрывали оболочку веб-сайта, чтобы посмотреть, что находится под ней? Это концепция, к которой CSS Tricks стремились на своей странице с ошибкой 404. Это и остроумно, и напоминает о том, что такое веб-сайт: разумное использование стилей страницы.

13. Старые добрые игры

Для других веб-сайтов вы разворачиваете переднюю часть и видите… просто огромную пустоту. Эта страница является отсылкой к GOG Galaxy, собственному клиенту для видеоигр от Good Old Games. К счастью, здесь есть маленький персонаж из видеоигры, чтобы посетители могли сообщить об ошибке, если захотят.

14. Canva

Чтобы узнать что-то немного другое, посетите страницу 404 Canva. Он включает в себя не только сообщение об ошибке, но и изящную головоломку, в которую посетители могут поиграть, чтобы немного развлечься. Нет ничего плохого в том, чтобы позволить вашим посетителям расслабиться на пару минут, верно?

15. Innotech

Подобно подходу Canva, Innotech предлагает игру в стиле Pong на своей странице 404, чтобы немного развлечься. Скорее всего, вы помните такой веб-сайт. Кроме того, забавный обходной путь дополняет действительно впечатляющий веб-сайт — серьезно, когда вы закончите играть, перейдите на домашнюю страницу и ознакомьтесь со всем этим. -фирменный дизайн страницы 404, который имитирует классические цветные полосы SMPTE, которые появляются на старых лентах и ​​телевизорах. Это забавный возврат к старым технологиям, представляющий более современную проблему несуществующей веб-страницы.

17. KonMari

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

18. BrandCrowd

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

19. Hot Dot Productions

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

20. OrangeCoat

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

21. Ervin & Smith

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

22. DayCloud Studios

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

23. Headspace

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

24. Пекарня Wildwood

Некоторые веб-сайты до сих пор размещали на своих страницах умные фирменные тексты, в то время как другие размещали на своих страницах полноценные онлайн-игры. Но нет ничего плохого в коротком толчке в правильном направлении. Изысканный сайт Wildwood Bakery делает вещи короткими и приятными (буквально).

Страница не найдена: Смешные страницы ошибок 404

25. Astuteo

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

26. LEGO

На странице ошибки 404 LEGO нужно несколько слов — по выражению лица персонажа все становится ясно. Кроме того, поклонникам кинофраншизы LEGO понравится забавная отсылка в копии.

27. Magnt

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

28. IconFinder

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

29. Sweet Dreams

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

30. GitHub

Строка «Это не те дроиды, которых вы ищете» относится к джедайскому трюку Оби-Вана Кеноби со штурмовиками в «Звездных войнах. Эпизод IV 9».0281 , и это стало широко известной фразой, используемой для того, чтобы сказать кому-то, что они придерживаются неправильного курса действий. GitHub воспроизводит эту известную строку в своем сообщении об ошибке 404.

31. Patagonia

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

32. Cloud Sigma

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

33. Кинотеатры AMC

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

34. Bruno

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

35. NPR

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

36. Medium

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

37. HomeStarRunner

На сайте HomeStarRunner.com, на котором размещается мультипликационный сериал в формате Flash, за многие годы появилось несколько забавных страниц с ошибкой 404. Самые последние персонажи из мультсериала представлены в сцене, которая могла появиться прямо из одного из их эпизодов. Если вы включите звук при загрузке страницы, вы услышите, как их персонаж Strong Bad, известный тем, что громко выкрикивает фразы, говорит: «404’d!»

38. Blizzard Entertainment

Вот простая идея, которая в конечном итоге выглядит привлекательно: на странице 404 Blizzard Entertainment изображен анимированный персонаж, потерявшийся в настоящей метели, и немного юмора, который оценят поклонники World of Warcraft.

39. Hello Big Idea

Краткий обзор экспертов по маркетингу и социальным сетям Веб-сайт Hello Big Idea расскажет вам все, что вам нужно знать о смелом и прямолинейном стиле рекламы. И, конечно же, его страница с ошибкой 404 не является исключением.

40. HubSpot

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

This entry was posted in Популярное