404 Error Pages – остроумные примеры, взятые с реальных сайтов.

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

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

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

Вашему вниманью несколько наших любимых креативных 404 error pages.

Надеемся, они вдохновят вас на создание своих собственных сообщений об ошибке.

Что такое 404 error?

 

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

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

 

1) Bluegg

Если смех является лучшим лекарством, то страница 404 error на сайте Bluegg как раз и есть лекарство. На ней автоматически запускается встроенное видео козла, кричащего как человек. Вы, конечно, узнаете этот популярный вирусный видеоролик. Но, давайте будем честными … он никогда не стареет.

 

2) Spotify

Каждый год, Spotify выпускает свой микросайт «A Year in Music». Сайт позволяет посетителям просмотреть наиболее популярную музыку года со всего земного шара. Но есть там и настоящий «праздник для души» меломана – страница с ошибкой 404, которая отдает дань хиту Джастина Бибера 2015 года — «Sorry», что делает страницу уместной и веселой, не выпадающей из тематики сайта.

3) Cloud Sigma

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

 

4) CSS Tricks

Бывало так, что вам хочется сорвать внешнюю оболочку с сайта, чтобы увидеть, как же он сделан? Эта концепция реализована на сайте CSS Tricks на их странице с ошибкой 404. Одновременно и умно, и напоминает о том, что их бренд — все о CSS.

 

5) Good Old Games (GOG)

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

 

6) Magnt

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

 

7) Bitly

Помните знаменитый FailWhale на Твиттере? Точно так же, Bitly интегрирует свой талисман — Pufferfish — в сообщение об ошибке. Бедный малыш плавает кверху брюхом.

8) Daniel Karcher Film Design Studios

Если ваш бизнес – создание фильмов, почему бы не сделать свою страницу об ошибке 404 чем-то, напоминающим короткометражный фильм? Люди из Daniel Karcher проделали большую работу с анимацией на этой странице, создав, в том числе остроумные ссылки на такие вещи, как не вошедшие в сериал сцены. Табло вверху гласит: «Пожалуйста, перейдите к основному уровню», щелкнув на которое, вы попадаете на главную страницу.

 

9) NPR

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

 

10) Blizzard Entertainment

Перед вами пример простой идеи, которая в конечном итоге выглядит потрясающе круто: 404 error page предстает перед пользователем «сломанной» версией настоящей домашней страницы.

 

11) Tin Sanity

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

 

12) OrangeCoat

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

 

13) Astuteo

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

 

14) BrandCrowd

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

 

15) Cooklet

Страница ошибки Cooklet проста и восхитительна как в дизайне, так и в копирайтинге. Блин, а я хотел кусок от этого!

 

16) GitHub

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

17) Grant Burke

Дизайнер Грант Берк показывает свои навыки проектирования даже на 404 error page. Графика проста и концептуальна — недостающее звено на пакете молока — весело и умно.

 

18) Moveline

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

 

19) LEGO

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

20) Hoppermagic

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

 

21) IconFinder

Вам не нравится, когда веб-страницы теряются в пространстве? Страница ошибки IconFinder проста и восхитительна. Анимированный смайлик одет в скафандр, и, чем дольше вы остаетесь на странице, тем дальше он катапультируется в космос.

 

22) Hot Dot Productions

Страница ошибки Hot Dot Productions остается верна слогану компании: «the intersection of new technologies and design». Страница анимирована сотнями крошечных точек, которые изменяют направление, реагируя на наведение курсора. Завораживающе, классно, и дает большой простор для творчества. Главное – не скучно.

23) HomeStarRunner.com

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

При включенном звуке, вы будете еще и слышать голос популярного персонажа Strong Bad, выкрикивающего фразу «404’d!».

24) HubSpot

 

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

 

Как сделать 404 страницу: 10 красивых вариантов оформления

Зачем нужна такая страница?

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

Красивое оформление 404 страницы на сайте

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

Неудачный вариант 404 страницы — пользователь точно уйдет

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

Процесс создания правильной 404 страницы на сайте состоит из двух основных этапов — это разработка дизайна и техническая настройка.

Дизайн и структура

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

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

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

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

Технические аспекты настройки

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

Если движок сайта самописный, то готовую страницу (HTML, PHP и т.д.) следует поместить в шаблон по протоколу FTP. И подключить ее в файле .htaccess, который находится в корне сайта, используя следующий код:

ErrorDocument 404 http://URL_сайта/404. html

Для редактирования .htaccess рекомендуется использовать бесплатный редактор Notepad++.

При использовании одной из популярных CMS, к примеру, WordPress, делать 404 страницу скорее всего не придется. По крайней мере технически она уже настроена и подключена, но если есть необходимость создания уникального решения, то его лучше реализовать внутри специального файла, который находится в корне шаблона (/wp-content/themes/тема/) – 404.php. При вставке верстки, нужно учитывать подключаемые хуки движка, некоторые из них могут понадобиться для корректной его работы. В остальном же все схоже с обычной HTML-версткой.

Не все темы WordPress имеют готовый файл 404.php, поэтому если он отсутствует, следует его создать вручную, наполнить и подключить в .htaccess с помощью следующего кода (если он также отсутствует):

ErrorDocument 404/index.php?error=404

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

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

