Лучшие 404 страницы
Все знают, как обидно вместо желаемой страницы получить ошибку 404. Многие разработчики наполняют Not Found страницу более полезной информацией, или, по крайней мере, пытаются повеселить несчастного заблудившегося пользователя, иногда удивляя своей креативностью.
Сегодня, ко дню вебмастера, мы подготовили подборку интересных четырестачетвертых страниц.
На этом сайте можно найти интерфейс Commodore 64.
Похоже, вам не стоило сюда заходить.
Попробуйте поймать кота 🙂
Студия дизайна делится забавными гифками про собак.
А эта страничка ушла в поход… и не вернулась.
Очень атмосферная интерактивная 404-ая страница.
Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.
Спасите несчастных леммингов!
Классический мем на сайте 9GAG.
Красивая иллюстрация броуновского движения от Hot Dot.
А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.
Вам попалась страница 404? Решайте, кого уволить за такое свинство.
Синий экран смерти от Willismonds.
А эту страницу съели пациенты клиники. Очень сожалеем 🙁
Диаграмма Венна на сайте magnt.com.
Дыра в интернете на сайте CSS Tricks.
Поздравляем. Вы сломали наш сайт.
Некоторые сайты предлагают целую блок-схему действий для тех, кто попал на 404.
Здесь можно поиграть в пакмана.
Airbnb при переходе на сломанную ссылку порадует вас анимацией девочки с упавшим мороженным, а также предложит некоторые полезные ссылки.
Ниже представлен скриншот страницы 404 известного сокращателя ссылок. На нём изображена мутировавшая рыба-шар, вглядывающаяся в дно водоёма, у которой ещё и чайка над душой висит. Всё это представлено в виде анимации.
Популярный сайт обмена картинками imgur сделал страницу 404 в виде стены с картинами в академическом стиле, но только с животными, из которых готов к беседе с вами только жираф.
Всё минималистично и главное — ссылка на релевантный материал.
Сайт HatchedLondon решил сделать страницу 404 очень длинной, но до конца можно дойти всего за одну секунду. При этом страница хорошо вписывается и смотрится отлично.
Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.
Инструмент для проектировки интерфейсов отлично справился и с собственным. Можно поиграться с узлами на странице ошибки, но не более. Со шрифтами поиграть не получится.
Сайт, специализирующийся на продаже векторных иконок, не забыл и про себя, подобрав именно ту, которая гармонично сочетается с тематикой ресурса.
Интересная реализация ошибки 404 в блоге любителя иконок. Пользователь, вероятно, находится в машине, к нему приближается светящееся число 404 и в это же время пробегает ящерица по лобовому стеклу (вообще тут всё зависит от вашей фантазии).
Один из наиболее популярных сервисов общения между членами одной компании тоже вошёл в эту подборку. Ребята хорошо потрудились над созданием интересной и анимированной страницы ошибки 404 с небольшими элементами интерактивности (можно трогать кур и свинок). Также во время отсутствия активности на странице всё становится серым.
На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта. А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).
Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.
Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.
Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.
Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.
Перейти к регистрации
35 бесплатных шаблонов для страницы ошибки 404
Большинство шаблонов веб-сайтов премиум-класса и некоторые хорошие шаблоны веб-сайтов предоставляют отдельные шаблоны страниц 404. Если вы не удовлетворены стандартными шаблонами страниц ошибок 404, вы можете использовать эти бесплатные шаблоны страниц ошибок 404. Чтобы помочь вам выбрать лучший шаблон, мы включили как креативные, так и простые простые бесплатные шаблоны страниц 404 с ошибками. Исходя из имеющихся у вас дизайна сайта и вашего вкуса, выберите лучший для вашего сайта.
Прежде чем попасть в список бесплатных шаблонов с ошибкой 404, давайте посмотрим, что делает страницу 404 идеальной для профессионалов. Страница 404 является страницей с ошибкой, это не означает, что вы должны покинуть страницу с ошибкой просто с уведомлением 404. Возможно, вы видели, как некоторые из лучших веб-сайтов показывают 404 страницу с большой эффективностью.
Вам решать, что делать пользователю после того, как он попадет на страницу с ошибкой. Кроме того, вы можете напрямую показать им другие предложения, которые тесно связаны с их поисковым запросом. Возможно, вы видели такой подход на многих новостных сайтах, и даже некоторые шаблоны новостных и журнальных сайтов предоставляют вам эту опцию по умолчанию. Или же вы можете непосредственно предоставить окно поиска или кнопку, чтобы вернуть пользователя на предыдущую страницу или на свою домашнюю страницу. Возможно, вы видели эти подходы на большинстве бизнес-сайтов. Это очень удобные функции, а также еще один способ удержать ваших посетителей.
Некоторые могут использовать интерактивные анимированные страницы, в некоторых блогах вы могли видеть интересные текстовые сообщения, которые сами сохранят пользователя на сайте. Все эти бесплатные шаблоны страниц 404 ошибок уникальны по-разному. К сожалению, вы не можете найти все эти качества в одном шаблоне, все они являются общими. Если вам нужна полная страница 404, то вам нужно настроить любой из этих бесплатных шаблонов страницы 404, который точно соответствует вашим потребностям.
картинка 1 и 1.1.
Это единственный плагин WordPress, который попал в список. Он очень прост в использовании, обладает действительно отличным дизайном, шаблонами и настройками.
Скачать
Colorlib 404 v1
Скачать Демо
Colorlib 404 v2
Скачать Демо
Colorlib 404 v3
Скачать Демо
Colorlib 404 v4
Скачать Демо
Colorlib 404 v5
Скачать Демо
Colorlib 404 v6
Скачать Демо
Colorlib 404 v7
Скачать Демо
Colorlib 404 v8
Скачать Демо
Colorlib 404 v9
Скачать Демо
Colorlib 404 v10
Скачать Демо
Colorlib 404 v11
Скачать Демо
Colorlib 404 v12
Скачать Демо
Colorlib 404 v13
Скачать Демо
Colorlib 404 v14
Скачать Демо
Colorlib 404 v15
Скачать Демо
Colorlib 404 v16
Скачать Демо
Colorlib 404 v17
Скачать Демо
Colorlib 404 v18
Скачать Демо
Colorlib 404 v19
Скачать Демо
Colorlib 404 v20
Скачать Демо
Simple Pure Error Page
Simple Pure Error Page — это анимированный шаблон от Enrico Chiaromonte. Если вы хотите проявлять творческий подход на своей странице ошибок, тогда этот шаблон может быть полезен для вас. В этом шаблоне синий цвет используется в качестве цветовой схемы страницы, если у вас есть фирменный цвет для вашего сайта, то вы можете настроить его под нужный вам цвет.
Поскольку код, использованный для создания этой прекрасной страницы, представлен непосредственно вам, вы можете изменить желаемый цвет. Чтобы изменить цвет, вам нужно настроить CSS-файл. Если вы разработчик, вы будете знать, как настроить это. Но если вы обычный пользователь, вы можете использовать следующий совет.
В основном цветовой код, используемый в файле CSS, будет в шестнадцатеричных значениях цветового кода. Здесь в шаблоне по умолчанию используется синий цвет, код которого # 48A9E6. Этот код будет упомянут в коде в качестве фона: # 48A9E6; измените это значение на ваш фирменный цвет с шестнадцатеричным цветовым кодом.
Скачать Демо
Not Found
Градиент является одной из наиболее преобладающих дизайнерских тенденций, которые вы видели в последние несколько лет. Поскольку большинство ведущих брендов переходят на градиентные цвета, эксперты по дизайну предсказали, что градиент станет трендом и в следующем году.
С помощью этого шаблона 404 вы получите простое и чистое сообщение. Код ошибки и ее значение. Этот шаблон использует HTML, CSS и Javascript. Все классы, используемые в этом шаблоне, связаны между собой. Поэтому, если у вас есть намерение изменить контент, обязательно просмотрите весь исходный код.
Опять же, если у вас есть фирменный стиль в качестве цвета градиента, вы можете легко изменить его в CSS. Здесь в этом коде это упоминается как background: -webkit-repeating-linear-Gradient (-45deg, # FFEB3B, # FF6F00, # 00B0FF, # 76FF03, # b98acc, # 69a6ce, # 9b59b6). Все хэштеги имеют шестнадцатеричное значение кода цвета. Как я уже говорил вам в предыдущем шаблоне, просто измените цветовой код на тот, который вы хотите. Спасибо Джону Финку за то, что он поделился с нами этим хорошим шаблоном 404 ошибки.
Скачать Демо
Bootstrap 404
Этот тип страницы ошибок лучше всего подходит для шаблонов веб-сайтов, связанных с образом жизни, и шаблонов сайтов современных компаний-разработчиков программного обеспечения. Чтобы шаблон соответствовал существующему шаблону веб-сайта, вам может потребоваться изменить шрифты и цветовую схему этого шаблона. Разработчик этого шаблона Ахмед использовал HTML, CSS и Javascript. Код хорошо написан, так что вы можете легко соотнести эти коды с существующей кодировкой шаблона веб-сайта. Если вы хотите изменить только внешний вид шаблона, вы можете настроить раздел CSS в одиночку.
Скачать Демо
Pure CSS
Pure CSS — это действительно хорошо выполненный шаблон. Как видно из названия, этот шаблон основан исключительно на CSS, файлы JS в этом шаблоне остались нетронутыми.
Скачать Демо
404 Vampire
Страницу 404 также можно использовать для отражения праздничного настроения и сезонности, чтобы быть креативными. Эта 404 страница в стиле вампиров можно использовать во время Хэллоуина. С этим шаблоном у вас есть достаточно места, чтобы донести свое сообщение, а также есть возможность добавить кнопку призыва к действию, чтобы перевести пользователя на предыдущую страницу. Опять же, если вы хотите использовать этот шаблон для своего сайта, то вам необходимо потратить некоторое время, чтобы встроить этот код шаблона в существующий шаблон сайта.
Скачать Демо
Fantasy Error Page
Fantasy error page — это простой и элегантный шаблон. С полным дизайном страницы, он использует все пространство экрана устройства. Чтобы придать смысл названию шаблона, используется фоновое изображение в стиле фэнтези. Кроме этого вы получаете прямое сообщение об ошибке жирным шрифтом 404 и кнопку призыва к действию, чтобы перенести пользователя на предыдущую страницу. Единственное, что вам нужно изменить в этом шаблоне при интеграции с существующим шаблоном, — это цвет кнопки призыва к действию. Этот простой в использовании шаблон использует рамки HTML и CSS3.
Скачать Демо
Elegant Error Page
Скачать Демо
Fashion Error Page
Шаблон страницы Fashion Error можно использовать для шаблонов личных веб-сайтов и шаблонов веб-сайтов интернет-магазина. С большим фоновым изображением шаблону удается заполнить все пространство экрана. Этот шаблон предоставляет вам возможность добавлять значки социальных сетей, чтобы помочь пользователю связаться с вами, если ему потребуется какая-либо немедленная помощь. Форма подписки на странице ошибок не очень хорошая идея, потому что пользователь может быть немного раздражен, узнав, что нужной ему страницы там нет. Вы можете использовать это место для добавления панели поиска или кнопки возврата.
Скачать Демо
Easy Error Widget
Easy Error Widget будет удобным шаблоном страницы ошибок. Этот шаблон включает в себя все необходимые веб-элементы для удержания посетителей, а также позволяет посетителям легко с вами связаться. Если вы используете полностраничный шаблон веб-сайта, этот шаблон страницы ошибки полной ширины хорошо подойдет для вашего сайта. Вы получите сообщение об ошибке, выделенное жирным шрифтом 404, и небольшую строку, чтобы добавить свое личное сообщение. Под текстовым полем для лучшей навигации предусмотрены ссылки на другие страницы веб-сайта. В правом нижнем углу у вас есть возможность добавить иконки социальных сетей. Эффекты наведения на этой странице сделаны аккуратно.
Скачать Демо
Smart Error Page
Скачать Демо
Flashy Error Page
Шаблон страницы Flashy error — это простой и чистый шаблон страницы 404 с небольшой анимированной совой. Пузырькообразные эффекты на заднем плане дают живое ощущение шаблону. Фоновое изображение — это изображение полной ширины, которое охватывает всю страницу.
Скачать Демо
Effective Error Page
Скачать Демо
Smooth Error Page
Скачать Демо
Dark Error Page
Скачать Демо
Modern Error Widget
Скачать Демо
404 Error Widget
Скачать Демо
Simple Error Page
Скачать Демо
Cool 404 Page
Скачать Демо
Simplified Error Page
Скачать Демо
Как создать страницу ошибки 404
Всем привет, друзья! В данной статье речь пойдет о том, как создать страницу 404. Если у вас на блоге стандартная страница ошибки 404, то ее нужно срочно отредактировать и сделать красивой.
Страница ошибки 404 – это такая страница, которой просто не существует. Например, вы написали статью, и по каким-то причинам решили ее удалить. Но эта статья еще индексируется поисковыми системами. Посетитель зайдет на ваш сайт и увидит вод такую некрасивую страницу ошибки:
Скорее всего, эта страница не понравиться посетителю и он быстро закроет сайт. Так зачем нам такая не правильная страница 404? Я считаю, что лучше ее изменить и заставить человека остаться на блоге. Тем боле, что это делается очень просто и быстро.
Мою страницу ошибки вы можете посмотреть по такому адресу http://vachevskiy.ru/232 Если вы хотите увидеть, как выглядит ваша страница 404, то нужно после третьего слеша ввести любые символы. Ну, например, так: http://ваш домен.ru/1212345.
Для того, чтобы создать 404 страницу, нужно сначала скачать файл 404 php себе на компьютер. Для этого зайдите в панель управления – внешний вид – редактор. Откройте файл 404 php скопируйте код, который в нем находиться и вставьте его в блокнот Notepad ++ например, на рабочем столе компьютера.
Файл 404 php можно также скачать и другим способом. Для этого зайдите в корень сайта. Перейдите в папку wp-content – themes – название темы — 404.php. Скачивайте файл себе на компьютер и сделайте его копию, потому что ми сейчас будем делать изменения в коде.
Что теперь можно сделать с этой страницей? Да все, что угодно. Вставлять картинки, похожие записи, популярные записи. Можно добавить поиск по сайту, вставить ссылку на главную страницу или же на карту сайта. Написать любой текст посетителю. В общем, делать все, чтобы у нас появилась красивая страница 404 для сайта.
Но в любом случаи, я считаю, что человек должен видеть, что страницы, которую он ищет, больше нет. Это будет правильная страница 404. Вот я в фотошопе за 5 минут сделал такую картинку.
Согласитесь, намного лучше, чем просто надпись, Error 404 — Page Not Found. Вы также можете скачать в интернете любую картинку. Просто введите в поиске по картинкам «404 страница»:.
Для того, чтобы вставить изображения в страницу ошибки, можно воспользоваться вод таким кодом:
но перед тем, нужно закачать изображения на хостинг в папку images, а также нужно каждое изображения оптимизировать, для этого прочтите статью, о том, как уменьшить вес фото или картинки без потери качества.
Вставить последние записи можно так:
Вывести популярные записи можно при помощи этого кода:
Вывод категорий сайта:
Если вы хотите вывести поиск по блогу на 404 страницу, то найдите в файле header.php или sidebar.php код, который отвечает за поиск по сайту, и вставьте его в страницу ошибки.
Если вы хотите разместить что-то по центру страницы, то нужно воспользоваться тегом
Вот, например, я хочу сделать картинку по центру:
Возможно, хотите сделать отступ сверху, тогда воспользуйтесь следующим кодом:
В последнем случаи ми сделали отступ картинки на 30px сверху. Число 30 можно изменять. Экспериментируйте.
Отступ снизу на 30px делается следующим образом:
Думаю, этих знаний css будет достаточно, чтобы у вас получилась красивая страница 404 для сайта.
Какие коды вставлять, вы уже знаете. Теперь остается выяснить, куда их вставлять. Код моей страницы ошибки выглядел до изменений следующим образом:
Как видно, все коды нужно вставлять внутрь блока div. Я убрал надпись h3 Error 404 — Page Not Found /h3 поскольку она мне не нужна.
Вместо этого вставил картинку по центру. После картинки вставил вод такой текст:
И сделал отступ сверху на 20рх, чтобы текст не прилипал к картинке. А еще ниже сделал вывод последних записей:
А вот, красивая страница 404 для сайта http://vachevskiy.ru/232
Если вы не умеете изменять что-то в кодах, то можете сделать 404 страницу при помощи плагина. Но, здесь стоить сказать и то, что каждый плагин уменьшает загрузку вашего сайта. Об этом я подробно писал в статье: «Как ускорить wordpress блог». Но все же, если вы решили сделать красивую страницу 404 для сайта при помощи плагинов, то вот они:
Redirection. Принцип роботы этого плагина очень простой. Вы указываете в настройках любую страницу, и этот плагин будет перенаправлять посетителя со страницы 404 на ту, которую вы указали в настройках. Мне кажется неплохой плагин. Скачать вы его можете здесь.
Smart 404. Этот плагин вместо 404 страницы выдает пользователю другую релевантную страницу. Он ищет похожую запись в рубриках и метках. Если у вас тематический сайт и много похожих статей, то думаю, этот плагин вам подойдет. Скачать можно здесь.
Вот и все, наверное, что касается вопроса, как создать страницу 404. До новых встреч ;-).
10 оригинальных страниц ошибок для сайта
Странице ошибки 404 уделяют мало внимания, мы предлагаем вам аж 10 оригинальных страниц. Смешная или просто оригинальная картинка будет приятным сюрпризом в столь неприятной ситуации, именно так это и работает.
Стандартная страница 404 для uCoz легко заменяется на нестандартную, об этом ниже. Эти страницы такие же простые, как и в этом материале.
Установка
Выберите приглядевшуюся вам страницу ниже, нажмите «Скачать» и загрузите с помощью «Файлового менеджера» файлы из скаченного архива 404.htm
и вложенное изображение в архиве в корневой каталог. Большего не нужно, страница установлена.Каравай, каравай, кого хочешь выбирай…
Весьма интересный вариант в виде объявления.
Скачать
Объемные цифры возникли из пустоты.
Скачать
А это анимированная страница.
Вы станете свидетелем похищения страницы НЛО.
Скачать
Одинокая и грустная луна…
Скачать
А здесь Лох-несское чудовище.
Скачать
Какая-то сказочная страница, не находите?
Скачать
Кулак. Похоже, какого-то зека.
Скачать
Код виден через дыру в сайте.
Скачать
Слыхали легенду о кракене?
Скачать
Ну, и на последок такая вот страница ошибки.
Скачать
Хочется сделать подборку просто оригинальных страниц ошибок 404 (Page not found) на разных сайтах. Если знаете такие страниц, то отправляйте ссылки на них в комментариях. Будет интересно посмотреть, до чего додумались веб-мастера и дизайнеры.
Надеемся, что и наша подборка вам понравилась. Все изображения взяты с открытого источника dribbble.com.
Страница 404 ошибки — как сделать, примеры красивых дизайнов
Когда я делаю технический аудит, то обязательно проверяю наличие правильной страницы 404 ошибки на сайте. И в этом посте я вам расскажу, что это такое и зачем нужно.
Ошибка 404 страница не найдена (404 page not found) — это такой код ответ сервера, который был принят консорциумом W3C в 1992 году. Клиент (браузер) отправляет запрос серверу через протокол HTTP. А сервер этот запрос обрабатывает и выдает ответ 404.
Что означают эти цифры:
Первая четверка значит, что есть ошибка со стороны браузера — например, пользователь не правильно написал url в адресной строке или страница раньше была на сайте, а сейчас ее уже нет.
Вторые две цифры (0 и 4) означают именно ошибку “Не найдено”, которая относится к группе ошибок 4xx, например, 403 Forbidden (доступ запрещен), 400 Bad Request (неправильный запрос), 401 Unauthorized (не авторизовано) и другие.
Причины, почему возникает страница 404 ошибки:
- У страницы сменился url адрес
- Страница вообще была удалена с сайта
- Пользователь написал адрес с ошибкой
- Сайт недоступен в данный момент
- Сайт вообще больше не работает
- Некачественное интернет соединение
Страница 404 и SEO
Для SEO продвижения сайта важно, чтобы на сайте не было внутренних ссылок на 404 страницы, то есть так называемых битых ссылок. Проверяется это с помощью разных сервисов и программ, самой популярной из которых является программа Xenu’s Link.
Смотрите видео, как пользоваться программой:
Просто загоняете адрес сайта в программу и она находит внутренние битые ссылки на сайте.
В конце краулинга прога формирует отчет, где можно увидеть, есть ли на сайте битые ссылки или нет.
Если на сайте есть такие ссылки (404 ошибка, страница не найдена), то нужно их исправить. Если возможно, то вручную, например, поменять старый неправильный url на новый правильный. Или если страницы нет и она не нужна, то просто удалить с сайта внутреннюю ссылку на нее.
Если же битых ссылок очень много (огромный интернет магазин), то здесь лучше искать программиста, чтобы он убрал все эти ошибки. Также часто бывает, что такие ссылки — ошибки технического плана, тоже устраняются программно.
Правильная страница ошибки
Рекомендации, как сделать правильную 404 страницу для сайта:
- Объясните пользователю, куда он попал, то есть, что эта страница ошибки, и ее не существует. Он должен понять, что находится на нужном сайте, просто не на нужной ему странице. Можно юморнуть, я часто встречал на таких страницах юмор, это вызывает улыбку и уже закрывать сайт не хочется.
- Обязательно нужно добавить ссылки на основные разделы сайта, в том числе и на главную. Пользователь не должен искать, как ему попасть на нужную страницу, вводить опять адрес сайта в строке браузера, иначе он просто уйдет и больше никогда не вернется.
- Сделать строку поиска на странице ошибки. Типа вы не туда попали, а если воспользуетесь нашим поиском, то найдете нужную страницу на сайте и уже попадете, куда хотели попасть.
- Страница 404 ошибки обязательно должна быть выполнена в дизайне сайта. Иначе у посетителя может сложиться впечатление, что он попал совсем на другой сайт, тогда он точно закроет страницу и больше не вернется. А если на вашей странице ошибки будет ваш логотип, название компании, общий фирменный стиль сайта, тогда будет сразу понятно, что посетитель попал на нужный ему сайт, просто не та страница.
В большинстве современных CMS 404 страница уже предусмотрена шаблоном и создавать ее не нужно, можно только сделать настройку, типа заказать новый дизайн или немного поменять верстку в соответствии с рекомендациями выше.
Если же страницы нет, то можно создать ее самостоятельно. Делается это очень просто: в корневом каталоге сайта находите файл .htaccess (если его нет, то нужно создать, просто блокнот файл). Открываете этот .htaccess и в любом месте прописываете с новой строки:
ErrorDocument 404 http://ВАШ_САЙТ/404.php
Теперь и на вашем сайте есть 404 страница.
Несколько примеров
А вот здесь я подготовил для вас примеры красивых страниц 404 ошибки. Возможно, вы здесь найдете что-то интересное для себя и возьмете интересные идеи на внедрение.
Запомните, что ошибка 404, когда вам пишет, что нет такой страницы — это всегда негатив. А нам нужно оставлять о сайте всегда положительные впечатления. Надеюсь, моя статья помогла вам понять, какая должна быть 404 страница, чтобы вы могли ее переделать на позитивный лад.
P.S. Если вам понравилась статья, то поделитесь ею в социальных сетях, пишите ваши вопросы или комментарии ниже.
Как украсить страницу ошибки 404 на блоге WordPress
Продолжаем работать над нашим блогом WordPress. И поговорим о странице ошибки 404 на блоге, то есть о такой странице, адрес которой вбивают посетители, и получают сообщение об ошибке.
Такая ошибка (и страница) имеет номер 404. К примеру, если Вы вобьете в адресную строку браузера следующий адрес:
pro444.ru/net-takoy-stranicy
то увидите сообщение о том, что такой страницы не существует. Обычно выдается стандартный вариант несуществующей страницы, и если он Вам подходит, можете оставить все так, как есть.
Но можно сделать все значительно интересней. Например, на страницу ошибки 404 можно поместить подсказки, что посетителю в такой ситуации делать дальше, а то он может растеряться, и совсем покинуть Ваш блог, а Вам это, я думаю, не нужно.
Делаем картинку
Для начала подготовим картинку. чтобы разместить ее на несуществующей странице. Открываем программу FSCapture, и делаем скрин горизонтального меню сайта. В программе Adobe Photoshop сближаем крайние элементы картинки: пункт меню Главная и Поиск по сайту.
Делаем разрыв ластиком, и снабжаем элементы поясняющими надписями со стрелками. Надписи следующие
- Вы можете зайти на Главную
- Попробуйте поискать в Поиске по сайту
Размещаете эту картинку у себя на хостинге, чтобы получить ее URL-адрес. К примеру, если Вы разместите ее на своем блоге в папке images, а название файла картинки 404.jpg, то URL-адрес картинки будет следующий:
http://vash-blog/images/404.jpg
Изменяем код
Теперь нам нужно зайти в код страницы ошибки 404, и изменить его. Для этого заходите в административную панель блога, во Внешний вид — Редактор, и находите файл 404.php. Открываете его код, и ставите картинку. точнее, код картинки, который будет выглядеть так:
<img src=»URL-адрес Вашей картинки»/>
Если у Вас будут трудности с оформлением кода, можете использовать программу Dreamweaver. Только отключите CSS в пункте Редактировать — Установки — Общие — Использовать CSS вместо тэгов HTML. Делаете свои надписи и ссылки, ставите картинки. А потом берете код, который расположен между тэгами <body> и </body>, и вставляете в код страницы ошибки 404 в редакторе блога.
Видео о том, как изменить страницу ошибки 404 на блоге WordPress
Более подробные сведения Вы можете получить в разделах «Все курсы» и «Полезности», в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:
Django, создание пользовательской страницы ошибок 500/404
Следуя приведенному здесь учебнику, я не могу создать пользовательскую страницу ошибок 500 или 404. Если я наберу плохой url, страница выдаст мне страницу ошибки по умолчанию. Есть ли что-то, что я должен проверить, чтобы предотвратить появление пользовательской страницы?
Каталоги файлов:
mysite/
mysite/
__init__.(?P<poll_id>\d+)/vote/$', views.vote, name='vote'),
)
Я могу опубликовать любой другой необходимый код, но что я должен изменить, чтобы получить пользовательскую страницу ошибки 500, если я использую плохой url?
Редактировать
SOLUTION: у меня был дополнительный
TEMPLATE_DIRS
в моем settings.py, и это было причиной проблемы
python django django-templates http-status-code-404Поделиться Источник Zac 15 июля 2013 в 20:07
14 ответов
- Как обрабатывать пользовательские страницы ошибок для 500 ошибок в kohana 3.3
Как использовать пользовательские страницы ошибок для 500 ошибок в kohana 3.3. Я пробовал использовать пользовательские страницы ошибок для 404 ошибок и их работы. Я только что ссылался на официальный сайт kohana , но понятия не имею, как справиться с ошибкой 500. Будет очень полезно, если…
- Пользовательские страницы ошибок для django-cms
Предположительно тривиальная задача для сервера 403/404/500 страниц ошибок при использовании django-cms. Следуйте инструкциям на старом посте на форуме, чтобы создать это: from cms.views import details def custom_404(request): response = details(request, ‘page-not-found’) response.status_code =…
125
Под вашим основным views.py добавьте свою собственную пользовательскую реализацию следующих двух представлений и просто настройте шаблоны 404.html и 500.html с тем, что вы хотите отобразить.
В этом решении нет необходимости добавлять пользовательский код в urls.py
Вот код:
from django.shortcuts import render_to_response
from django.template import RequestContext
def handler404(request, *args, **argv):
response = render_to_response('404.html', {},
context_instance=RequestContext(request))
response.status_code = 404
return response
def handler500(request, *args, **argv):
response = render_to_response('500.html', {},
context_instance=RequestContext(request))
response.status_code = 500
return response
Обновление
handler404 и handler500 являются экспортированными переменными конфигурации строки Django, найденными в django/conf/urls/__init__.py . Вот почему вышеописанная конфигурация работает.
Чтобы заставить вышеуказанную конфигурацию работать, вы должны определить следующие переменные в файле urls.py и указать экспортированные переменные Django на путь строки Python, в котором определены эти функциональные представления Django, например:
# project/urls.py
handler404 = 'my_app.views.handler404'
handler500 = 'my_app.views.handler500'
Обновление для Django 2.0
Подписи для представлений обработчиков были изменены в Django 2.0: https://docs.djangoproject.com/en/2.0/ref/views/#error-views
Если вы используете представления, как указано выше, handler404 завершится ошибкой с сообщением:
«handler404() получил неожиданный аргумент ключевого слова ‘exception'»
В таком случае измените свои взгляды следующим образом:
def handler404(request, exception, template_name="404.html"):
response = render_to_response(template_name)
response.status_code = 404
return response
Поделиться Aaron Lelevier 13 июля 2014 в 16:56
79
Вот ссылка на официальную документацию о том, как настроить пользовательские представления ошибок:
https://docs.djangoproject.com/ru/stable/темы/http/просмотры/#customizing-error-views
Он говорит, чтобы добавить такие строки в свой URLconf (установка их в другом месте не будет иметь никакого эффекта):
handler404 = 'mysite.views.my_custom_page_not_found_view'
handler500 = 'mysite.views.my_custom_error_view'
handler403 = 'mysite.views.my_custom_permission_denied_view'
handler400 = 'mysite.views.my_custom_bad_request_view'
Вы также можете настроить представление ошибок CSRF, изменив параметр CSRF_FAILURE_VIEW .
Стоит ознакомиться с документацией обработчиков ошибок по умолчанию, page_not_found , server_error , permission_denied и bad_request . По умолчанию они используют эти шаблоны, если могут их найти, соответственно: 404.html , 500.html , 403.html и 400.html .
Поэтому, если все, что вы хотите сделать, это сделать красивые страницы ошибок, просто создайте эти файлы в каталоге TEMPLATE_DIRS , вам вообще не нужно редактировать URLConf. Прочитайте документацию, чтобы узнать, какие переменные контекста доступны.
В Django 1.10 и более поздних версиях представление ошибок по умолчанию CSRF использует шаблон 403_csrf.html .
Не забывайте, что для работы DEBUG должно быть установлено значение False, иначе будут использоваться обычные обработчики отладки.
Поделиться Flimm 03 июня 2016 в 09:52
44
Добавьте эти строки в urls.py
from django.conf.urls import (
handler400, handler403, handler404, handler500
)
handler400 = 'my_app.views.bad_request'
handler403 = 'my_app.views.permission_denied'
handler404 = 'my_app.views.page_not_found'
handler500 = 'my_app.views.server_error'
# ...
и реализуем наши пользовательские представления в views.py.
from django.shortcuts import (
render_to_response
)
from django.template import RequestContext
# HTTP Error 400
def bad_request(request):
response = render_to_response(
'400.html',
context_instance=RequestContext(request)
)
response.status_code = 400
return response
# ...
Поделиться Armance 26 октября 2015 в 10:03
21
Со страницы, на которую вы ссылались:
Когда вы поднимаете Http404 из представления, Django загрузит специальное представление, посвященное обработке 404 ошибок. Он находит его, ища переменную handler404 в вашем корневом URLconf (и только в вашем корневом URLconf; установка handler404 в любом другом месте не будет иметь никакого эффекта), которая представляет собой строку в синтаксисе Python с точками – тот же формат, что и обычные обратные вызовы URLconf. Сам по себе вид 404 не имеет ничего особенного: это просто обычный вид.
Поэтому я считаю, что вам нужно добавить что-то подобное к вашему urls.py:
handler404 = 'views.my_404_view'
и аналогично для handler500.
Поделиться Mike Pelley 15 июля 2013 в 20:13
19
Если все , что вам нужно, — это показать пользовательские страницы, на которых есть некоторые необычные сообщения об ошибках для вашего сайта, когда DEBUG = False, затем добавьте два шаблона с именами 404.html и 500.html в каталог шаблонов, и он автоматически подберет эти пользовательские страницы при появлении 404 или 500.
Поделиться Krishna G Nair 01 декабря 2016 в 04:54
14
Django 3.0
вот ссылка , как настроить представления ошибок
вот ссылка , как отобразить представление
в urls.py (основной, в папке проекта) поместите:
handler404 = 'my_app_name.views.custom_page_not_found_view'
handler500 = 'my_app_name.views.custom_error_view'
handler403 = 'my_app_name.views.custom_permission_denied_view'
handler400 = 'my_app_name.views.custom_bad_request_view'
и в этом приложении ( my_app_name ) введите views.py :
def custom_page_not_found_view(request, exception):
return render(request, "errors/404.html", {})
def custom_error_view(request, exception=None):
return render(request, "errors/500.html", {})
def custom_permission_denied_view(request, exception=None):
return render(request, "errors/403.html", {})
def custom_bad_request_view(request, exception=None):
return render(request, "errors/400.html", {})
NOTE: error/404.html -это путь, если вы помещаете свои файлы в папку шаблонов проектов (а не приложений) templates/errors/404.html , поэтому, пожалуйста, разместите файлы там, где вы хотите, и напишите правильный путь.
NOTE 2: После перезагрузки страницы, если вы все еще видите старый шаблон, измените его на settings.py DEBUG=True , сохраните его, а затем снова на False (чтобы перезагрузить сервер и собрать новые файлы).
Поделиться elano7 31 марта 2020 в 20:00
13
В Django 2.* вы можете использовать эту конструкцию в views.py
def handler404(request, exception):
return render(request, 'errors/404.html', locals())
В settings.py
DEBUG = False
if DEBUG is False:
ALLOWED_HOSTS = [
'127.0.0.1:8000',
'*',
]
if DEBUG is True:
ALLOWED_HOSTS = []
В urls.py
# https://docs.djangoproject.com/en/2.0/topics/http/views/#customizing-error-views
handler404 = 'YOUR_APP_NAME.views.handler404'
Обычно я создаю default_app и обрабатываю ошибки всего сайта, контекстные обработчики в нем.
Поделиться DeN 26 февраля 2018 в 08:38
11
settings.py:
DEBUG = False
TEMPLATE_DEBUG = DEBUG
ALLOWED_HOSTS = ['localhost'] #provide your host name
и просто добавьте свои 404.html и 500.html страниц в папку шаблонов.
удалите 404.html и 500.html из шаблонов в приложении опросы.
Поделиться Rakesh babu 03 марта 2016 в 10:58
10
В Django 3.x принятый ответ не будет работать, потому что render_to_response был полностью удален, а также были внесены еще некоторые изменения со времени версии, для которой работал принятый ответ.
Некоторые другие ответы также есть, но я представляю немного более чистый ответ:
В вашем основном файле urls.py :
handler404 = 'yourapp.views.handler404'
handler500 = 'yourapp.views.handler500'
В файле yourapp/views.py :
def handler404(request, exception):
context = {}
response = render(request, "pages/errors/404.html", context=context)
response.status_code = 404
return response
def handler500(request):
context = {}
response = render(request, "pages/errors/500.html", context=context)
response.status_code = 500
return response
Убедитесь, что вы импортировали render() в файл yourapp/views.py :
from django.shortcuts import render
Примечание: render_to_response() устарел в Django 2.x и был полностью удален в verision 3.x .
Поделиться Rehmat 20 февраля 2020 в 11:19
Поделиться Anuj TBE 19 мая 2020 в 13:10
7
Сделайте ошибку, на странице ошибки выясните, откуда django загружает templates.I означает путь stack.In базовый template_dir добавьте эти html страницы 500.html , 404.html . При возникновении этих ошибок соответствующие файлы шаблонов будут автоматически загружены.
Вы также можете добавить страницы для других кодов ошибок, таких как 400 и 403 .
Надеюсь, это поможет !!!
Поделиться allsyed 17 августа 2016 в 09:42
5
Как одна строка (для общей страницы 404):
from django.shortcuts import render_to_response
from django.template import RequestContext
return render_to_response('error/404.html', {'exception': ex},
context_instance=RequestContext(request), status=404)
Поделиться FireZenk 04 мая 2015 в 13:07
4
# views.py
def handler404(request, exception):
context = RequestContext(request)
err_code = 404
response = render_to_response('404.html', {"code":err_code}, context)
response.status_code = 404
return response
# <project_folder>.urls.py
handler404 = 'todo.views.handler404'
Это работает на django 2.0
Обязательно включите свой пользовательский 404.html в папку шаблонов приложений.
Поделиться ENDEESA 30 июня 2018 в 07:58
3
Попробуйте переместить шаблоны ошибок в .../Django/mysite/templates/ ?
Я не уверен насчет этого, но я думаю, что они должны быть «global» на веб-сайте.
Поделиться astrognocci 15 июля 2013 в 20:16
Похожие вопросы:
Поиск классических ошибок ASP на пользовательской странице ошибок 404 в IIS7
Мы переносим некоторые классические сайты ASP из коробки IIS6 в новую коробку Server 2008 под управлением IIS7. Мы прошли через процесс обучения в отношении пользовательских ошибок, и теперь они…
Получение failed url на пользовательской странице ошибок 404
Можно ли получить URL неудачного запроса с пользовательской страницы ошибок 404? Я использую IIS, чтобы установить пользовательскую страницу ошибок на страницу .net, где я хочу обработать неудачный…
поднимите 404 вместо 500 в urls.py django
У меня есть сайт, работающий на django. Есть несколько паттернов url, которые я не улавливаю , скажем www.mysite.com/12233445 www.mysite.com/@##$$$ www.mysite.com/alphabetagamma это приводит к 500-й…
Как обрабатывать пользовательские страницы ошибок для 500 ошибок в kohana 3.3
Как использовать пользовательские страницы ошибок для 500 ошибок в kohana 3.3. Я пробовал использовать пользовательские страницы ошибок для 404 ошибок и их работы. Я только что ссылался на…
Пользовательские страницы ошибок для django-cms
Предположительно тривиальная задача для сервера 403/404/500 страниц ошибок при использовании django-cms. Следуйте инструкциям на старом посте на форуме, чтобы создать это: from cms.views import…
Пользовательские 404 и 500 ошибок не работают
Получил пользовательские 404 и 500 страниц ошибок, которые не работают. Я получаю следующую ошибку для обеих страниц, когда пытаюсь получить доступ напрямую или через ошибку: ошибка img .htaccess…
Неправильно сконфигурированные пользовательские шаблоны ошибок HTTP в проекте Django (404 500)
Я нахожусь в аду кодов ошибок Django HTTP. Было бы здорово, если бы эксперт помог мне выйти из моей неправильной конфигурации. Мой проект Django работает с nginx в качестве обратного прокси-сервера,…
Предварительный просмотр пользовательской страницы 500 ошибок в Трясогузке?
Я сделал пользовательские 500 и 404 страницы ошибок в Wagtail. Я могу просмотреть страницу 404, введя false url. Мне просто интересно, как я могу просмотреть 500 страниц? На пользовательской…
Общая страница 404 и 500 для моего проекта Django, имеющего несколько приложений
Я разрабатываю один проект Django, который содержит несколько приложений. Мне нужна общая страница ошибок 404 и 500 для всех приложений. Как мне это сделать? Я реализовал отдельные страницы ошибок…
Как получить Django для перенаправления на другую страницу вместо входа в систему при реализации разрешения?
У меня есть разрешение, которое работает с представлением: @permission_required(‘app.admin_foo’) def fooView(request, id=None): … Но поведение по умолчанию-перенаправление на вход в систему. Как я…
Дизайн страницы 404: лучшие практики и отличные примеры
Ваша страница 404 — это целевая страница, на которую никто не хочет заходить. Но если пользователи все равно попадут туда, почему бы не извлечь из этого максимальную пользу? Мы покажем вам, как это сделать.
Вы знаете это чувство. Вы нажимаете интересную ссылку на сообщение в блоге, которое хотите прочитать, и БАМ! 404 Страница не найдена. Это автоматически раздражающий и негативный опыт. Но как эта страница 404 говорит с вами? Это полезно? Даже восхитительно?
Начните создавать запоминающиеся интерактивные страницы 404 с помощью Justinmind
Скачать бесплатноДумайте о 404 как о целевой странице, хотя и о целевой странице, на которую никто не хочет заходить.А затем подумайте, сколько работы уходит на обычную целевую страницу, чем на страницу с ошибкой. Хорошо продуманная страница 404 может иметь огромное значение для восприятия бренда пользователем. Плохая — это упущенная возможность.
Но что делает хорошую страницу 404? К чему вы должны стремиться или что вы должны включить в это, когда собираете страницу в своем любимом инструменте каркаса? Не волнуйся! У нас есть для вас полный обзор, а также некоторые из лучших страниц 404 со всего Интернета, чтобы вдохновить вас.
Коды состояния HTTP: краткая история страницы 404
Так почему же она вообще называется страницей 404? Как обычно, объяснение довольно загадочно и возвращает нас в темные века Интернета (где-то около 1990 года). Несмотря на популярные мифы о 404, относящиеся к древней серверной комнате или к офису изобретателя во всемирной паутине Тима Бернерса-Ли, оказывается, что 400 — это произвольный ярлык, прикрепленный к ошибкам клиента, который включает 404: Страница не найдена.
Ошибка 404 — это ошибка на стороне клиента, поскольку считается, что клиент (ваш веб-браузер) запрашивает ресурс (URL-адрес, который вы щелкнули или ввели), который не существует или не может быть найден.Итак, теперь вы знаете.
Важно помнить, что ошибка 404 — не всегда ваша вина. Плохо скопированная ссылка на чужом сайте может указывать на страницу с ошибкой — и это уже не в ваших руках. Важно то, что вы с ними делаете, когда они случаются.
Конкурирующие философии страницы с ошибкой 404
Есть два основных подхода к дизайну страницы с ошибкой 404: простая страница и все остальные. Обоснование простой страницы 404 обычно носит технический характер: эта страница предназначена только для уведомления об ошибке и не должна делать ничего, кроме ссылки на домашнюю страницу.Страница 404 Google — классика в своем жанре.
Мы склонны не соглашаться с этим подходом — фактически, так же поступает и Google в своем собственном совете по созданию страниц 404. Хорошая страница с ошибкой 404 должна показать вашему пользователю, что даже если что-то идет не так, все будет хорошо. Страницы с ошибками должны успокаивать, радовать и направлять пользователя к интересному контенту. Потратьте время на создание потрясающей, запоминающейся страницы 404 — стоящее вложение. Помните: на самом деле это разновидность целевой страницы.
Что должна включать страница 404?
Ваша страница может меняться в зависимости от вашего бренда. Однако, как минимум, убедитесь, что вы включили эти элементы при разработке страницы ошибки с помощью инструмента прототипирования:
- Сообщение об ошибке
Вам нужно, чтобы ваш пользователь немедленно распознал, что он попал на страницу с ошибкой. - Внешний вид бренда
Точно так же убедитесь, что ваша страница 404 соответствует внешнему виду вашего сайта.Представьте свой логотип, сделайте его своим.
Присмотритесь: ключевые аспекты вашей 404-страницы
Превратите ошибку пользователя в возможность UX
Стандартная готовая страница 404 дает пользователям только один вариант — вернуться туда, откуда они пришли . Что печально. Вы хотите создать 404 страницы, которые позволят пользователям переходить к другим частям вашего сайта, обычно к домашней странице или страницам функций.
И не давайте им ссылки. Добавьте поле поиска на страницу 404, чтобы вернуть пользователям чувство контроля над своим опытом и облегчить выполнение задачи.
Избегайте беспорядка для более высоких показателей успеха пользователей
Перегрузка пользователя страницей 404, заполненной ссылками на каждый уголок вашего сайта, — верный способ когнитивно перегрузить и без того разочарованного пользователя. И, как ясно дает понять гуру NN Group Кэтрин Уитентон, когнитивная перегрузка и удобство использования несовместимы.
Лучше всего создать страницу 404 с несколькими ключевыми ссылками, включая ссылку на главную страницу, как простой выход для пользователей, которые еще не уверены, что они ищут.Другие варианты включения могут быть в блоге, функциях продукта или на странице «О нас».
В целом, стремление включить до 4 ссылок на страницу 404 является хорошей практикой. Airbnb включает больше, но это Airbnb.
Лучшие страницы 404 — это возможности для брендинга
Для многих пользователей страница 404 может быть самым первым взаимодействием с брендом. Одна маленькая страница с ошибкой — это большая нагрузка. Следуйте основным передовым методам, например, убедитесь, что эстетика страницы соответствует остальной части сайта.Убедитесь, что микрокопия полностью отражает тон, а значки и изображения соответствуют другим сайтам или продуктам.
Просто имейте в виду, что функциональность должна быть выше формы в 404. Сделайте так, чтобы внешний вид бренда служил функции страницы, как некоторые из лучших примеров 404 страниц ниже!
Великолепный дизайн страниц 404 для вдохновения
Вот несколько веб-сайтов, которые отметили все нужные поля своими страницами 404. Будь то умный брендинг или увлекательный юмор, каждая из следующих страниц привлекла наше внимание из-за того опыта, который они предлагают пользователям.Давайте посмотрим на них!
Mailchimp — одно из тех имен, которые сегодня узнает большинство людей. Их веб-сайт посвящен бренду и индивидуальности, и страница 404 дает тот же результат! Нам нравится, что Mailchimp дает краткое объяснение того, как они не могут найти страницу, которую искал пользователь, а также брендирование иллюстрации.
Lego удалось создать дизайн страницы 404, который является одновременно фирменным и полезным. Полезно в том смысле, что превращает плохой пользовательский опыт в возможность продать.Следовательно, потрясающий CTA, который возвращает пользователей на главную страницу. Копия добавляет яркости и юмора, улучшая восприятие страницы с ошибкой.
Это своеобразный дизайн страницы 404. Нет ни логотипа, ни умной иллюстрации. Вместо этого у нас есть простая ссылка на домашнюю страницу и отличительное поле с цитатами из известных фильмов, слегка измененных, чтобы соответствовать странице 404.
Нам нравится тонкий брендинг, поскольку пользователи IMDb любят кино и, скорее всего, узнают цитаты.Это создает забавный и приятный опыт, который для страницы 404 является успехом.
Omelet — креативное агентство, которое предлагает различные услуги, от управления социальными сетями до производства фильмов. Поэтому неудивительно, что дизайн их страницы 404 оказался большим победителем.
Смелое использование цвета добавляет бликов, в то время как меню навигации достаточно интегрировано на страницу, поэтому не требует дополнительных ссылок. Затем есть та замечательная копия, которая привлекает и удивляет пользователя.Мы любим это!
Кофейный гигант, которого мы все знаем, Starbucks, отлично поработал со своим дизайном страницы 404. Дизайн страниц предлагает пользователям объяснение, почему они столкнулись со страницей с ошибкой, а также несколько ключевых ссылок на главную страницу, страницу контактов и карту сайта.
Нам нравится творческий подход. Знак того места, где раньше стояла чашка кофе, указывал на пропущенную страницу: это тонкий брендинг и юмор в лучшем виде!
20th Century Studios также разместили ссылку на фильм на своей странице 404 и сделали отличный брендинг.Он включает в себя фон с культовой сценой из одного из их фильмов, а также цитату. Нам нравится, что большой белый шрифт производит впечатление и сохраняет читаемость, поскольку цвета фона меняются вместе с видео.
Spotify не нуждается в представлении. Страница 404 является прямым отражением их бренда и их целевого рынка, создавая отличное сочетание брендинга и UX.
Красивый розовый фон в сочетании с иллюстрацией вызывает чувство ностальгии и попадает в самую точку, когда дело касается копии.На этой странице хорошо спланировано все, от надписей на кнопке до того, что помещаемый виниловый диск называется «404»!
Medium — классический пример отличной страницы 404, для которой не нужны иллюстрации или видео. Medium делает это со шрифтом и копией! Нам нравятся различные оттенки серого в тексте и тот факт, что на странице есть панель поиска, поэтому пользователям предлагается продолжить навигацию.
Еще лучше использовать эту страницу, чтобы предложить некоторые рекомендуемые книги о том, как вы чувствуете себя потерянным.В каком-то смысле это одновременно фирменный стиль и очень забавный выбор контента, но в целом он приносит отличные впечатления.
У New Yorker есть страница 404, которая легко сочетается с остальной частью веб-сайта и индивидуальностью бренда. У него есть полезный текст, который побуждает людей переходить на домашнюю страницу и указывает пользователям на панель поиска в правом верхнем углу экрана.
Иллюстрация выполнена в безупречном нью-йоркском стиле. Это и забавно, и отражает то, что пользователи чувствуют при падении на странице 404.
Drift — это SaaS-компания, занимающаяся разговорным маркетингом. Их бренд молодой и динамичный, наполненный реальными людьми, а не простым маркетинговым программным обеспечением. И их страница 404 отражает все это.
Нам нравится использовать цвета, иллюстрации и общую юность страницы. В нем есть полезные ссылки и несколько отличных рекомендуемых материалов, чтобы побудить пользователей продолжить навигацию — другими словами, он помечает все нужные поля.
Airbnb полностью раскрыл индивидуальность бренда.У них даже есть свой шрифт: хлопья. Поэтому неудивительно, что их страница 404 стала еще одним хитом. Гифка справа от экрана — отличный способ представить, как пользователи чувствуют себя на странице 404 — он добавляет юмора и яркости на простую в остальном страницу.
Страница 404 также включает 7 ссылок на их домашнюю страницу и другие важные страницы их веб-сайта. Как мы уже упоминали ранее, использование 7 ссылок может показаться некоторым излишним, но Airbnb справляется с этим.
12. Музей науки и промышленности Чикаго
Музей науки и промышленности Чикаго также предлагает пользователям великолепный опыт 404.Нам нравится, что они также предлагают несколько ссылок, которые предоставляются в организованном виде, который никогда не перегружает пользователя.
Мы также ценим забавную информацию о старой школе 1902 года. Весь алфавит на одном циферблате доступен потребителям! Это заставляет вас оценить, как долго мы прошли, и в каком-то смысле это уже не может быть более репрезентативным для музея.
Дэн Вуджер — иллюстратор и графический дизайнер, работавший в таких крупных компаниях, как McDonald’s, Bloomberg’s и New York Times.Нам нравится, что дизайн его страницы 404 забавный и непринужденный, с некоторыми вещами, кроме иллюстрации гамбургера, в котором он сожалеет о пропавшей странице. Иногда это все, что вам нужно.
Дэн взял то, что побуждает большинство пользователей покинуть веб-сайт, и превратил это в возможность со ссылкой на свое портфолио. Это умный UX-дизайн!
Mashable — новостная платформа, охватывающая все, от технологий до публикаций в Game of Thrones. Их контент разнообразен и пытается охватить широкую группу пользователей.Их страница 404 — победитель, потому что она проста и приятна.
Копия отличная, как и панель поиска внизу. Весь веб-сайт разработан таким образом, чтобы пользователи могли просто прокручивать и перемещаться по контенту. И поэтому имеет смысл побуждать пользователей искать тему и начинать ее изучение.
Blue Path — это консалтинговая компания по науке о данных, которая предлагает пользователям отличную страницу 404. Эта страница хороша своим юмором и простой графикой, которая представляет собой текст и график.Юмор размещать карту слева и сигнализировать пользователю, что он будет далеко от этой карты, справа? Отличная аналогия!
Ваша страница с ошибкой 404 — это возможность продемонстрировать творческий подход и направить пользователя на ваш путь. Что-то пошло не так, но все в порядке. Рассматривайте эту страницу как своего рода целевую страницу, и в конечном итоге она может помочь укрепить ваш бренд и обеспечить конверсию.
Это момент, когда вы выбираете момент, который обычно наполнен разочарованием и негативом, и превращаете его во что-то хорошее.Сделайте его незабываемым по правильным причинам!
404 Страница: Дизайн не найден. Как создавать большие страницы ошибок | Автор: Шакуро
Катя Шокурова, копирайтер по тел. Шакуро
Иллюстрация Пекеньо КапитанЧто такое страница с ошибкой? Причина смущения и раздражения? Немного беспокоит? Вообще ничего? То, что пользователи натыкаются на страницу 404, также расстраивает владельцев сайтов. Тем не менее, может существовать дизайн страницы 404, на котором можно заработать.
У вас есть возможность выбрать, что будет чувствовать ваш пользователь.
Дизайнер может создать креативную страницу с ошибкой 404, чтобы повысить коэффициент конверсии и увеличить трафик, превращая прохожих в потенциальных клиентов. Если вы ищете вдохновение, как улучшить страницу 404 (с примерами), то читайте дальше!
404 Дизайн страницы Алекс Калиниченко для ShakuroСтраница 404 — это онлайн-страница, на которую вы попадаете после нажатия на ссылку, которая не работает и, следовательно, больше не доступна.
Есть две основные причины, по которым посетитель может оказаться на странице с ошибкой 404:
- компания удалила определенный контент со своего веб-сайта или изменила его URL-адрес
- человек неправильно ввел URL-адрес, что не является редкостью на нашем мобильном телефоне. эпоха.
Итак, ошибка 404 означает, что кто-то напортачил.
404 Page by OSCARОшибки — часть нашей жизни, это точно. В идеале пользователи не должны видеть страницу 404 полностью, но в реальном мире веб-сайты регулярно обновляются, некоторые ссылки больше не действуют.Вы никогда полностью не избавитесь от необходимости в странице 404. Но лучше проявить инициативу.
Надежная страница с ошибкой 404 может превратить плохое качество обслуживания клиентов в приятное.
Не полагайтесь на код 404, предоставляемый браузерами.
Ух! Это так жестко, холодно, скучно и трудно понять. Слишком много текста и технического жаргона. Он ничем не помогает посетителям.
Пользовательская страница 404 намного лучше:
- Брендинг. Он укрепляет имидж вашего бренда и увеличивает вероятность того, что посетители продолжат посещать ваш сайт, а не покинут его навсегда.
- Здание треста. Обслуживаемая страница 404 действует как надежный метод установления определенного уровня доверия между потребителем и компанией.
- SEO. Он предоставляет дополнительные ссылки на важные части вашего сайта, чтобы поисковые системы могли достичь его полной структуры.
- Удовольствие. Забавные страницы 404 играют на творчестве и смягчают удар несбывшихся ожиданий пользователей.
Страница 404 — это страница, на создание которой могут уйти тысячи долларов, при этом надеясь, что ее никто никогда не увидит.
Дизайн страницы 404, вероятно, не первое, что думает дизайнер или владелец веб-сайта, но все же он жизненно важен. Лучшие практики дизайна страницы ошибок гарантируют, что ваша страница будет на высшем уровне и будет хорошо служить своим целям.
Новая страница Dribbble 404 от Rogie для DribbbleКогда вы создаете настраиваемую страницу с ошибкой 404, она по-прежнему остается страницей вашего веб-сайта, поэтому на ней должны сохраняться те же фирменные и визуальные элементы, что и на любой другой странице, например шрифты, цвета, заголовок, логотип , и сохранить общий стиль и индивидуальность бренда.
Страница 404 — Еженедельные задачи пользовательского интерфейса — Сезон 02 / нед. [2/10], Ана РуменовичОсновная цель страницы 404 — быть функциональной и быстро указывать пользователям в правильном направлении. При разработке страницы 404 подумайте о включении следующих компонентов:
Базовый элемент. Но на самом деле, если вы последовали совету из предыдущего пункта, он может вам не понадобиться, потому что все необходимые ссылки будут там.
Поле поиска на макете страницы 404 дает пользователю возможность продолжить поиск любой страницы, которую он имел в виду, таким образом заставляя их оставаться на месте.
- Несколько ссылок на самые популярные страницы
Здесь вы можете попробовать сделать некоторые прогнозы и полагаться на законы вероятности. Если пользователь следил за популярной страницей, вы можете быстро указать ему в правильном направлении.
404 Иллюстрация взаимодействия с ошибкой «Не найдена» для веб-страницы. Автор Тарас Мигулко. Поле поиска очень удобно предлагается после увлекательной анимации.Представление пользователю страницы 404, заполненной до краев ссылками на каждую страницу вашего веб-сайта, — это определенный способ проверить пределы терпения уже разочарованного пользователя.
Минималистичный дизайн страницы с ошибкой 404 может в конечном итоге наиболее эффективно служить своим целям. Лучший дизайн способен достичь своих целей простейшими средствами. Это вершина изысканности дизайна.
404 Страница — DailyUI # 008, Хендрик С.Лучший дизайн — самый простой, который работает.
— Альберт Эйнштейн
Каким бы цифровым ни было современное общество, было бы ошибкой думать, что все осознают значение ошибки 404.В конце концов, это не та страница, к которой люди привыкли. Более эффективно разъяснить, в чем проблема, полезным и ясным образом.
Обратите внимание на текст 404 страницы и выбор слов. Более эффективно выбрать вариант «Извините! Мы не могли найти эту классическую страницу по сравнению с машинной «Ошибка 404: страница не найдена», как раньше.
Извините. Возможно, это даже не ваша вина, но это покажет пользователю, что вам не все равно.
Страница не найдена Тран Мау Три ТамомМногие веб-сайты используют забавный подход и делают свои страницы интересными, например, GitHub или Pixar.
Создание забавного и замечательного дизайна страницы 404 может оказать на удивление сильное влияние на то, чтобы посетители дольше оставались на вашем веб-сайте. Люди могли даже рассказать о вашей особенно забавной 404-й странице своим друзьям.
404. Где страница, Лебовски? Автор: Дмитрий З. Веселый дизайн 404 со ссылкой на «Большой Лебовски»братьев Коэн. Предложение некоторых специальных предложений, таких как 10% скидка на странице 404, может уменьшить разочарование ваших посетителей и побудить их продолжить работу с вашим сайтом. и даже получить прибыль от этой ситуации.Используйте что-нибудь вроде «Приносим извинения за неудобства. Позвольте нам что-то вам вернуть, сделав специальную сделку ». Это мощный стимул для продолжения и совершения покупки.
Пустое состояние — страница ошибки 404 автор: Rudityas W Anggoro16 супер умных страниц 404, которые полностью соответствуют бренду
Креативные страницы 404 в наши дни пользуются популярностью.
Похоже, веб-дизайнеры постоянно пытаются превзойти друг друга, создавая все более и более совершенные версии того, что раньше было общим сообщением об ошибке.
Простой поиск в Google, Pinterest или Dribbble найдет тысячи примеров, которые помогут развить ваши творческие способности.
… Но погодите — красивая эстетика — это только полдела!
Единственное, что действительно отличает страницу 404 от остальных, — это то, как она связана с вашим брендом, продуктами, услугами и прямыми призывами к действию, которые повторно привлекают ваших посетителей, чтобы они продолжали изучать ваш сайт.
Следующие бренды проделали большую работу по созданию пользовательских страниц 404, которые устанавливают все флажки.
Marvel
Marvel помещает своих супергероев в центр своей страницы 404. Они проделали большую работу, связав сообщение об ошибке с конкретным персонажем. Добавлен бонус, страница имеет тонкую анимацию и может быть обновлена для просмотра других персонажей. Гений.
20th Century Fox
Такой простой, но такой умный. Компания 20th Century Fox использует сцены из своих фильмов, чтобы подшутить над ужасной страницей 404, как они это делают со сценой из «Мести ботаников». Вы даже можете немного отомстить — купив фильм со скидкой!
Specialized
Почему бы не продемонстрировать свой продукт в действии? Specialized использует одного из своих гонщиков, чтобы объяснить свою страницу 404.Все делают ошибки, почему бы не продемонстрировать одну на своей странице?
Blizzard
Blizzard, популярный производитель видеоигр, выводит неработающие страницы на совершенно другой уровень. Меню, экран — все битое. И это ты во всем виноват! Бонусные баллы за меню, которое все еще работает и позволяет посетителям повторно участвовать.
eHarmony
Сайты знакомств известны тем, что имеют отличные страницы 404. Eharmony’s — еще один отличный пример того, как простое изображение и дерзкий текст могут превратить разочарованных посетителей в потенциальных клиентов.
Pixar
Гигант анимационных фильмов сегодня имеет одну из самых популярных страниц 404 в Интернете. Печаль из их популярного фильма «Наизнанку» используется для объяснения сообщения об ошибке, используя концепции прямо из фильма. Кроме того, реквизит для красивого дизайна с большим количеством белого пространства!
Distilled
Страница 404 Distilled идет по совершенно иному пути. Вместо того, чтобы искать минимальное количество копий и надеяться на клик, на странице представлены два очень симпатичных мультяшных персонажа, обсуждающих ошибку 404 и то, что посетители могут делать дальше.Такой простой, но такой креативный.
PageCloud
Да, даже разработчикам веб-сайтов нужна страница 404! Страница PageCloud 404 объединяет бренд, продукт и контекст как единое целое. Вы находитесь на неработающей странице, почему бы вместо этого не создать ее? Ах да, на заднем плане тоже облако. Возьми? PageCloud.
airbnb
Вы не можете не чувствовать себя виноватым из-за анимированной девушки airbnb, которая роняет мороженое на этой странице 404. Вы же не хотите сразу уходить, это было бы нехорошо! Почему бы вместо этого не щелкнуть ссылку справки?
9 Gag
9GAG известен смешными видео, изображениями и гифками.На их странице 404 представлена известная сцена из «Криминального чтива», где растерянный Винсент (Джон Траволта) ищет Миа (Ума Турман). Подзаголовок: «Здесь ничего нет» и скачивание нашего приложения, чтобы найти то, что вы ищете, идеально связывает все воедино.
Дэн Вудгер
Популярный иллюстратор-фрилансер, чьи творения использовались такими гигантами, как McDonald’s, добавляет один из своих дружелюбных гамбургеров с извиняющимся флагом на свою умную страницу 404. Бонус? Тонкий призыв к действию, отправляющий посетителей посмотреть его другие иллюстрации.
Email Center UK
Поговорим о том, как высмеивать сообщение «об ошибке». Это ведь должна быть чья-то вина? На странице 404 Emailcenter вас попросят выбрать, кого из их разработчиков следует уволить за ошибку. Кого бы вы ни выбрали, вы увидите забавную групповую картинку и соответствующую копию. Может, в следующий раз добавят редирект и сохранят работу.
IMDb
IMDb — один из крупнейших источников фильмов, телепередач и знаменитостей. Их страница 404 содержит несколько цитат из популярных фильмов, которые были изменены, чтобы соответствовать контексту.Нажмите «Обновить», и вы увидите новую цитату со стратегической ссылкой на дополнительную информацию о фильме.
Orange Coat
Страница 404 Orange Coat содержит продуманную блок-схему, которая поможет счастливому интернет-путешественнику найти информацию, которую он искал. Все, что вам нужно сделать, это ответить на их вопросы ДА / НЕТ, и вы отправитесь в путь. Бонус: их URL-адрес даже заканчивается на / дорогой-счастливый-интернет-путешественник — гораздо удобнее, чем / error, верно?
LEGO
Страница 404 LEGO — еще один пример, показывающий, насколько ваша страница может быть: привлекательной, эффективной и фирменной, но без чрезмерной сложности.Изображение, строка текста и кнопка для отправки пользователей домой. Вот и все — и каждый раз это заставляет улыбаться.
TSheets
Поскольку они предлагают программное обеспечение для планирования, TSheets решили отметить одну из великих сцен из «Назад в будущее», где доктор Эммет Браун разгоняется до 88 миль в час на Delorean, используя свой конденсатор потока. Как и программное обеспечение TSheet, эта сцена демонстрирует важность точности и эффективности, поэтому вы не запускаете OUTATIME.
Что вы думаете об этих конструкциях? Какой из них твой любимый?
Если вы чувствуете вдохновение, почему бы не узнать, как создать свою собственную страницу 404 сегодня? Это проще, чем вы думаете!
20 лучших примеров страниц 404, когда-либо существовавших (+ Советы, чтобы сделать вашу страницу потрясающей)
Вы потратили часы на создание своего веб-сайта, разработку контента и создание бренда, только чтобы не заметить свою страницу 404.Легко полагаться на общий код, который предлагает ваш хост-провайдер, но реальный вопрос в том, а вы?
Создать пользовательскую страницу 404 легко и это отличный способ продолжить развитие вашего бренда. Креативная, веселая или информативная страница 404 может сделать даже неработающую ссылку или отсутствующую страницу интересной для посетителей.
Он может пролить свет на неудачную ситуацию, перенаправить посетителей на аналогичный ценный контент или даже добавить забавное сообщение бренда к тому, что обычно разочаровывает ваших посетителей.
Что такое страница 404?
Страница 404, иначе известная как «Страница не найдена» или «страница с ошибкой», представляет собой страницу домена, которую пользователь достигает, когда веб-адрес или URL-адрес не предоставляет правильную информацию для направления пользователя на нужную страницу.
Чтобы помочь вам лучше понять страницу 404, давайте разберем компоненты URL-адреса или унифицированного указателя ресурсов. URL-адрес состоит из:
- Протокол
- Доменное имя
- Путь
Например, примите во внимание URL нашего блога: https: // www.bluleadz.com/blog. Протокол — https: //, домен — bluleadz.com, а / blog — путь.
Страница 404 появляется, когда пользователи случайно вводят что-то вроде https://www.bluleadz.com/bling. Домен правильный, но путь / шик никуда не ведет.
Ответ HTML-кода для этого — 404, что также поможет вам обнаружить все неработающие ссылки на вашем сайте. Например, предположим, что у вас есть продукты, перечисленные на вашем сайте, и каждый из них имеет свой уникальный путь.
Таким образом, ваш URL-адрес будет https: // www.pretendbiz.com/products/shirt-1, со ссылкой на этот товар на главной странице. Если вы решите удалить этот продукт, но забудете удалить ссылку, пользователь будет перенаправлен на страницу 404, что позволит им узнать, что страница не может быть найдена.
6 основных компонентов Cool 404 Pages
Давайте рассмотрим краткое изложение некоторых из наиболее важных компонентов страниц 404, которые помогут вам разработать собственную страницу ошибок.
Юмор
Когда пользователь нажимает на неработающую ссылку или делает ошибку при вводе URL-адреса, это может сильно расстраивать.Однако создание забавной или привлекательной страницы 404 может помочь поднять настроение.
Это гарантирует, что вы предоставите своим клиентам хорошее впечатление о вашем веб-сайте, даже если что-то, кажется, «идет не так».
Четкая тема бренда
Несмотря на то, что страница 404 не является важной страницей на вашем веб-сайте, она все же является частью вашего веб-сайта. Это означает, что он должен соответствовать вашему бренду, и даже дает вам возможность немного больше продемонстрировать свой бренд.
Это поможет вам превратить проблему в возможность.Помимо вашего логотипа в углу страницы, вы также должны включить фирменные цвета и изображения бренда, чтобы добавить немного пиццы.
Использование графики
Пустые страницы скучные и тусклые. Подарите своим пользователям что-нибудь захватывающее и интересное. Привлекательная графика может напомнить им, почему они все еще хотят щелкнуть ссылку, чтобы продолжить поиск того, что им нужно.
Хорошая практика — сделать так, чтобы ваша графика каким-то образом соответствовала вашей копии.
Ссылки на другие популярные страницы
Чтобы избежать потери трафика, добавьте внутренние ссылки на свою страницу 404, которые помогут вашим пользователям найти то, что им нужно.Сделайте некоторые предположения и выберите ссылки на популярные страницы, которые, по вашему мнению, помогут вашему пользователю.
Текст, который направляет пользователей в нужное место
По сути, вам нужно предупреждающее сообщение, и вы должны указать им действие, которое поможет перенаправить их.
Не бойтесь придавать тексту свое собственное восприятие вместо использования стандартной строки «Вы попали не на ту страницу» или «Страница не найдена».
Ссылки верхнего и нижнего колонтитулов
Предоставление пользователям тех же меню навигации, которые они могут найти на других страницах, дает им отличный пользовательский интерфейс.Они с большей вероятностью знают, по какой ссылке нужно щелкнуть в меню навигации, потому что они, вероятно, уже знакомы с ней.
Это означает, что они с меньшей вероятностью откажутся от вашего сайта.
20 лучших примеров страниц 404
Вам нужно еще немного вдохновения, чтобы создать замечательную страницу 404? Взгляните на эти примеры из реальных компаний.
1. Amazon
Amazon может одновременно держать в воздухе много шаров. Их страница с ошибками — это та область, о которой им не нужно беспокоиться.Это замечательно! Это отчасти инструмент для подбора персонала, отчасти идентификатор бренда и много веселья!
Когда вы попадаете на их страницу 404, вы видите изображения и копируете многих собак, которые тусуются в офисах компании. Оттуда вы можете нажать на биографии собак и перейти к реальным историям их сотрудников-владельцев, рассказывающих о том, на что должна работать отличная компания Amazon.
2. Чудо
Marvel буквально показывает привлекательное изображение на своей странице 404.Они используют одного из своих персонажей и Око Уату, чтобы добавить юмора своей странице, заявляя, что даже он не может «увидеть ваш запрос».
Еще одна замечательная особенность этой страницы 404 заключается в том, что у них есть верхнее и нижнее меню, поэтому пользователи могут легко переходить на другие страницы, чтобы найти то, что они ищут.
3. Pixar
На странице 404Pixar есть Печаль из журнала Inside Out 2015 года, а также сообщение «Оууу … Не горюй, это просто ошибка 404».
Довольно простой и понятный, и он выполняет свою работу.Это также действительно симпатичный визуальный идентификатор бренда Pixar!
4. Произвольная форма
Страница 404 на сайтеFreeform является представителем одного из популярных шоу Freeform — Siren . Их изображение бухты в ночное время привлекает внимание, а их копия проста и умна.
У них также есть четкий CTA, который возвращает посетителей прямо на главную страницу.
5. Битли
Страница ошибкиBitly предлагает дзен-фотографию женщины в какой-то позе йоги.Попадание на страницу 404 может быть неприятным, и Bitly это понимает.
Они дают несколько советов по поводу ссылок с учетом регистра и помогают перенаправить пользователей обратно на главную страницу.
6. Huda Beauty
Прекрасно иметь иллюстрации на странице 404, но еще лучше иметь индивидуальные иллюстрации вашего основателя. Huda Beauty добавляет стиль к каждой странице своего веб-сайта, и их страница 404 ничем не отличается.
Их страница 404 также дает пользователям доступ к поиску и их сумке для покупок в верхнем правом углу.Посетители Huda могут быть легко перенаправлены на страницу, которую они ищут.
7. Австралийский
Национальная газета Австралии, принадлежащая News Corp, The Australian имеет уникальную страницу с ошибками, которая идеально соответствует их обширному освещению правительства и политики. Он высмеивает политический язык и публичные ошибки политиков.
Когда вы приземляетесь здесь, вы выбираете политика из раскрывающегося меню, чтобы объяснить ошибку, как может только политик. Совершенно точно, и очень весело!
8.Codecademy
Codecademy — отличный веб-сайт, который учит людей программировать. У них есть потрясающая страница 404 с игрой, в которую вы можете играть, в которой участвует бегун и несколько блоков, на которые бегущий персонаж должен прыгать, когда вы нажимаете клавишу пробела. Они также позволяют вам щелкнуть призыв к действию, который приведет вас к курсу, который научит вас программировать игры.
Они отлично справляются с созданием интересной страницы 404 для конкретного бренда, которая действительно помогает уменьшить разочарование пользователей и создать для них отличный пользовательский опыт.
9. Восточный рынок
Людям нравятся игры, особенно игры, в которых вы нажимаете клавишу, чтобы летать по небу, избегая препятствий.
НаEastern Market в Детройте есть страница с ошибкой, на которой изображена игра «Flappy Spud», в которой вы летите картофелем сквозь стены. Когда вы сталкиваетесь с препятствием, оно превращается в груду картошки фри. Приятное прикосновение.
10. Индекс бесполезной сети
Индекс бесполезных веб-сайтов — это крупнейший индекс совершенно бесполезных веб-сайтов в Интернете.Даже у них есть выходные.
Когда они не могут найти то, что вы ищете, они готовы с идеальной страницей ошибок; видео, где сурикаты являются сурикатами и другими забавными фигурами.
11. Случайный дом пингвинов
УPenguin Random House есть отличная страница 404 с забавной иллюстрацией книги, спящей на работе. Их копия умна, потому что она остается на бренде и перенаправляет пользователей на домашнюю страницу.
У них также есть полное меню навигации и панель поиска, которые помогают пользователям легко перемещаться по сайту публикации.
12. IMDb
Страница ошибокIMDb — отличный пример, показывающий, что страница с ошибкой не обязательно должна использовать статическую копию.
Pages могут прокручивать библиотеку копий, изображений или иллюстраций, чтобы предоставить вам уникальную страницу для каждого посетителя. На странице IMDb представлены измененные цитаты из фильмов. Обновите его несколько раз и проверьте.
13. Мемориальная библиотека Фалви
Мемориальная библиотека Фалви расположена в кампусе Виллановы в Пенсильвании.Хотя это не библиотека мирового класса, ее страница 404 довольно забавна.
В нем есть заголовок «Осторожно — вместо того, чтобы найти то, что вы искали, вы, кажется, наткнулись на каких-то драконов». Тогда вам будет предложено уйти от этих прекрасных иллюстрированных чудовищ.
14. Эмирейтс
Emirates — ультрасовременная международная авиакомпания ОАЭ, известная своей роскошью, стилем и высоким качеством. Их страница с ошибкой идеально сочетается с остальной частью их веб-сайта.
Это идеальное отражение имиджа их бренда и дает вам множество возможностей легко найти на сайте именно то, что вы ищете.
15. Одинокая планета
Вам не всегда нужно иметь какую-то грандиозную схему, связь с брендом или метафору на странице ошибки. Иногда все, что вам нужно, это ленивец в ванной, чтобы донести свою точку зрения!
16. Bluleadz
Так что называйте нас предвзятыми, но мы любим нашу страницу 404! С помощью придуманной фразы «Ты должен быть котенком меня», она, вероятно, выражает то, что чувствует большинство людей, когда они достигают страницы, которой больше не существует.
Кот на странице, вероятно, разделяет то же чувство разочарования, пытаясь получить мяч, который находится вне досягаемости. С изящной панелью поиска вы сможете найти контент, похожий на то, что вы искали изначально.
17. Студия 20-го века
У20th Century Studios есть потрясающая фирменная страница 404 с большим черно-белым кадром из одного из их знаменитых старых фильмов. Они обыгрывают изображение забавным текстом под заголовком.
У них даже есть панель поиска и простое меню, чтобы пользователи могли найти то, что они ищут, или вернуться на домашнюю страницу.
18. Дисней
Disney — это высшее качество, и их страница 404 — не исключение. У них есть анимированный Wreck it, Ральф просовывает голову через 0 из 404, чтобы отразить замешательство пользователя. Ниже большого 404 — отчетливая и остроумная копия, которая ссылается на один из их фильмов.
В довершение ко всему, внизу у них есть еще один персонаж, который помогает пользователям искать именно то, что им нужно.
19. Лиса
Эта страница 404 — одна из наших любимых.Fox предлагает юмористический призыв к действию, который высмеивает пользователя за то, что он попал на страницу, которой не существует. В разделе «Глупый человек» написано: «Соберись». Этой страницы не существует.
И, конечно же, там есть саркастический Стьюи из Family Guy со скрещенными руками. Помимо классного изображения и CTA, у Fox есть полное меню вверху, чтобы помочь людям перемещаться по сайту оттуда.
20. HelpScout
УHelpScout есть отличная страница 404, которая соответствует их бренду.Он отображает восхитительную иллюстрацию, относящуюся к их копии. Они не используют стандарт: «Эта страница не существует». Вместо этого у них есть заголовок, который гласит: «Рух-ро!»
Затем они предоставляют три ссылки, чтобы помочь пользователям перейти на нужную страницу, вместе со ссылками в заголовках.
Пользовательские страницы ошибок 404 не должны быть скучными. Приложив немного креативности, они могут послужить еще одним элементом в стратегии развития вашего бренда и цифрового маркетинга.
В этих примерах используется все, от юмористического текста до возможностей информативного поиска, анимации, видео и т. Д., Чтобы превратить неудачный случай (неработающую ссылку) в еще одну точку соприкосновения для своего бренда.
Нажатие на неработающую ссылку не обязательно ведет к потере продажи или к будущему клиенту. С остроумной, хорошо продуманной страницей ошибок вы можете превратить негатив в забавное, информативное впечатление для ваших пользователей, и, в конце концов, разве не в этом все дело?
15 лучших примеров 404 страниц в Интернете
Мы все привыкли свободно перемещаться по веб-сайтам и непрерывно прокручивать каналы вниз. Когда что-то идет не так или мы нажимаем на ссылку, которая не работает, последующее сообщение «Эта страница не может быть найдена» может быть более чем разочаровывающим.И именно здесь в игру вступают 404 страницы.
Страница с ошибкой 404 может улучшить или испортить качество обслуживания клиентов. Этот небольшой, но очень важный раздел дизайна вашего веб-сайта может повысить ваши продажи и побудить посетителей к действию. Это может быть разница между тем, как посетитель бросает и покидает ваш сайт, или становится постоянным клиентом и поклонником вашего бренда.
Следующие бренды и дизайнеры показывают нам, как можно использовать классическое сообщение об ошибке в ваших интересах.Они обновили свои 404 страницы, чтобы не только смягчить удар, но и подарить клиентам улыбку, чувство облегчения или даже небольшой смех. Вот некоторые из лучших примеров страницы 404:
Что такое страница 404?
Страница 404 — это онлайн-страница, которая появляется, когда вы нажимаете на ссылку, которая не работает и, следовательно, больше (или фактически никогда не была) доступна.
Это может произойти, если кто-то неправильно наберет URL (или, другими словами, веб-адрес, который отображается в адресной строке браузера).Вы также можете перейти на страницу 404, если компания удалила или переместила определенный контент со своего веб-сайта или внесла изменения в структуру своих постоянных ссылок.
При создании веб-сайта вы можете либо оставить параметр по умолчанию как есть, либо настроить страницу с ошибкой 404. Последнее дает вам возможность создать привлекательный дизайн, который повысит качество обслуживания клиентов. В дополнение к дизайну у вас будет возможность написать дружественное сообщение о бренде, которое предоставит посетителям помощь и указания, которые им необходимы для продолжения просмотра.
01. Pixar — Симпатичная страница 404
Поклонники Pixar, несомненно, оценят эту трогательную страницу 404. В нем представлен персонаж из всеми любимого фильма Inside Out , что помогает укрепить репутацию их бренда и наладить связь с посетителями сайта. Использование разговорного языка и знакомого персонажа также делает страницу более человечной, помогая нам общаться и общаться.
Независимо от того, известен ли ваш бренд во всем мире так же широко, как Pixar, вы можете экспериментировать с текстом и изображениями, чтобы создать дружеское, человеческое ощущение.Поиграйте с теплым и неформальным языком, используя такие слова, как «ууууу» и «ой», чтобы установить связь с аудиторией.
02. Омлет — страница 404 с юмором
Нет ничего лучше легкого юмора, чтобы облегчить неприятную ситуацию, особенно если все сделано хорошо. Креативная компания Omelet использовала силу сдержанной комедии на своей странице 404, при этом придерживаясь своей темы, связанной с яйцами.
Яркий оттенок красного автоматически указывает на предупреждающий знак, но первоначальная паника уравновешивается комическим сообщением «Эта страница неаккуратна».Обратите внимание, как они оставили свою строку меню видимой в верхней части экрана, что упростило навигацию по сайту и позволило посетителям сайта продолжить просмотр.
03. Dribbble — Interactive 404 page
Отвлечение внимания — не всегда плохо. Страница с ошибкой социальной сети Dribbble доказывает это. Веселый интерактивный дизайн приглашает посетителей поиграть, на мгновение отвлекая их внимание от того факта, что они не достигли желаемой веб-страницы.
Игра не только вызывает привыкание, но и служит формой навигации; щелкнув любое изображение, вы попадете в профиль его создателя, плавно удалив вас со страницы 404.Они также позаботились о том, чтобы включить строку поиска и ссылку на свою домашнюю страницу.
04. Dropbox — Helpful 404 page
Вы не можете не влюбиться в этот дружелюбный, балансирующий на велосипеде дуэт. Нарисованные в невинном иллюстративном стиле, фигуры улыбаются от щеки к щеке и, кажется, делают все немного лучше. Этот замечательный пример включения иллюстраций в веб-дизайн передает ощущение знакомства и доступности, что облегчает разочарование при достижении страницы с ошибкой 404.
Кроме того, Dropbox постарался добавить несколько полезных ссылок. Это позволяет пользователю легко перейти на альтернативную страницу. При создании собственной страницы 404 рекомендуется помочь посетителям вашего сайта, добавив ссылки на самые популярные разделы вашего сайта, такие как домашняя страница, раздел контактов и страница «О нас».
05. The-Artery — фирменная 404-я страница
Немногие люди будут жаловаться на эту красиво оформленную 404-ю страницу. Модные визуальные эффекты гармонируют с остальной частью веб-сайта этой творческой студии, что обеспечивает удобство просмотра даже при обнаружении неработающей ссылки.
Само изображение перемещается в ответ на курсор и состоит из интересных элементов. Это увеличивает вероятность того, что посетители сайта даже намеренно задержатся на этой странице немного дольше. Используемый текст также удобен, предлагая вам щелкнуть в любом месте экрана, чтобы легко продолжить просмотр.
06. Lazy Oaf — пример модной страницы 404
Вот страница 404, которая не совсем придерживается условностей. Модный лейбл Lazy Oaf, утверждающий, что «с 2001 года ведет себя странно», сдержал свое обещание — как можно лучше.
Вместо того, чтобы предоставлять посетителям сайта обычное объяснение того, почему они, возможно, попали на эту страницу с ошибкой, они заменили ее комичными отговорками, грустными смайликами и табличкой с надписью «дерьмо случается». Однако эта очень откровенная и ярко раскрашенная страница 404 совсем не грустная. Они также обеспечили интуитивно понятную навигацию, сохранив видимую строку меню, а также добавив изображения из своего интернет-магазина на расстоянии короткой полосы прокрутки.
07. Spotify — страница 404 с индивидуальным оформлением
Страница ошибки Spotify помогает укрепить идентичность их бренда благодаря модному использованию розового цвета тысячелетия и изображений виниловых пластинок.Они сохранили свои панели меню на виду, как в верхнем, так и в нижнем колонтитулах, что упростило навигацию.
Помимо возможности навигации по меню, Spotify также принял дружественный разговорный язык, чтобы предлагать другие полезные страницы. При создании своего собственного сайта попробуйте использовать неформальные слова, такие как «может быть», и вопросы, чтобы посетители вашего сайта почувствовали, что с другой стороны находится человек.
08. Julie Bonnemoy — Анимированная страница 404
Это портфолио от дизайнера-фрилансера Julie Bonnemoy — настоящий праздник для глаз.Страница 404 почти идентична дизайну домашней страницы, только с другим текстом. Это означает, что вы можете плавно переходить к любому из других разделов, едва заметив, что вы достигли 404.
Если вы решите оформить свою домашнюю страницу и страницу 404 в аналогичном стиле, вы можете поэкспериментировать с добавлением определенных элементов для создания увлекательный опыт. Поиграйте с анимированными элементами на своем сайте, добавьте прозрачные видеоролики и уникальные векторные иллюстрации.
09. OkCupid — Tranquil 404 page
Сеть знакомств OkCupid не пытался скрыть свою главную цель: побудить посетителей сайта подписаться на ее сервис.Хотя этот заметный CTA (призыв к действию) очень прямой по своему подходу, он сочетается с нежным шрифтом и успокаивающими подводными визуальными эффектами, которые плавно перемещаются по экрану. Вместе они образуют общий уравновешенный вид, который далеко не напористый.
Еще один совет — сконцентрируйте дизайн страницы 404 вокруг успокаивающих оттенков, чтобы убедить клиентов, что, хотя страница может отсутствовать, они все еще на правильном пути. Оттенок синего OkCupid вызывает умиротворение и чувство доверия — мудрый выбор для страницы 404.Чтобы подобрать подходящий оттенок для вашего дизайна, стоит изучить психологию цвета.
10. Lego — Friendly 404 page
Lego использовала знакомого персонажа для дизайна своей страницы 404, помогая связать аудиторию с брендом и создать дружескую атмосферу. Их разговорный стиль текста также обнадеживает, сохраняет тон легким и игривым, с восклицательными знаками и повседневным языком.
Если вы также собираетесь создать юмористическую страницу 404, убедитесь, что она функциональна, как это сделала Lego здесь, предлагая альтернативные варианты навигации.Они выделили кнопку с призывом к действию на белом фоне, что делает ее заметной. Сохраняя меню на виду, как в верхнем, так и в нижнем колонтитуле, посетители сайта могут легко переходить на дополнительные страницы.
11. Ueno — страница 404 с креативной копией
Цифровое агентство Ueno создало несколько вариаций своей веселой, беззаботной страницы 404. Анимированного хот-дога, который, казалось бы, спасает свою жизнь, достаточно, чтобы вызвать улыбку на любом лице. Но в сочетании с остроумным текстом слева посетители сайта будут рады, что наткнулись на эту отсутствующую страницу.
Уэно сочетает комедию с лаконичным минималистичным дизайном. Если вы добавляете юмор на свою страницу 404, убедитесь, что сбалансировали его, поддерживая профессиональный вид, соответствующий принципам дизайна. Использование белого пространства, минимальной цветовой палитры и текстовой иерархии помогает бренду достичь профессионального тона.
12. Figma — Привлечение 404 стр.
Хотя на первый взгляд это может показаться классическим дизайном «черный текст на белом фоне», это далеко не так. Более пристальный взгляд откроет возможность поиграть с текстом, сделав несколько захватывающей интерактивной игрой и дающей представление о природе самого продукта.
Figma также включает множество различных вариантов навигации, включая меню как вверху, так и внизу страницы. Потенциально разочарованные посетители могут легко получить доступ к нужной странице, щелкнув один из множества пунктов меню.
13. MailChimp — Heartwarming 404 page
Реализуя стиль иллюстрации, идеально сочетающий детский и эмоциональный характер, MailChimp определенно знает, как смягчить несколько удручающую ситуацию при переходе на страницу 404.Они включают большую кнопку, которая выделяется, являясь единственным цветным элементом и расположена прямо посередине страницы.
Однако, что делает эту страницу 404 по-настоящему особенной, так это чувствительность, с которой был создан каждый элемент. Образ осла с головой в норе, отчаянно ищущего страницу, которую искал посетитель, движется сам по себе. Но в сочетании с поэтическим языком и сочетанием шрифтов с засечками и без засечек общий эффект трогает и поднимает настроение.
14. Уэйд и Лета — Странно и чудесно 404 page
Этот уникальный дизайн творческого дуэта Уэйда и Леты выделяется из толпы. Как и все остальное их онлайн-портфолио, оно личное и странное во всех смыслах. Они включили короткую зацикленную гифку, на которой Уэйд болтает в проходе супермаркета и делает жест рукой, который, кажется, не имеет отношения к проблеме страницы 404.
Однако он вызывает улыбку, что, несомненно, является положительным результатом перехода на страницу с ошибкой.Большой текст на вашем лице — это не только тренд веб-дизайна, он также служит для того, чтобы прямо и стильно проинформировать вас о проблеме.
15. Wix — Четкая и лаконичная страница 404
Мы не могли не добавить эту. И не только потому, что на нем невероятно пушистый кот. Хотя этот кошачий друг, безусловно, выигрывает по привлекательности, он также позволяет тонко предположить, что посетитель сайта, возможно, неправильно набрал доменное имя (либо это, либо виноваты какие-то лапы).
Помимо визуального аспекта, эта страница с ошибкой предлагает полезные ссылки, которые направят посетителя в желаемое место.Текст краткий и по существу. Сочетание с простой цветовой схемой веб-сайта, состоящей из большого белого фона, а также с оттенками серого и черного, страница вызывает чувство спокойствия.
Автор: Дана Меир
Эксперт и писатель по дизайну
21+ лучших примеров страниц с ошибками 404 (+ лучшие практики, которые необходимо знать) Считайте
своими многими личными талантами.Например, я люблю делать оригами бумажных журавликов и цветов.Я занялся оригами как хобби в очень юном возрасте, как способ снять стресс … и, ну, ну, ну, чтобы иметь чем-то еще, кроме просмотра повторов недолговечного мультфильма «Новые дети на блоке».
Кроме того, если честно, я действительно умею заблудиться.
Несмотря на то, что я очень опытный путешественник, вооруженный навигационным приложением Waze, иногда мои мысли будут блуждать во время вождения, или я буду слишком взволнован, когда в машине буду долго петь Стиви Уандера.
Тогда, прежде чем я это осознал, я пропустил выход … или три. Ой. (Честно говоря, некоторые из моих лучших приключений были прямым результатом неправильных поворотов, пропущенных съездов или других сомнительных навыков навигации, но это история для другой статьи.)
🔎 По теме: 25 страниц контактов компаний, которые вдохновят вас
Конечно, моя способность буквально «заблудиться» не ограничивается реальным миром.
Я постоянно тоже отклоняюсь от курса онлайн.Серьезно, я не знаю, являюсь ли я своего рода магнитом для интернет-тупиков, но я почти уверен, что видел каждую страницу с ошибкой 404.
На самом деле, сегодня я наткнулся на одну, когда тратил на 100% деньги, которые не должен был тратить, поскольку у меня уже есть рынок спортивной одежды для работы на дому:
Хотя Old Navy убивает меня в игре, когда дело касается леггинсов и майок нейтрального цвета, я обнаружил, что полностью оттолкнул их 404 страница по двум причинам:
- Твои глаза не разбиты.Вам нужно прищуриться и наклониться, чтобы прочитать крошечный текст на экране — как будто это было , построенное для разрешений экрана примерно 2002 .
- Бренд Old Navy — забавный, необычный и доступный. Итак, я обнаружил, что эта страница 404 оказалась на удивление стерильной и роботизированной . Полный размах и промах.
«Это страница с ошибкой 404, Лиз. Чего ты ждала, парада?»
Да ну конечно нет. (Хотя, если вы хотите устроить мне парад, я не говорю «нет».)
Меня просто сбивает с толку, сколько брендов полностью пренебрежительно пишут на своих страницах с ошибками 404. Однако если вы придерживаетесь такого подхода, вам следует помнить о нескольких последствиях:
- В зависимости от того, насколько удобной для пользователя вы сделаете свою страницу 404 или от того, сколько четких вариантов навигации вы предоставите, посетитель может полностью покинуть ваш сайт, если он будет разочарован тем фактом, что не может найти то, что ищет. .
- В конечном итоге вы можете создать странное чувство бренда в умах ваших идеальных покупателей, как это случилось со мной и моей недорогой одеждой Old Navy.Потребители теперь возлагают большие надежды на работу в Интернете. Это означает, что устаревший, внебрендовый опыт в Интернете стал более неприятным, чем раньше.
Итак, каким важнейшим передовым методам должен следовать ваш бренд в отношении страниц 404 вашего бизнес-веб-сайта, которые удерживают ваших пользователей на вашем веб-сайте (и довольны)? И какие необычные примеры страниц с ошибками 404 вам следует искать для вдохновения?
Что ж, я так рад, что вы спросили …
Фирменный веб-сайт Обязательные функции и рекомендации страницы ошибки 404
Неважно, насколько восхитительной, креативной или иным образом вызывающей улыбку может быть ваша страница с ошибкой 404, ваша страница с ошибкой 404 будет полным провалом, если вы не будете придерживаться следующих рекомендаций или не будете включать эти обязательные функции .
1. Навигация по вашему сайту должна быть доступна
Да, у вас все равно должно быть сообщение, четко указывающее, что кто-то потерялся или попал не в то место. Но у вас все равно должны быть стандартные меню навигации и структура в верхней части вашего сайта, чтобы ваши пользователи не запутались.
Отличным примером является страница с ошибкой 404 № New York Times no-muss-no-fuss. Сразу приходит к выводу, что я нахожусь не в том месте, черт возьми, но верхняя структура навигации по сайту присутствует.
🔎 По теме: Что должно быть включено в нашу стратегию бизнес-сайта?
Итак, в дополнение к этой маленькой строке поиска, я могу легко «вернуться в безопасное место», не задумываясь и не пытаясь понять, куда мне нужно идти.
2. Если у вас есть функция поиска по сайту, включите поиск
Я не уверен, что считаю это обязательным по нескольким причинам:
- Иногда вам просто не нужна функция поиска для вашего сайта.Хотя я всегда прохожу поиск по веб-сайтам, я знаю, что из каждого правила есть исключения. Так что навигации по вашему сайту может хватить.
- Часто, если у вас есть функция поиска, это действительно отстой. Как бы я ни любил продукты Google, я всегда вздрагиваю, когда вижу функцию поиска на веб-сайте, работающую от Google, потому что есть 80% -ная вероятность, что результаты поиска будут бесполезными. Здесь, в IMPACT, мы используем Cludo, и я чертовски люблю его как человека, который должен этим управлять.
Итак, подведем итоги — поиск на сайте не нужен.Но если он у вас есть, делайте это правильно. Не создавайте дополнительных разочарований для ваших пользователей.
С этой преамбулой …
Посмотрите этот пример из одного из моих любимых ежедневных чтений, What’s New in Publishing . Я выбрал этот, потому что он показывает, что, опять же, вам не нужно иметь какой-то ослепительный подход к своей странице 404.
Здесь есть и навигация по сайту, и четкое поле поиска справа… вместе с призывом к действию для их информационного бюллетеня, что я считаю приятным штрихом.
3. Предложите несколько советов, куда они могли бы пойти.
Правило №1 для пользователей веб-сайта: не заставляйте пользователя думать. Если им придется слишком много думать о своем следующем шаге, они, вероятно, разозлятся и уйдут.
Итак, в дополнение к навигации по сайту и панели поиска вам также следует подумать о том, чтобы выдать некоторые базовые предложения, которые помогут вернуть посетителя вашего сайта в нужное русло.
Одна из самых успешных историй IMPACT, Yale Appliance, имеет эту восхитительно простую и полезную страницу 404. В дополнение к параметрам навигации по сайту и поиску, они включили удобный набор ссылок на веб-сайты, чтобы их потерянный посетитель вернулся на прямой и узкий путь.
Опять же, вам не нужно сходить с ума или расширять границы своего творчества со страницей 404. Он просто должен быть ясным, полезным и разработан с учетом потребностей вашего пользователя.
4. Вы должны придерживаться современных рекомендаций по разрешению экрана и скорости отклика.
Перед тем, как приступить к исследованию этой статьи, я не думал, что добавлю это в качестве определенной передовой практики.Но, видимо, некоторым из вас — cough Old Navy cough — нужно напоминание, что ваши страницы 404 не должны выглядеть как неуместные путешественники во времени где-то между 1996 и 2006 годами.
Я в основном наблюдаю это на сайтах электронной коммерции и у интернет-магазинов, у которых часто страницы продуктов постоянно пропадают или уходят за пределы сайта из-за нехватки инвентаря.
Это не оправдание, хотя . Вам нужно создать красивую небольшую базовую целевую страницу, на которой четко указано, что чего-то нет в наличии — опять же, с четкой навигацией по сайту и параметрами поиска.
«А что, если мы просто перенаправим их на страницу с соответствующей категорией продуктов или даже на нашу домашнюю страницу, а не на отдельную страницу 404?»
Отличный вопрос. У меня на этот счет различных, мнений.
5. Остерегайтесь перенаправления на страницы категорий или домашние страницы без страницы 404
Меня очень разочаровывают веб-сайты, которые полностью отказываются от страницы с ошибкой 404, вместо этого решая автоматически перенаправлять меня на страницу общей категории — или, что еще хуже, только на домашнюю страницу.
«Но мы облегчаем им жизнь, не заводя их в тупик и автоматически возвращая их в нужное русло… верно?»
Ну не совсем так.
Когда бы это ни случилось со мной как пользователем сайта, я не чувствую благодарности. Я сбит с толку.
Может быть, я неправильно набрал поисковый запрос или нажал на уже неактивную ссылку. Когда вы удаляете подтверждение того, что все, что я ищу, невозможно найти или больше не доступно, я действительно думаю, что сделал что-то не так.
Я подумаю про себя, «Подожди, что только что случилось?»
Я, вероятно, вернусь и попробую ссылку еще раз или повторно наберу любой поисковый запрос, потому что я думаю, что что-то пошло не так. Затем, в какой-то момент, я пойму: «О … значит, этой страницы больше не существует. Какая досада».
🔎 По теме: Сколько должна стоить стратегия сайта нашей компании?
Непреднамеренное последствие вашей попытки помочь — меня раздражает то, что вы просто не сказали мне, что что-то сломано или недоступно, поэтому я должен разобраться в этом самостоятельно.
Даже самая простая страница 404 решит эту проблему. Так что не пропускайте его.
6. Наконец, проясните сообщение об ошибке
Вы когда-нибудь сталкивались со страницей с ошибкой 404, где вам потребовалась секунда, чтобы понять, что именно вы смотрите?
Трудно описать, но ты узнаешь это, когда видишь. Обычно есть навигация по сайту, иногда некоторая информация в нижнем колонтитуле или ссылки на другой контент сайта … но нет четкого фокуса на странице.Затем крошечным шрифтом вы увидите какое-то сообщение «Страница не найдена». Не создавайте этого для своих пользователей.
Вместо этого возьмите совет из предыдущих примеров из New York Times , What’s New in Publishing и Yale Appliance и сделайте это до глупости очевидным. Думайте об этом как о знаках «НЕ ВХОДИТЕ» или «НЕПРАВИЛЬНО», которые вы видите на шоссе — ваши пользователи должны сразу же знать, что они не в том месте.
А теперь перейдем к интересным вещам!
Мой самый любимый бизнес-сайт Примеры страниц с ошибкой 404
Я перечислил эти примеры в произвольном порядке.Но, чтобы помочь вам, я также включил свои заметки по каждому из них о том, что делает их такими вонючими.
1. УДАР (бесстыдная пробка)
Да, я собираюсь разместить здесь наш собственный веб-сайт, но только потому, что я искренне верю, что он заслуживает места в списке.
Несмотря на то, что структура проста, в нем много индивидуальности, в нем есть вызывающее улыбку зацикленное видео творческого лидера IMPACT Кристин Остин, а также динамичный текст для разговора.
Это отличный пример того, как простой подход, ориентированный на лучшие практики, может быть интересным и ориентированным на людей.
2. HubSpot
Как человек, который считает «умную копию сайта» языком любви, эта классика от гиганта в области маркетинга, продаж и автоматизации услуг HubSpot всегда меня привлекает. Они не сходят с ума от анимации или прочих наворотов.
🔎 По теме: Вам нужен редизайн сайта или его «подтяжка лица»?
Вместо этого эта страница с ошибкой 404, полностью ориентированная на бренд, ориентированная на личность, заставляет меня смеяться, обеспечивает все аспекты — структуру страницы, четкие варианты следующих шагов, отзывчивый веб-дизайн и удовлетворение пользователей.
3. Национальное общественное радио (NPR)
Хорошо, это заняло у меня секунду, чтобы понять, но как только я это сделал, я был ох, очень доволен.
После того, как я пролистал ниже обычных параметров навигации и поиска в верхней части их сайта, я заметил, что весь этот вручную подобранный контент находится под обычным языком «Страница не найдена».
Затем я понял, что весь контент, представленный на странице с ошибкой 404, сосредоточен вокруг «потери материала». Ха!
Амелия Эрхарт, багаж, недостающие 18 с половиной минут записей Уотергейтской ленты, Джимми Хоффа и так далее.
Это так задумчиво, забавно, полезно и так идеально NPR. Я был чертовски обрадован, когда понял, на что смотрю.
4. MoMA
Хорошо, мне это нравится, потому что изображение OOF, которое вы видите, является настоящим произведением искусства. И если вы нажмете на нее, вы сможете узнать больше о произведении и художнике. Идеально фирменный и супер крутой.
Опять же, просто, но так креативно и продуманно. Я просто люблю это.
5. Чудо
Это Marvel, так что это могло легко стать преувеличенным, преувеличенным или иным образом совершенно ненужным.Вместо этого у него есть навигация по сайту, панель поиска, четкая (причудливая) фирменная копия и просто … идеальная небольшая тонкая анимация, чтобы выявить их статичные изображения.
Marvel выигрывает здесь с ловкими штрихами, как с точки зрения копирования, так и с точки зрения анимации.
6. ТОМС
Ламы, вы все. Ламы. Никогда не ошибаюсь. Кроме того, мне просто нравится, насколько неожиданно это было со стороны обувного бренда, который до этого момента я не подозревал, что он любит лам. Так что, вместо того, чтобы быть просто брендом, я узнал больше о бренде и людях, стоящих за ним.
Я всегда фанат брендов, которые удивят вас тонкими напоминаниями: «Да, нашим брендом действительно управляют люди — уникальные, удивительные люди».
7. LEGO
Он фирменный, обмен сообщениями и навигация для меня как пользователя полностью понятны, и давай … если это не вызовет у вас улыбки, я не знаю, что будет.
8. млн унций
Это идеальная для учебника страница с ошибкой 404. У вас есть навигация, четкая панель поиска, если вы застряли, и заметные сообщения типа «ты чертовски заблудился, чувак».К тому же Роджер потрясающий.
В итоге, Moz полностью выбил его из парка с супер чистой страницей 404, которая также соответствовала его индивидуальности.
9. грамматика
Что делать, если ваш бренд не допускает явных проявлений причуды и прихоти? Это совершенно нормально, и эта страница с грамматической ошибкой 404 является тому подтверждением. Он чист и содержит четкие инструкции по дальнейшим действиям.
Единственное, что я мог бы сделать группе по грамматике, — это добавить больше навигационной структуры вверху или добавить ссылку на блог для тех, кто еще не подписан.Основная грамматическая навигация просто говорит «Войти» вверху, но нижний колонтитул сайта очень загружен другими замечательными вариантами для изучения контента, получения дополнительных сведений о приложении и т. Д.
10. GitHub
GitHub — база для разработчиков, программистов и других волшебников киберпространства — полностью покорил меня этим вдохновленным «Звездными войнами» опытом 404. Движение, которое вы видите, является результатом того, что происходит, когда вы перемещаете указатель мыши по изображению, делая его интерактивным.
В целом действительно крутые, тонкие ощущения. (Не могу поверить в это. Дэн Баум намекает на то, что он поделился этим со мной.)
11. Звездные войны
Кстати о «Звездных войнах», мне это нравится. По очевидным причинам — использование Звезды Смерти в качестве нуля в «404», хоккейная копия, общая мрачная эстетика … нужно ли говорить больше? Я имею в виду, это чертовы Звездные войны!
12. свободное пространство
Вся эта страница с ошибкой 404 — это * поцелуй шеф-повара.*
Маленькое анимированное лицо не только соответствует сообщению о том, что это страница 404, но также является небольшим представлением того, что продукт обещает сделать для вас. Чтобы вывести вас из стресса в спокойное место.
🔎 По теме: 13 лучших советов по копирайтингу для веб-сайтов, которые должен знать каждый маркетолог
Кроме того, здесь совершенно выдающаяся игра в копирайтинг. Это разговорный, он соответствует продукту и индивидуальности бренда, и я одержим небольшим текстом.«Сейчас в мире много неизвестного. Но одно можно сказать наверняка …»
Обожаю.
13. Amazon
Хорошо, я должен извиниться перед Amazon. Когда я изначально намеренно запустил Amazon 404 с бессмысленным URL-адресом, я сделал это с полным намерением найти какой-нибудь скучный, суперкорпоративный пример «это то, чего вы не делаете», чтобы поделиться с вами.
Ну, я ошибался. Мне нравится этот опыт. Конечно, у вас есть традиционная навигация по сайту и панель поиска вверху.
Но то, что здесь гвоздет Амазонка, совершенно неожиданно.
«Познакомьтесь с собаками Амазонки». Что ?!
А потом … угадайте, что происходит, когда вы нажимаете на Робина?
Amazon легко могла бы использовать эту недвижимость для чего-то менее очаровательного, но вместо этого, эээ, щенков! Но также вторичный опыт приводит вас к той части Amazon, которую вы иначе могли бы не обнаружить.
Это похоже на забавное пасхальное яйцо, где вы можете посмотреть очаровательное видео с собаками Amazon и узнать больше о человеческой стороне бренда, который обычно гордится своей автоматизацией.
14. Mailchimp
Не уверен, что это за существо должно быть, но это продуманный штрих для того, что в противном случае могло бы стать очередной скучной страницей с ошибкой 404.
Мне нравятся подобные шаги со стороны SaaS и технологических компаний, где клиент больше взаимодействует с онлайн-платформой или частью программного обеспечения и смотрит на людей только тогда, когда что-то ломается. Это крутое напоминание о том, что за занавеской скрываются вдумчивые люди.
15.Блендеры Очки
Я почти не включил Blenders, потому что их реклама в Instagram забрала у меня много долларов — что я могу сказать, я любитель ярких оттенков 😎 — но их копия здесь гарантирует их включение.
Послушайте, никому не нравится чувствовать себя глупо или говорить, что они сделали что-то не так. Тем не менее, слишком часто страницы с ошибкой 404 похожи на: «Итак, вы здесь, потому что вы нажали не на то место, набрали что-то не так или были некомпетентны в своем подходе к использованию Интернета.«
Хорошо, обычно не так резко, но суть вы поняли.
Здесь, однако, Blenders берет то, что, возможно, является ошибкой пользователя, и говорит (буквально) «полностью наше плохое». Неважно, ошибся ли их посетитель, он сам пережил неудачный опыт, оказавшись на мертвой странице. Это такое небольшое изменение в обмене сообщениями, но оно может иметь огромное влияние.
🔎 По теме: 7 причин, по которым ваши идеальные покупатели ненавидят ваш сайт копия
16.Метель
Мне нравится эта страница с ошибкой 404 от гиганта видеоигр Blizzard по нескольким причинам:
- Хи, компания — Blizzard, а маленький заблудший парень застрял … в метели. Это то, что мы в отрасли называем синергией.
- Я не знаю, намеренно ли это, но я не могу не задаться вопросом, вдохновил ли Джон Траволта в Криминальное чтиво то, что происходит в этой анимации.
- LOL, текст кнопки. Это весело, потому что теперь я слышу, как этот маленький гремлин звучал в моей голове.Это еще и чертовски полезно, потому что вы, как пользователь, сразу обращаетесь к нему. Ваш следующий шаг ясен — нажмите кнопку! И когда вы это сделаете, вы вернетесь в безопасное место на главной странице.
- Это красиво анимировано и именно то, что должно присутствовать на странице ошибки 404 компании, которая гордится высококачественной анимацией в своих продуктах. Все меньше было бы странным.
Еще один совет Дэну Бауму за то, что он прислал его мне.
17. НАСА
Я знал, что хочу проверить, что предлагает НАСА для своей 404-й модели для этой статьи, но я тоже был напуган.Почему? Что ж, давайте посмотрим правде в глаза, правительственные агентства не совсем известны своей способностью разбираться со своими творческими сторонами.
К счастью, НАСА предоставляет этот прекрасный опыт, который соответствует всем передовым методам, о которых мы уже говорили, а также привносит магию исследования космоса в то, что легко могло бы быть общей, стерилизованной страницей правительственного веб-сайта.
18. Базовый лагерь
Мне нравится Basecamp за его решения для управления проектами.Теперь мне также нравится Basecamp за его чистую, организованную, упакованную опциями страницу 404.
Мне также нравится, как они, как и Blenders, явно стараются изо всех сил не винить пользователя за то, что он зашел в тупик. Однако они также идут еще дальше, предлагая варианты сообщения об ошибке («чтобы мы могли исправить нашу ошибку») и сообщения о неработающем стороннем URL.
Только после такого владения они вежливо предлагают просмотреть URL-адрес, чтобы убедиться, что что-то не так — действительно критическая подсказка, учитывая, что Basecamp полностью посвящен управлению проектами, и ссылки не должны прерываться.
19. Житель Нью-Йорка
Житель Нью-Йорка известен не только своими выдающимися журналистскими работами, эссе и другими письменными работами, но и своими карикатурами. Итак, мне нравится, что они решили показать работу одного из своих художников, которая соответствует сообщению 404.
Приятный оттенок прихоти на том, что могло быть рутинной, одноразовой страницей.
20. Джип
Я — девушка-джип, насквозь, с тех пор, как мой первый темно-синий Jeep Cherokee, когда мне было 16 лет. (Ее звали Блюберри.) Итак, да, я полностью предвзято отношусь к 404 страницам от Jeep. Он посвящен бренду, имеет заметную, понятную навигацию и великолепные изображения.
Кроме того, хотя некоторым это может показаться анекдотом, мне нравится эта копия. Это именно то, что должно быть у Jeep на этой странице.
21. цедра
Хорошо, я хочу закончить одним, который, по-видимому, нарушает некоторые из правил, которые я упомянул в начале этой статьи.
Нет навигации.Строка поиска отсутствует. Ох! Ведьма! Сжечь ее!
Тем не менее, мне нравится то, что здесь создала команда Zest. Он настолько разительно отличается от яркой, смелой, удобной для пользователя эстетики, которая доминирует над остальной частью их веб-сайта и брендов, что возникает четкое «О, нет, где я?» чувство … но очень спокойным и умиротворенным образом.
Кроме того, мне нравится тонкая кнопка «Здесь ничего нет … Отвези меня домой». Действие, которое вам нужно предпринять, очевидно.Так что да, это нарушает правила, но работает для бренда и продукта.
У вас есть много возможностей для работы со страницей ошибки 404
Я знаю, это было много разных примеров, которые нужно было переварить и распечатать в уме, прежде чем начинать разбираться со своими собственными.
Помните, однако, что, хотя в этой статье представлено множество интересных, разных и новых идей, использование страницы с ошибкой 404 должно быть уникальным для вас и вашего бренда. Ничего страшного, если ваш не похож ни на что из перечисленного здесь, и нормально, если никто другой не похож на ваш.
С другой стороны, это также более чем нормально, если вы решите сейчас пойти простым путем, пока вы будете ломать голову над тем, если / когда / как вы со временем сделаете опыт более творческим.
Имейте в виду, все, что вам нужно сделать, это создать страницу с ошибкой 404, которая не раздражает и не обвиняет пользователя, выводит его из тупика настолько быстро и четко, насколько это возможно, и (возможно) добавляет немного удовольствия к их день через копии, изображения или пасхальные яйца.
Единственный способ потерпеть неудачу со страницей с ошибкой 404 — это упростить идеальному покупателю возможность уйти с вашего веб-сайта. Как вы собираетесь этого избежать, зависит только от вас!
13 лучших примеров дизайна страницы с ошибкой 404 в WordPress
Вы ищете лучшие примеры дизайна страницы с ошибкой 404 в WordPress?
Большинство пользователей, которые посещают страницу с ошибкой 404 по умолчанию, быстро покидают ваш сайт. Это увеличивает показатель отказов, что может негативно повлиять на ваш сайт. Вы можете оптимизировать страницу с ошибкой 404 на своем веб-сайте, чтобы снизить показатель отказов и увеличить количество просмотров страниц.
В этой статье мы поделимся некоторыми из лучших примеров дизайна страницы с ошибкой 404 в WordPress, которые могут вас вдохновить.
Оптимизация страницы с ошибкой 404 в WordPress
Ошибка 404 может возникать по нескольким причинам, и пользователь быстро переключается на другой веб-сайт, что не очень хорошо влияет на рейтинг вашего сайта в поиске.
Пока вы устраняете проблему, вы можете настроить страницу ошибки 404 в WordPress, чтобы привлечь внимание пользователей. Это включает в себя кнопку с призывом к действию для перенаправления пользователей на вашу домашнюю страницу, значки социальных сетей для увеличения количества подписчиков, форму подписки на рассылку новостей по электронной почте для привлечения новых потенциальных клиентов и многое другое.
Самый простой способ создать собственный дизайн страницы 404 — использовать плагин SeedProd. Это самый популярный конструктор целевых страниц с функцией перетаскивания, позволяющей настраивать страницы ошибок без редактирования кода.
Он предлагает более десятка встроенных шаблонов страниц ошибок 404, которые вы можете выбрать и отобразить на странице ошибок вашего веб-сайта. Вы также можете создавать собственные шаблоны.
Эти шаблоны страниц ошибок имеют привлекательные цвета и потрясающие шрифты, которые привлекают внимание пользователей с первого взгляда.
При этом давайте взглянем на некоторые из лучших дизайнов страниц с ошибкой 404, чтобы заинтересовать ваших пользователей.
Шаблоны 404 страниц SeedProd
Ниже вы найдете самые популярные платные и бесплатные шаблоны SeedProd для страницы с ошибкой 404. Выберите шаблон и легко оптимизируйте страницу с ошибкой.
1. Пустая чашка 404 Страница
2. В центре внимания 404 Страница
3. Бесплатная страница 404
4. Пустыня 404 Страница
5.Скоро появится Horizon Страница
6. Звезды 404 Страница
7. Цвет Темный 404 Страница
8. Цветной свет 404 стр.
9. Электронная торговля 404 Страница
10. Ой Нет 404 Страница
11. Потерянная страница 404
12. Под водой 404 Страница
13. Разбитое яйцо 404 стр.
По умолчанию эти шаблоны отлично выглядят и готовы к использованию на странице ошибок.Однако вы можете полностью настроить шаблон страницы ошибки с помощью конструктора целевой страницы SeedProd, чтобы он соответствовал вашему бренду и привлекал пользователей на ваш сайт.
Мы надеемся, что эта статья помогла вам найти лучшие примеры дизайна страницы с ошибкой 404. Вы также можете ознакомиться с нашим руководством по лучшим плагинам для создания страниц WordPress и нашим сравнением лучших услуг электронного маркетинга, чтобы превратить потенциальных клиентов в платежеспособных клиентов.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.