Лучшие 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, почти полностью написанную на CSS (картинки, конечно же, были в png).
Сайт, специализирующийся на продаже векторных иконок, не забыл и про себя, подобрав именно ту, которая гармонично сочетается с тематикой ресурса.
Интересная реализация ошибки 404 в блоге любителя иконок. Пользователь, вероятно, находится в машине, к нему приближается светящееся число 404 и в это же время пробегает ящерица по лобовому стеклу (вообще тут всё зависит от вашей фантазии).
Один из наиболее популярных сервисов общения между членами одной компании тоже вошёл в эту подборку. Ребята хорошо потрудились над созданием интересной и анимированной страницы ошибки 404 с небольшими элементами интерактивности (можно трогать кур и свинок). Также во время отсутствия активности на странице всё становится серым.
На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта.
А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).
Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.
Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.
Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.
Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.
Подробнее
Реклама на tproger.ru
Загрузка
Как создать 404 страницу в elementor pro и free
Как создать 404 страницу в elementor, что означает ответ 404 и к каким последствиям может привести, разберем в данной статье.
Содержание
- Ошибка 404
- Последствия
- Зачем нужна 404 страница
- Как создать страницу 404 в elementor pro
- Видеурок — создание 404 страницы в elementor pro
- Создание в обычной версии плагина
- Видеоурок — создание страницы для бесплатной версии плагина
Ошибка 404
Данный код означает (404 Not Found) что связь с сервером установлена, но информации по данному запросу нет.
Простыми словами, это удаленная или недоступная в настоящий момент страница сайта.
Причины появления:
— Битая ссылка. Это не рабочий url, возникает при внутренней перелинковке. К примеру, у вас было две страницы на сайте, которые ссылались друг на друга, вы решили удалить одну из страниц, но забыли удалить ссылку на удаленную страницу, в итоге получается битая ссылка.
— Неверный адрес. Чаще всего возникает из-за того, что пользователь вводит адрес вручную и где-то допускает ошибку.
— Удаленная страница. Самый распространенный случай.
— Неполадки с сервером (Бывает очень редко).
— Неправильно настроенный редирект.
Последствия
Понижение вашего сайта в поисковой выдаче. Происходит это из-за поведенческих факторов. Когда человек попадает на страницу 404, чаще всего он просто закрывает сайт и уходит на другой ресурс, тем самым сигнализирует поисковым системам.
Старайтесь избегать ошибок и вовремя их исправлять.
Зачем нужна 404 страница
Когда пользователь попадает на такую страницу, он может подумать, что сайт не работает и как говорилось выше уйти искать информацию на другой ресурс. Но нам надо попытаться вернуть его к себе на сайт. Для этого и нужна правильно оформленная 404 страница.
Что должно быть на странице:
- Меню
- Ссылка на главную страницу сайта
- Контакты для обратной связи
- Разъяснение, что произошло
- Понятный дизайн
Как создать страницу 404 в elementor pro
Зайдите в админку вашего сайта, слева в меню выберите шаблоны – добавить новый.
В появившемся окне выберите тип шаблона «Ошибка 404», укажите название и нажмите кнопку создать шаблон.
Далее можете выбрать из готовых наборов страницу 404 или создать под ваш стиль сайта (Второй вариант лучше).
После того как отредактируете 404 страницу, нажмите на кнопку «Опубликовать», в появившемся окне добавьте условия отображения «Страница 404» (В самом низу) и нажмите кнопку «Сохранить и закрыть».
Поздравляю вас, если вы сделали все правильно страница будет отображаться, проверить можно указав ваш домен и несуществующую страницу (неправильный адрес) отобразится страница 404.
Видеурок — создание 404 страницы в elementor pro
Создание в обычной версии плагина
В базовой версии конструктора урезанный функционал, для расширения понадобится пара плагинов.
- Elementor Header & Footer Builder (С помощью данного плагина можно создать меню)
- 404 page
Теперь вам необходимо создать и оформить на ваше усмотрение новую страницу с помощью редактора elementor.
Далее вернитесь в админку и перейдите в раздел внешний вид, там будет отображаться плагин 404 error page, нажмите на него у вас откроются настройки.
В первой графе выберите страницу которую создали и нажмите сохранить.
Перейдем к тесту, в настройках есть кнопка «Test 404 error» нажмите и проверьте, как отображается страница.
Второй вариант, перейдите в режим инкогнито, скопируйте ваш домен и вставьте в браузерной строке, после домена поставьте слеш и введите несколько разных символов, после нажмите поиск, страница 404 должна отобразиться.
Видеоурок — создание страницы для бесплатной версии плагина
12 творческих примеров анимированных страниц 404
Вы, вероятно, наткнулись бы на страницу 404 по крайней мере один раз (или сто раз) при просмотре всемирной паутины. Эти страницы помечаются как ошибки или «404 не найдены», сигнализируя о том, что страница на веб-сайте больше не существует на их сервере.
Однако есть и другие причины, по которым может появиться страница с ошибкой 404: это может быть из-за того, что контент был удален со страницы, неправильный URL-адрес, возникла проблема с подключением к серверу или домен больше не существует. 9Страницы ошибок 0003
404 часто упускали из виду, но в настоящее время эти целевые страницы эволюционировали вместе с дизайном. Без дизайна это была бы просто пустая страница с общим сообщением об ошибке 404, которое может показаться пользователю скучным или разочаровывающим, заставляя его уходить.
Вот почему все больше брендов уделяют внимание дизайну своих страниц ошибок 404. В наши дни страницы 404 переосмыслены с такими элементами, как анимация и причудливые копии, которые позволяют пользователям лучше взаимодействовать с брендом или просто развлекаться.
Сделайте страницы 404 забавными и увлекательными с помощью анимацииОтличный дизайн был общей темой, когда дело доходит до страниц 404, но многие бренды поднимают его на ступеньку выше с анимацией. Умное использование анимации 404 превращает унылую страницу с ошибкой в элемент бренда, чтобы привлечь пользователя или направить его на другие веб-страницы.
Вы также можете добавить дополнительные инструменты, такие как панель поиска, ссылки на страницы или призыв к действию, чтобы вести их по сайту, а не за его пределы.
Итак, вот 12 примеров дизайнов целевых страниц с ошибкой 404, которые совсем не скучны.
1. Использование юмора в описании ошибок 404 Lost in Space by Uran Duo Юмор всегда был отличным инструментом для брендов, если его правильно использовать.
В этом примере сама копия высмеивает ошибку заголовком и повествованием, в котором игриво говорится, что пользователь наткнулся на «край вселенной». Эта копия сопровождается анимацией космонавта, парящего в космосе с мобильным телефоном, что указывает на то, что страница недоступна.
Целевая страница Airbnb 404 использует здесь простую анимацию, где мороженое девушки падает с рожка, а выражение ее лица меняется со счастливого на шокированное. Страница также содержит ссылки на другие страницы веб-сайта, чтобы помочь пользователю ориентироваться.
3. Умная 3D-анимация для привлечения внимания 404 — Страница ошибки с 3D и анимацией от Outcrowd Эта анимация 404 сделана с использованием 3D-элементов, которые превращают числа в нечто, напоминающее спутниковую станцию. В этой анимации 404 используются элементы транспорта и белые купола, похожие на спутниковые тарелки — это можно интерпретировать как перемещение данных в соответствии со страницей с ошибкой.
Разве это не мило? Mailchimp размещает свою копию спереди и по центру, чтобы признать, что они потеряли страницу, после чего следует анимация лошади (или осла?), засунувшей голову под землю от смущения.
5. Преобразование 404 в символы 404 Иллюстрация взаимодействия с ошибкой Not found для веб-страницы от Тараса МигулкоЭто будет хорошо работать с туристическими сайтами. Анимация удачно начинается с панели поиска, показывающей запрос о путешествии. Прежде чем он успевает закончить печатать, он переходит к сцене 404, где ноль — это закат, а цифра четыре следует за другой. Это как если бы они были в тропическом отпуске — хорошо сыгранный ход с элементом путешествия.
6. Простота, но интерактивность См. перо
Ежедневный пользовательский интерфейс #008 — Страница 404, автор Рафаэла Лукас (@rafaelavlucas)
на КодПене.
Это довольно просто, но увлекательно: цилиндрические шарики за цифрами двигаются влево и вправо. Когда вы наводите курсор на 404, элементы перемещаются — это почти похоже на чашку Петри с существами, пытающимися проложить свой путь.
См. перо 404 страница от Джен (@affectionatelettuce) на КодПене.
Здесь изображен пещерный человек, кусающий кабель, что указывает на то, что он является причиной того, что страница не может быть найдена. Использование пещерного человека уместно, поскольку его любопытство, вероятно, привело его к тому, что он порвал кабель, потому что в его время их не существовало. Такая веселая анимация всегда развлекает.
См.
перо
Страница ошибки 404 от Сварупа Кумара Куилы (@uiswarup)
на КодПене.
Мы знаем, что без света пропадет множество вещей. Это использует это в своих интересах, поскольку страница не может быть найдена. Свет анимирован, чтобы качаться вперед и назад, чтобы осветить почти скрытое сообщение 404.
9. Превращение 404 в неизвестную галактикуСм. перо Галактика 404 не найдена Реми Денималом (@remid) на КодПене.
Это минималистичная, но привлекательная страница 404. Использование анимации с числом четыре и нулем, плавающими в невесомости, имитирует неизвестную галактику — галактику, в которой вы обязательно потеряетесь, если исследуете ее. Копия также соответствует этому, поскольку призыв к действию просит пользователя «вернуться на землю».
10. Похищение Скетча 404 Что такое просмотр веб-страниц без наших курсоров? Ничего, и это играет на этом.
Страница 404 в Sketch игриво подразумевает, что, поскольку курсор исчез, страница не может существовать для просмотра. За ним следуют два призыва к действию, один из которых относится к разделу поддержки, а другой — к домашней странице.
Музыка — это способ испытать эмоции, и здесь она играет на этом повествовании. Копия «404 и разбитые сердца» рядом с анимированной вращающейся пластинкой демонстрирует, что музыка значит для большинства людей. Простой, но определенно фирменный для Spotify.
12. Blizzard Entertainment развлекает мурлока, заблудившегося в метель Страница 404 Blizzard Entertainment очень умна. Будучи игровой компанией, она использует анимированного мурлока (персонажа в World of Warcraft), заблудившегося в настоящей метели, как игру на своем бренде. Это также соответствует сообщению «страница не найдена». Сам призыв к действию использует другую внутриигровую отсылку — мурлок, также известный как gmmmlmrmrgmg .
Создавать анимированные страницы 404 сложно, если вы создаете анимацию с нуля. Но вы можете сделать анимированную страницу 404, даже если не разбираетесь в моушн-дизайне.
Lottiefiles предлагает бесплатные настраиваемые анимации 404, которые вы можете использовать для своей страницы. Эти анимации Lottie работают как на веб-, так и на мобильных платформах, чтобы упростить интеграцию ваших страниц 404 для iOS, Android и Интернета.
Вы также можете настроить анимацию в соответствии с вашим брендом или желаемой визуальной эстетикой. Как только вы наткнетесь на нужную вам анимацию Лотти, вы сможете переключать скорость анимации, цвет фона, цветовые палитры и многое другое.
Чтобы добавить анимацию на веб-страницу с помощью Lottiefiles, ознакомьтесь с нашим руководством по добавлению анимации Lottie на веб-страницу.
404 страницы — Документация ExpressionEngine 6
- Отображение пользовательской страницы 404
- Когда отображается страница 404?
- Пример
Примечание: Этот параметр является предпочтительным для всего сайта.
По умолчанию ExpressionEngine направляет посетителя на домашнюю страницу при обнаружении ошибки 404.
Если вы хотите изменить способ по умолчанию, которым ExpressionEngine обрабатывает коды ошибок 404, вы можете сделать это в Панели управления.
Настройки --> Настройки шаблона
Параметр страницы 404 сообщает ExpressionEngine, какой шаблон использовать для всех полученных ошибок 404. Стоит отметить, что использование строгих URL-адресов предпочтительнее, так как это делает путь к вашему контенту более точным, допускает более релевантные страницы 404 и не позволяет отображать ваш контент с отклонениями в структуре URL-адреса.
Важно понимать, что два условия в ExpressionEngine, которые могут привести к отображению страницы 404. Недопустимая группа шаблонов и лишние сегменты.
Первое условие — недопустимая группа шаблонов. ExpressionEngine проверяет только первый сегмент, чтобы определить, показывать страницу 404 или нет.
Поскольку первый сегмент представляет собой группу шаблонов, ExpressionEngine будет отображать шаблон 404 только в том случае, если запрошенная группа шаблонов в URL-адресе не существует.
Рекомендуется настроить для своего сайта пользовательскую страницу 404. Даже если то, что посетитель ввел в URL-адрес, является недействительным, без пользовательской страницы 404 они все равно увидят вашу домашнюю страницу, что может привести к некоторой путанице.
Второе условие, которое вызывает статус 404, — это лишние сегменты. Это потребует добавления некоторого кода в ваш шаблон. Помните, что ExpressionEngine просматривает только первый сегмент, чтобы активировать статус 404, чтобы расширить эту проверку ошибок за пределы первого сегмента, нам нужно использовать условную и глобальную переменную {redirect=}.
{если сегмент_3 != ''}
{перенаправить = "404"}
{/if} В приведенном выше коде, если третий сегмент не пуст, ExpressionEngine покажет определенный нами шаблон 404.
Часто URL-адреса, введенные вручную, набираются неправильно, особенно если URL-адрес включает заголовок записи. Избежать ошибочных URL-адресов намного проще, если ввести только название сайта и группу шаблонов. Например:
example.com/blog
Но предположим, что посетителю нужна определенная запись в группе шаблонов вашего блога, поэтому он набирает
example.com/blog/cats-in-dresses-dancing- to-Christmas-music
Скорее всего, они не поймут это правильно и вызовут ошибку 404. Группа шаблонов верна, поэтому они не увидят никаких ошибок. Это создает впечатление, что они напечатали все правильно, но им остается только гадать, где же кошки.
Давайте позаботимся об этом. Это страница с одной записью, поэтому мы можем использовать require_entry= в паре тегов записей нашего канала. Это указывает паре тегов записей канала возвращать результаты только в том случае, если в сегменте URL-адреса есть определенный заголовок URL-адреса.