Вариант 1

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

Использование видеокреатива при создании страницы 404

Вариант 2

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

Страница 404 для интернет-магазина с категориями товаров

Вариант 3

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

Пример 404 страницы для банка

Вариант 4

Популярный ресторан быстрого питания, коротко и ясно.

Страница 404 ресторана быстрого питания

Вариант 5

Применение анимации задерживает внимание (лупа при перемещении мыши двигается).

Пример применения анимации на странице 404

Вариант 6

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

Пример тематического дизайна на странице 404

Вариант 7

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

Пример страницы 404 на сайте интернет-провайдера

Вариант 8

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

Вариант оформления 404 страницы для агрегатора авиабилетов

Вариант 9

Просто и понятно.

Страница 404 для сайта кофейни

Вариант 10

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

404 страница для турагентства

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

• Они креативные и уникальные – непохожие на 90% 404 страниц других сайтов.
• Помимо дизайна, несут в себе практическую пользу, удерживают внимание и сглаживают негатив у потенциального лида.
• В некоторых случаях наоборот могут повысить лояльность к компании (сайту) со стороны пользователя.

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

16 конвертирующих страниц 404 для заблудившихся посетителей

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

В этом посте вы увидите 16 примеров конвертирующих страниц 404 и узнаете, почему они работают.

Содержание статьи

Что такое страница 404 и зачем она нужна
1. Lego: дружелюбная страница 404
2. Email Center UK: интерактивная страница 404
3. List25: лучшая страница 404
4. Brett Terpstra: простая страница 404
5. Steve Madden: страница 404 с товарами
6. 9gag: страница 404 с призывом к действию
7. Path: предельно простая страница 404
8. IMDB: забавная тематическая страница 404
9. Everipedia: текстовая страница 404
10. Heyzap: интерактивная страница 404
11. OptinMonster: страница 404 с лид-магнитом
12. Ozon: забавная и полезная страница 404
13. Evernote: последовательная страница 404
14. Texterra: веселая страница 404
15. Лабиринт: страница 404 с указателями
16. LPgenerator: страница 404, где нет лидов
Бонус: намерение уйти

Что такое страница 404 и зачем она нужна

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

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

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

Вот это никому не понравится:

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

1. Lego: дружелюбная страница 404

Страница не найдена
Извините, мы не нашли эту страницу! Может быть, ссылка устарела или страница удалена.
CTA: Вернуться на домашнюю страницу

Почему это работает:

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

Как это сделать:

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

• Страница не найдена.
• Извините, мы не нашли страницу, которая вам нужна.
• Упс! Что-то пошло не так.
• О господи, ссылка не работает!

2. Email Center UK: интерактивная страница 404

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

Почему это работает:

Email Center UK используют страницу 404 из 2-х частей, снимающую «вину» с посетителя и дающую ему забавный способ справиться с раздражением.

Как это сделать:

Не обвиняйте посетителя в ошибке, а вместо этого извинитесь. Объясняя, что пошло не так, не будьте категоричны. Употребите слова и фразы вроде «может быть» или «наверное»: такие формулировки не заставляют пользователя чувствовать себя виновником ошибки.

Вы можете повторить за Email Center UK и позволить посетителю «уволить» одного из разработчиков:

Люк, ты уволен!
Бедный Люк.
Люк не то что бы мстителен, но, может быть, теперь вам стоит сменить IP-адрес.
Вернуться на домашнюю страницу.

3. List25: лучшая страница 404

Страница не найдена
Вы могли оказаться здесь по целой куче причин, но вот 25 самых распространенных:
1. Вы думали, что страница существует… а это не так.
2. Страница существует, но вы опечатались в адресе.
3. Вы специально набрали неправильный адрес.
4. Сайт, с которого вы пришли, не так высокоразвит, как List25, и не поспевает за нашей продвинутой системой управления контентом.

Почему это работает:

Страница 404 замечательно соответствует бренду. Одна из лучших практик разработки UX — объяснить, что пошло не так, в сообщении об ошибке, и List25 предлагает целых 25 причин. Вверху списка есть панель поиска, чтобы людям не приходилось читать его весь, но, наверное, большинство все равно прочитает.

Как это сделать:

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

• Опечатка в URL
• Ошибка при вставке URL
• Битая ссылка
• Контент перемещен
• Контент удален

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

4. Brett Terpstra: простая страница 404

404 — страница не найдена
Ой.
Страница, которую вы запросили, не найдена. Может быть, вы искали вот это:
А вы уже купили билеты на Macstock 2018?
Веб-экскурсии: 6 июня 2011 — 8 июня 2011
Также вы можете заглянуть в архив и поискать посты по названию и ключевым словам или использовать NerdQuery, чтобы быстро найти искомое.

Почему это работает:

Почему стандартная страница 404 так раздражает? Потому что это тупик: вам некуда дальше идти. Страница от Brett Terpstra предлагает список постов, где есть ключевые слова, связанные со ссылкой, по которой пытался пройти посетитель. На посты предоставлены ссылки, так что перейти к ним можно легко и быстро. Это неброская, но очень полезная страница.

Как это сделать:

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

5. Steve Madden: страница 404 с товарами

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

Почему это работает:

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

Как это сделать:

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

Что стоит разместить на странице 404:

• Навигационное меню
• Ссылку на главную страницу
• Ссылку на карту сайта
• Панель поиска
• Ссылки на популярные посты
• Ссылки на популярные товары

6. 9gag: страница 404 с призывом к действию

Здесь ничего нет.
Найдите то, что вы ищите, с нашим приложением.
CTA: Скачать приложение

Почему это работает:

Задача страницы 404 от 9gag — убедить посетителя скачать приложение. А чтобы оживить ее, они добавили популярный мем из «Криминального чтива».

Как это сделать:

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

7. Path: предельно простая страница 404

О нет! Страница не найдена.
Связаться со службой поддержки.

Почему это работает:

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

Как это сделать:

Цель здесь — дать посетителям возможность сообщить о проблеме. Это можно сделать разными способами, например просто разместить ссылку, как сделали Path, или использовать форму обратной связи.

8. IMDB: забавная тематическая страница 404

Где страница, Лебовски? Где она?

Почему это работает:

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

Как это сделать:

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

Читайте также: 10 примеров творческого подхода к сообщению об «ошибке 404»

9. Everipedia: текстовая страница 404

404 Не найдено
Сообщение «404» или «Не найдено» — это стандартный код ответа HTTP (HyperText Transfer Protocol — протокол передачи гипертекста) о том, что клиент смог связаться с сервером, но сервер не может найти запрошенные данные.
Хостинг обычно генерирует ответ «404 Не найдено», когда посетитель пытается пройти по битой или мертвой ссылке, и поэтому ошибка 404 — одна из самых узнаваемых во Всемирной паутине.
Обзор
При коммуникации по HTTP клиент требует ответа на свой запрос к серверу, например, веб-браузер запрашивает страницу и ожидает цифровой код ответа…

Почему это работает:

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

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

Как сказал маркетолог Ренни Глисон (Renny Gleeson) сказал о странице 404: «Простая ошибка говорит о том, кем вы не являетесь. Или напоминает мне, за что я вас люблю». Напомните посетителям, за что они вас любят. Каково ваше уникальное торговое предложение? Что отличает вас от конкурентов?

10. Heyzap: интерактивная страница 404

Почему это работает:

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

Как это сделать:

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

11. OptinMonster: страница 404 с лид-магнитом

Такой страницы не существует!
Извините, страница, которую вы искали, не найдена.
Попробуйте поискать что-нибудь другое.
Или вернитесь на главную страницу, или свяжитесь с нами, если не нашли искомого.
Перехватите маркетинговый урок
Получить бесплатный кейс!
Как повысить трафик органического поиска
Как конвертировать уходящих посетителей и получать доход
Знаете ли вы, что более 70% посетителей, уходящих с вашего сайта, никогда не возвращаются? Узнайте, как OptinMonster решает эту проблему.
CTA: Скачать сейчас

Почему это работает:

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

Как это сделать:

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

12. Ozon: забавная и полезная страница 404

Почему это работает:

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

Как это сделать:

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

13. Evernote: последовательная страница 404

Почему это работает:

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

Как это сделать:

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

14. Texterra: веселая страница 404

Почему это работает:

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

Как это сделать:

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

15. Лабиринт: страница 404 с указателями

Почему это работает:

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

Как это сделать:

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

16. LPgenerator: страница 404, где нет лидов

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

Бонус: намерение уйти

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

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

Не нашли искомого?
Поиск
Вернуться на домашнюю страницу

Высоких вам конверсий!

По материалам: optinmonster.com.

19-07-2018

Креативные примеры страниц ошибки 404

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

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

Mashable

 

Текст с фото: Плохие новости – мы не смогли найти страницу, которую вы ищете. Хорошие новости – мы наши все ваши потерявшиеся носки.

Template Monster

 

Текст с фото: Снежный человек, НЛО, хорошие актеры в фильмах Майкла Бэя… сущестование их не доказано. Так же, как и страница, которую вы ищете на TemplateMonster. Но нам кажется, что Вы тут оказались не случайно. Так почему же не вернуться на нашу домашнюю страницу или заглянуть на наш блог? А, кстати, вот Вам прощальный подарочек в виде страницы 404, если вы фанат креативных страниц 404, спешите скачать один из бесплатных шаблонов страниц ошибки 404, созданных нами!

Defrozo

 

Текст с фото: Нам жаль, но страница расфокусирована.

Diesel

 

StickerMule

 

Blue Daniel

 

dario brozzi

 

centresource

 

Текст с фото: Ребята, извините, парковка закрыта! Ваши действия – пойти домой или врезать лосю.

agens

 

Текст с фото: Похоже, что Вы потерялись в космосе. Может Вы ищете что-то из наших последних проектов?

Tinsanity

 

 

MailChimp

 

Good Dog Design

 

Текст с фото: Пропала собака! В последний раз видели в желтом кружке заголовка. Черно-белая. Похожа на колли. Отзывается на “good dog”. Отличительные особенности – невероятно быстро разучивает новые трюки и вытаскивает упавших в колодец сирот. Если найдете – вкусно покормите и подкиньте пару ему пару головоломок.

Tripomatic

 

Текст с фото: Извините, эта страница так и не вернулась из путешествия по пустыне Атакама.

Starbucks

 

RSQ

 

