Сделай адаптивную страницу 404 ошибки за 5 минут!

Здравствуйте друзья! Рад снова видеть Вас на страницах моего скромного блога. Сегодня, я наконец то довел до ума страницу 404 ошибки и сверстал адаптивной версткой! В этой статье я расскажу Вам, как сделать такую страницу за 5 минут — самостоятельно!

Рекомендую так же прочитать:

• Лучшее адаптивное меню для сайта
• Как создать адаптивный сайт (мобильная версия)
• Почему не стоит использовать бесплатные шаблоны?

У меня сегодня просто отличное настроение улыбаюсь весь день как дурачок — Просто так! Без повода! А причину не знаю А у Вас бывало такое?!

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

Желаю и Вам дорогой читатель счастья в личной жизни! Побольше любви, здоровья, позитива и удачи! А остальное все будет. Спасибо за то, что читаете меня!

Кстати, если у Вас еще нет сайта и делать его самостоятельно нет никакого желания, закажите сайт у веб-студии, например lancio-studio.ru!

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

Что означает ошибка 404 — страница не найдена?

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

На самом деле все очень просто друзья! Дело в том, что эта ошибка возникает в случае изменения или удаления ссылок на Вашем сайте (блоге), либо была допущена ошибка при вводе адреса (ссылки).
Допустим была у Вас какая то страница на сайте, а Вы взяли и удалили ее или изменили адрес ссылки... Посетитель, в интернете где-то нашел эту ссылку, перешел и... опа! А странички то нет )))

Ваша задача, удержать посетителя, который попал на страницу 404 ошибки!

Что делает посетитель, когда видит перед собой подобные страницы?
Правильно, как бы не печально это было для админа, но он закроет ее тут же! В интернете информации хоть отбавляй — найдет на других сайтах, более продуманных!

Вы ведь не хотите, чтобы и с Вашего сайта уходили посетители?! Нет? И правильно, зачем их отпускать — нам нужно увеличивать аудиторию, а не уменьшать ее!

Давайте этим сейчас и займемся, согласны?! Эх, посетитель, так просто ты от нас не уйдешь =)

Чтобы удержать человека на Вашем ресурсе, нужно ответить на вопрос — что может привлечь внимание посетителя? Я считаю, что оригинально оформленная 404 страница, с интересной картинкой, подойдет как нельзя лучше!

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

Значит нам нужно красиво и уникально оформить эту страницу! Вот оно решение! Но, возникает другой вопрос — как это сделать?

Как сделать страницу 404 ошибки?

Чтобы реализовать нашу задумку, существует четыре пути решения:

1. Делаете все сами, самостоятельно — этот путь подойдет для тех, у кого есть талант дизайнера и знания верстки (html и css);
2. Заказываете у спецов — нанимаете двух работников — дизайнера и верстальщика! Естественно, им нужно будет заплатить за работу! Разместить заявку можно на этих биржах — freelance.ru или www.fl.ru;
3. Халява, найти шаблон бесплатно — я всегда относился к халяве, крайне негативно! И Вам не советую! Потратите уйму времени на поиск и скачаете шаблон, уникальность которого близка к нулю!
4. Купить готовый дизайн страницы — на мой взгляд, это лучшее решение! Покупаете готовый, профессиональный дизайн, стоимостью 3 доллара! И Вам останется, лишь сверстать его. Потребность в дизайнере исчезает =)

Лично для себя, я выбрал четвертый вариант, так как это быстро и дёшево! Мог бы и сам конечно что-нибудь придумать, но не хочу))) Мне так проще... В итоге, если не считать затраченное время на покупку шаблона, я сделал страницу 404 ошибки за 10 минут!

А помог мне в этом, популярный интернет-магазин Envato Market!

Ребята, это просто рай для веб-мастеров! Там есть абсолютно все! И цены вполне адекватные! Я даже и не знал, что там и шаблоны 404 страничек продаются =) Случайно обнаружил...
Купил шаблон за 3 доллара!!! И сверстал адаптивной версткой! Вот посмотрите что получилось: Малость подкорректировал дизайн, добавил кое-какие свои элементы и логотип — готово!

Делаем адаптивную верстку страницы!

В HEAD пишем следующие коды (цвета и шрифты измените на свой вкус):
[sociallocker]

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html {background:#bad768;}
a{outline:none;color:#6699cc;text-decoration:none;}
a:hover{color:#669966;text-decoration:underline;}
body {font-family:Arial;font-size:18px;color:#444;margin:0 auto;line-height:130%;}
</style>

В BODY я сделал так:

<body><a style="width:100%;max-width:1000px;display:block;margin:0 auto;" href="https://savme.ru"><img style="width:100%;max-width:1000px;display:block;margin:0 auto;" src="https://savme.ru/wp-content/themes/city_portal/images/fon-bg-404.jpg" alt="Страница не найдена 404"></a>
<div style="background:#eee;border-radius:10px;display:block;margin:10px auto;max-width:720px;padding:10px 0;text-align:center;width: 90%;">Привет, Друг! Я очень рад, что тебя заинтересовал мой ресурс - savme.ru!<br><b>К сожалению, ссылка по которой ты перешел - не найдена!</b><br>Заходи на <a href="https://savme.ru">главную страницу</a> и воспользуйся поиском!
</div>
</body>

[/sociallocker]

Не забудьте поменять ссылки на свои и путь к своей картинке! Картинка должна иметь ширину (width) — 1000px!

Если уж совсем не получается, то обращайтесь — помогу сверстать за символическую сумму! Но надеюсь, что все у Вас получится!