Сделай адаптивную страницу 404 ошибки за 5 минут!
Здравствуйте друзья! Рад снова видеть Вас на страницах моего скромного блога. Сегодня, я наконец то довел до ума страницу 404 ошибки и сверстал адаптивной версткой! В этой статье я расскажу Вам, как сделать такую страницу за 5 минут - самостоятельно!
Рекомендую так же прочитать:
- Лучшее адаптивное меню для сайта
- Как создать адаптивный сайт (мобильная версия)
- Почему не стоит использовать бесплатные шаблоны?
У меня сегодня просто отличное настроение улыбаюсь весь день как дурачок - Просто так! Без повода! А причину не знаю :razz: А у Вас бывало такое?!
Как же описать свое состояние?! Это такое чувство спокойствия, гармонии, беззаботности... Может быть я просто доволен своей жизнью?! Да скорее всего именно так - я счастлив и меня все устраивает, по этому и настроение замечательное :x
Желаю и Вам дорогой читатель счастья в личной жизни! Побольше любви, здоровья, позитива и удачи! А остальное все будет. Спасибо за то, что читаете меня!
Кстати, если у Вас еще нет сайта и делать его самостоятельно нет никакого желания, закажите сайт у веб-студии, например lancio-studio.ru!
Ну хорошо, о приятном поговорили, теперь поговорим о важном, то есть о создании и оформлении не найденной страницы - ошибка 404.
Что означает ошибка 404 - страница не найдена?
А что собственно это за страница такая и какую функцию она выполняет? Ведь ошибок существует масса, а все говорят именно о 404 ошибке! О том, как она важна и что нужно уделить ей должное внимание!
На самом деле все очень просто друзья! Дело в том, что эта ошибка возникает в случае изменения или удаления ссылок на Вашем сайте (блоге), либо была допущена ошибка при вводе адреса (ссылки).
Допустим была у Вас какая то страница на сайте, а Вы взяли и удалили ее или изменили адрес ссылки... Посетитель, в интернете где-то нашел эту ссылку, перешел и... опа! А странички то нет )))
Ваша задача, удержать посетителя, который попал на страницу 404 ошибки!
Что делает посетитель, когда видит перед собой подобные страницы?
Вы ведь не хотите, чтобы и с Вашего сайта уходили посетители?! Нет? И правильно, зачем их отпускать - нам нужно увеличивать аудиторию, а не уменьшать ее!
Давайте этим сейчас и займемся, согласны?! Эх, посетитель, так просто ты от нас не уйдешь =)
Чтобы удержать человека на Вашем ресурсе, нужно ответить на вопрос - что может привлечь внимание посетителя? Я считаю, что оригинально оформленная 404 страница, с интересной картинкой, подойдет как нельзя лучше!
Эффектное изображение удержат взгляд человека и в большей доле вероятности, он останется на вашем ресурсе (перейдет на главную, воспользуется поиском или еще что-нибудь поделает).
Значит нам нужно красиво и уникально оформить эту страницу! Вот оно решение! Но, возникает другой вопрос - как это сделать?
Как сделать страницу 404 ошибки?
Чтобы реализовать нашу задумку, существует четыре пути решения:
- Делаете все сами, самостоятельно - этот путь подойдет для тех, у кого есть талант дизайнера и знания верстки (html и css);
- Заказываете у спецов - нанимаете двух работников - дизайнера и верстальщика! Естественно, им нужно будет заплатить за работу! Разместить заявку можно на этих биржах - freelance.ru или www.fl.ru;
- Халява, найти шаблон бесплатно - я всегда относился к халяве, крайне негативно! И Вам не советую! Потратите уйму времени на поиск и скачаете шаблон, уникальность которого близка к нулю!
- Купить готовый дизайн страницы - на мой взгляд, это лучшее решение! Покупаете готовый, профессиональный дизайн, стоимостью 3 доллара! И Вам останется, лишь сверстать его. Потребность в дизайнере исчезает =)
Лично для себя, я выбрал четвертый вариант, так как это быстро и дёшево! Мог бы и сам конечно что-нибудь придумать, но не хочу))) Мне так проще... В итоге, если не считать затраченное время на покупку шаблона, я сделал страницу 404 ошибки за 10 минут!
А помог мне в этом, популярный интернет-магазин Envato Market!
Купил шаблон за 3 доллара!!! И сверстал адаптивной версткой! Вот посмотрите что получилось:
Делаем адаптивную верстку страницы!
В HEAD пишем следующие коды (цвета и шрифты измените на свой вкус):
[sociallocker]
В BODY я сделал так:
К сожалению, ссылка по которой ты перешел - не найдена!
Заходи на главную страницу и воспользуйся поиском!
[/sociallocker]
Не забудьте поменять ссылки на свои и путь к своей картинке! Картинка должна иметь ширину (width) - 1000px!
Если уж совсем не получается, то обращайтесь - помогу сверстать за символическую сумму! Но надеюсь, что все у Вас получится!