Текст с фото: Глубоко скорбим по поводу вашей потери. Ссылка мертва. Соболезнования можно найти на домашней странице RSQ.

Focus Lab

 

Текст с фото: Хватит шуметь. Почему бы не перейти на страницу, которая работает? Вы что, хотите взломать наш сайт? В чем дело? Проходите. Тут не на что смотреть.

Michael Schmid

Текст с фото: Гамбургер! Подождите, что? Да, вот так я отреагировал, когда Вы тут появились. Это страница ошибки 404, тут не на что смотреть. Проходите мимо.

Высоких конверсий!

04-04-2016

Улучшаем страницу «Ошибка 404» — яркие примеры

Когда посетитель попадает на стандартную страницу «Ошибка 404», велика вероятность, что он сразу же уйдёт с веб-сайта и никогда не вернётся. И совсем другое дело кастомная, привлекательная и полезная страница 404. Она способствует дальнейшему пребыванию пользователя на веб-ресурсе, повышает лояльность аудитории и улучшает SEO-показатели сайта.

Что означают эти знакомые всем цифры — 404?

Начнём с истоков. Определение из Википедии:

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

Код 404. Первая цифра «4» указывает на системный сбой со стороны посетителя, к примеру, неверно введён адрес или плохое соединение. Значение «04» обозначает категорию ошибок и статусов разных классов: Bad Reques, Precondition Failed, Conflict и т.д. Причины возникновения: опечатка при написании адресной строки, переезд страницы на другой адрес, ссылка страницы удалена или устарела, плохое соединение.

Почему лучше не использовать страницу «Ошибка 404» по умолчанию?

Наверное, все знакомы со стандартной страницей «Ошибка 404». Она выглядит немного устрашающе:

Страница «Ошибка 404» по умолчанию

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

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

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

Ошибка 404 в книжном интернет-магазине

Пространство для улучшения Страницы 404

Чтобы ошибка не испугала пользователя:

1. Объясните, что произошло
2. Укажите причины происшедшего
3. Скажите, что делать дальше

Это стандарт. Но можно применять и другие текстовые проявления с изюминкой и креативными нотками.

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

О текстовой составляющей 404-й ошибки читайте в статье Копирайтинг для «Страницы 404» в моём блоге.

Как правильно оформить страницу 404

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

Чтобы доверие к вам не было подорвано, мы собрали все способы улучшения страницы «Ошибка 404».

Совет №1: Ссылки на разделы сайта.

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

Оригинальная страница на украинской доске объявления ОЛХ

Совет №2: Добавьте строку поиска.

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

404-я ошибка на сайте маркетингового агентства

Совет №3: Придерживайтесь фирменно стиля и дизайна

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

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

Интересная страница для автомобильного сайта

Совет №4: Будьте понятными и дружелюбными

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

Поэтому в дружелюбной манере объясните, в чём проблема и скажите, что делать дальше.

Если этого не сделать, всегда найдутся те, кто не поймут устрашающую надпись «404 Not found» и запросто исчезнут в неизвестном направлении.

Совет №5: Внесите креатив и юмор

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

Немного юмора от BlizzardКреативная страница под необычную ЦА

Какая страница 404 у студии MEDIOL

Наша 404-я ошибка выглядит так:

Страница «Ошибка 404» веб-студии MEDIOL

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

Бонус

Примеры интересных страниц «Ошибка 404»:

Анимированное изображение 404-й ошибки от KONUX

или

Еще один хороший пример анимированной ошибки 404

или

Можно смотреть бесконечно 🙂

Заключение

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

А у вас есть любимые 404-е ошибки? Кидайте ссылки в комментариях, посмотрим вместе.

 

Улучшаем страницу «Ошибка 404» — яркие примеры

Рейтинг: 5 Оценок: 2

Понравилась статья? Поделитесь с друзьями:

Похожее

comments powered by HyperComments

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

Со временем содержимое на сайтах поддается изменениям и обновлениям. Иногда автор делает «уборку» на своем сайте и некоторые страницы считает нужным удалить. Другие хозяева на своих сайтах просто делают «перестановку», и переносят статьи из одной рубрики в другую, дают другие имена разделам. Фактически такие страницы продолжают существовать в интернете, но их непривлекательный убогий вид отталкивает абсолютно всех. Пустые… Безжизненные… Так и хочется уйти с такой страницы чем поскорее.

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

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

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

Какая информация должна быть на странице «Ошибка 404»?

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

○ оставить посетителю небольшое сообщение, чтобы он понимал, что случилось, почему так и что ему делать дальше;

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

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

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

— «Упс, мы не можем найти то, что Вы ищите»

— «Простите, у нас возникли проблемы со страницей, которую вы ищите»

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

— «404… Увы, но эта страница где-то затерялась в галактике Интернета»

— «Ищете что-то интересное на нашем сайте? К сожалению, страница, которую Вы запрашиваете, не существует…»

— «Дружище, извини, но мы не смогли найти эту страницу…»

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

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

— «Пожалуйста, воспользуйтесь навигацией или формой поиска, чтобы найти интересующую Вас информацию»

— «Чтобы найти интересующую Вас информацию – воспользуйтесь этой формой поиска»

— «Переходите на главную страницу – там Вы также сможете найти много полезной информации»

И в заключение еще несколько полезностей:

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

— в дизайне страницы избегайте предупреждающих знаков, таких как «стоп», «внимание» — это тоже пугает;

— если такую страницу вы оформляете на блоге, то можно отбросить всю официальность и сделать страничку с юмором.

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

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

Страница ошибки 404

автор статьи
Костаневич Лида

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: для сайта

51 Шаблоны страниц HTML 404

Коллекция бесплатных шаблонов страниц HTML и CSS 404 примеров. Обновление майской коллекции 2019 года. 12 новинок.

1. HTML Смешные 404 страницы
2. 403 Запрещенных HTML-шаблонов
3. HTML 408 страниц
4. 500 HTML-шаблонов страниц с ошибками

О коде

Простая страница 404

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome. css

О коде

Sassy 404 UI ​​Study

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Genaro Colusso
• 31 марта 2020 г.

О коде

404

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Сделано с

• HTML (мопс) / CSS (стилус) / JS (Babel)

О коде

404 заставляет медведя грустить

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: react.js, react-dom.js

Автор

• Каспер Де Брюйне
• 18 февраля 2020 г.

Сделано с

• HTML / CSS (SCSS) / JS (Babel)

О коде

404 Стр.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css, gsap.js

Автор

• Сваруп Кумар Куйла
• 7 февраля 2020 г.

О коде

Страница ошибки 404

Ошибка 404 страницы анимации SVG.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: anime.js

Автор

• Рафаэла Лукас
• 27 ноября 2019 г.

О коде

404 Страница UI

404 страница с навигацией и эффектом параллакса.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: parallax. js

О коде

Космос 404

Страница 404, созданная на чистом CSS и немного холста .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Neon — Страница 404 не найдена

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

404 Стр. № 8

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор

• Мортен Соренсен
• 28 февраля 2019 г.

О коде

Spacy 404 Стр.

Просторная страница 404 с подсчетом вверх.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery. js

Автор

• Джон Кантнер
• 28 декабря 2018 г.

О коде

Sad Mac 404 Ошибка страницы

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

CSS Поезд 404 Страница

SVG 404 страница ошибки только CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Джанет Мендес
• 7 сентября 2018 г.

О коде

Ошибка 404 — потерянный и одинокий

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

404 Стр.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Сара Фриск
• 6 сентября 2018 г.

О коде

404 Страница Eroor: Игроки не найдены

Рисованная анимация смотрящего и анимированная с помощью CSS.В основном это был повод для рисования анимацией под видом страницы 404.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Мансур
• 5 сентября 2018 г.

О коде

404 Стр.

Чистый CSS, только 404 страница.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Сделано с

• HTML (мопс) / CSS (стилус) / JS (Babel)

О коде

404 частицы с PixiJS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: pixi. js

Автор

• Лина Лаванья
• 4 сентября 2018 г.

О коде

Кодовая тема 404 Страница

Команды кода ошибки HTTP 404 в JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Реми Денимал
• 3 сентября 2018 г.

О коде

404 Галактика не найдена

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Сасси Касасола
• 28 апреля 2018 г.

О коде

Страница ошибки 404

Ошибка страницы 404 на чистом CSS: вдохновение из Долины монументов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Эндрю Хани
• 27 апреля 2018 г.

О коде

404 Стр.

Еще один шаблон анимированной страницы HTML 404.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js

Автор

• Салех Риаз Куреши
• 23 апреля 2018 г.

О коде

Страница 404 — Затерянный в космосе

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Сделано с

• HTML / CSS (SCSS) / JavaScript

О коде

UI 404 Стр.

Полужирный макет страницы 404.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Очки Винсента Ван
• 14 ноября 2017 г.

О коде

404 Анимированная страница

Маленькая аккуратная текстовая анимация на CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Рикардо Прието
• 5 ноября 2017 г.

О коде

Пример ошибки 404 # 3

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Рикардо Прието
• 4 ноября 2017 г.

О коде

Пример ошибки 404 # 2

От графического дизайна к веб-дизайну. Этот пример ошибки 404 был разработан Yoga Perdana, и мы преобразовали его в Интернет с помощью чистого CSS и минимального HTML, используя градиенты и тени CSS3.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Сельчук Кура
• 21 октября 2017 г.

Сделано с

• HTML / CSS (SCSS) / JavaScript

О коде

404 набранное сообщение

GSAP 404 набранное сообщение с использованием SplitText.js.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js, tweenmax.js, splittext.js

Автор

• Джейми Розен
• 14 октября 2017 г.

О коде

404 Стр.

Анимированный шаблон HTML 404 страницы .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: tweenmax.js, splittext.js, morphsvgplugin.js

Автор

• Робин Сельмер
• 22 августа 2017 г.

О коде

Ретро страница ошибки

Хакерская страница ошибки 404.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Омар Дсоки
• 10 августа 2017 г.

О коде

Страница ошибки 404 Вампир

Страница ошибки 404 Vampire на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

404 Не найдено

SVG 404 макет страницы не найден.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Габриэль Ви
• 8 февраля 2017 г.

О коде

404 Стр.

Minimal Ошибка 404 — появляется текст для ввода из русификатора.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Аднен Ребай
• 24 ноября 2016 г.

О коде

404 Стр.

