![image](https://habrastorage.org/getpro/habr/post_images/ec0/3b7/9db/ec03b79db5a45561eaafa1910025d287.jpg)
404 страница. Это место для пасхалок, дурачества и креатива создателей сайтов. Про 404 ошибку есть даже выступление на TED.
Первая «4» — означает, что ошибка на стороне клиента, «04» — означает конкретную ошибку «Not Found». В компании EDISON Software философски считают, что пользователь не может ошибиться, что он всегда прав, если он на сайте компании.
Кому в пятницу нечего делать или кто в поисках вдохновения — добро пожаловать под кат, там подборка лучших (и худших) 404 страниц.
Начнем с самых животрепещущих сайтов, а потом перейдем к «попсовым».
Роскомнадзор
![image](https://habrastorage.org/webt/59/ce/39/59ce394a9228a609575248.jpeg)
PornHub
![image](https://habrastorage.org/webt/59/ce/3a/59ce3a8cd83ec553696593.jpeg)
Старая версия 404 Хабра
![image](https://habrastorage.org/storage2/9c5/032/4e4/9c50324e46e643119d5450d31dfc873c.png)
Новая версия 404 Хабра
![image](https://habrastorage.org/getpro/habr/post_images/1a9/a17/f58/1a9a17f58f069143751abee5bed88fad.jpg)
Virgin.com
![image](https://habrastorage.org/getpro/habr/post_images/364/918/7fa/3649187fa9aef2b34e6b6cd0edf37e4a.png)
![image](https://habrastorage.org/getpro/habr/post_images/1c3/fc5/d1c/1c3fc5d1c1ab3658621e6b45de420722.png)
YouTube
![image](https://habrastorage.org/getpro/habr/post_images/3fd/bca/951/3fdbca951018b6356d15d5594facf408.png)
![image](https://habrastorage.org/getpro/habr/post_images/64a/fc9/032/64afc903229fe628ba9f28b231936fd2.png)
Reddit.com
![image](https://habrastorage.org/getpro/habr/post_images/556/e80/0b2/556e800b289843e7d4fc733dc863f13a.png)
Amazon.com
![image](https://habrastorage.org/getpro/habr/post_images/5f5/b91/b23/5f5b91b23f38309d56000f7201e75e79.png)
Vk.com
![image](https://habrastorage.org/getpro/habr/post_images/602/5f3/021/6025f3021e2030fa55337d67739f278b.png)
Linkedin.com
![image](https://habrastorage.org/getpro/habr/post_images/b06/ac1/8c5/b06ac18c538c2501c1ef7ba89231c46f.png)
Imgur.com
![image](https://habrastorage.org/getpro/habr/post_images/845/562/5df/8455625dfef051268c3b550e1b008d22.png)
Aliexpress.com
![image](https://habrastorage.org/getpro/habr/post_images/1ac/e65/caa/1ace65caaa0fc89b24d539e8b1994b9d.png)
Bing.com
![image](https://habrastorage.org/getpro/habr/post_images/f58/567/afb/f58567afbb9c0b0e6b70f2d3d8d1ba5c.png)
Stackoverflow.com
![image](https://habrastorage.org/getpro/habr/post_images/84f/ce3/c18/84fce3c188a2889a0a2eb1b96eb74eae.png)
Github.com
![image](https://habrastorage.org/getpro/habr/post_images/14c/36a/9bd/14c36a9bdecd122db77baece1e2026a7.png)
Dropbox.com
![image](https://habrastorage.org/getpro/habr/post_images/101/1aa/51a/1011aa51a60fc4d1819b311c346e1879.png)
Craigslist.org
![image](https://habrastorage.org/getpro/habr/post_images/52a/697/372/52a69737215fc5c85f5a7b44ffaa60a8.png)
Dribbble.com
![image](https://habrastorage.org/getpro/habr/post_images/b8b/055/af0/b8b055af0249a6be80c1b7009476777c.png)
Awwwards.com
![image](https://habrastorage.org/getpro/habr/post_images/539/e5d/0e0/539e5d0e06e1fef08b1a4a1a6cb49cb7.png)
Csswinner.com
![image](https://habrastorage.org/getpro/habr/post_images/f0c/316/d1e/f0c316d1ec3d57384d2bc436db438e83.png)
Coolhunting.com
![image](https://habrastorage.org/getpro/habr/post_images/6ad/f5b/ae3/6adf5bae31b97773b9380e9a2253d6f2.png)
Codyhouse.co
![image](https://habrastorage.org/getpro/habr/post_images/362/9d1/247/3629d12476e9b27a2d5b5bbf66c5b6dd.png)
Mailchimp.com
![image](https://habrastorage.org/getpro/habr/post_images/1df/6fe/70e/1df6fe70e33ecb8b7f332f59082404f0.png)
Slack.com
![image](https://habrastorage.org/getpro/habr/post_images/0c4/1a4/eb9/0c41a4eb9db48590fa8fb7cf30391fee.png)
Mashable.com
![image](https://habrastorage.org/getpro/habr/post_images/8e1/19d/d71/8e119dd71a09018afcabcb20d9d9830e.png)
Bloomberg.com
![image](https://habrastorage.org/getpro/habr/post_images/88d/3ad/92d/88d3ad92d49c9990e2f666f6b2008a08.png)
Airbnb.com
![image](https://habrastorage.org/getpro/habr/post_images/020/99a/967/02099a967940a6d29bd2de4d1edb2923.png)
Bitly.com
![image](https://habrastorage.org/getpro/habr/post_images/46c/46f/ace/46c46facea97a0450ddc0da59ffbb7c5.png)
МГУ, психфак
![image](https://habrastorage.org/webt/59/ce/33/59ce338888a8f024124890.jpeg)
Разговаривающая страница 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
![image](https://habrastorage.org/getpro/habr/post_images/dfc/894/987/dfc894987c62610750c69c6300d32bcc.jpg)
![image](https://habrastorage.org/getpro/habr/post_images/eca/d0e/d38/ecad0ed386bae322cc4e31b77a6945aa.jpg)
![image](https://habrastorage.org/getpro/habr/post_images/968/985/c02/968985c02bec66b6314285db72c5bf49.jpg)
![image](https://habrastorage.org/getpro/habr/post_images/406/78a/a94/40678aa94cb23ac7ff2faad32839b5a1.jpg)
![image](https://habrastorage.org/getpro/habr/post_images/8b3/b80/eab/8b3b80eabbee437855bb304349ecffff.jpg)
Интерактивные
Играем в Pacman
![image](https://habrastorage.org/webt/59/ce/41/59ce4193a3bf6053085586.jpeg)
Рушим сайт
Суслик
Спасаем леммингов
Поймай кота
P.S.
Ну и напоследок
![image](https://habrastorage.org/getpro/habr/post_images/049/a37/967/049a37967cc290bd92f34b06c3c53178.jpg)
А какая ваша любимая 404 страница?
Какая 404 страница на вашем сайте?
Комментарии (33)
asmix
29.09.2017 18:56+6А про зажигательных гастарбайтеров забыли :)
kalmarius
29.09.2017 19:45+1Халтура(
decomeron
29.09.2017 19:12Жаль, я, почему то, никогда не попадаю на такие страницы, интересно, хорошо это или плохо?
Эти-зачет!!! Смотрю 20 секунд, странно, почему то еще тут ;-)
Alex_1985
29.09.2017 19:16Интересно… интересно то, что действительно страницу, вроде как и ненужную, то есть я имел ввиду — не информативную, например для интернет магазина, можно превратить в карточку (или рекламу) любого другого товара, который есть на сайте… так можно и выиграть даже…
Adel-S
29.09.2017 21:23-2В компании EDISON Software действительно считают смешение английского и транслита нормальным? Я такого вырвиглаза не видел уже лет… много.
www.edsd.ru/ru/princypy/investiruem-v-produkty
www.edsd.ru/ru/proekty/avtomatizaciya_izmereniy
www.edsd.ru/ru/o_kompanii/novosti/kak-my-opredelyaem-uroven-professionalizma-razrabotchika
и тут же
www.edsd.ru/ru/portfolio/technology/gis
www.edsd.ru/ru/portfolio/technology/interfaceatomlib
30.09.2017 13:36Предположу, что первые три ссылки — это какой-то движок блога уровня «Уордпресса», который сам генерирует ЧПУ, вторвые две — это уже система управления контентом. Вероятно, и контент создавали разные люди.
acerrusm
30.09.2017 11:25+2Есть еще страничка 404 с потерянными детьми, опубликованными в child focus: http://notfound.org/index.php?locale=en_US
Дизайн конечно так себе, но задумка стоит большего.
netch80
30.09.2017 18:26У Slack тоже интерактивная страница — по ней можно двигаться и тормошить животных.
mafia8
01.10.2017 15:14Страницу 404 делают дизайнеры, а программистов почему-то не пускают на это дело. Например, обработать адрес страницы, найти похожие адреса (site.ru/pst/234/ — site.ru/post/234/), дать возможность пользователю отредактировать адрес страницы в текстовом поле и попробовать ещё раз.
Serge78rus
02.10.2017 09:03А часто ли попадают на 404 по ошибке ввода пользователя, и часто ли пользователь вообще руками вводит адрес, отличный от корня сайта? Обычно все же туда попадают кликом по ошибочной или устаревшей ссылке, и, если это внутренняя ссылка, то надо проверять сайт, а не находить похожие адреса или озадачивать пользователя.
ozonar
02.10.2017 10:43Можно ловить ошибки типа https://somesite.com/sompage/somerequestперейдинаэтотсайт, и выводить сообщение об удаленном контенте, в том месте, где он был удалён. И самое сложное — обеспечить редирект при смене движка сайта/структуры
Захват таких ситуаций решит 90% случаев, когда нужно вывести страницу 404.
ozonar
02.10.2017 11:11Обычно на страничках 404 правят дизайнеры, пытаясь сделать максимально креативно, категорически забывая о цели страницы — проинформировать, что произошла ошибка.
Порой приходится достаточно большое количество времени выискивать на новой с точки зрения дизайна странице информацию, почему таки дизайн поменялся, как вот здесь, например:
Огромный носок с жёлтым ногтем, и маленький текст, который не особо приближает меня к решению проблемы.
Особенно же отвратительно, когда этот текст скрывается за стандартным оформлением страницы, которая грузится секунд 10, и после 20 секунд поиска, почему нет нужной мне информации я понимаю, что это 404
InstaHeat
Так почему же нет страницы хаба?
MagisterLudi Автор
теперь есть
InstaHeat
Спасибо. Теперь мир кажется более полным
illo
Текущая 404 хабра иначе выглядит)