50 прикольных страниц ошибки 404

Хорошая страница ошибки 404 может быть также важна для сайта как и его содержание. С помощью такой страницы вы сможете направить посетителя к нужной вам домашней странице сайта.
Если на вашем сайте или блоге нет такой страницы, возможно вам стоит задуматься о её создании. А для вашего вдохновения тут собрано 50 прикольных и необычных примеров страниц ошибки 404. 
Другие примеры таких страниц вы сможете увидеть в ранее опубликованных подборках Эффективные страницы ошибки 404 и Ошибки 404 — часть вторая.

Сайт Propeller

Иллюстрированная страница ошибки 404 на B3ta

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

Забавная страница ошибки 404 на Tinsanity

Сайт  latelategifts

Муха на странице ошибки сайта 24-4 Media

Разорванная бумага на CssTricks

Иллюстрации акул на Renkoo

Плачущий ребенок на iFolderLinks

Мусорная корзина на странице ошибки 404 TurboMilk

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

Такая страница ошибки на сайте Soocial

Разноцветные кубики на rush68

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

Забавный котенок на Github

Так изобразили ошибку на сайте RetardZone

Надпись на футболке на Planetgeek

Кривляющийся мужчина на PatternTap

Простая и забавная страница ошибки 404 на Studentmarket

Иллюстрация на странице ошибки 404 на BrightKite

Страница ошибки 404 на сайте ClearSpring

Иллюстрация девушки на Erotica Challenge

Грустная мордашка на kidmondo

Смешная страница ошибки сайта Funned

Необычная страница ошибки 404 на nickciske

Страница ошибки в стиле ретро на сайте Lileks

Сайт lightpostcreative и его страница ошибки

Стройка на странице ошибки сайта tele2

Яркая страница ошибки 404 на DDZ

Кот в компьютере на Catswhocode

Космос на странице ошибки Abduzeedo

Разыскивается странница на сайте Limpfish

Стильная иллюстрация на Ferdaze

И на  Expansion Broadcast иллюстрированная страница ошибки

Художественная страница ошибки сайта Chrisglass

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

Облака на Zanami

Страница ошибки на Southpark Studios

Страница ошибки сайта Geeksquad

Милый котенок на Centerd

Марио на странице ошибки сайта Dawdle

Смешной монстр на Cartoon Network

Птерозавры на странице ошибки Amorphia Apparel

Такая страница ошибки на Mozilla

Ещё один забавный пример страницы ошибки 404 Jotsai

Смешная страница ошибки на The Brand Surgery

Страница ошибки Mmo Game Zone

На странице ошибки сайта Acorn Creative разместили носок

Автор – hongkiat

Перевод — Дежурка



Комментарии

Оставить ответ

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

Случайные статьи

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

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

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

Что касается неопытного пользователя, то он, увидев страницу где написано «ошибка» да в подарок к этому ещё и какие-то непонятные цифры, с вероятностью 99,[9]% в панике закроет страницу, браузер, выключит компьютер, вытащит вилку компьютера из розетки, отключит электричество в щитке, соберёт накопленное, сделает пластическую операцию, поменяет имя и переедет на другую планету.

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

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

Скучно, непонятно, скучно.

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

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

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

17.

Студия Олега Чулакова(???). Сайт необычный. А вот этот поток сознания можете считать либо шуткой либо бредом. И не поймешь недокреативили или перекреативили.

16.

Далее уже поднадоевшие образы «пацанчиков с периферии»

15.

А тут пацакчики. К сожалению, не нашел сайт, где это чудо размещается.

14.

На сайте turbomilk.ru решили не «прибивать» подвал к низу странички, однако страница об ошибке у них забавная

13.

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

12.

На lure.com.ua мы видим того самого пользователя и разжёванную инструкцию.

11.

Сайт у «Занами» так себе, но 404 страница отсылает нас мысленно к одному из лучших советских мультиков.

10.

У автомобильного портала autocolo.com на странице ошибки 404 страшное горе: мужик потерял машину, зато научился летать в странной позе. Вот уж не знаешь, где найдешь где потеряешь. А если отвлечься от несчастного летающего мужика на сопроводительный текст, то становится как-то черновато, хотя может они не в том смысле…