Футуристическая страница 404.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Владимир Гашенко
• 7 октября 2016 г.

О коде

404 Концепция анимированной страницы SVG

404 концепция анимированных страниц с SVG и чистым CSS3.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

BSOD 404, стр.

HTML и CSS BSOD 404 страница.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Пузырьковые 404 Стр.

Пузырящаяся страница 404 на чистом HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Кайл Лавери
• 14 марта 2016 г.

О коде

Страница ошибки HTML

Простая страница ошибки HTML 404.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Кайл Лавери
• 27 февраля 2016 г.

О коде

Черная дыра 404 шаблон страницы

Простой макет 404 страницы с классной анимацией космического корабля.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Дэни Сантос
• 25 февраля 2016 г.

О коде

404 Анимация страницы

Ошибка 404 страницы с анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Фабио Оттавиани
• 21 февраля 2016 г.

Сделано с

• HTML / CSS (SCSS) / JavaScript

О коде

404 Страница UI

HTML / CSS и JS 404-й интерфейс страницы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js

О коде

Шаблон страницы 404

404 стр. (На основе броска на ведение).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Клеман Жиро
• 22 мая 2015 г.

О коде

404 Низкополигональный эффект

Анимированный шаблон страницы 404 с эффектом low poly .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js

Автор

• Роберт Лемон
• 30 апреля 2015 г.

О коде

HTML CSS 404 шаблоны страниц

Хорошая страница с ошибкой.

Совместимые браузеры: Firefox

Зависимости: —

О коде

Чистый CSS 404 Страница ошибки

Чистая страница ошибки CSS 404 с анимацией CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• энрико тониато
• 25 февраля 2015 г.

Сделано с

• HTML / CSS (SCSS) / JavaScript

О коде

404 Текст частиц

Эксперимент с 404 не найденным текстом частицы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: pixi.js

Автор

• Энрико Кьяромонте
• 16 октября 2014 г.

О коде

Simple Pure CSS3 404 Error Page

Просто простая анимированная страница на чистом CSS3 (без JS) для ошибки 404: страница не найдена.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Сделано с

• HTML / CSS (Меньше) / JavaScript

О коде

404 Страница с SVG

Анимированная страница 404 с SVG.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Саранш Синха
• 20 августа 2014 г.

О коде

HTML 404 Страница

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

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

Шаблон страницы 404 HTML, CSS и JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js

25 HTML Забавные 404 страницы

Коллекция бесплатных HTML и CSS забавных 404 страниц . Обновление коллекции августа 2018 г.7 новинок.

1. Шаблоны страниц HTML 404
2. 403 Запрещенных HTML-шаблонов
3. HTML 408 страниц
4. 500 HTML-шаблонов страниц с ошибками

Автор

• Диого Гомеш
• 9 октября 2018 г.

О коде

Призрак Страница 404

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Wikyware Net
• 2 октября 2018 г.

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: jquery.js

Автор

• Адам Куинлан
• 8 сентября 2018 г.

О коде

Пикл-Рик нарезанный 404

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Маурисио Альенде
• 7 сентября 2018 г.

О коде

Чистый CSS 404 Страница ошибки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Мансур
• 7 сентября 2018 г.

О коде

Страница 404 — символ CSS

4040 страница с маленьким персонажем-монстром, полностью созданным с помощью CSS, плюс анимация слежения за мышью.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: jquery.js

Автор

• Винсент Данна
• 5 сентября 2018 г.

Сделано с

• HTML (Haml) / CSS (Sass) / JS

О коде

Жуткое кладбище 404

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: jquery. js

Сделано с

• HTML / CSS (SCSS) / JavaScript

О коде

Yeti 404 стр.

Очень креативная страница HTML 404.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: TweenMax.js, MorphSVGPlugin.js

О коде

Страница ошибки пользователя

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js

О коде

Страница ошибки 404

Простая анимированная страница ошибки 404.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

404 Стр.

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: bootstrap.css

Сделано с

• HTML / CSS (SCSS) / JavaScript

О коде

SVG Animation 404 Error Milk Carton

SVG-анимация моргания глаз и движений рта. Анимация рта: использование morphSVG между двумя путями # рот и # хмурый рот . Анимация моргания глаз: использование transformOrigin и scaleY круга для создания эффекта мигания.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: TweenMax.js, MorphSVGPlugin.js, DrawSVGPlugin.js

Автор

• Джули Парк
• 17 апреля 2018 г.

О коде

UI 404 Стр.

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

О коде

Страница ошибки 404, режим пещерного человека — чистый CSS

Страница ошибки 404. Упражнение по анимации в CSS. Нет JS. Нет SVG.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Код Alex
• 27 января 2018 г.

О коде

Darknet 404 Page Концепция

Адаптивная концепция 404 страницы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js

Автор

• Сара АльСакер
• 8 января 2018 г.

О коде

404 Стр.

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Паоло Дузион
• 2 ноября 2017 г.

О коде

404 Пейдж и долгая прогулка

404 страница с некоторыми CSS-анимациями для долгой прогулки…

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Челси Адамс
• 9 марта 2017 г.

О коде

Пиво 404 Страница

Небольшой каракули с ошибкой 404 с SVG и clip-path анимация , вдохновленная недавним клиентским проектом для пивоварни.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Наконечники диафрагмы
• 29 ноября 2016 г.

