Главная » Шаблоны сайтов » Адаптивный шаблон страницы ошибки 404

Адаптивный шаблон страницы ошибки 404

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

Страница ошибки 404

 

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

Основной фон страницы, так как в свое время делал ее для своего блога, чтобы хоть как-то разогнать тоску навевающую на пользователя сообщением об ошибке, «разбодяжил» мягкими облаками, все необходимые изображения, аккуратно уложенные в отдельную папку с бесхитростным названием img, найдете в архиве.
В самый центр страницы поместил недвусмысленный, четко выделенный с помощью магии css3, текст самой ошибки, а чуть ниже, прописал пояснение для пользователя, о том что ему делать дальше и как жить))).
Кто-то включает в страницу ошибки поисковую форму, кто-то нет, я не стал пренебрегать возможностью помочь пользователю ещё лучше сориентироваться и разместил после основного сообщения об ошибке, прекрасно выполненную в CSS3, поисковую форму, которую подсмотрел у Dimoxa.

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

Вот вроде бы и все, что касается структуры страницы ошибки 404. Файл стилей прилагается, так что смело экспериментируйте с формированием внешнего вида и с другими элементами. Шрифт Changa One и Open Sans использовал из библиотеки шрифтов Google, если вдруг не понравятся, без особых раздумий и угрызений совести, выберите другой, всё в ваших руках, было бы желание.

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

driver

Отдельное спасибо Dimox (dimox.name) и команде FWPolice (fwpolice.com).

Если эта статья показалась Вам интересной, поделитесь ссылкой на нее со своими коллегами и друзьями, нажав на одну из кнопок ниже.
Наверняка кто-то из них будет Вам благодарен, да и мне в радость)))).

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

11 комментариев
  1. Nata says:

    Доброго времени суток! Спасибо большое за статью!! Все понятно и красиво 🙂 вот только не видит моя страница ошибки файл style.css... т.е. html работает, но не оформляется стилем совсем 🙁 файл лежит в папке css шаблона. Что я делаю не так? Помогите плиз, если не трудно...

    Ответить
    • Nata says:

      вопрос снимается, разобралась 🙂

      Ответить
      • kristofkadavr says:

        а я вот не разобрался, почему css стили к странице не привязываются... поможешь?

        Ответить
  2. Ольга says:

    Спасибо за статью . Познавательно ! А вот здесь можно посмотреть интересное решение для 404 страницы kvinta-a.ru/stranitsa-404/

    Ответить
  3. Тима says:

    Как добавить ссылки в поиск?

    Ответить
    • driver says:

      Если пользуете поиск на действующем сайте, то и атрибуты формы по стандарту. Например, для wp это method="get", в action="" вписываете url сайта по которому и будет выполнятся поиск, далее name="s" и id="s"

      Можете воспользоваться поиском от Google или Яндекс, как настроить, документации полно, а в статье расписан и показан макет страницы с элементом поисковой формы, с помощью классов css которой, вы сможете оформить любую форму.

      Ответить
  4. Allpa says:

    Огромное спасибо за такую элегантную, красивую форму.

    Поскольку я немного дуб в html, wodpress и css, то довольно долго провозилась с установкой её к себе. Но мне удалось!

    Единственное, что я не до конца одолела, так это прикручивание гуглопоиска вместо стандартного. То есть я его прикрутила, но полностью сохранить ваш css так и не удалось — надпись «Google пользовательский поиск» не далась мне, так и висит) И отодвинуть её немного вправо я тоже не смогла.

    Но, в общем и целом, получилось хорошо, я считаю.

    Ещё раз огромное вам спасибо, дорогой вы наш dbmast!

    Ответить
  5. Allpa says:

    А, ещё забыла отметить: на мобильных девайсах страница смотрится просто изумительно.

    Респект вам и уважуха)

    Ответить
  6. Спасибо, очень круто. Поставил у себя.

    Ответить
  7. Игорь says:

    Ребят, подскажите как заставить работать строку поиска на joomla, что нужно доделать?

    Ответить
  8. S.K says:

    а есть еще варианты страниц 404????

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru