Создание сайта/блога на WordPress — что может быть проще!
Сделай адаптивную страницу 404 ошибки за 10 минут!
Рубрика: Все для вебмастера

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

32 комментария   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Савельев Владимир Александрович
С уважением, Владимир Савельев

Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее
Продвижение в социальных сетях - сервис SocLike.ru
Прочтите еще:
Обсуждение статьи: 32 комментария


  1. Денис Мехедов 2015-06-28 в 14:11 

    Получилось весьма неплохо, но только вот проматывать страницу немного вниз, чтобы увидеть ссылку на главную страницу блога, это лишние действия для пользователя, с учётом того, что на других ресурсах ссылка на главную находиться сразу на первом экране браузера. :mrgreen:

    Ответить
    • Владимир Савельев 2015-06-28 в 14:22 

      А у вас какое разрешение? Странно у меня все умещается…. Может планшет?

      Ответить
      • Саня Сабегатулин 2015-06-30 в 03:15 

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

      • Екатерина 2015-06-30 в 20:55 

        Мне тоже очень понравилось. И у меня все отлично поместилось.

      • Игорь 2015-07-01 в 20:23 

        Ну не знаю и на компе и на ноутбуке и на нетбуке,все отлично выглядит и все везде умещается.

      • Владимир Савельев 2015-07-02 в 00:04 

        Ребят просто у Дениса маленькое разрешение, по этому не влазит… нужно учесть и этот факт! Чуток переделаю будет еще круче! :x

      • Игорь 2015-07-31 в 23:05 

        Понятно,Тогда нужно блог адаптировать

      • Саня Сабегатулин 2015-07-31 в 23:10 

        А, у каждого свой агрегат, поэтому не поняли сразу.

      • Саня Сабегатулин 2015-07-31 в 23:13 

        Владимир все неисправности быстро устраняет. Респект ему.

      • Виталий Охрименко 2015-09-13 в 11:38 

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

  2. Денис Мехедов 2015-06-28 в 15:36 

    Нет, у меня ноутбук 1366×768…
    Если бы я не был более продвинутым пользователям интернета, то подумал бы, что это главная страница блога, так как не сразу видно надписи 404 error :razz:

    Ответить
    • Владимир Савельев 2015-06-28 в 18:24 

      Нда Дениска ты прав :razz: Значит нужно доработать! Спасибо за подсказку )))

      Ответить
    • Владимир Савельев 2015-07-02 в 21:14 

      Денис переделал! И сделал маленькую хитрость :razz: Теперь должно корректно отображаться и на 1366 на 768 :oops:

      Как думаешь так лучше чем было :?:

      Ответить
  3. Николай 2015-07-01 в 19:36 

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

    Ответить
    • Владимир Савельев 2015-07-02 в 00:06 

      Привет Николай! Полностью с тобой согласен :roll:

      Ответить
      • Саня Сабегатулин 2015-07-31 в 13:41 

        Да да, а если еще и флэш игра на странице 404 расположена интересная, то и ПФ можно увеличить :lol:

      • Игорь 2015-07-31 в 23:04 

        Точно,зашел ошибка и игрушка интересная.Сел и заигрался.

      • Саня Сабегатулин 2015-07-31 в 23:13 

        Сегодня нельзя заигрываться. День напряжный.

  4. Людмила Лао 2015-07-08 в 13:13 

    Прикольная картинка получилась. я до своего 404 еще пока не добралась, так что статья полезная.

    Ответить
  5. Emailov 2015-07-31 в 08:29 

    Прикольно,себе тоже закажу в этом магазине)

    Ответить
  6. Виталий Охрименко 2015-09-13 в 11:32 

    Я когда шаблон покупал новый, он на Envato Market стоит на 8 долларов дешевле, чем у разработчика. Я долго колебался, но все-таки решил купить у разработчика. Сейчас понимаю что это были выброшенные на ветер деньги. Адекватной поддержки от этих буржуев не добьешься, а 8 долларов лучше бы я на что-то другое потратил

    Ответить
    • Игорь 2015-09-13 в 17:11 

      Да Виталь,каждый на чем то пролетал.
      Я вот тоже правда не шаблон покупал,а пару курсов бесполезных.
      Я о них другого мнения был,а там пустышка и возврата денег не было.
      Хотя пишут с гарантией возврата,а тут даже не ответили.
      Игнор включили.

      Ответить
      • Виталий Охрименко 2015-09-30 в 22:18 

        Это сейчас речь о Envato Market, или в других местах покупал?

      • Владимир Савельев 2015-10-01 в 20:36 

        Именно о нем Виталий =)

  7. Виталий Охрименко 2015-09-13 в 11:36 

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

    Ответить
    • Игорь 2015-09-13 в 17:13 

      Самое главное,что бы посетитель не сбежал,а вернулся обратно на блог.
      И не единожды.

      Ответить
    • Дмитрий 2015-09-16 в 23:43 

      согласен полностью. Зачем замарачиваться так сильно!!!!

      Ответить
  8. Дмитрий 2015-09-16 в 23:40 

    Ребята. Я тут почитал статьи на эту тему — тему страницы ошибки 404. Что это такое — это когда пользователь набирает адрес страницы, которой нет на блоге.
    Что мы имеем. Чисто логически рассуждаю (об этом кстати тоже многие говорят)
    Вот подумайте, Вы набираете как правило в поисковике что? Правильно — главную страницу какого-либо сайта. А теперь ответьте вопрос — как часто Вы промахивались? Ошибались?
    А теперь ответьте на вопрос, если Вы вдруг ошиблись — Вы перестанете искать этот сайт? Практика доказывает, что если ошибся — то пытаюсь исправить и начинаю заново, проверяя буквы домена печатать еще раз.
    А страница 404 — что адаптированная, что нет — переход на нее — это по сути (для Яндекса) переход на сам сайт. Пусть не качественный, пусть мало времени пробыл и так далее — но это переход!
    Теперь возьмем поиск.
    Допустим я набираю как создать блог. Мне выдает в ТОП много-много полезных сайтов. Там уже проставлены ссылки. Нажимаю и попадаю на сайт на нужную уже страницу.
    Теперь вопрос к Вам — а как часто Вы попадали из такого поиска на страницу 404 и с чем это было связано?
    Правильно — редко и в основном причина — это неправильно написанная ссылка, либо страница исчезла с блога или сайта.
    Тут уже виноват автор — лучше пишите и следите за ссылками.
    Но тем ни менее — переход будет оформлен.
    Все вышесказанное я увидел из анализа счетчика лайфинтернета.
    А если делать верстку этой страницы — это получится лишняя нагрузка на сервер, в результате сайт будет грузиться дольше.
    На такую страницу попадает 1 из 1000. Ну и смысл какой нагружать сайт?
    Кто как думает? По живее, присоединяемся к дискуссиям.

    Ответить
    • Игорь 2015-09-22 в 21:17 

      Дмитрий,все это понимают,что страница 404 появляется ,в основном по вине автора.
      Но все же,пусть лучше она будет оформлена. ;-)

      Ответить
      • Дмитрий 2015-09-30 в 19:02 

        Зачем? Какой смысл перегружать блог? Ну, даже если такое произойдет, то на 1000 человек это произойдет один раз. Т.е. из 1000 клиентов — Вы потеряете всего 1 человека.
        Ну и зачем Вам такой «тупой» нужен среди клиентов? Это первое.
        Чуть позже Владимир писал пост про генератор создания страниц. Мне кажется через тот генератор все таки проще будет сделать…
        Но, все же — нафиг это удовольствие не нужно…

      • Виталий Охрименко 2015-09-30 в 22:20 

        Я полностью согласен. Оформить то страничку нужно как-нибудь, но сильно заморачиваться над ней…нет уж, увольте

      • Игорь 2015-10-24 в 15:20 

        Я же не говорил что сней нужно сильно замарачиваться.
        Дмитрий я не пойму, а чем вы будете перегружать блог?

Добавить комментарий

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Рекомендую покупать шаблоны тут
русские шаблоны для wordpress