9.

А вот отсыл к истокам сетевого сленга.

8.

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

7.

На хабре с обновлением дизайна обновилась и 404 страница. С неё можно попасть на другие ресурсы хабра.

6.

Тут даже неловко стало:

5.

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

4.

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

3.

Многие строительные компании берут на 404 страницу образ гастарбайтеров. У нас в рейтинге таких страниц целых две. Чаще всего на таких сайтах заезжанные Равшан, Джамшут и «Насяльника». Но тут вот интересно. И со звуком.Целый фильм

2.

Нет страницы? Не беда! Поиграй в пэкмана.

1.

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

Вне конкурса работы студии ClickON:

Квартиры->дома->стройка->кран

Компания продает 3D принтеры, а их 404 страницу охраняет вот такой крутой человечек со световым мечом:

Творите.

30+ креативных страниц 404 ошибки: подборка

Редактор-переводчик SEOnews

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

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

В качестве бонуса в конце статьи вы также найдете советы по оформлению страницы 404.

Purée Maison

Purée Maison – французское креативное агентство, специализирующееся на коммуникационных стратегиях. Персонаж со страницы ошибки 404 нарисован в фирменном стиле сайта и также встречается на страницах загрузки.

Pixar

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

На странице ошибки 404 мультипликационной студии Pixar Печаль из мультфильма «Головоломка» приняла ошибку слишком близко к сердцу. Хороший пример тематической страницы: персонаж известен многим, кто знаком с творчеством компании.

Marvel

Страница не найдена. Даже глаз Уату не видит ваш запрос.

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

Matteo Vandelli

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

20^th Century Fox

То, на что вы смотрите, могло уже быть перемещено. Если вы, конечно, не ищете «Офисное пространство».

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

Cloud Sigma

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

Cloud Sigma – облачное хранилище. На странице – немного юмора и кнопка, ведущая на Главную.

BluePath

Раз вы попали на эту страницу, наслаждайтесь картой, которую мы для вас составили. На ней показаны все преступления, совершенные в Атланте за пару лет. Зачем? Да потому что то, что вы нас еще не наняли, – преступление!

Другой сайт, страница которого сделана с юмором, – сайт компании BluePath, работающей с Big Data. На странице 404 – карта Атланты с точками, обозначающими преступления, совершенные в городе за 2 года. А все потому, что вовремя не начать сотрудничать с BluePath – преступление.

The Useless Web Index

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

Kualo

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

Веб-хостинг Kualo на рынке уже 15 лет, бесконечность по меркам интернета. Их страница ошибки 404 – отсылка в прошлое. Те, кто наткнулся на нее, могут поиграть в Space Invaders, лучшую аркадную игру по версии Книги рекордов Гиннесса и основоположницу всех современных аркад.

Waaark

Упс, что-то пошло не так.

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

Steve Lambert

Самая неловкая страница ошибки 404 в интернете. Страницы здесь нет. Она перемещена. Или никогда не существовала. Извините. Так иногда случается. Может, воспользуетесь поиском?

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

Figma

Надпись «404» можно растягивать за опорные точки. Расслабляет.

Airbnb

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

Hot Dot Production

Слоган веб-разработчик Hot Dot Production «Где дизайн встречается с технологией» хорошо отражен на его странице ошибки 404. Три цифры составлены из сотен маленьких точек, которые меняют направление или расходятся в разные стороны в зависимости от движений мышки.

GitHub

Страница Github нацелена на гиков-фанатов серии «Звездные войны».

Помимо 404 у GitHub еще есть креативная страница с 500 ошибкой.

CSS Ninja

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

MailChimp

Мы потеряли эту страницу. Мы посмотрели везде, но так и не нашли то, что вы ищете. Давайте найдем для вас место получше.

В сервисе для рассылок MailChimp недавно произошел ребрендинг, страница ошибки 404 соответствует новому фирменному стилю. Судя по всему, осел со страницы тоже не понимает, куда попал.

Emirates

