Картинка 404: html — Не могу отобразить картинку. Django

15 креативных примеров страницы Ошибка 404 для вдохновения

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

«‎Страница не найдена» — явно не то, что хочет увидеть посетитель веб-ресурса при выборе обуви, бытовой техники или фильма. Около 74% пользователей, которые сталкиваются с ошибкой 404, покидают сайт и не возвращаются. А потому важно настроить и оформить Error page так, чтобы удержать человека на веб-ресурсе. 

Мы собрали 15 креативных примеров, которые помогут сделать «страницу 404» на вашем сайте интересной. 

#1. «Страница 404»: кому и зачем она нужна

Страницу с ошибкой важно оптимизировать — она должна быть нестандартной и полезной для посетителя, чтобы не портить впечатление о компании. При правильном подходе месседж Page not found станет вашим преимуществом. 

Вот еще несколько причин создать оригинальный дизайн такой страницы: 

• Предотвратить все случайные ошибки невозможно — человек может ввести неправильный адрес, не найти нужной информации и уйти с сайта. Так вы потеряете потенциального клиента.
• Отследить все URL на веб-ресурсе тоже сложно: если на нем много страниц, то где-то могли поменять адрес, чтобы улучшить SEO, какой-то раздел удалить, не закрыв его от индексации в поисковой системе.

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

Пример «страницы 404» lifestyle-бренда Oak

#2. Основные приемы создания «страницы 404»

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

«Страница 404» российского агентства digital-дизайна Outlane

2. Развлеките или рассмешите. Цель дизайна «страницы 404» — уменьшить растерянность пользователя. С этим хорошо справляются смешные фото, иллюстрации и анимации. ToV на странице зависит от позиционирования компании, но немного юмора точно не помешает.

«Страница 404» графического редактора Crello

3. Интегрируйте мини-игру. Интерактивные «страницы 404» — самые вовлекающие: они дольше всего задерживают пользователя на сайте и повышают вероятность покупки.

«Страница 404» разработчика программ для энергоменеджмента Innotech

4. Верните пользователя на сайт. Вы отвлекли посетителя смешной анимацией с котом или «залипательной» картинкой космоса — что делать дальше? Постарайтесь поскорее вернуть человека на рабочую страницу. Разместите ссылки для перехода на home page и в каталог товаров — или предложите обратиться за помощью в онлайн-чат.

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

Лучший способ предотвратить попадание пользователя на страницу с ошибкой 404 — регулярно мониторить «битые ссылки». Проверяя раз в месяц статьи, визуальный контент и перемещенные по другому URL-адресу материалы, вы снизите вероятность посещения страницы Error 404. У Google и Яндекс есть бесплатные сервисы для SEO-специалистов, которые помогут найти нерабочие ссылки.

«Страница 404» австралийского дизайнерского агентства Swell Design Group

#3. 15 примеров креативных страниц с ошибкой 404

Мы собрали кейсы компаний, которые подошли к оформлению послания Page not found творчески и с юмором.

1. Spotify

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

2. LEGO

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

3. Pixar

Pixar изобразил мультяшную героиню из анимационного фильма «Головоломка» (Inside Out). На странице с ошибкой персонаж рыдает, а рядом можно увидеть слова «Оу, не плачь. Это всего лишь ошибка 404!», кнопки соцсетей и кликабельные ссылки для перехода в другие разделы сайта.

4. Gymbox

Gymbox — это тренажерный зал в Лондоне. На «странице 404» компании размещено анимированное изображение занятий по фитнесу в стиле 80-х, а также ссылки для перехода на страницу нужного зала или в другой раздел сайта. 

5. Tripadvisor

«Страница 404» на сайте Tripadvisor сообщает: «Упс, кажется, мы потеряли эту страницу. Но не ваш багаж!». Месседж сопровождается анимацией катящегося чемодана и предложением выбрать один из разделов сайта: «Отели», «Рестораны», «Чем заняться» и «Аренда на время отпуска».

6. Disney

На странице с ошибкой развлекательного портала Disney изображен популярный персонаж Ральф из одноименного анимационного фильма, снятого Ричем Муром, который режиссировал «Симпсонов» и «Футураму». На странице также фигурирует Всезнайка, еще один персонаж из «Ральфа» (Wreck-It Ralph).

Внизу расположена панель поиска, а выше — доступные разделы сайта. 

7. Mantra Labs

Разработчик AI-решений Mantra Labs изобразил космонавта, который удаляется в цифры 404. Картинку сопровождает текст «Упс! У вас закончился кислород. Страница, которую вы ищете, сейчас нам недоступна». Здесь же есть таймер, который ведет обратный отсчет до возвращения на home page.

8. The New Yorker

«Страница 404» американского издания The New Yorker оформлена в корпоративном стиле. На ней изображена мышь в лабиринте и есть кнопка перехода на home page, а также в другие разделы сайта.

9. Distilled

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

10. CloudSigma

Страница с ошибкой 404 облачного сервиса с офисами в США, Европе и Азиатско-Тихоокеанском регионе CloudSigma поддерживает пользователя шуткой: «О нет, вы нашли главную страницу junior-разработчика!». Этим «junior-разработчиком» компания сделала кота.

На странице размещена контрастная кнопка для перехода на главную, а также онлайн-чат для отправки запроса, доступный 24/7. 

11. Ready To Go Survival

Компания Ready To Go Survival выпускает смарт-рюкзаки с предметами первой необходимости для 5-дневного выживания. Страница сайта с ошибкой 404 отсылает к культовому фильму «Матрица» и предлагает два варианта: нажать на красную кнопку и начать приготовления (выбрать рюкзак по подробному гайду) или нажать на синюю — и вернуться на главную страницу.

12. Lovespace

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

  

13. Планета Кино

Бренды любят космическую тематику, и украинская сеть кинотеатров «Планета Кино» — не исключение. На «странице 404» кроме небольшого изображения космонавта компания использовала известные слова, связанные с аварией «Аполлона-13» по пути к Луне, — «Хьюстон, у нас проблема». 

Эту фразу-мем произнесли 13 апреля 1970 года, когда на борту космического корабля лунной миссии произошел взрыв, а троих астронавтов от Земли отделяли сотни тысяч километров — с перспективой потери кислорода и полного отключения электропитания. 

На странице пользователю предлагают вернуться на главную, перейти в один из разделов сайта или отправить запрос в онлайн-чате. 

14. FLIXESS

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

 

Пользователю предлагают перейти в раздел с турами по кнопке «Я тоже хочу!» или выбрать один из разделов: «Главная страница», «Поиск туров», «Акционные туры», «Популярные туры» и «Контакты». Можно отправить сообщение, если вы считаете, что произошла ошибка и страница, которую вы искали, существует. 

15. The-Artery

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

Весь бизнес-контент в удобном формате. Интервью, кейсы, лайфхаки корп. мира — в нашем телеграм-канале. Присоединяйтесь!

#Контент #Digital #Саморазвитие #Подборка #Что это такое

Последние материалы

Статья

Почему высокий IQ не гарантирует счастья и успеха

Возможно, выдающийся IQ — скорее бремя, чем путевка в успешную жизнь.

Читать

Статья

5 странных, но действенных способов перезапустить свою карьеру

Проверено учеными Гарвардской школы бизнеса.

Читать

Статья

Переворачиватель пингвинов, слушатель сыра и другие забавные профессии

Что делают и сколько получают люди, которые выбрали самые необычные профессии мира.

Читать

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

Andrey_Smitenko

19 февраля 2014 в 21:06

Usability *

Перевод

Автор оригинала: QArea Development Company

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

В качестве вступления отметим, что страница 404 «Не найдено» (404 Page Not Found) – это один из кодов состояния HTTP, принятых Консорциумом Всемирной паутины (W3C) в 1992 году. Для тех, кому интересно значение цифр 404, вкратце расскажем.

1. Первая «4» означает, что произошла ошибка со стороны клиента. Такой ошибкой может быть неверно написанный URL или запрос несуществующей страницы. В свою очередь, первая «5» значила бы ошибку со стороны сервера.
2. Цифры «04» — определяют конкретную ошибку Not Found из группы 4хх. Среди других ошибок из этой группы — 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden и так далее.

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

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

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

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

задачами:

• удобный для пользователя дизайн, чтобы не отпугнуть его и удержать на сайте;
• полезный контент, который бы предоставил пользователю ответ на вопрос «что мне теперь делать?» и дал простые и ясные инструкции;
• принятие во внимание вопросов SEO.

Принимая это во внимание, приведем

список рекомендаций по созданию кастомной 404-й страницы.

