Адаптивная страница html 404

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

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

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

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

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

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

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

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

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

Всего комментариев: 13

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

kristofkadavr : 29 мая, 2016 в 16:23 а я вот не разобрался, почему css стили к странице не привязываются… поможешь? Ответить

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

IgorA100 : 16 июня, 2018 в 22:22 Тупая реклама сайта непонятно с какой репутацией. И что такие могут сделать, если у самих неинтересная 404 страница…
Спам, однозначно… Ответить

driver : 16 июня, 2018 в 23:21 Спасибо, IgorA100
Как-то я проглядел этот «шедевр»)) сейчас зачистим. Ответить

driver : 8 марта, 2015 в 01:30 Если пользуете поиск на действующем сайте, то и атрибуты формы по стандарту. Например, для wp это method=»get» , в action=»» вписываете url сайта по которому и будет выполнятся поиск, далее name=»s» и id=»s»
Можете воспользоваться поиском от Google или Яндекс, как настроить, документации полно, а в статье расписан и показан макет страницы с элементом поисковой формы, с помощью классов css которой, вы сможете оформить любую форму. Ответить

Allpa : 26 июня, 2015 в 22:39 Огромное спасибо за такую элегантную, красивую форму.
Поскольку я немного дуб в html, wodpress и css, то довольно долго провозилась с установкой её к себе. Но мне удалось!
Единственное, что я не до конца одолела, так это прикручивание гуглопоиска вместо стандартного. То есть я его прикрутила, но полностью сохранить ваш css так и не удалось — надпись «Google пользовательский поиск» не далась мне, так и висит) И отодвинуть её немного вправо я тоже не смогла.
Но, в общем и целом, получилось хорошо, я считаю.
Ещё раз огромное вам спасибо, дорогой вы наш dbmast! Ответить

Allpa : 26 июня, 2015 в 22:42 А, ещё забыла отметить: на мобильных девайсах страница смотрится просто изумительно.
Респект вам и уважуха) Ответить

Игорь : 17 февраля, 2016 в 23:32 Ребят, подскажите как заставить работать строку поиска на joomla, что нужно доделать? Ответить

Источник

Зачем нужна страница 404? Ошибка 404 возникает, когда пользователь переходит по ссылке, которая по различным причинам отсутсвует, а поисковики продолжают ее индексировать. Чтобы пользователь оставался на сайте даже попадая нанесуществующий контент, необходима красивая страница 404. Скачать отличные HTML шаблоны страниц 404 бесплатно.

Страница 404 ошибки в космическом стиле

Отличная и анимированная страница 404 ошибки в космическом стиле, которая корректно отображается на всех разрешениях экрана. Дизайн страницы может быть любой, .

Адаптивная страница 404 в ярком оформлении

Адаптивная страница 404 ошибки, это один из самых важных элемент дизайна, который отвечает за важный функционал на сайте. Вашему вниманию по стилистике .

Адаптивная страница 404 Not Found для сайта

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

Анимационный стиль 404 страницы для сайта

Эта оригинальная с анимацией страница 404 для сайтов служат для того, чтобы изначально предупредить гостей портала о том, что она была удалена. Где .

Оригинальная страница с ошибкой 404 для сайта

Если нужна оригинальная страница с ошибкой 404 для сайта, эта страница может подойти на темные сайты, где тематика кино онлайн или игровая тема. Такая страница .

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

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

Креативная страница ошибки 404 для сайта

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

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

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

Анимированная адаптивная страница Error 404 Not Found

Эта красиво оформленная анимированная адаптивная страница ошибки Error 404 Not Found для сайта. Сам стиль страницы 404 выполнен в темном оттенке, так как .

Адаптивная страница 404 с модным дизайном

Адаптивная страница 404 с модным дизайном, которая изначально строилась под тематику мода и все, что с ней связано. Как можно заметить, что на этой странице .

Источник