Страница ошибки 404 от Emirates выполнена в фирменном стиле компании. Один из менеджеров компании Томас Панек утверждает, что упор на ней сделан на UX-дизайн: компания провела исследование и вычислила, на какие страницы пользователи обычно переходят после 404. Так на странице появились 4 кнопки для перехода на поиск рейсов, управление бронью, вход в аккаунт и главную страницу.

Audiko

Audiko – сервис для создания рингтонов. На странице ошибки 404 – иллюстрация Лондона с его традиционными красным автобусом, телефонной будкой, Биг Беном, Шерлоком Холмсом и Тауэрским мостом. А чтобы не потеряться, по центру расположен поиск рингтонов и ссылка на домашнюю страницу.

IMDb

На 404 странице главного западного сайта о кинематографе можно найти измененные цитаты из кинофильмов, в которые вставлено слово «страница». Например, «Я отсутствующая страница Джека» из Бойцовского клуба или «Что на странице?!» из фильма «Семь».

Зайдите и проверьте, цитата из какого фильма попадется вам.

NPR

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

Blizzard Entertainment

Компания-создатель игр World of Warcraft и Diablo обвиняет пользователя в том, что страница «сломалась». Ущерб действительно налицо: хедер навигации «упал», а экран разбит.

TProger

На странице 404 портала о разработке TProger есть все: объявление об ошибке, забавные видео (каждый раз новые) и ссылки на другие страницы.

Crello

Страницу сервиса для создания дизайнов Crello украли голуби. Действительно, теперь остается только вернуться на предыдущую страницу или сразу перейти к созданию дизайна.

Hakim.se

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

Android

Android предлагает пользователю вернуться на сайт либо поиграть в игру: помочь сладостям попасть в нужную трубу.

Sumatosoft

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

Ma meilleur cuite

Этой страницы не существует… Вы пьяны или просто потерялись? В любом случае вы нашли Pacman’а, который тоже потерялся. Помогите ему найти выход, по пути собирая кружки с пивом!

Французский блог об алкоголе Ma meilleur cuite предлагает сыграть в игру Pacman, выполненную в стилистике сайта.

Romainbraser

На странице сайта разработчика Romainbraser можно сыграть в аналог популярной игры Lemmings.

Fox

На 404 странице студии Fox пользователей ждет Стьюи из Гриффинов. Кнопка «Get Together» ведет на главную страницу.

Discord

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

Slack

На странице 404 ошибки корпоративного мессенджера Slack – отсылка к небольшой MMO-игре Glitch (от англ. глюк), созданной одним из основателей программы.

Canva

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

Amphibian

На портале с комиксами Amphibian можно сыграть в лягушачий футбол.

Советы от экспертов

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

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

Задачи кастомной страницы 404:

• уведомить об ошибке в дружелюбной форме. Не забывайте про тональность коммуникации (ToV, Tone of Voice): ошибка произошла не по вине пользователя, успокойте его, просто скажите, что контент не найден;
• объяснить причину. Например, что страница была удалена либо что вы недавно обновили структуру сайта;
• предложить решение, чтобы оставить посетителя на сайте.

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

Если причина возникновения ошибки неизвестна, можно предложить типовые решения: предоставить возможность перейти на работающие страницы, показать основную навигацию, дать ссылки на популярные разделы. Например, для ecommerce-сайтов имеет смысл предложить перейти в каталог товаров или дать ссылки на самые популярные. Главное – не оставить посетителя наедине с проблемой. Хорошие примеры реализации этих идей – Squarespace и IFTTT.

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

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

Примеры того, как можно удивлять и веселить, но при этом все равно предлагать полезное действие:

• CreativePeople – сюрреалистичная фирменная иллюстрация поддерживает наш стиль, а отсылка к уровню в игре предлагает в неформальном стиле решение проблемы.
• Andrea Areni – хорошая визуализация ошибки, напоминающая помехи на телеэкране. Круто, технологично, непонятно.
• Gymbox – а тут просто удивляют посетителя, смешат его. Все-таки 404-я ошибка – не какая-то трагедия.

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

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

Константин Кислейко, руководитель отдела дизайна AGIMA

Я уже давно не встречал 404 страницу в реальной жизни.

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

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