1. Будьте любезны с посетителями.Они попали на эту страницу не по своей вине. Постарайтесь выразить свое сожаление и готовность помочь.
2. Не углубляйтесь в технические детали. Термин «ошибка 404» сам по себе уже в достаточной мере техничен и в то же время понятен большинству пользователей. Нет никакой необходимости отпугивать посетителей любой другой специфической информацией о причинах этой ошибки. По сути, необязательно даже использовать цифры «404», достаточно просто объяснить суть проблемы.
3. Предложите пользователям проверить написание ссылки. Если они вводили адрес ссылки самостоятельно, то вполне вероятно могли допустить ошибку.
4. Придерживайтесь единого стиля сайта. Дизайн страницы 404 по оформлению и по ощущениям должен быть выдержан в стиле Вашего бренда, чтобы у пользователей не возникло заблуждения, что они попали на какой-то другой сайт.
5. Страница ошибки 404 не должна выглядеть как обычная страница. Ваши посетители должны ясно видеть, что страница не была найдена и не содержит какого-либо контента. Поэтому не стоит наполнять ее слишком большим количеством текста и ссылок.
6. Небольшая порция юмора никогда не помешает. Довольно часто 404 страница становится для дизайнеров и разработчиков платформой для выражения своих креативных и юмористических идей. Вместо того чтобы пользователи быстро закрывали ненайденную страницу, лучше удержать их от закрытия сайта, заинтересовав забавно и изобретательно выполненной страницей.
7. Будьте полезными и предоставьте ссылки на возможные совпадения. Если пользователи оказались на ненайденной странице, они, вероятно, что-то искали. Так помогите же им это найти. Разместите на странице меню или ссылки на недавно перемещенные страницы. Или почему бы не дать ссылки на самые популярные страницы Вашего сайта? Либо на самый новый и актуальный контент. Так или иначе, пользователи должны быть не более чем в одном клике от перехода на какую-либо другую страницу сайта. И, конечно же, всегда давайте ссылку на главную страницу.
8. Добавьте строку поиска. Чтобы не потерять своих посетителей, позвольте им найти то, что они искали, оказавшись на странице ошибки.
9. Обеспечьте способ отправить отчет об ошибке. У пользователя всегда должна быть возможность отправить вам сообщение об ошибке, если он пожелает. Это поможет Вам узнать о каких-либо внутренних недочетах сайта. Еще лучшим решением для отслеживания проблем на сайте станет автоматическое уведомление. А если произойдет внезапный всплеск 404-х ошибок, полезным будет мгновенное уведомление. Это позволит исправить проблему в режиме реального времени, пока она еще релевантна.
10. Позаботьтесь о вопросах SEO. Для оптимизации сайта важно максимально сократить количество внутренних ссылок на 404-е страницы, а еще лучше вовсе исключить возможность формирования некорректных URL адресов, ведущих на страницы 404. Инструменты для вебмастеров помогут Вам отслеживать ошибки на сайте, в том числе и ошибки с кодом 404 Not found. Более того, эти инструменты помогут Вам понять, откуда берутся ошибки и как они формируются – ошибка в URL ссылки на сайте, либо это атака конкурентов.

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

    Яндекс:

    
    Также рекомендую ознакомиться с официальной информацией о страницах 404 от поисковых систем: Google — здесь и Яндекс — здесь.
    

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

Теги:

• 404 error
• дизайн
• seo оптимизация
• юзабилити

Хабы:

• Usability

Всего голосов 25: ↑13 и ↓12 +1

Просмотры

141K

Комментарии 17

Андрей Смитенко @Andrey_Smitenko

Пользователь

Комментарии Комментарии 17

404 страницы изображений | Скачать бесплатные картинки на Unsplash

404 Page Pictures | Скачать бесплатные изображения на Unsplash

• A Photophotos 6. 8k
• Степка фотосколков 10K
• Группа людей 0

Nature

Mountain

Outdoor

Arizon Эрик Маклин

ссылка не работаетtechHd обои для ноутбука

визуальные эффекты

тик токбезопасностьсоциальная сеть

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Markus Spiske

errorcodebayreuth

Erik Mclean

404Hd computer wallpapersHd pc wallpapers

Erik Mclean

page not found404 errorelectronics

Erik Mclean

technologymobile phonecell phone

ben o’bro

pagecanyonHd grey wallpapers

Akbarsait NoorMohamed

Horseshoe Bendaz 86040Hd синие обои

Thijs van Diessen

united states of americaHd sky wallpapersSunset images & pictures

Sincerely Media

Book images & photostextaccessories

Ian Schneider

Website backgroundsquoteinspiration

Erik Mclean

Hd reddit wallpapersHd android wallpapersHd phone wallpapers

Markus Spiske

исходный кодlangensendelbachdeutschland

Des Récits

Природа фотоПейзаж фоторека

Justin Wang

united statesoutdoorsreptile

soufiane boissady

lower antelope canyonantelopeseahorse

Nicolas Cool

arizonaHq background imagesHd cave wallpapers

David Lusvardi