О коде

404 Лягушка

Креативная страница HTML 404 с лягушкой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: TweenMax.js, MorphSVGPlugin.js, jquery.js

Автор

• Vineeth.TR
• 12 октября 2016 г.

О коде

404 Плачущий ребенок Страница

Страница ошибки 404 в чистом CSS3.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Крис Сэмюэлс
• 7 июня 2016 г.

О коде

404 Стр.

Веселая 404 страница с красивой цветовой палитрой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: TweenMax. js, MorphSVGPlugin.js

Автор

• Vineeth.TR
• 12 апреля 2016 г.

О коде

Страница ошибки 404

Ошибка страницы в чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Арне Турпын
• 19 ноября 2015 г.

О коде

Робо 404 Стр.

Шучу.Но похоже, Робо, ваш личный робот, не может найти нужную страницу.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: bootstrap.css

Автор

• Патрик Стилхарт
• 17 августа 2015 г.

О коде

Игра Space Invaders (404)

Игра Космические захватчики на 404 странице.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: bootstrap.css

Автор

• Стефан Делюс
• 28 апреля 2015 г.

О коде

Анимация SVG 404 стр.

SVG Анимация для создания ошибки страница 404 . Воспользуйтесь библиотекой SnapSVG.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: оснастка.svg.js

О коде

HTML 404 Страница

Еще одна забавная 404 страница в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Блестящие примеры 404 страниц: Страница 2

18. Lazy Oaf

(Изображение предоставлено: Lazy Oaf)

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

19. Виктория Спайсер

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

19. Figma

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

20. Airbnb

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

21. Hot Dot Production

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

22. GitHub

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

23. CSS Ninjas

Мир веб-дизайна любит ниндзя. Часто как часть самопровозглашенной должности.Соответствуя тенденции (и, как мы предполагаем, ее названию), страница 404 для CSS Ninjas имеет чистую стилизованную иллюстрацию, которая отражает общий подход сайта к дизайну.

24. MailChimp

На странице ошибок Mailchimp есть наивные иллюстрации, вокруг которых сосредотачивается брендинг MailChimp. И действительно, что говорит «Я заблудился» лучше, чем осел с головой в норе?

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

26. Брет Виктор

Страница 404 компьютерного ученого Брета Виктора, вдохновленная, конечно же, культовой картиной Рене Магритта «Предательство образов», ставит перед зрителем несколько сложных философских вопросов. Если это не страница, то что это? Что представляет собой «страница»? Можно ли действительно сказать, что это существует? Что это за «это», о котором идет речь в этой очевидной не-странице? Что-нибудь действительно реально? Вы думаете, нет?

27.IMDb

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

28. Bit.ly

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

29. DropBox

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

30. Starbucks

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

31. Blizzard Entertainment

(Изображение предоставлено Blizzard Entertainment)

Разработчик видеоигр Blizzard делает его простым и фирменным на своей странице 404. Анимированный персонаж привлекает внимание посетителей сообщением: «Мы отправили спасательного мурлока, который проведет вас обратно в безопасное место». Не уверен, что такое «Мммрргмгррргммлл!» означает, но нажмите кнопку и вернитесь на домашнюю страницу.

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

Примеры страниц с ошибкой 404: настраиваемые, анимированные и интерактивные

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

На вашем сайте легко найти неработающую ссылку. Надеюсь, это не выглядит так:

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

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

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

Essential Элементы страницы 404

Есть много способов использовать страницы с ошибками 404. Мне нравится баланс творческого и конструктивного.

Например, Airbnb сочетает полезный список популярных внутренних ссылок с креативной анимацией:

Что вы должны включить на страницу с ошибкой 404?

Попробуйте следующие полезные рекомендации для своей страницы с ошибкой:

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

Eharmony использует легкое сообщение и сильный призыв к действию.

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

Аналитика страницы 404: отслеживание ошибок 404 с помощью Диспетчера тегов Google

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

Во-первых, убедитесь, что вы запускаете скрипт Диспетчера тегов Google на странице 404.Это достаточно просто — вы можете вручную проверить исходный HTML-код страницы или установить Tag Assistant (от Google) для Chrome.

Google Tag Assistant, работающий на странице встроенных видимых ошибок.

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

Тип переменной — это переменная JavaScript, а имя переменной — document.title :

Эта определяемая пользователем переменная возвращает значение заголовка страницы.Теперь нам нужно создать триггер.

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

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

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

Когда закончите, опубликуйте.

Больше 404 примеров

Builtvisible

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

Lego

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

Gymbox

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

Marvel

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

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

Добрый день всем читателям блога Amasty!

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

Что можно сделать со страницами ошибок 404

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

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

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

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

страницы с ошибками 404 по-прежнему игнорируются магазинами

Проводя исследование для статьи, я просмотрел сотни лучших сайтов Alexa в Покупках, выбрав самые смешные, самые красивые или креативные примеры страниц с ошибкой 404. И вот что я нашел:

• множество магазинов используют страницу 404 по умолчанию — это не смертный грех, но определенно дает возможность сделать здесь немного больше;
• многих магазинов перенаправляют с несуществующих страниц на страницы категорий / предыдущие / домашние, что тоже нормально, но все же может сбивать с толку, особенно для неопытных пользователей Интернета.Хорошо показать небольшое уведомление о том, что страница, которую запрашивал посетитель, не существует и он был перенаправлен.
• многих магазинов вообще не имеют правильной страницы 404 . В этом случае вы видите пустую страницу или страницу со стандартным сообщением об ошибке 404, возвращаемым сервером, без дизайна и вообще без ссылок. Я бы оценил количество магазинов без надлежащей (по крайней мере, по умолчанию) страницы CMS 404 около 40%, что является удивительно большим количеством для топ-листа Alexa!
• другие мелкие проблемы например, отображение текста ошибки 404 на неправильном языке.
• креативных, забавных или по крайней мере замечательных страниц 404 — это не более 3% — на самом деле я трачу гораздо больше времени, хотя мне может понадобиться составить достойный список из 404 примеров страниц.

Наконец: лучшие примеры страниц с ошибками 404 за 2014 год в электронной коммерции

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

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

1. underarmour.com

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

2. nespresso.com

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

3. Фьючерсный магазин.около

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

4. modcloth.com

Собака в штанах и забавный призыв к действию; хорошее настроение гарантировано.

5. lego.com

Идеальный пример брендинга 404 страницы из Lego:

6. backcountry.com

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

7. bedbathandbeyond.com

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

8. ikea.com

Очень простая, но интересная страница!

9. etsy.com

Вещи случаются, говорит страница 404 для Etsy.

10. munchkin.com

Кто-то выглядит очень расстроенным из-за отсутствия страницы.

11. Магазин.lululemon.com

На первый взгляд эта страница выглядит довольно обыденно: заголовок, текст и стоковое изображение. Но если присмотреться…

12. dee.com

Еще один хороший пример использования фотографии с высокой контрастностью и яркими цветами.

13. mlb.mlb.com

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

14. bluenile.com

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

15. karmaloop.com

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

16. duluthtrading.com

Ну… Не знаю, кто первым догнал идею.

17. otterbox.com

Еще одна приятная идея от Otterbox: единороги и креативная формулировка. «Если вы настроены оптимистично» — определенно хит.

18. converse.com

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

19. opticsplanet.com

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

20. stevemadden.com

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

21. patagonia.com

Нравится страница, которая присоединилась к хэви-металлической группе.

Заключение

Итак, что делает страницу 404 выдающейся, если мы посмотрим на эти примеры? (Без стандартных блоков вроде поиска, ссылок и т. Д.)

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

Вам понравились какие-то конкретные? Или вы можете поделиться другими недавно встреченными примерами страниц 404?

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

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

Городская легенда гласит, что первый интернет-сервер располагался в комнате 404 здания ЦЕРН.Следовательно, этот сервер также выдал первую ошибку «Не найдено», которая, как гласит легенда, впоследствии была названа ошибкой 404.

Проблема в том, что, по всей видимости, комнаты 404 в ЦЕРНе никогда не существовало.Я там никогда не был, поэтому не знаю. Но есть гораздо более логичное объяснение того, почему сообщение «Не найдено» является ошибкой 404. Код состояния HTTP знает пять различных классов, и в каждом классе имеется до 100 возможных сообщений о состоянии. Класс 4xx сообщает об ошибках клиента, а еще две цифры указывают тип ошибки. В классе 4xx определены 18 различных случаев, и ошибка 404 представляет собой случай, когда запрос (например, запрошенный файл) был «не найден».

Зачем мне делать страницу 404

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

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

1.Соответствующий дизайн

Это и ежу понятно.Страница 404 должна хорошо гармонировать с внешним видом остального сайта.

2.Соответствующее сообщение об ошибке

Это тоже логично.Любой, столкнувшийся с ошибкой, должен сразу это заметить. Избавьтесь от деталей, но дайте серферу немного …

3.Опции

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

10 отличных примеров

Чем он хорош?

Он предоставляет несколько ссылок вверху, поле поиска для сайта внизу и некоторые развлекательные информационные фрагменты посередине.Это уникально, творчески и полезно.

2.Осадки Даффинсон

Чем он хорош?

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

Чем он хорош?

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

4.Системы управления видео [Неработающий URL-адрес удален]

Чем он хорош?

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

5.Насадка для вдохновения

Чем он хорош?

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

Чем он хорош?

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

7.Желудь творческий

Чем он хорош?

Это просто весело.

8.GOG.com

Чем он хорош?

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

9.Из разума Джейми Хаскиссона

Чем он хорош?

Забавно, есть необходимая информация, поисковая строка и ссылка на архив блога.Очень ценно.

10.BlueDaniel (битая ссылка удалена)

Чем он хорош?

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

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

Что вы посоветуете для 404 страниц? Вы нашли еще одну замечательную и / или очень полезную страницу с ошибкой 404, которой нет в списке выше? Какие-нибудь быстрые советы о том, как с минимальными усилиями сделать страницу 404? Пожалуйста, поделитесь этим с нами!

Изображение предоставлено Виллем Велтховен

Теперь вы можете общаться в видеочате с друзьями во время игры в Fortnite

Об авторе Тина Зибер (Опубликовано 824 статей)

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

Ещё от Tina Sieber

Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

.

No related posts.