Источник: Creative Bloq

Страницы 404 / Edison corporate blog / Habr

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

Первая «4» — означает, что ошибка на стороне клиента, «04» — означает конкретную ошибку «Not Found». В компании EDISON Software философски считают, что пользователь не может ошибиться, что он всегда прав, если он на сайте компании.

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

Your browser does not support HTML5 video.

Начнем с самых животрепещущих сайтов, а потом перейдем к «попсовым».

Роскомнадзор

PornHub

Старая версия 404 Хабра

Новая версия 404 Хабра

Virgin.com

Google

YouTube

Facebook

Reddit.com

Amazon.com

Vk.com

Linkedin.com

Imgur.com

Aliexpress.com

Bing.com

Stackoverflow.com

Github.com

Dropbox.com

Craigslist.org

Dribbble.com

Awwwards.com

Csswinner.com

Coolhunting.com

Codyhouse.co

Mailchimp.com

Slack.com

Mashable.com

Bloomberg.com

Airbnb.com

Bitly.com

МГУ, психфак

Разговаривающая страница 404.

Еще подборки

404 pages from popular sites — Design Inspiration, Muzli, 2017

Anatomy of a 404 Error Page, Envato, 2016

Лучшие 404 страницы, Tproger, 2015

404 – страницы, ради которых стоит заблудиться на сайте, cossa, 2015

Идеальная страница 404 ошибки, или как удержать пользователя на сайте?, Habrahabr, 2014

Лучшие примеры 404 страницы, seo-design, 2013

Лучшие 404 страницы Рунета, oakhill, 2012

Лучшие примеры ошибки 404, netpeak, 2012

50 прикольных страниц ошибки 404 , Дежурка, 2009

Интерактивные

Играем в Pacman

Рушим сайт

Суслик

Спасаем леммингов

Поймай кота

P.S.

Ну и напоследок

А какая ваша любимая 404 страница?
Какая 404 страница на вашем сайте?

404 error изображения | WordPress.org Русский

Для погружения в тему, так сказать, не помешала бы ссылка на сайт ваш

Модератор Yui

(@fierevere)

ゆい

ccылка на сайт переехала в первое сообщение темы, где ей и было положено быть с самого начала

PS: не вижу у вас проблем с картинками, зато у вас меню кривое и налазящее на часы работы

• Ответ изменён 1 год, 3 месяца назад пользователем Yui.

скриншот кривого меню можно?

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

с меню принял. спасибо. недостестировал

но все сервисы отдают для изображений 404.

Браузер тоже, если открыть саму картинку. Похоже на какую-то странную защиту от чего-то. Антилич?

вроде бы было что-то такое. где это чудо отключить можно?

где это чудо отключить можно?

Там где включали 🙂 Снаружи не видно, а способов сделать — стопиццот.

O

(@perdyllo)

где это чудо отключить можно?

В плагине «безопасности» https://ru.wordpress.org/plugins/all-in-one-wp-security-and-firewall есть такой пункт. Может отдельный плагин для этого был установлен или сниппет в function.php прописан

понял. спасибо. буду искать

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

а антилич всегда так работает

Антилич должен блокировать картинки, если они не вставлены в страницу и/или вставлены в чужую. То есть, без реферера и с чужим реферером. «Без» — очень плохая идея в наше время тотальных соцсетей и желанием ПСов проиндексировать абсолютно всё. С чужим — не очень плохая 🙂

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

O

(@perdyllo)

антилич

Это один из предрассудков и заблуждений из цикла «защита контента от воровства».
Как вы уже убедились толку от такой «защиты» мало, а сопутствующих проблем много.

Это один из предрассудков

Это атавизм. Когда-то (когда компьютеры были большими, а программы маленькими) он был довольно полезной фичей.

Изящное решение для страницы 404

Испорченная ссылка — страшная сила. Когда мы видим «Ошибку 404» — страница не найдена («page not found»), это неважно сказывается на нашем отношении к сайту. Большинство посетителей просто сразу уйдет и даже разбираться не будет (кто-то даже может подумать что весь сайт не работает). Поэтому важно чтобы ваша «страница 404» была способна удерживать посетителей. Кстати, если вам нужно точное определение, код 404 означает что сервер понял запрос, но не нашел по указанному адресу (url) документа.

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

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

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