antelope canyonBrown backgroundsred rock

Carl Nenzen Loven

usaHd wallpapersrock

Andrea Natali

долинаГора фото и картинкиутес

ссылка не работаетtechHd обои для ноутбука

errorcodebayreuth

page not found404 errorelectronics

pagecanyonHd grey wallpapers

united states of americaHd sky wallpapersSunset images & pictures

Book images & photostextaccessories

Hd reddit wallpapersHd android wallpapersHd phone wallpapers

lower antelope canyonantelopeseahorse

usaHd wallpapersrock

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

tik toksecuritysocial network

404Hd computer wallpapersHd pc wallpapers

technologymobile phonecell phone

horseshoe bendaz 86040Hd blue wallpapers

Website backgroundsquoteinspiration

source codelangensendelbachdeutschland

Nature imagesLandscape images & picturesriver

united statesoutdoorsreptile

arizonaHq background imagesHd cave wallpapers

Похожие коллекции

404 Page

13 Фотографии · Куратор Бена Пирса

404 Page

9 Фотографии · Куратор Кристины Ланнинг

404 Page

6 Фотографии · Куратор Serena Porrello

Antelope Canyonbrown. Ссылка не работает.0011

Nature imagesLandscape images & picturesriver

lower antelope canyonantelopeseahorse

tik toksecuritysocial network

technologymobile phonecell phone

Book images & photostextaccessories

Hd reddit wallpapersHd android wallpapersHd phone wallpapers

arizonaHq background imagesHd cave wallpapers

usaHd wallpapersrock

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

ERROUSCODEBAYREUTH

404HD Computer WalpaperShd PC Walpapers

PageCanyOnhd Серые обои

Horseshoe Bendaz 86040HD Blue Walpapers

Связанные с коллекциями

404 401148. Кристина Лэннинг

404 Страница

6 фотографий · Куратор Серена Поррелло

исходный кодlangensendelbachdeutschland

United Statesoutdoorsreptile

Каньон антилопыКоричневый фонКрасная скала

ДолинаMountain изображения и изображенияутес

Просматривайте изображения премиум-класса на iStock | 20% off at iStock

Unsplash logo

Make something awesome

404 Image — Bilder und Stockfotos

Bilder

• Bilder
• Fotos
• Grafiken
• Vektoren
• Videos

Durchstöbern Sie 8.

871 404 image Фото и фотографии. Oder starten Sie eine neuesuche, um noch mehr Stock-Photografie und Bilder zu entdecken.

Sortieren nach:

Am beliebtesten

bild folgt in kürze. kein foto, kein miniaturbild verfügbar. vektorillustration — 404 стоковых изображений, клипартов, мультфильмов и символов

Изображение в Кюрце. Kein Foto, kein Miniaturbild verfügbar….

Nicht verfügbares Bild, fehlendes Bildsymbol auf weißem Hintergrund

seite 404. link zur nicht vorhandenen seite. раум, астрономия. — 404 стоковых изображений, -клипартов, -мультфильмов и -символов

Страница 404. Ссылка на последнюю страницу. Раум, Астрономия.

на странице 404. Ссылка на существующую страницу на странице. Вельтраум, Астрономия. Der Astronaut fliegt in einem Heißluftballon.

на сайте nicht gefunden — 404 стоковых изображений, клипартов, мультфильмов и символов

на сайте nicht gefunden

Кабель, компьютер, компьютерный монитор, подключение, Интернет гефаренсимвол. 3D-рендеринг. — 404 фото и изображения

Компьютерный gehackt, Systemfehler, Virus, Cyberangriff, Malware-Konze

404 Файлы с датами, символами — 404 изображения, изображениями, графиками, клипартами, мультфильмами и символами

404 Файлы с данными, значками, символами

404 Файлы, программы, веб-сайты, связанные с geöffnet werden. — 404 стоковых изображений, клипартов, мультфильмов и символов

404 Fehler, Programmfehler, Webseite kann nicht geöffnet werden.

404-Fehler, Programmfehler, Webseite kann nicht geöffnet werden.

systemfehler, веб-сайт в другом месте. 404 seitenwartung. winzige männliche arbeiter charaktere in uniform mit schraubenschlüssel — 404 стоковых изображений, -клипартов, -мультфильмов и -символов

Systemfehler, Веб-сайт в Aufbau. 404 Seitenwartung. Winzige Männli

Mops Hund Mit Gelben Konstruktor Schutzhelm und Kegel und 404 Fehler und Sackgasse Zeichen auf Holzstab — 404 Изображение Сток -Фотос и Бескол.