Чтобы все получилось, страница 404 должна быть должным образом оформлена. О стилевом соответствии дизайну сайта было сказано выше, но этого мало. Страница «ошибки 404» должна быть интересной и «приготовленной» со вкусом. Должна обыгрывать какую-то идею, содержать картинки, иллюстрации (или что-то другое для реализации этой идеи). Иначе она будет скучной и сильно отличаться от стандартной не будет, а значит нужный нам результат достигнут не будет.

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

Страшновато, лучше сюда, действительно, не попадать, а все находить сразу

Популярный, кстати, персонаж для страницы 404

«Похоже одного из нас нет» — таки да, ребята, потеряли страницу

Опять Он + ссылки на главную и страницу контактов

Стильно, спокойно и с блоком поиска на всякий случай

На видеохостинге Vimeo сразу отображают все возможные варианты и разделы

«Упс» встречается также часто, как и Гомер Симсон

Какая-то слишком «водяная» реализация, страницы в любом случае нету

Прикольное решение со знаком — сразу привлекает внимание

Они извиняются, что не нашли нужную страницу + ссылка на главную

Опа, а эту страницу украл ниндзя:) Ну, что ж, и такое бывает…

Часто фото разыскиваемых публикуют на пачках молока, чем страница 404 хуже

Позитивная реализация идейного черного юмора

Самая стандартная и четкая страница 404

Красивая цветовая гамма

Ухты, мимо такого уж точно сложно пройти мимо

Какой-то персонаж говорит нам, что страницы, увы, нет

Теперь о «пропаже страницы» сообщается целая команда

Просто и просторно — веб 2.0 ?

Ну, тут все всем, наверное, ясно — сериалы смотрим?

Что-то вроде черной дыры? с черным медведем сверху:)

Говорят, что страница исчезла как это часто бывает в магии

Упоминаемый ранее «упс» и ссылки на некоторые страницы

Ого, не нужно так сильно расстраиваться:)

Дохлая ссылка она как дохлая муха, ничего с нее уже не возьмешь

«Файловая реализация» страницы

Еще одна очень жестокая картинка, жизнь некоторых страниц так скоротечна…

Прикольная графическая иллюзия для разрядки + упс:)

Заключение: Наличие собственной талантливо сделанной страницы 404 говорит о многом. В-первую очередь о том что вы думаете и заботитесь о своем посетителе. Во-вторую, что у вас грамотно сделанный качественный ресурс. Кроме этого правильная страница 404 имеет и практическое значение — способна удержать  посетителя на сайте (и перенаправить в нужное место). «Мелочь!» — скажите вы. Мелочей не бывает! Вернее из мелочей все и складывается! Удачного вам креатива!

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

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

• Правильно писать адрес
• Свои извинения за сложившуюся ситуацию
• Объяснение факту случившегося и важности перехода на главную / др. страницы

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

Для сайта с коммерческим предложением подчеркните:

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

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

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

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

Важна идея! — пример красивого оформления 404-й ошибки сайта

По оформлению страницы:

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

По настройке страницы:

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

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

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

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

Bark Box

Компания реализует продукцию для домашних питомцев: «Это же шампунь для собак…»

Pando

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

Mitra

На 404-ой странице веб-агентства, парой персонажей представлена команда профессионалов

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

Страница 404 отечественного бренда: алкогольный сайт VALENKI™

Sumato Soft

Похоже, нет такой страницы. Можете продолжить горевать, а можете:

• Познакомиться с нами
• Посмотреть работы
• Написать нам

Комплето

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

Story and Hear

У онлайн видео-школы, тематичная 404-я страница с зацикленным видео (coub video)

Born Group

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

Coffeemate

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

Stugoo

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

Imaginovation 

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

Lander 

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

Pixelemu

Мы поискали запрошенную страницу, но нашлась только уточка для ванной

Checkmate

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

Piccsy 

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

Yougov 

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

Fish Finger 

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

We Heart It 

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

Supremo

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

Quartzy

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